05 Los datos se convierten en vértices

La w de gl_Position: división de perspectiva

Todo el lienzo abarca −1…1 en coordenadas de dispositivo normalizadas. Cambia w en los dos vértices superiores y observa cómo la GPU divide por ella.

w de los vértices superiores1.00

0.54

Multiplicar xy por wNo

z de los vértices superiores0.00

-1.51.5

Se ejecuta una vez por vérticeArrastra los números o edita el código

void main() {
  // aPosition: las cuatro esquinas del cuadrado (+-0.6, +-0.6)
  float w = mix(1.0, 1.000, aUv.y);     // solo las dos esquinas superiores cambian 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);         // la GPU calcula después xy / w
  vUv = aUv;
  vColor = aColor;
  vNormal = aNormal;
  vWorld = aPosition;
}

void main() {
  // aPosition: las cuatro esquinas del cuadrado (+-0.6, +-0.6)
  float w = mix(1.0, 1.000, aUv.y);     // solo las dos esquinas superiores cambian 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);         // la GPU calcula después xy / w
  vUv = aUv;
  vColor = aColor;
  vNormal = aNormal;
  vWorld = aPosition;
}

Lado JS

gl_Position es un vec4; la GPU divide xy por w. Entre vértices con distinta w, también corrige la interpolación según la perspectiva.

Pruébalo

Pon la w superior en 3: el cuadrado se convierte en un trapecio
Activa «Multiplicar xy por w»: la forma se mantiene, pero el damero se deforma
Pon z en 1.5: se recorta la parte fuera del rango