javascript - 为什么我的三 Angular 条纹要和之前的三 Angular 条纹连接起来

Question

嗨，这些天我一直在学习 webgl，并尝试用它制作某种游戏。

到目前为止我所做的东西并没有多大意义，但它具有部分游戏逻辑。

基本上我想移动一个正方形，并且在一定的步长内，移动正方形会导致将当前位置绘制为一个新的正方形，从而使前一个正方形变得更大或更长。当我们到达某个点时，移动的方 block 将删除最后一个方 block ，并且它会与之前的方 block 分离。

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

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

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

图像我有一个20x10的正方形网格，大小为400pixel x 200pixel，它最多可以包含200个正方形，对于每个正方形我使用4个顶点(三 Angular 条纹)来绘制，每个顶点是8个字节(2个 float )，

然后我移动前导正方形的中心，并使用 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;
    }

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

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

谢谢

Answer 1

您使用四个点值通过 TRIANGLE_STRIP 绘制一个矩形。TRIANGLE_STRIP 将使用每三个点值来制作一个三 Angular 形:[ABCD] ，webgl 将绘制三 Angular 形: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 类型将使用每三个点来绘制三 Angular 形，因此将绘制 6 个三 Angular 形而不是 4 个: ABC BCD CDE DEF EFG FGH ，我认为你只是想要得到:ABC BCD EFG FGH 三 Angular 形。

解决:

使用退化三 Angular 形。

不要直接使用[ABCD]顶点数据，可以使用[AABCDD]，6个点的数据来制作一个矩形。

[AABCDD] -> AAB ABC BCD CDD ，AAB 和 CDD 是退化三 Angular 形，webgl 不会绘制它。因此，当您在缓冲区中添加如下所示的新矩形点数据: [EEFGHH] 时，整个数据为 [AABCDDEEFGHH] ，webgl 会将它们转换为三 Angular 形:

AAB ABC BCD CDD DDE DEE EFG FGH GHH，

你会发现AAB CDD DDE DEE GHH不会被绘制，所以你可以得到两个独立的矩形:ABC BCD EFG FGH

希望你能理解我流利的英语