Question

嗨，我最近一直在学习webgl，并试图用它做一些游戏。

到目前为止，我所做的事情并没有多大意义，但它包含了游戏逻辑。

基本上，我想移动一个正方形，并在一定数量的步骤内移动正方形会导致将当前位置绘制为一个新正方形，因此前一个正方形会变大或变长。而当我们到达某个点时，移动的正方形将擦除最后一个正方形，并且与前一个正方形分离。

这里是演示：https://codepen.io/zhenghaohe/pen/xMVeWq

首先，我在缓冲区上分配足够的空间。

gl.bufferData(gl.ARRAY_BUFFER, 200*4*8, gl.STATIC_DRAW);

图像我有20x10的正方形网格，大小为400像素x 200像素，最多可以包含200个正方形，对于每个正方形，我使用4个顶点（三角形条纹）进行绘制，每个顶点为8字节（2个浮点数），< / p>

然后移动前导正方形的中心，并使用bufferSubDate将新顶点发送到缓冲区

function setNewBuffer(dir) {
        const newCenter = getNewCenter(dir,previousCenter);
        const newVertices = getNewVertices(newCenter);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        if(index === BREAK_POINT) {
            index--;
        }
        gl.bufferSubData(gl.ARRAY_BUFFER, 32*index, new Float32Array(newVertices));
        index++;
        previousCenter = newCenter;
    }

现在的问题是，到达断点后，只有当我的正方形水平移动时，它才能正确分离并自行移动，但是当我垂直移动它时，它将突然以某种方式与先前的正方形连接。我不明白为什么。

有人可以帮我解决这个问题吗？如果您对代码有任何建议，请随时告诉我。

谢谢

Answer 1

您使用四点值用TRIANGLE_STRIP绘制矩形。 TRIANGLE_STRIP将使用每三个点的值来制作一个triganle： [ABCD]，webgl将绘制三角形：ABC和BCD。

在您的代码中：

initialVertices = [
    0, 0,
    0, 20,
    20, 0,
    20, 20,
];

当我输入RIGHT时，它将创建一个这样的新顶点（例如，加上10px）：

[
    10, 0,
    10, 20,
    30, 0,
    30, 20,
]

并且您的代码将对数据进行子缓冲以在缓冲区中添加新的顶点数据，因此缓冲区中的整个顶点数据为：

[
    0, 0,
    0, 20,
    20, 0,
    20, 20,
    10, 0,
    10, 20,
    30, 0,
    30, 20,
];

这意味着顶点数据现在为[ABCDEFGH]。

TRIANGLE_STRIP类型将使用每三个点绘制一个三角形，因此将绘制6个三角形而不是4个：ABC BCD CDE DEF EFG FGH，我想您只想获得ABC BCD EFG FGH个三角形。

解决：

使用简并三角形。

不要直接使用[ABCD]顶点数据，可以使用[AABCDD]（6个点数据）制成矩形。

[AABCDD] -> AAB ABC BCD CDD , AAB and CDD是简并三角形，webgl不会绘制它。因此，当您在缓冲区中添加新的矩形点数据，例如：[EEFGHH]时，整个数据都是[AABCDDEEFGHH]，webgl会将它们变成三角形：

AAB ABC BCD CDD DDE DEE EFG FGH GHH，

您会发现AAB CDD DDE DEE GHH不会被绘制，因此您可以获得两个单独的矩形：ABC BCD EFG FGH

希望你能听懂我的英语。

为什么我的三角形条纹必须与先前的三角形条纹相连

1 个答案: