Assembler 绘制多边形

Creator 3.x
#1

各位大佬，想请教一个关于Assembler绘制多边形的问题。我写入5个顶点数据，但是只能绘制一个四边形。代码在下面，请不吝赐教，非常感谢！

继承sprite，修改this._assembler指向自定义的Assembler，

import { Sprite, Vec2, _decorator } from "cc";
import { CustomSpriteAssembler } from "./CustomSpriteAssembler";
const { ccclass, property } = _decorator

@ccclass("CustomSprite")
class CustomSprite extends Sprite {
    protected _flushAssembler() {
        const assembler = CustomSpriteAssembler;

        if (this._assembler !== assembler) {
            this._assembler = assembler;
        }

        if (!this._renderData) {
            if (this._assembler && this._assembler.createData) {
                this._renderData = this._assembler.createData(this);
                this._renderData!.material = this.material;
            }
        }
    }

    update() {
        let point = [new Vec2(100, 0), new Vec2(200, 0), new Vec2(100, 100), new Vec2(0, 100), new Vec2(0, 0)];
        this._assembler && this._assembler.update(this, point);
    }
}

export { CustomSprite };

改写Assembler，结构是参考了motion-streak-2d-assembler.ts的写法。如下，

import { Color, IAssembler, Vec2 } from "cc";
import { CustomSprite } from "./CustomSprite";

export const CustomSpriteAssembler: IAssembler = {
    createData(sprite: CustomSprite) {
        const renderData = sprite.requestRenderData();
        return renderData;
    },

    update(comp: CustomSprite, points: Vec2[]) {
        const renderData = comp.renderData;
        renderData.dataLength = points.length;
        const data = comp.renderData.data;

        let vertexCount = 0;
        for (let i = 0; i < points.length; i++) {
            data[vertexCount].x = points[i].x;
            data[vertexCount].y = points[i].y;
            data[vertexCount].u = (i === 4 || i === 3) ? 0 : (i === 0 || i === 2) ? 0.5 : 1;
            data[vertexCount].v = (i === 2 || i == 3) ? 0 : 1;
            data[vertexCount].color.r = comp.color.r;
            data[vertexCount].color.g = comp.color.g;
            data[vertexCount].color.b = comp.color.b;
            data[vertexCount].color.a = comp.color.a;
            vertexCount++;
        }

        renderData.vertexCount = vertexCount;
        renderData.indicesCount = (vertexCount - 2) * 3;
    },
    updateRenderData() {

    },

    fillBuffers(comp: CustomSprite, renderer: any) {
        if (comp === null) {
            return;
        }

        const renderData = comp.renderData;
        const dataList = renderData.data;
        const vertexCount = renderData.vertexCount;
        const indicesCount = renderData.indicesCount;

        let buffer = renderer.acquireBufferBatch()!;
        let vertexOffset = buffer.byteOffset >> 2;
        let indicesOffset = buffer.indicesOffset;
        let vertexId = buffer.vertexOffset;
        const bufferUnchanged = buffer.request();
        if (!bufferUnchanged) {
            buffer = renderer.currBufferBatch!;
            vertexOffset = 0;
            indicesOffset = 0;
            vertexId = 0;
        }


        const vBuf = buffer.vData!;
        const iBuf = buffer.iData!;
        for (let i = 0; i < vertexCount; i++) {
            const vert = dataList[i];
            vBuf[vertexOffset++] = vert.x;
            vBuf[vertexOffset++] = vert.y;
            vBuf[vertexOffset++] = vert.z;
            vBuf[vertexOffset++] = vert.u;
            vBuf[vertexOffset++] = vert.v;
            Color.toArray(vBuf, vert.color, vertexOffset);
            vertexOffset += 4;
        }

        //这里只有三个三角形，为了简单就直接写了
        let start = vertexId;
        iBuf[indicesOffset++] = start;
        iBuf[indicesOffset++] = start + 3;
        iBuf[indicesOffset++] = start + 2;

        iBuf[indicesOffset++] = start;
        iBuf[indicesOffset++] = start + 2;
        iBuf[indicesOffset++] = start + 1;

        iBuf[indicesOffset++] = start;
        iBuf[indicesOffset++] = start + 4;
        iBuf[indicesOffset++] = start + 3;
    },
};
#3

顶一下，求助，求助

#4

这里能调试一下吗。矩形应该是四个顶点，然后六个索引。你可以在坐标系上看下你的顶点位置，以及 EBO。

这是一个例子：
float vertices[] = {
0.5f, 0.5f, 0.0f, // 右上角
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, -0.5f, 0.0f, // 左下角
-0.5f, 0.5f, 0.0f // 左上角
};

unsigned int indices[] = { // 注意索引从0开始!
0, 1, 3, // 第一个三角形
1, 2, 3 // 第二个三角形
};

#5

非常感谢回复，我想绘制的是一个五边形，四边形是正常的

#6

你把你的五边形五个顶点拆开成三角形，刚刚没表达清楚，然后设置好，VBO， EBO，就可以了。不出意外。

#7

我是这样设置的，您可以看下我哪里错了嘛。下面是截图，谢谢。
这个是我想绘制的图形
g

这个是ibuf的截图

ibuf
ibuf342×584 19 KB

这个是vbuf的截图

vbuf
vbuf656×1778 110 KB

#8

0 1 2 0 2 3 0 3 4

#9

感谢回复，已经找到问题了，不是这个顺序的问题

#10

感谢@ lamyoung大佬，确实是因为漏了数量

#11

为啥是顺时针？ 顺时针不是变成背面了么，，，

#12

感谢回复，我当时想画一个纯白的五边形，顺序好像不影响

#13

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。