ProyectosExperimentos
Ramen humeante
Experimento con React Three Fiber: un bol de ramen con estética de dibujo animado y humo animado con shaders.
- Estado
- Finalizado
- Periodo
- 2024.07
- Tipo
- Shader / efecto visual
- Rol
- Proyecto individual, Desarrollo 3D, Modelado 3D
- Tecnologías
- Three.js
- React
- React Three Fiber
- GLSL
- Enlaces
Contexto y objetivo
Un experimento corto para probar cómo hacer humo estilizado que encaje con una escena toon: materiales con sombreado plano y contornos negros.
Demo
Descripción técnica
El humo son dos planos verticales con un ShaderMaterial propio. En el vertex shader, una textura de ruido Perlin retuerce cada plano alrededor del eje vertical y le suma un desplazamiento de «viento» que crece con la altura; los dos planos giran en sentidos opuestos para dar volumen.
En el fragment shader el ruido se desplaza hacia arriba con el tiempo y los bordes se suavizan con smoothstep. Para que el humo combine con el sombreado toon, la opacidad se cuantiza en dos niveles:
float level1 = step(0.1, smoke);
float level2 = step(0.4, smoke);
float combined = mix(level1, level2, 0.5);
El resto de la escena usa meshToonMaterial y Outlines de Drei, con PresentationControls para girar el bol dentro de un rango limitado.
Resultados y limitaciones
El ruido sale de una textura en lugar de calcularse en el shader, así que el efecto es barato y se mantiene fluido. Al ser planos, el humo se ve mejor de frente: por eso la rotación de la cámara está limitada.

