Примитивы

После перевода уроков для меня по-прежнему многое осталось непонятным. Наверное, так происходит со многими, кто не имел представления о WebGL и не сталкивался с OpenGL. Поэтому я решил, что хватит с меня теории, пора попробовать что-то самому. А заодно и поделиться этим опытом с другими.

С чего же начать? А начать нужно с самого начала — с отрисовки объектов. Это и привлекло меня к WebGL: возможность в браузере увидеть сцену, которую отрисовала видеокарта. Пусть даже для получения белого квадрата на черном фоне необходимо написать больше сотни строк кода :). Итак, давайте разберемся, каким образом координаты превращаются в объекты сцены…

Я постарался создать максимально простую страницу, где будет только необходимый минимум, чтобы получить объект на экране. Код страницы можно найти на GitHub. Если вы откроете страницу в браузере с поддержкой WebGL, то увидите, что можно выбрать примитив, которым будет производиться отрисовка. Остановимся на каждом из них подробнее.



Точки

Здесь должно быть все понятно. Просто отрисовываются те точки, которые заданы в ARRAY_BUFFER:

(0, 0, 0), (-1, 0, 0), (-0.7, 0.7, 0), (0, 1, 0), (0.7, 0.7, 0), (1, 0, 0)

В результате вызова функции drawArrays с параметром gl.POINTS мы получим следующую картинку (красные цифры я дорисовал отдельно):

Здесь стоит только обратить внимание, что для отрисовки точек необходимо задать их размер в теле вершинного шейдера (иначе точек не будет видно):


gl_PointSize = 5.0;



Линии

Линии содержат сразу три примитива. Разница между ними заключается в том, каким образом они обрабатывают массив вершин. Если количество вершин нечетное (то есть для последней линии нет второй вершины), то последняя линия не формируется.

gl.LINES

В этом режиме для линии берутся вершины 0 и 1, затем 2 и 3 и так далее. В общем случае линии образуются вершинами 2i и 2i+1 (здесь и далее i начинается с нуля). При том же наборе координат мы получим следующую картинку:



gl.LINE_STRIP

Этот случай можно выразить формулой (i, i​ + 1). Таким образом, в отличие от gl.LINES, мы получаем непрерывную линию, составленную из отрезков на основании вершин 0 и 1, затем 1 и 2 и так далее. Вот, как это будет выглядеть:



gl.LINE_LOOP

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




Треугольники

Отрисовка треугольниками встречается наиболее часто при создании приложений, так как мы видим сам объект, а не просто его «скелет». Если количество точек не кратно трем, то последний треугольник построен не будет, а точки проигнорируются.

gl.TRIANGLES

Треугольники образуются точками (3i, 3i+1, 3i+2). Первый треугольник образуется вершинами (0, 1, 2), второй (3, 4, 5) и так далее. Выглядит это следующим образом:



gl.TRIANGLE_STRIP

Треугольники образуются точками (i, i+1, i+2). Первый треугольник образуется вершинами (0, 1, 2), второй (1, 2, 3) и так далее. В нашем случае треугольники будут пересекаться между собой, поэтому я выделил отдельные треугольники разными цветами для понимания принципа работы:



gl.TRIANGLE_FAN

В этом случае в треугольниках всегда участвует первая вершина и формула принимает вид (0, i+1, i+2). Первый треугольник образуется вершинами (0, 1, 2), второй (0, 2, 3) и так далее. Получается «веер», который представлен на следующей картинке:

Пожалуй, на этом можно и остановиться. У нас получилась простейшая страница (порой эта простота давалась в ущерб качеству кода), которую мы сможем использовать для будущих более сложных примеров.

Здесь можно посмотреть демонстрацию полученной страницы.

Примитивы
Метки:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *