01 Fragmentos y datos

UV: una dirección sobre la superficie

X se vuelve rojo; Y, verde. Mueve el puntero para leer la coordenada.

UV0.50, 0.50

U → rojo1.00

V → verde1.00

Se ejecuta una vez por píxelArrastra los números o edita el código

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);
}

Lado JS

UV es una coordenada de superficie; en este plano, abajo a la izquierda es (0,0) y arriba a la derecha (1,1), a diferencia de los píxeles de pantalla.

Pruébalo

Pon el peso de U en 0: desaparece el degradado rojo
Cambia 0.25 por 1.0 y el azul lo llena todo