Auteur: 希彼赫
Essayer en direct À propos de ce projet
Bloom est un champ de fleurs en temps réel qui tourne dans le navigateur : balayez le champ à la souris, ou activez la caméra et pincez des deux mains, et des vagues de fleurs éclosent le long de votre trajet.
Les fleurs sont rendues en temps réel à partir de modèles 3D chargés à distance, avec rayon d'influence, vitesse d'éclosion, halo, taille des fleurs, densité et vitesse des vagues réglables — une pièce interactive jouable et un banc d'essai des performances des assets 3D en temps réel.
Points forts
- Balayez le champ à la souris et des vagues de fleurs éclosent le long de votre trajet
- Faites glisser pour orbiter la caméra et molette pour zoomer — cadrez le champ sous tous les angles
- Activez la caméra et pincez deux fois pour faire fleurir tout le champ d'un coup
- Halo, densité, vitesse des vagues, ainsi que la taille et la saturation de chaque fleur sont réglables ; appuyez sur H pour masquer l'interface et filmer une prise propre
Analyse technique
Assets 3D · Tripo text-to-3D
Les six fleurs du champ — blanche, jaune, marguerite, violette, bleue et rouge — sortent tout droit de Tripo text-to-3D : on écrit un prompt, on récupère un GLB avec matériaux PBR. Chaque fleur reste entre 2 000 et 8 000 triangles — pas par perfectionnisme visuel, mais parce que le champ en plante près de cinq mille à la fois : plus les modèles sont légers, plus le frame rate est stable.
Tous les modèles suivent la même convention : face vers +Z, base à l’origine, environ une unité de haut. Le code n’a jamais besoin de cas particulier pour une fleur — on en ajoute une nouvelle et ça marche, tout simplement.
Des milliers à l’écran · InstancedMesh
Faire éclore quelques milliers de fleurs à la fois dans le navigateur, c’est l’affaire d’InstancedMesh de Three.js : chaque espèce ne garde qu’une géométrie et un matériau, l’instanciation se charge des copies — environ 4 900 fleurs par défaut, un seul draw call par espèce, bien moins de charge qu’on ne l’imagine.
L’animation d’éclosion ne touche pas non plus aux modèles : on met à jour l’échelle de chaque instance dans instanceMatrix, et chaque fleur passe de la pousse au ras du sol à la pleine floraison.
Vagues de floraison · raycasting + front d’onde radial
Quand la souris balaie le champ, un Raycaster projette le curseur sur la prairie ; le point d’impact devient l’origine de la vague. Chaque fleur regarde à quelle distance elle se trouve de ce point pour décider quand s’ouvrir — les proches d’abord, les lointaines ensuite, en cercles concentriques. Ça a l’air sophistiqué, mais le cœur tient dans un simple calcul de distance.
Commande gestuelle · MediaPipe Hands
Caméra allumée, MediaPipe Hands suit en temps réel 21 points de repère de la main. Le code ne surveille qu’une chose : le pouce et l’index se pincent-ils — deux pincements, et tout le champ fleurit à l’endroit exact que pointe votre doigt. Pour éviter les faux déclenchements, seule la main droite compte.
Halo lumineux · post-traitement bloom
Ce halo onirique au-dessus de la scène vient du post-traitement UnrealBloomPass : le glow global est réglé à 0,46 par défaut — lumineux sans jamais brûler. Chaque espèce de fleur garde en plus ses propres réglages de glow et de saturation : on peut pousser l’ambiance à fond sans étouffer la couleur propre de chaque fleur.
