06 Capítulo 6 · Lección 7

Coordenadas UV

Redactado por

Sebastian V.

Fecha de publicación

14/04/2026

Tiempo de lectura

6 min

Tema

Shaders GLSL

El GPS de las texturas

Hemos pintado la pantalla usando `gl_FragCoord` (la posición del píxel en la pantalla). Pero si nuestra geometría 3D se mueve, el píxel de la pantalla seguirá en su lugar y el objeto parecerá transparente revelando un fondo. Necesitamos pintar basándonos en la superficie de la geometría misma, no en la pantalla.

¿Qué son las UV?

Las coordenadas UV son como un mapa que envuelve tu modelo 3D. `U` es el eje horizontal (0.0 a 1.0) y `V` es el eje vertical (0.0 a 1.0).

Si miras la esquina inferior izquierda de un plano, su UV es (0.0, 0.0). La esquina superior derecha es (1.0, 1.0). Three.js inyecta automáticamente el atributo `uv` en el Vertex Shader de casi todas las geometrías base.

El puente clásico

Para usar las UV en el Fragment Shader (que es donde realmente pintamos), debes capturar el atributo en el Vertex Shader y enviarlo a través de un varying.

Consejo profesional

Visualizar las UV directamente en el Fragment Shader es la mejor forma de depurar. Si asignas gl_FragColor = vec4(vUv, 0.0, 1.0); verás un hermoso gradiente de negro a rojo y verde. Ese patrón rojo-verde es el 'Hola Mundo' de los Shaders.

El clásico patrón UV

> _

varying vec2 vUv;

void main() {
  // uv es un atributo provisto por Three.js mágicamente
  vUv = uv;

  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}

varying vec2 vUv;

void main() {
  // x = Rojo, y = Verde, z(azul) = 0.0
  gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0);
}

> _

La representación visual pura de las coordenadas UV.

Errores comunes

UVs fuera de rango Multiplicar las UV sin controlar el resultado puede sacarlas del rango 0.0-1.0. Si usas una textura, los píxeles de los bordes se repetirán o se cortarán inesperadamente. Usa fract() para mantenerlas siempre entre 0 y 1.

UV en cero en todas partes Olvidaste pasar el atributo uv al varying en el Vertex Shader. El resultado será que vUv siempre vale vec2(0.0, 0.0) y tu efecto solo se verá en la esquina inferior izquierda.

Practica lo aprendido

Domina el mapa 2D.

01 Asegúrate de pasar la variable uv desde el Vertex Shader al Fragment Shader.

02 Prueba multiplicar las coordenadas para repetir una textura (vUv * 5.0).

03 Resta a las UVs para centrar el eje de coordenadas (vUv - 0.5).