Autore: 希彼赫
Provalo dal vivo Su questo progetto
Bloom è un campo di fiori in tempo reale che gira nel browser: passa il mouse sul campo, oppure accendi la camera e fai pinch con entrambe le mani, e ondate di fiori sbocciano lungo il tuo percorso.
I fiori sono renderizzati in tempo reale da modelli 3D caricati da remoto, con raggio d'influenza, velocità di fioritura, bagliore, dimensione dei fiori, densità e velocità delle ondate regolabili — un'opera interattiva giocabile e un banco di prova per come gli asset 3D si comportano in tempo reale.
Punti salienti
- Passa il mouse sul campo e ondate di fiori sbocciano lungo il tuo percorso
- Trascina per orbitare la camera e scorri per lo zoom — inquadra il campo da qualsiasi angolo
- Accendi la camera e fai pinch due volte per far fiorire tutto il campo in una volta
- Bagliore, densità, velocità delle ondate, più dimensione e saturazione di ogni fiore sono regolabili; premi H per nascondere l'interfaccia e registrare una ripresa pulita
Analisi tecnica
Asset 3D · Tripo text-to-3D
I sei fiori del campo — bianco, giallo, margherita, viola, blu e rosso — escono direttamente da Tripo text-to-3D: scrivi un prompt e ottieni un GLB con materiali PBR. Ogni fiore resta tra 2.000 e 8.000 triangoli — non per perfezionismo estetico, ma perché il campo ne pianta quasi cinquemila alla volta: più i modelli sono leggeri, più il frame rate è stabile.
Tutti i modelli seguono la stessa convenzione: fronte verso +Z, base nell’origine, circa un’unità di altezza. Il codice non ha mai bisogno di casi speciali per un fiore — ne monti uno nuovo e funziona e basta.
Migliaia sullo schermo · InstancedMesh
Far sbocciare qualche migliaio di fiori insieme nel browser è merito di InstancedMesh di Three.js: ogni specie conserva una sola geometria e un solo materiale, alle copie pensa l’instancing — circa 4.900 fiori di default, un draw call per specie, molto meno carico di quanto ci si aspetti.
Nemmeno l’animazione di fioritura tocca i modelli: si aggiorna la scala di ogni istanza in instanceMatrix e ogni fiore cresce da germoglio rasoterra a piena fioritura.
Ondate di fioritura · raycasting + fronte d’onda radiale
Al passaggio del mouse, un Raycaster proietta il cursore sul prato e il punto d’impatto diventa l’origine dell’ondata; ogni fiore guarda quanto dista da quel punto per decidere quando aprirsi — prima i vicini, poi i lontani, propagandosi anello dopo anello. Sembra complicato, ma il cuore è un semplice calcolo di distanza.
Controllo gestuale · MediaPipe Hands
Con la fotocamera accesa, MediaPipe Hands traccia in tempo reale 21 punti chiave della mano. Il codice guarda una cosa sola: se pollice e indice si stringono — due pizzichi e l’intero campo fiorisce dal punto esatto che indica il tuo dito. Per evitare falsi trigger, conta solo la mano destra.
Bagliore · post-processing bloom
Quell’alone sognante sulla scena arriva dal post-processing UnrealBloomPass: il bagliore globale è a 0,46 di default — luminoso senza bruciare. Ogni specie di fiore tiene inoltre le proprie manopole di glow e saturazione, così puoi spingere l’atmosfera al massimo senza coprire il colore proprio di nessun fiore.
