WebGL, реинкарнация OpenGL ES для браузеров - нередко кажется "чем-то для трёхмерной графики". По крайней мере именно такое представление было у меня, когда я только собирался заняться данной технологией.
Это не совсем так. WebGL - это библиотека графики, при этом необязательно трёхмерной. Она отвечает за отрисовку примитивов. Точки, линии, треугольники, квадраты... да в общем что угодно.
Изначально, я полагал, что там присутствует специальный инструментарий для создания 3D объектов, но это оказалось не так. Вся работа с трёхмерной графикой сводится к тому, что рисуется плоская фигура, которая затем искажается и начинает выглядеть как трёхмерная. Взять, например, куб. По сути, это просто 6 плоскостей. Однако, в зависимости от точки наблюдения - внешний вид каждой из этих плоскостей будет различным (в том числе некоторые плоскости будут закрывать другие).
Всё это осуществляется посредством матричных преобразований - т.е. математическим аппаратом, без которого, увы, никакой трёхмерной графики не будет. Технически, ничего не мешает от матричных вычислений уйти, используя иные вычисления, но тогда могут возникнуть проблемы с производительностью (о ней чуть позже). Так что собираясь работать с 3D графикой следует быть готовым к тому, что будет много математики. Впрочем, справедливости ради надо заметить, что довольно скоро это перестаёт смущать и становится привычным делом.
Все эффекты, к которым мы привыкли (например, отблески, тени, туман, переливы и градиенты) - тоже следствие математических вычислений. Угол падения, угол отражения, дисперсия - WebGL позволяет со всем этим работать. Но специальной функции "сделать туман", увы, нет.
Надо сказать пару слов и про то, как всё это работает. Признать, я несколько раз пытался начать и каждый раз заваливался на понятийном аппарате: многочисленные руководства из разряда "как начать" были наполнены непонятным контекстом.
Итак, для того, чтобы что-то нарисовать посредством WebGL (скажем, прямоугольник) - следует написать программу отрисовки. Программа отрисовки что прямоугольника, что куба более-менее похожи и "многословны". Например, чтобы нарисовать тот самый прямоугольник придётся написать порядка 50 строк кода. Впрочем, часть кода общая и может быть использована повторно (т.е. вынесена в библиотеку). Поэтому, рисуя не только прямоугольник, но и треугольник - количество строк будет уже не 100, а, скажем, 60.
Если надо отрисовать несколько фигур - можно использовать несколько разных программ. Например, сперва вызвали программу отрисовки прямоугольника, потом треугольника, потом круга. И так далее. Если требуется анимация - то отрисовка зацикливатся: сперва экран очищается, затем рисуются фигуры.
Но продолжим. Меня продолжало сбивать с толку фраза "программа", т.к. в моём понимании программа - это то, что я пишу, то есть всё. Причём тут программа и рисунок, скажем, куба??? Но нет, такая вот терминология: внутри своей программы приходится использовать программы для отрисовки изображений.
Любая программа отрисовки содержит 2 шейдера (возможно и больше, но я с такими случаями не сталкивался): вершинный и фрагментный. Этот момент сильно сбивал с толку.
Во-первых, что такое шейдер. Шейдер (или затенитель, если переводить с английского) - это программа, написанная на языке GLSL - специальный такой язык. Он участвует в создании того, что будет отображено на экране.
Во-вторых, да, хотя это и немного странно, но программа отрисовки изображения включает в себя минимум 2 другие программы: программу вершинного шейдера и программу фрагментного шейдера (о них ниже). Данные программы выполняются и создают требуемое отображение.
Вершинный шейдер, образно говоря, создаёт фигуру, т.е. он формирует маску, которую впоследствии закрасит фрагментный шейдер. На примере отрисовки красного треугольника, вершинный шейдер рисует этот самый треульник, а фрагментный заполняет его цветом в установленных границах. Если треугольник не заполнить цветом - он не будет виден.
Однако, на этом назначение фрагментного шейдера не заканчиваются. Благодаря дополнительной информации, он отвечает за отблески, затенения и вообще все визуальные эффекты.
Надо сказать пару слов про производительность. Считается, что WebGL программы выполняются на видеокарте. Это значит, что некоторые операции (например, операция ветвления if-else) считается более дорогой, что ухудшает производительность и её лучше избегать, если есть возможность. Так что при написании шейдеров приходится каждый раз быть осторожным.
Ну и ложкой дёгтя в это бочке мёда - невозможность нормальной отладки программ отрисовки и, порой, различная работа в разных браузерах.
