为什么我的三角条纹要和之前的连在一起

Question

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

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

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

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

首先，我在缓冲区上分配了足够的 space。

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

图片我有一个20x10的正方形网格，大小为400pixel x 200pixel，它最多可以包含200个正方形，每个正方形我使用4个顶点（三角形条纹）来绘制，每个顶点是8字节（2个浮点数），

然后我移动前导方块的中心，并使用 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 将使用每个三点值来制作一个三角形： [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

希望你能看懂我优秀的英语

为什么我的三角条纹要和之前的连在一起

Why does my triangle stripe have to be connected with previous ones

javascript

graphics

glsl

webgl

webgl2