🎨 Texturas Procedurales
Texturas de resolución infinita generadas enteramente en GLSL: mármol, madera, nubes, fuego, células de Voronoi y lava. Sin imágenes — cada píxel calculado por matemáticas de fragment shader.
Acerca de las Texturas Procedurales
Esta simulación renderiza seis texturas procedurales clásicas — mármol, madera, nubes, fuego, células de Voronoi y lava — enteramente en la GPU usando un único fragment shader GLSL. No se carga ningún archivo de imagen; cada píxel se calcula a partir de matemáticas de coordenadas. La primitiva central es el ruido de valor construido a partir de un hash de red basado en seno, sumado a través de octavas como movimiento browniano fractal (fBm): cada octava duplica la frecuencia y reduce a la mitad la amplitud, produciendo detalle en muchas escalas.
El control deslizante Escala (0.5×–4×) hace zoom en el campo de ruido, Velocidad (0×–3×) impulsa el reloj de animación y Octavas (1–8) fija cuántas capas fBm se suman, intercambiando detalle por velocidad. Las pestañas de preajuste cambian la rama del shader, mientras que los chips de Paleta recolorean vía luminancia a Escala de grises o una rampa de Calor. Estas mismas técnicas impulsan el arte de cine y videojuegos: la corteza, el mármol, el humo y la lava normalmente se generan, no se fotografían.
Preguntas Frecuentes
¿Qué son las texturas procedurales?
Son texturas cuyos píxeles se calculan a partir de una función matemática en lugar de leerse de un mapa de bits almacenado. Como el color se deriva de las coordenadas del píxel, el resultado es continuo, mosaicable y disponible en cualquier resolución. Esta demostración calcula las seis texturas en vivo en un fragment shader que se ejecuta en tu GPU.
¿Qué es fBm y por qué se usa aquí?
El movimiento browniano fractal suma varias capas de ruido, cada una al doble de frecuencia y la mitad de amplitud que la anterior. Esto proporciona tanto formas amplias como detalles finos de superficie, razón por la que emergen nubes, mármol y fuego de aspecto natural. El control deslizante Octavas controla cuántas capas, de 1 a 8, se añaden.
¿Qué hacen los controles deslizantes de Escala, Velocidad y Octavas?
Escala (0.5× a 4×) hace zoom en el muestreo de ruido, de modo que valores bajos muestran estructura grande y valores altos revelan grano fino. Velocidad (0× a 3×) multiplica el reloj de animación, y arrastrarla a 0 congela la textura. Octavas (1 a 8) fija el número de capas fBm, añadiendo riqueza a costa de trabajo del shader.
¿Cómo se genera realmente el ruido subyacente?
Una función hash mezcla cada punto entero de la red usando la fracción del seno de un producto escalar, dando un valor pseudoaleatorio por cada esquina de la cuadrícula. El ruido de valor luego interpola suavemente las cuatro esquinas circundantes con una curva smoothstep, y fBm apila varias copias escaladas de este ruido para construir el campo final.
¿En qué se diferencia el preajuste Voronoi de los demás?
El modo Voronoi usa ruido de Worley, o celular, en lugar de ruido de valor. Dispersa un punto semilla en cada celda de la cuadrícula y, para cada píxel, encuentra la semilla más cercana, devolviendo esa distancia y el hash de la semilla. Cada celda se colorea entonces desde su semilla y se oscurece cerca de los bordes, produciendo el mosaico característico de regiones.
¿Qué cambian los chips de Paleta?
Cada textura tiene su propia rampa de color incorporada, que el chip Original deja intacta. Escala de grises convierte el resultado en luminancia usando los pesos estándar 0.299, 0.587, 0.114, exponiendo el valor de ruido en bruto. Calor toma esa misma luminancia y la hace pasar por una rampa de fuego negro-rojo-naranja-amarillo, recoloreando cualquier textura como un mapa térmico.
¿Son estas texturas físicamente precisas?
No — son aproximaciones artísticas, no simulaciones físicas. El fuego y la lava no resuelven dinámica de fluidos; animan campos fBm con máscaras y deformaciones sinusoidales para sugerir movimiento. El objetivo es un detalle visual convincente y controlable a velocidad de tiempo real, que es exactamente cómo se usan las texturas procedurales en el renderizado de producción.
¿Por qué usar un fragment shader en lugar de imágenes precalculadas?
Ejecutarse en el fragment shader significa que la GPU evalúa la textura de forma independiente para cada píxel en paralelo, por lo que la imagen es independiente de la resolución y nunca muestra costuras de mosaico ni desenfoque al acercar el zoom. También cuesta casi nada de memoria, ya que no se almacena nada, y la textura puede animarse continuamente introduciendo el tiempo en las matemáticas.
¿Qué hace la corrección gamma al final del shader?
Después de calcular el color, se eleva a la potencia 0.4545, que es uno dividido entre 2.2. Esto convierte el color en luz lineal con el que trabajan las matemáticas al espacio sRGB que espera tu pantalla, de modo que los tonos medios se ven correctamente brillantes en lugar de demasiado oscuros. Es un paso final estándar en la salida del shader.
¿Dónde se usan las texturas procedurales en el mundo real?
Están por todas partes en películas y videojuegos 3D: piedra, madera, mármol, agua, nubes, piel y terreno se generan comúnmente en lugar de fotografiarse. Las mismas funciones de ruido impulsan mapas de altura de terreno, superficies planetarias y efectos especiales. El ruido de Voronoi en particular aparece en geometría computacional, modelos de biología celular y mapas de regiones de mundos de videojuegos.
Qué Demuestra
Las texturas procedurales generan cada píxel algorítmicamente en lugar de almacenar un mapa de bits. El bloque de construcción clave es el movimiento browniano fractal (fBm): una suma de ruido a frecuencias progresivamente duplicadas (octavas), cada una con la mitad de amplitud. Esto crea texturas naturalistas con variación en múltiples escalas — desde grandes formaciones de nubes hasta pequeñas rugosidades de superficie. A diferencia de los mapas de bits en mosaico, las texturas procedurales son continuas y están disponibles en cualquier resolución.
Cómo Usarlo
Haz clic en un preajuste de textura para cambiar el modo de shader. El control deslizante de Escala hace zoom en el campo de ruido — una escala pequeña revela estructura grande; una escala grande muestra detalle fino. Velocidad del Tiempo controla la tasa de animación — arrastra a 0 para congelar. El modo Escala de grises revela el valor de ruido en bruto antes del mapeo de paleta. Para Voronoi, cada región coloreada es el territorio de un "punto semilla" aleatorio — un concepto usado en geometría computacional, biología y generación de terreno de videojuegos.
¿Sabías que...?
Ken Perlin inventó el ruido coherente en 1983 mientras trabajaba en la película Tron — más tarde ganó un Premio de la Academia al Logro Técnico por ello. Steven Worley inventó el ruido celular/Voronoi en 1996. Hoy en día, prácticamente todas las películas y videojuegos 3D usan texturas procedurales: la corteza, la piedra, el agua y la piel que ves son en su mayoría funciones matemáticas, no fotografías. Las texturas procedurales en tiempo real se volvieron prácticas con los shaders programables de GPU a principios de la década de 2000.
Texturas procedurales de fragment shader GLSL: mármol, anillos de madera, nubes, fuego, células de Voronoi y lava. Ruido fBm, ruido de Worley, animado con un uniforme de tiempo.
3D · Renderizador Three.js / WebGL · Objetivo 60 FPS · funciona completamente en el cliente, sin instalación