Autor: 希彼赫
Live ausprobieren Über dieses Projekt
Bloom ist ein Blumenfeld in Echtzeit, das im Browser läuft: Fahren Sie mit der Maus über das Feld oder schalten Sie die Kamera ein und machen Sie mit beiden Händen eine Pinch-Geste — Blütenwellen erblühen entlang Ihrer Spur.
Die Blumen werden in Echtzeit aus remote geladenen 3D-Blumenmodellen gerendert, mit einstellbarem Wirkradius, Blühtempo, Leuchten, Blumengröße, Dichte und Wellentempo — ein spielbares interaktives Werk und zugleich ein Prüfstand dafür, wie sich 3D-Assets in Echtzeit verhalten.
Highlights
- Fahren Sie mit der Maus über das Feld, und Blütenwellen erblühen entlang Ihrer Spur
- Ziehen zum Drehen der Kamera, Scrollen zum Zoomen — betrachten Sie das Feld aus jedem Winkel
- Kamera einschalten und zweimal pinchen — schon erblüht das ganze Feld auf einmal
- Leuchten, Dichte, Wellentempo sowie Größe und Sättigung jeder Blume sind einstellbar; mit H blenden Sie die UI für eine saubere Aufnahme aus
Technische Analyse
3D-Assets · Tripo Text-to-3D
Alle sechs Blumen auf dem Feld — weiß, gelb, Gänseblümchen, violett, blau und rot — kommen direkt aus Tripo Text-to-3D: einen Prompt schreiben, ein GLB mit PBR-Materialien zurückbekommen. Jede Blume bleibt bei 2.000–8.000 Dreiecken — nicht aus ästhetischem Perfektionismus, sondern weil das Feld fast fünftausend davon gleichzeitig pflanzt: Je leichter die Modelle, desto stabiler die Framerate.
Jedes Modell folgt derselben Konvention: Ausrichtung nach +Z, Basis im Ursprung, etwa eine Einheit hoch. Der Code braucht für keine einzelne Blume eine Sonderbehandlung — eine neue einsetzen, und es funktioniert einfach.
Tausende gleichzeitig · InstancedMesh
Dass im Browser ein paar tausend Blumen gleichzeitig aufblühen, liegt an InstancedMesh von Three.js: Pro Art gibt es nur eine Geometrie und ein Material, das Kopieren übernimmt das Instancing — standardmäßig rund 4.900 Blüten, ein Draw Call pro Art, deutlich weniger Last, als man erwarten würde.
Auch die Blüh-Animation fasst die Modelle nie an: Der Skalierungswert jeder Instanz wird in der instanceMatrix aktualisiert, und jede Blume wächst vom flachen Spross bis zur vollen Blüte.
Blütenwellen · Raycasting + radiale Wellenfront
Streicht die Maus vorbei, projiziert ein Raycaster den Cursor auf die Wiese; der Auftreffpunkt wird zum Ursprung der Blütenwelle. Jede Blume schaut, wie weit sie von diesem Punkt entfernt ist, und entscheidet danach, wann sie sich öffnet — nahe zuerst, ferne später, Ring um Ring nach außen. Klingt aufwendig, im Kern steckt aber nur eine einfache Distanzberechnung.
Gestensteuerung · MediaPipe Hands
Bei eingeschalteter Kamera verfolgt MediaPipe Hands in Echtzeit 21 Landmarken der Hand. Der Code achtet auf genau eine Sache: ob sich Daumen und Zeigefinger zusammenziehen — zweimal kneifen, und das ganze Feld blüht genau dort auf, wohin die Fingerspitze zeigt. Um Fehlauslösungen zu vermeiden, zählt nur die rechte Hand.
Glow · Bloom-Postprocessing
Der träumerische Schleier über der Szene stammt aus dem UnrealBloomPass-Postprocessing: Der Glow des gesamten Felds liegt standardmäßig bei 0,46 — leuchtend, ohne auszubrennen. Jede Blumenart behält zusätzlich eigene Regler für Glow und Sättigung, sodass sich die Atmosphäre voll aufdrehen lässt, ohne die Eigenfarbe einer Blume zu überdecken.
