3D графика — фундаментальные понятия

Для начала работы с 3D графикой, необходимо ознакомиться с основными понятия механизмов работы WebGL, с чего начинается построение объектов, представление их вида.

Сетки, полигоны, вершины

Существуют несколько способов рисования 3D графики, в большинстве случаев это построение фигур из сетки полигонов. Полигональная сетка представляет собой объект состоящий из одного или нескольких многоугольников (полигонов), построенных из вершин (X, Y, Z тройки значений) определяемых координаты расположения в 3D пространстве. Полигональная сетки чаще всего строится из треугольников (группы из трех вершин) и прямоугольников (группы из четырех вершин).

Материалы, текстуры и свет

Поверхность сетки определяется с помощью дополнительных атрибутов. Атрибуты поверхности могут быть простыми, как просто один сплошной цвет, или они могут быть сложными, состоящий из нескольких частей, которые определяют, например, как свет отражается от объекта и добавление блеска. Поверхностная может быть представлена ​​с помощью одного или более растровых изображений, известных как текстурные карты (или просто текстуры). Текстуры можно наложить на поверхность (например, изображение печатается на футболке), или они могут быть объединены с другими текстурами для достижения более сложных эффектов, таких как взбалтывание или радужный эффект. В большинстве графических систем, свойства поверхности сетки именуются как материалы. Материалы обычно полагаются на присутствие одного или более источника света, который (как вы уже догадались) определяют, как сцена освещена.

Голова на рисунке выше имеет материал с пурпурным затемненным цветом определяемым источником света, исходящих из левой стороны объекта (обратите внимание на тени на правой стороне лицо).

Матрицы и преобразования

Так как полигональные 3D сетки строятся по координатам своих вершин, то было бы весьма ужасно и утомительно изменять их положение каждый раз при изменении положения объекта, особенно если объект участвует в анимации. По этой причине большинство 3D систем поддерживают преобразования, операции которые перемещают объект представленный полигональной сеткой, без отдельной прорисовки каждой его вершины. Преобразования такого рода выполняются с помощью матриц преобразований, применяя которые можно изменять размеры объекта, выполнять повороты и движение без фактического изменения значений в его вершинах

Камеры, перспективы, области видимости и проекции

Каждая сцена для рисования обладает точкой просмотра, из которой пользователь может за ней наблюдать. В 3D системах обычно используются камеры, для объекта, которые определяют, где (по отношению к сцене) позиционируется и ориентируется объект для его наблюдения пользователем, другие камеры обладают свойствами, такими как размер поля зрения, которые определяют перспективу (объекты которые дальше, становятся меньше). Свойства камер объединяются и получается конечный результат рендеринга 3D сцены на 2D экране или канве.

Рисунок ниже изображает основные концепции камеры, просмотра, и проекции. В левом нижнем углу, мы видим иконку глаза, это показано расположение камеры. Красный вектор, направленный вправо (на этой схеме обозначен как ось х) представляет собой направление, в котором направлена камера. Синие кубики объекты 3D-сцены. Зеленые и красные прямоугольники, соответственно, ближняя и дальняя плоскости отсечения. Эти две плоскости определяют границы подмножества 3D-пространства. Плоскость отсечения эквивалентна области просмотра, где мы можем видеть результирующее изображение.

Камеры являются чрезвычайно мощными средством, так как они в конечном счете определяют отношение зрителя к 3D-сцены и обеспечивают чувство реализма.
Они также предоставляют особое оружие в арсенале аниматора: динамически перемещая камеру вокруг, вы можете создать кинематографический эффект.

Шейдеры

Шейдер — это программа, выполняемая на графическом процессоре в процессе обработки кадра, используемая в трёхмерной графике для определения окончательных параметров объекта или изображения. Она может включать в себя произвольной сложности описание поглощения и рассеяния света, наложения текстуры, отражение и преломление, затенение, смещение поверхности и эффекты пост-обработки. Программируемые шейдеры гибки и эффективны. Сложные с виду поверхности могут быть визуализированы при помощи простых геометрических форм. Например, шейдеры могут быть использованы для рисования поверхности из трёхмерной керамической плитки на абсолютно плоской поверхности. В OpenGL ES 2.0 существует два типа шейдеров — вершинные и пиксельные (vertex & fragment соответственно).