WebGL vec4()描述

Question

我正在学习WebGL图形编程。

我正在检查某人的代码，其中包含以下语句

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

我想他是在把一个4分量的向量乘以一个4x4的矩阵。但是不确定为什么/ .xy是什么？

如果有人能告诉我这里发生了什么以及在哪里可以找到vec4()定义页面？

Answer 1

您所描述的在着色器代码中称为swizzling。这是一种由语言提供的访问向量组件的便捷方法。定义了不同的访问器，与语法需求相匹配: rgba、xyzw、stpq。

您可以在https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)#Swizzling(https://www.khronos.org/opengl/wiki/Data)上找到更多信息

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);

Answer 2

要理解.xy，您必须阅读有关Swizzling.xy获取a_position的x和y组件，并使用此组件创建一个vec2。

在glsl中，向量(vec2，vec3，vec4)可以用许多不同的方式构造。请参见Vector constructors。因此，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;