Ruido Procedural
Redactado por
Sebastian V. Fecha de publicación
22/04/2026
Tiempo de lectura
9 min
Tema
Shaders GLSL
El secreto de lo orgánico
El mundo real no es perfecto. Las nubes, el humo, la madera y la piedra no están hechos de gradientes lineales, tienen una imperfección natural y un caos organizado. En Shaders, generar este caos se logra con algoritmos de Ruido (Noise).
Perlin Noise y Simplex Noise
A diferencia de `Math.random()` (que genera estática de televisión fea y desconectada), el ruido Perlin genera valores aleatorios que son suaves y continuos. Si te mueves un milímetro a la derecha, el valor del ruido será muy parecido al actual, creando un patrón orgánico como manchas de vaca o topografía montañosa.
¿De dónde saco la función?
GLSL no tiene una función `noise()` incorporada. Tienes que copiar y pegar complejas funciones matemáticas públicas escritas por genios como Stefan Gustavson (autor del famoso Simplex Noise en GLSL) en tu Shader. Una vez pegada, la usas como `noise(vUv * 10.0)`.
Consejo profesional
Si animas las coordenadas que le pasas a la función de ruido con el tiempo (noise(vec3(vUv * 5.0, u_time))), las manchas parecerán hervir o fluir como lava, agua o humo.
Simplex Noise en acción
void main() {
// Escalar la UV para tener más "manchas"
vec2 st = vUv * 3.0;
// Le pasamos las coordenadas escaladas y el tiempo a la función de ruido 3D
float noiseValue = cnoise(vec3(st, u_time * 0.4));
// El ruido va de -1 a 1, lo pasamos a 0-1
noiseValue = (noiseValue + 1.0) * 0.5;
// Colores
vec3 colorA = vec3(0.04, 0.06, 0.1);
vec3 colorB = vec3(0.988, 0.364, 0.490); // Rosa
// Añadimos escalones dramáticos
noiseValue = smoothstep(0.4, 0.6, noiseValue);
vec3 finalColor = mix(colorA, colorB, noiseValue);
gl_FragColor = vec4(finalColor, 1.0);
}Ruido Simplex animado por el tiempo. La base de casi todo efecto orgánico avanzado en web.
Errores comunes
Practica lo aprendido
Domina el caos procedural.