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

Question

Hi I been learning webgl these days and tried to make some sort of game out of it.

The stuff I made so far doesn't really make much sense but it has part of the game logic.

Basically I want to move a square around, and within a certain amount of steps, moving the square would result in drawing the current position to be a new square so the previous square gets bigger or longer. And when we reach a certain point, the moving square will erase the last square and it kind of detaches from those previous square.

Here is the demo: https://codepen.io/zhenghaohe/pen/xMVeWq

First I allocate enough space on the buffer.

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

Image I have 20x10 square grid of size 400pixel x 200pixel, and it can contains 200 squares at most，for every square I use 4 vertex（triangle-stripes）to draw，every vertex is 8 bytes(2 float)，

then I move the center of the leading square, and I use bufferSubDate to send new vertices to the buffer

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;
    }

Right now the issue is, after reaching the break point, only when my square is moving horizontally, it can properly detaches and move by itself, however when I move it vertically it will suddenly connect with those previous squares somehow. I don't understand why.

Could anyone help me with this issue? If any of you have any suggestions for the code, feel free to tell me.

Thanks

Answer 1

You use four point value to draw a rectangle with TRIANGLE_STRIP. TRIANGLE_STRIP will use each three point value to make a triganle: [ABCD] , webgl will draw triangle : ABC and BCD.

in your code :

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

When I enter RIGHT it will create a new vertices like this(for example , plus 10px):

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

and your code will subbuffer data to add the new vertices data in the buffer , so whole vertices data in the buffer is :

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

it means the vertices data are [ABCDEFGH] now.

TRIANGLE_STRIP type will use each three points to draw triangle , so there is 6 triangles will be drawn not 4 : ABC BCD CDE DEF EFG FGH , I think that you just want get : ABC BCD EFG FGH triangles.

resolve:

use the degenerate triangle.

Don't use [ABCD] vertices data directly , you can use [AABCDD] , 6 points data to make a rectangle.

[AABCDD] -> AAB ABC BCD CDD , AAB and CDD is degenerate triangle , webgl won't draw it. so when you add new rectangle points data like this: [EEFGHH] in the buffer, the whole datas are [AABCDDEEFGHH] , webgl will make them to triangles:

AAB ABC BCD CDD DDE DEE EFG FGH GHH,

you will find AAB CDD DDE DEE GHH won't be drawn , so you can get two sperate rectangles: ABC BCD EFG FGH

Hope you can understand my excellent english