05 Data becomes vertices

The w of gl_Position: perspective divide

The whole canvas is −1…1 in normalized device coordinates. Change w for the top two vertices and see how the GPU divides by it.

Top vertices’ w1.00

0.54

Multiply xy by wOff

Top vertices’ z0.00

-1.51.5

Runs once per vertexDrag numbers, or edit the code

void main() {
  // aPosition: the four corners of the square (+-0.6, +-0.6)
  float w = mix(1.0, 1.000, aUv.y);     // only the top two corners change w
  float z = mix(0.0, 0.000, aUv.y);
  vec2 xy = aPosition.xy * mix(1.0, w, 0.000);
  gl_Position = vec4(xy, z, w);         // the GPU then computes xy / w
  vUv = aUv;
  vColor = aColor;
  vNormal = aNormal;
  vWorld = aPosition;
}

void main() {
  // aPosition: the four corners of the square (+-0.6, +-0.6)
  float w = mix(1.0, 1.000, aUv.y);     // only the top two corners change w
  float z = mix(0.0, 0.000, aUv.y);
  vec2 xy = aPosition.xy * mix(1.0, w, 0.000);
  gl_Position = vec4(xy, z, w);         // the GPU then computes xy / w
  vUv = aUv;
  vColor = aColor;
  vNormal = aNormal;
  vWorld = aPosition;
}

JS side

gl_Position is a vec4; the GPU divides xy by w. Between vertices with different w, interpolation is perspective-corrected too.

Try it

Set the top w to 3: the square becomes a trapezoid
Turn on “Multiply xy by w”: the shape stays, but the checkerboard warps
Set z to 1.5: the part out of range is clipped