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

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

0 голосов
/ 28 января 2019

Привет, я изучал 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;
    }

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

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

Спасибо

enter image description here

enter image description here

1 Ответ

0 голосов
/ 29 января 2019

Вы используете четырехточечное значение, чтобы нарисовать прямоугольник с 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,
]

, и ваш код будет помещать в буфер данные, чтобы добавить новые данные вершин в буфер, поэтому все данные вершин в буфереis: 

[
    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,

youAAB CDD DDE DEE GHH не будет нарисован, поэтому вы можете получить два отдельных прямоугольника: ABC BCD EFG FGH

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

...