3D Alpine Forest
Ein kleines Experiment zu prozeduralem 3D, scrollgesteuertem Erzählen und visueller Arbeit mit KI.
Entstanden ist eine einzige durchgehende Reise durch ein Alpental in der Dämmerung. Beim Scrollen folgt die Kamera einem Fluss durch sechs Kapitel und bewegt sich dabei Schritt für Schritt auf die untergehende Sonne zu.
Die ganze Szene ist mit Three.js gebaut, und alles, was zu sehen ist, entsteht im Code. Es gibt keine externen 3D-Modelle, Texturen, Bilder oder fertigen Umgebungen.
Die Landschaft von Grund auf bauen
Gelände, Fluss, Bäume, Felsen, Gras, Blumen, Partikel in der Luft, Sonne und Sterne entstehen alle erst, wenn die Szene geladen wird.
Selbst die Textur der Blüten wird dynamisch im Browser erzeugt. Ein kleines Canvas zeichnet das Sprite aus den Farben der Szenenpalette, womit es visuell immer stimmig bleibt. Details wie die Zeichnung von Fels und Rinde entstehen direkt in Shadern, statt als Bildtexturen geladen zu werden.
Three.js bildet die Grundlage der 3D-Szene; darüber hinaus nutzt das Projekt einen ganz normalen Build-Prozess und wird über GitHub und Netlify ausgeliefert. Die wesentliche Einschränkung war nicht, auf Werkzeuge zu verzichten, sondern auf fertige visuelle Assets. Die Landschaft selbst, ihre Materialien und sämtliche visuellen Details entstehen aus Code.
Ein einziges Höhenfeld bildet das Fundament der Landschaft. Es bestimmt die Geometrie des Geländes, wo Bäume und Felsen stehen können und wie das Wasser mit dem umliegenden Boden zusammenspielt. Das Ufer ist deshalb nirgends von Hand gezeichnet. Es ergibt sich von selbst dort, wo das Gelände auf den Wasserspiegel trifft — und das gibt dem Fluss seinen unregelmässigen Lauf durch das Tal.
Auch das Licht funktioniert etwas anders. In der Three.js-Szene gibt es keine klassischen Lichtquellen. Der visuelle Stil baut stattdessen auf flachen Farben, Tiefenebenen und atmosphärischem Dunst auf. Objekte gleiten mit zunehmender Entfernung allmählich in die Farbe des Himmels.
Die Sonne ist der visuelle Bezugspunkt, und der Fluss ist der hellste Akzent der Komposition.
Manches in der Szene ist wörtlicher gemeint, als es aussieht. Der Sonnenstand wird aus echten astronomischen Daten für 46,5° Nord berechnet. Die Ausrichtung des Tals wurde so angepasst, dass die Komposition dem Sonnenstand um 19:46 Uhr am 21. Juni entspricht. Am Nachthimmel stehen ausserdem 1630 echte Sterne bis Magnitude 5,0.
Visuelles gemeinsam mit KI bauen
Ein grosser Teil des Experiments bestand darin, herauszufinden, wie sich an einer visuellen Szene gemeinsam mit einer KI arbeiten lässt, die das fertige Bild selbst nicht zuverlässig beurteilen kann.
Das hat die Arbeitsweise verändert.
Statt uns nur auf Aussagen wie «das kommt näher hin» zu verlassen, haben wir versucht, möglichst viele visuelle Entscheidungen messbar und vergleichbar zu machen.
Referenzbilder wurden dafür in Masken für die einzelnen Bereiche der Komposition zerlegt. Interessanterweise funktionierte es besser, diese Masken von Hand anzulegen, als die automatischen Segmentierungsverfahren, die wir getestet haben.
Headless-Renderings liessen sich anschliessend mit der Referenz vergleichen — über Messwerte wie die mittlere Farbabweichung, die Form der Silhouette und die Helligkeit innerhalb bestimmter Bereiche.
Dazu kam ein einfacher Test, der die Sonne über den Himmel wandern lässt und pro Kapitel misst, wie viel Laub überhaupt keine Schattierung erhält. So liess sich prüfen, ob eine Szene, die auf eine bestimmte Tageszeit hin gebaut ist, auch bei wechselndem Licht noch funktioniert.
Nichts davon ersetzt den Blick auf das Ergebnis. Es macht die einzelnen Durchgänge nur nützlicher.
Beurteilt wird am Ende weiterhin mit den Augen — nur kommt die Szene bis dahin in einem vorhersehbaren Zustand an. Eine einzige URL kann Kapitel, Tageszeit und jede Einstellung festhalten, die von der finalen Fassung abweicht. Damit lässt sich genau reproduzieren, worüber gerade geurteilt wird.
Millionen von Dreiecken im Griff behalten
Auch die Performance wurde Teil des Experiments.
Auf das Gras entfallen rund 95 % der Geometrie der Szene, verteilt über mehrere Millionen sichtbare Dreiecke in der Landschaft. Schon kleine Änderungen an Dichte oder Sichtweite haben deshalb überraschend grosse Wirkung.
Bevor weitere Instanzen in die Szene kamen, haben wir angefangen, ihre Kosten vorher abzuschätzen. In einer prozeduralen Umgebung kann eine scheinbar kleine Entscheidung, multipliziert über ein ganzes Tal, schnell zum Teuersten auf dem Bildschirm werden.
Diese Einschränkung hat am Ende das visuelle Design ebenso geprägt wie den Code.