01 Fragments and data

UV: an address on the surface

X becomes red, Y becomes green. Move the pointer to read the coordinate.

UV0.50, 0.50

U → red1.00

V → green1.00

Runs once per pixelDrag numbers, or edit the code

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 side

UV is a surface coordinate; on this plane bottom left is (0,0) and top right (1,1), unlike screen pixels.

Try it