T.M. SoftStudio

feci quod potui, faciant meliora potentes

WebGL: Термины и понятия



Mesh или model — графический объект, составленный из полигонов, которые, в свою очередь, определены с помощью вершин (три координаты x, y, z).



Polygon2D-многоугольник, определенный с помощью набора вершин (три координаты x, y, z). Как правило, в качестве полигонов используются треугольники и прямоугольники.



Vertex (vertices)вершина полигона, имеющая три координаты x, y, z, которые определяют ее позицию в 3D-пространстве.



Texture map или texture — бинарные данные изображения, определяющего поверхность модели.



Material — набор коэффициентов, применяемых к каждому пикселю и определяющих такие свойства поверхности модели как рассеяние, отражение, фон и др., которые основаны на освещении поверхности одним или несколькими источниками света.



Матрица трансформаций — матрица, применяемая к вершинам модели и определяющая трансформацию их позиций, обеспечивая таким образом перемещение, вращение и масштабирование модели.



World coordinates мировые 2D координаты или координаты пользователя по осям x, y от 0 до бесконечности.



 Y
 ^     WORLD
 |

0,0    -> X

Screen, Device или Display coordinates горизонтальные и вертикальные координаты s,t указывающие позицию пикселя на экране устройства.



        (smin,tmax)        (smax,tmax)


                    SCREEN


        (smin,tmin)        (smax,tmin)



Normalized device coordinates (NDC) независимые от устройства координаты или координаты псевдо-экрана в диапазоне от 0 до 1, где позиция (0.,0.) соответствует позиции (smin,tmin) и позиция (1.,1.) соответствует позиции (smax,tmax).



        (0.0,1.0)        (1.0,1.0)


                NDC SPACE


        (0.0,0,0)        (1.0,0.0)



Window прямоугольная область мирового пространства в координатах world coordinates, которая отображается на экране.

        (xmin,ymax)        (xmax,ymax)


                    WINDOW


        (xmin,ymin)        (xmax,ymin)



Clipping так как отображаемый графический объект может быть частично расположен вне окна window, он не может быть целиком вписан в окно, поэтому он обрезается, так что только часть его появляется в окне.



Viewportокно window не всегда может отображаться на всем экране устройства, а может отображаться только в его части — рабочей области рисования. Координаты рабочей области viewport определены в NDC-координатах.



        (umin,vmax)        (umax,vmax)


                   VIEWPORT


        (umin,vmin)        (umax,vmin)

Приведение мировых координат окна window к координатам устройства — координаты окна window сначала приводятся к координатам рабочей области viewport (Normalization Transformation), а затем к координатам устройства (Workstation Transformation или Viewport Transformation):



(x,y) -> (u,v) -> (s,t)

a = (umax-umin)/(xmax-xmin)

b = (vmax-vmin)/(ymax-ymin)

u = umin + a*(x-xmin)

v = vmin + b*(y-ymin)

c = (smax-smin)

d = (tmax-tmin)

s = smin + c*u

t = tmin + d*v

s = smin + c*(umin + a*(x-xmin))

t = tmin + d*(vmin + b*(y-ymin))



Homogeneous Coordinates (x,y,z,w) — координаты вершин представляются вектором (x,y,z,w) для того, чтобы трансформацию вершин — перемещение, вращение и масштабирование — можно было представить матрицей 4х4. Например перемещение вершины (a,b,c) может быть представлено:




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

  • Viewing Transformation определяет позицию камеры или наблюдателя в 3D-пространстве.

  • Modeling Transformation определяет позицию, угол вращения и размер графического объекта в сцене.

  • Modelview Transformation — так как modeling transformation и viewing transformation аналогичны по своей сути, данный термин используется для обозначения как modeling transformations, так и viewing transformations.

  • Projection Transformation — основывается на View Frustum.




