Uniforms
Redactado por
Sebastian V. Fecha de publicación
06/04/2026
Tiempo de lectura
8 min
Tema
Shaders GLSL
El mensajero de la CPU a la GPU
Hemos visto que los Shaders corren aislados en la GPU haciendo puras matemáticas. Pero, ¿qué pasa si quieres que el color cambie basado en un input de React en tu página? ¿O qué pasa si quieres que un plano se anime con el paso del tiempo?
El Shader está ciego y no tiene acceso a las variables globales de JavaScript, ni a Date.now(), ni a window.innerWidth.
¿Qué es un Uniform?
Un Uniform es una variable de "solo lectura" que enviamos desde nuestro código JavaScript (CPU) hacia el código del Shader (GPU). Se llama "uniform" porque su valor es uniforme (es el mismo) para todos los millones de píxeles y vértices procesados en ese frame exacto.
Los clásicos: u_time y u_resolution
Hay dos uniforms que usarás en el 99% de tus shaders creativos:
- u_time (float): Le mandas el tiempo transcurrido desde Three.js para usarlo en funciones seno/coseno dentro del shader y darle vida y movimiento a la escena.
- u_resolution (vec2): Le mandas el ancho y alto del
<canvas>para que el shader sepa mantener la proporción de los dibujos en la pantalla y no aplastarlos al redimensionar la ventana.
Consejo profesional
Enviar Uniforms no es gratis. Tienen un costo de comunicación entre el procesador y la tarjeta gráfica. Si vas a enviar variables de JavaScript (como la posición del ratón o el scroll), hazlo dentro del bucle requestAnimationFrame usando 'material.uniforms.u_mouse.value = X'.
El Puente entre JS y GLSL
import * as THREE from 'three';
// 1. Declarar Uniforms en el Material
const material = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms: {
u_time: { value: 0.0 },
u_color: { value: new THREE.Color('#FC5D7D') }
}
});
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
// 2. Actualizar el Uniform del tiempo cada frame!
material.uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}El color late porque el JS le está enviando un valor constante de u_time que aumenta cada frame.
Errores comunes
Practica lo aprendido
Inyecta datos dinámicos.