Autor: 希彼赫
Pruébalo en vivo Sobre este proyecto
Bloom es un campo de flores en tiempo real que corre en el navegador: desliza el ratón por el campo, o enciende la cámara y pellizca con ambas manos, y oleadas de flores florecen a lo largo de tu trayecto.
Las flores se renderizan en tiempo real a partir de modelos 3D cargados en remoto, con radio de influencia, velocidad de floración, brillo, tamaño de flor, densidad y velocidad de oleada ajustables: una pieza interactiva jugable y un banco de pruebas de cómo rinden los recursos 3D en tiempo real.
Puntos clave
- Desliza el ratón por el campo y oleadas de flores florecen a lo largo de tu trayecto
- Arrastra para orbitar la cámara y usa la rueda para hacer zoom: encuadra el campo desde cualquier ángulo
- Enciende la cámara y pellizca dos veces para que todo el campo florezca a la vez
- Brillo, densidad y velocidad de las oleadas, además del tamaño y la saturación de cada flor, son ajustables; pulsa H para ocultar la interfaz y grabar una toma limpia
Análisis técnico
Recursos 3D · Tripo text-to-3D
Las seis flores del campo — blanca, amarilla, margarita, morada, azul y roja — salen directamente de Tripo text-to-3D: escribes un prompt y recibes un GLB con materiales PBR. Cada flor se mantiene entre 2.000 y 8.000 triángulos — no por perfeccionismo visual, sino porque el campo planta casi cinco mil a la vez: cuanto más ligeros los modelos, más estable el frame rate.
Todos los modelos siguen la misma convención: frente hacia +Z, base en el origen, alrededor de una unidad de alto. El código nunca necesita un caso especial para ninguna flor — pones una nueva y simplemente funciona.
Miles en pantalla · InstancedMesh
Que miles de flores broten a la vez en el navegador se debe a InstancedMesh de Three.js: cada especie conserva una sola geometría y un solo material, y el instancing se encarga de copiar — unas 4.900 flores por defecto, un draw call por especie, mucha menos carga de la que cabría esperar.
La animación de floración tampoco toca los modelos: se actualiza la escala de cada instancia en instanceMatrix y cada flor crece desde un brote a ras de suelo hasta abrirse del todo.
Oleadas de flores · raycasting + frente de onda radial
Cuando el ratón pasa por encima, un Raycaster proyecta el cursor sobre el prado y el punto de impacto se convierte en el origen de la oleada; cada flor mira a qué distancia está de ese punto para decidir cuándo abrirse — primero las cercanas, luego las lejanas, extendiéndose anillo a anillo. Suena complejo, pero en el fondo es un simple cálculo de distancia.
Control por gestos · MediaPipe Hands
Con la cámara encendida, MediaPipe Hands sigue en tiempo real 21 puntos clave de la mano. El código vigila una sola cosa: si el pulgar y el índice llegan a juntarse — dos pellizcos y todo el campo florece desde donde apunta tu dedo. Para evitar falsos disparos, solo cuenta la mano derecha.
Resplandor · postprocesado bloom
Ese halo de ensueño sobre la escena viene del postprocesado UnrealBloomPass: el resplandor global está en 0,46 por defecto — luminoso sin quemarse. Cada especie de flor conserva además sus propios ajustes de brillo y saturación, así que puedes subir la atmósfera al máximo sin apagar el color propio de ninguna flor.
