Для отрисовки фигур в WebGL используется следующие методы:
gl.drawArrays()
gl.drawElements()
Рассмотрим их подробнее.
Метод gl.drawArrays() отрисовывает объекты последовательно по вершинам в буфере вершин. Данный метод принимает три параметра: gl.drawArrays(mode, index, count)
mode: данный параметр указывает на отрисуемый примитив и может принимать следующие значения: gl.POINTS, gl.LINES, gl.LINE_LOOP, gl.LINE_STRIP, gl.TRIANGLES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN. Далее дается более подробное описание примитивов.
index: второй параметр указывает, какой номер вершины в буфере вершин будет первой для примитива.
count: третий параметр указывает, сколько вершин будет использоваться для отрисовки.
В WebGL определены следующие виды примитивов:
gl.LINES: набор линий, при этом все линии рисуются отдельно, если у двух линий определена общая точка, тогда визуально они соединяются, но фактически это две разные линии
gl.LINE_STRIP: набор точек последовательно соединяются линиями, а незамкнутый контур, образуемый линиями, представляет единое целое
gl.LINE_LOOP: то же самое, что и gl.LINE_STRIP, только последняя точка в наборе дополнительно еще соединяется с первой.
Таким образом получается замкнутый контур
gl.TRIANGLES: набор треугольников
gl.TRIANGLE_STRIP: набор треугольников, при этом вершины последовательно соединяются в треугольники
gl.TRIANGLE_FAN: набор треугольников, при этом для всех треугольников есть одна общая вершина в центре
gl.POINTS: набор обычных точек, не соединенных между собой
Если выше рассмотренный метод имеет дело с буфером вершин, то gl.drawElements() работает с буфером индексов. Он имеет следующую сигнатуру:
gl.drawElements(mode, count, type, offset):
mode: режим, указывающий на тип примитива. В качестве примитивов используются те же, что и для метода
gl.drawArrays()
count: число элементов для отрисовки
type: тип значений в буфере индексов. Может иметь значение UNSIGNED_BYTE или UNSIGNED_SHORT
offset: смещение - с какого индекса будет проводиться отрисовка
Например, в одном из примеров ранее использовалось: gl.drawElements(gl.LINE_LOOP, indexBuffer.numberOfItems, gl.UNSIGNED_SHORT,0);