WebGL: нарисовать два отдельных прямоугольник с одним буфером

Question

Моя проблема очень проста, я построить массив с 2 квадратных коорд:

var vertices = [ -64, -32, 0.0, 
       64, -32, 0.0, 
       64, 32, 0.0, 
       -64, -32, 0.0, 
       -64, 32, 0.0, 
       64, 32, 0.0 ]; 

vertices.push(-64 + 200, -32, 0.0, 
       64 + 200, -32, 0.0, 
       64 + 200, 32, 0.0, 
       -64 + 200, -32, 0.0, 
       -64 + 200, 32, 0.0, 
       64 + 200, 32, 0.0); 

Но полученный рисунок выглядит следующим образом:

Ожидаемый результат должен состоять из двух отдельных прямоугольников с черным цветом между ними. И я не понимаю этого поведения.

Answer 1

При использовании треугольника полосы вершины неявно индексируются:

Рисует серию треугольников (трехгранные полигонов), используя вершины v0, v1, v2, то v2, v1, v3 (обратите внимание на порядок) , то v2, v3, v4 и т. д. Порядок состоит в том, чтобы обеспечить, чтобы треугольники были нарисованы с одинаковой ориентацией, чтобы полоса могла правильно образовывать часть поверхности.

Если вы хотите иметь отдельные треугольники с использованием треугольных полос, нужно будет добавить «стоп-вершины» для генерации вырожденного треугольника.

Read this answer for an explanation(with images) of TRIANGLE_STRIP and TRIANGLE_FAN.

Однако треугольные полоски (и вентиляторы) могут быть довольно громоздкими работать, если вы не планируете явно строить полосы или вентиляторы. Это и глядя на ваш вершинный макет Я предполагаю, что вы просто хотите использовать простой TRIANGLES для визуализации вашей геометрии.