glsl - 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

了解.xy你必须阅读Swizzling . .xy获取 x和 y a_position 的组件并创建一个 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;