01 片元与数据

UV：给表面一个地址

X 变红，Y 变绿。移动指针查看坐标。

UV0.50, 0.50

U → 红色1.00

V → 绿色1.00

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

void main() {
  vec2 uv = vUv;
  vec3 color = vec3(uv.x * 1.000, uv.y * 1.000, 0.25);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 uv = vUv;
  vec3 color = vec3(uv.x * 1.000, uv.y * 1.000, 0.25);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

UV 是表面坐标；本页平面左下 (0,0)，右上 (1,1)，与屏幕像素坐标不同。

试一试