Почему моя треугольная полоса должна быть связана с предыдущими?

Привет, я изучал 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 числа с плавающей точкой),

затем я перемещаю центр ведущего квадрата и использую 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;
    }

Прямо сейчас проблема заключается в том, что после достижения точки останова, только когда мой квадрат движется горизонтально, он может правильно отсоединиться и двигаться сам по себе, однако, когда я перемещаю его вертикально, он внезапно каким-то образом соединится с этими предыдущими квадратами. Я не понимаю, почему.

Может ли кто-нибудь помочь мне с этой проблемой? Если у кого-то из вас есть какие-либо предложения по коду, не стесняйтесь сообщить мне.

Спасибо

введите здесь описание изображения

введите здесь описание изображения


javascript webgl glsl graphics webgl2
person Joji    schedule 28.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы используете значение в четыре точки, чтобы нарисовать прямоугольник с помощью TRIANGLE_STRIP. TRIANGLE_STRIP будет использовать каждые три точки для создания треугольника: [ABCD] , webgl нарисует треугольник: ABC и BCD.

в вашем коде:

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

Когда я ввожу RIGHT, он создаст новые вершины, подобные этому (например, плюс 10 пикселей):

[
    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

Надеюсь, вы понимаете мой отличный английский

person 老脸叔叔    schedule 29.01.2019