WebGL vec4 () описание - PullRequest
Новая
       48

WebGL vec4 () описание

2 голосов
/ 02 мая 2020

Я только изучаю графическое программирование WebGL.

Я изучаю чей-то код, который включает в себя выражение 

// multiply the position by the matrix.
gl_Position = vec4((u_matrix * vec3(a_position,1)).xy,0,1);

Я думаю, он умножает 4-компонентный вектор на матрицу 4x4. Но не знаете, почему / что такое .xy?

Если кто-то может сказать мне, что здесь происходит и куда go для vec4() страницы определения?

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Чтобы понять .xy, вам нужно прочитать о Swizzling . .xy получает x и y компонент a_position и создает vec2 с этими компонентами.

В векторах glsl (vec2, vec3, vec4) может быть построено по-разному. См. Векторные конструкторы . Таким образом, vec4 можно построить с помощью vec2 и 2 скаляров.

gl_Position = vec4((u_matrix * vec3(a_position,1)).xy,0,1); можно выразить как: 

vec3 pos_vec3             = vec3(a_position, 1);
vec3 pos_vec3_transformed = u_matrix * pos_vec3;
vec2 pos_vec2             = pos_vec3_transformed.xy;
vec4 pos_vec4             = vec4(pos_vec2, 0, 1);

gl_Position = pos_vec4;

Объяснение:

a_position имеет тип vec2 и u_matrix имеет тип mat3, поэтому a_position необходимо расширить до vec3, чтобы выполнить умножение u_matrix и a_position: 

vec3 pos_vec3             = vec3(a_position, 1);
vec3 pos_vec3_transformed = u_matrix * pos_vec3;

Кроме того, требуются только компоненты x и y, поэтому компонент z пропускается: 

vec2 pos_vec2 = pos_vec3_transformed.xy;

gl_Position имеет тип vec4, таким образом, преобразованная позиция имеет быть расширенным до vec4: 

vec4 pos_vec4 = vec4(pos_vec2, 0, 1);
gl_Position   = pos_vec4;
0 голосов
/ 02 мая 2020

То, что вы описываете, в коде шейдера называется swizzling. Это удобный способ, предлагаемый языком для доступа к компонентам вектора. Определены различные методы доступа, соответствующие синтаксису: rgba, xyzw, stpq.

Более подробную информацию можно найти по https://www.khronos.org/opengl/wiki/Data_Type_ (GLSL) # Swizzling 

vec4 aVector;
vec4 color = aVector.rgba;
vec4 coordinates = aVector.xyzw;
vec4 textures = aVector.stpq;

Но вы также можете играть так, как вы хотите, с помощью этих средств доступа, чтобы создавать векторы разных размеров, или использовать компоненты в нужном вам порядке. 

vec4 point;
vec2 projected = point.xy;
vec2 orthogonal = point.yx;

vec4 aVector;
vec2 textureCoord = aVector.st;

vec4 color;
vec3 grayscale = color.rrr;

vec3 colorRGB;
vec3 colorBGR = colorRGB.bgr;

В вашем случае gl_Position - это встроенный vec4. во встроенном вершинном шейдере, который должен быть установлен с 4-мерным вектором пространства клипа.

Ваш код преобразует атрибут 2D-вершины a_position в значение пространства 4D-клипа. 

gl_Position = vec4((u_matrix * vec3(a_position,1)).xy,0,1);

Давайте перепишем этот код, чтобы лучше понять 

// First create a vector 3 and assign a_position xy components, and z component to 1
vec3 position = vec3(a_position, 1.0);

// Transform the point with the 3D matrix
vec3 transformed = u_matrix * position;

// Set the clip space vec4 with the transformed position x and y components
// Set z to 0 and w to 1
gl_Position = vec4(transformed.xy, 0.0, 1.0);
...