我刚刚学习WebGL图形编程。
我正在研究某人的代码，其中包括以下语句
// multiply the position by the matrix.
gl_Position = vec4((u_matrix * vec3(a_position,1)).xy,0,1);
我想他是将一个4分量的向量乘以一个4x4的矩阵。 但不知道为什么 .xy 是吗？
如果有人能告诉我这里发生了什么，去哪里找？vec4() 定义页？
要了解 .xy 你必须要读到 嗖嗖. .xy 获得 x 和 y 的组成部分 a_position 并创建了一个 vec2 与此分量。
在glsl向量(vec2, vec3, vec4)可以用许多不同的方式来构造。见 向量构造器. 因此，a 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;
你所描述的在着色器代码中叫做swizzling。这是语言提供的一种访问向量组件的便捷方式。根据语法需要，定义了不同的访问器：rgba、xyzw、stpq。
你可以在下面找到更多信息 https:/www.khronos.orgopenglwikiData_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维剪贴空间向量来设置。
你的代码将二维顶点属性a_position转换为四维剪贴空间值。
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);