View Frustum — объем между передним и задним обрезающими планами. Только объекты, находящиеся в этом объеме, отображаются на экране. Viewing frustum определяется полем зрения (field of view) и расстоянием по оси z до переднего и заднего обрезающего планов (front clipping plane, back clipping plane).

Projection Transformation преобразует viewing frustum в параллелепипед в NDC-координатах, так что 3D-точки проецируются на передний план.




Различают два типа Projection Transformation — Perspective Projection и Orthographic Projection.

Perspective Projectionviewing frustum представляет собой усеченную пирамиду.

Orthographic Projectionviewing frustum представляет собой параллелепипед.

  • Viewport Transformation — NDC-координаты преобразуются в координаты устройства.

Данной реализации камеры соответствуют следующие стадии преобразования вершин модели:






Object Coordinates — первоначальные координаты вершин модели.

Eye Coordinates — преобразованные локальные координаты вершин модели в координаты пространства камеры.

Clip Coordinates — преобразованные координаты вершин модели в пространстве камеры с помощью проекции на рабочую область рисования, так что ближний к ней полигон будет большим, чем дальний в viewing frustum.

Normalized Device Coordinates (NDC) — приведенные координаты Homogeneous Coordinates (x,y,z,w) вершин к обычным координатам путем деления x,y,z на w.

Window Coordinates (Screen Coordinates) — приведенные координаты рабочей области к координатам устройства.



Рабочий процесс визуализации (Rendering или Graphics Pipeline):

  • Создание вершинных массивов (vertex arrays) и массива индексов (index array).

Vertex array — массив вершинных атрибутов (vertex attribute), используемых в качестве входных данных для шейдера. Вершинный атрибут (vertex attribute) содержит информацию о позиции вершины модели, ее нормали, цвете и текстурных координатах, которые связывают вершину с точкой на текстуре.

Помимо массива вершинных атрибутов также создается массив индексов (element array или index array).

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

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

Могут быть созданы также универсальные значения (uniform) — константы, используемые шейдерами, например, текстуры.



  • Передача вершинных массивов и массива индексов в графический процессор GPU и создание вершинных буферов (attribute buffer или vertex buffer) и буфера индексов (index buffer). Может быть создан также буфер универсальных значений (uniform buffer) для хранения универсальных значений (uniform).

  • Обработка графическим процессором элементов вершинного буфера с помощью вершинного шейдера (Vertex Shader).

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

  • Составление графическим процессором спроецированных вершин в треугольники с помощью массива индексов (Triangle Аssembly или Primitive Assembly).

  • Растеризация (Rasterization или Rasterization and Interpolation) — состоит из трех стадий — обрезание (Clipping), растеризация (Rasterization) и интерполяции (Interpolation). В результате создаются пиксельные фрагменты (pixel-sized fragment).

Обрезание (Clipping) — обрезание тех частей треугольников или примитивов, которые не вошли в экран.

Растеризация (Rasterization) — определение набора пикселей, которые заполняют треугольник или примитив.

Интерполяции (Interpolation) — вычисление значения каждого пикселя внутри треугольника или примитива, основываясь на вершинных атрибутах и расстоянии пикселя до вершин.




  • Fragment Shader или Pixel Shader обрабатывает каждый пиксель (пиксельный фрагмент), добавляя текстуру и источник света. Фрагментный шейдер выдает конечный цвет и глубину пикселя.

  • Framebuffer кадровый буфер формирует конечное 2D изображение из пикселей, получаемых от фрагментного шейдера. Кадровый буфер имеет буфер цвета (color buffer), а также буфер глубины (depth buffer) и буфер трафарета (stencil buffer).

Буфер глубины (depth buffer) — тестирует фрагменты, отбрасывая фрагменты с одинаковыми координатами x,y, но с большей глубиной (z), оставляя самый ближний фрагмент.

Буфер трафарета (stencil buffer) — фильтрует фрагменты согласно трафарета.

Хранение данных буфера глубины и буфера трафарета в памяти обеспечивает буфер визуализации (renderbuffer).