WebGL vec4() description

Question

I am just learning WebGL graphics programming.

I am examining someone's code that includes the statement

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

I think he is multiplying a 4-component vector by a 4x4 matrix. But unsure why/what the .xy is?

If someone could tell me what is happening here and where to go for vec4() definition page?

Answer 1

What you describe is called swizzling in the shader code. It's a convenient way offered by the language to access the components of a vector. There are different accessors defined, matching with the syntax need: rgba, xyzw, stpq.

You can find more information on https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)#Swizzling

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

But you can also play the way you want with this accessors to create vectors of different dimensions, or use the components in the order you need.

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;

In your case gl_Position is a vec4 built-in in the vertex shader built-in that should be set with a 4 dimension clip space vector.

Your code transforms the 2D vertex attribute a_position into the 4D clip space value.

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

Let's rewrite this code to have a better understanding

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