05 从数据到顶点

gl_Position 的 w：透视除法

整个画布就是 −1～1 的标准化设备坐标。改变上边两个顶点的 w，看看 GPU 怎样除以它。

上边顶点的 w1.00

0.54

xy 同乘 w关

上边顶点的 z0.00

-1.51.5

每个顶点运行一次拖动数字，或直接改代码

void main() {
  // aPosition：正方形四个角 (±0.6, ±0.6)
  float w = mix(1.0, 1.000, aUv.y);     // 只有上边两个角的 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);         // GPU 随后计算 xy / w
  vUv = aUv;
  vColor = aColor;
  vNormal = aNormal;
  vWorld = aPosition;
}

void main() {
  // aPosition：正方形四个角 (±0.6, ±0.6)
  float w = mix(1.0, 1.000, aUv.y);     // 只有上边两个角的 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);         // GPU 随后计算 xy / w
  vUv = aUv;
  vColor = aColor;
  vNormal = aNormal;
  vWorld = aPosition;
}

JS 这一侧

gl_Position 是 vec4；GPU 会把 xy 除以 w。w 不同的顶点之间，插值也按透视校正。

试一试

把上边的 w 调到 3，正方形变成梯形
打开「xy 同乘 w」：形状不变，棋盘却变形
把 z 调到 1.5，超出范围的部分被裁掉