Nr. 05 · Fallstudie · Live-3D-Szene
Unter Segel
Eine live gerenderte 3D-Szene auf See, aus einem Prompt von fünf Sätzen
Eine Segeljacht auf See, live in deinem Browser gerendert: Wellen, berechnet wie in Filmstudios, ein Himmel, beleuchtet nach der Physik des Sonnenlichts, und vier Wetterlagen. Claude Code hat alles aus einem einzigen kurzen Prompt gebaut, ohne 3D-Modelle, ohne Fotos und ohne Bilddateien.
Dein Browser kann die 3D-Szene nicht live zeigen, darum siehst du hier ein Standbild daraus.
So bedienst du es
- Ziehen
- Sieh dir das Boot von allen Seiten an. Auf dem Handy wischst du seitlich.
- Zwei Finger
- Näher heran oder weiter weg. Am Computer mit Ctrl (Strg) und Scrollen, im Vollbild auch nur mit Scrollen.
- Wetter
- Goldene Stunde, Gewitter, Seenebel oder Mondlicht. Das Meer ändert sich mit dem Wind.
- 1 bis 4
- Sobald du in die Szene geklickt hast: Wetter wechseln. Mit den Pfeiltasten schaust du dich um, mit + und - zoomst du, mit der Leertaste hältst du an.
Was du hier siehst
Alles in diesem Bild entsteht durch Code, genau jetzt, in deinem Browser. Es gibt kein 3D-Modell eines Boots, kein Foto eines Himmels, kein Video von Wasser und keine Bilddatei. Das Meer, die Wolken, den Rumpf, die Segel und das Logo auf dem Grosssegel berechnet der Grafikchip deines Geräts, Dutzende Male pro Sekunde. Wechsle das Wetter und schau, was sich ändert: Die Wellen bauen sich mit dem Wind auf oder flachen ab, das Licht folgt der Sonne oder dem Mond, und im Gewitter gibt es Regen, Schaumkronen und Blitze.
Ich wollte sehen, wie weit Claude Code mit 3D kommt. Also habe ich fünf Sätze geschickt (sie stehen unten auf dieser Seite) und Claude Code machen lassen. Einer der fünf hat einen Tippfehler: «floating in the clean». Claude Code hat das als offenes Meer gelesen und einfach weitergearbeitet.
Was der Prompt offenliess
Der Prompt verlangt ein Boot, so fotorealistisch wie möglich, in filmreifem Wetter und Licht, mit dem Good AI Guide auf dem Grosssegel. Und er verlangt three.js, eine kostenlose Library für 3D-Grafik im Browser. Alle anderen Entscheidungen hat Claude Code getroffen. Ein paar davon:
Wellen, die sich wie Wellen verhalten. Das Meer wird so berechnet, wie Film- und Gamestudios es machen: Messungen dazu, wie Wind Wellen aufbaut (Ozeanografen nennen das Ergebnis das JONSWAP-Spektrum), werden mit einer schnellen Fourier-Transformation, einem Standardwerkzeug der Signalverarbeitung, in eine bewegte Oberfläche verwandelt, in drei verschiedenen Massstäben und Bild für Bild. Mehr Wind heisst höhere, längere und steilere Wellen, und Schaum, wo die Kämme überkippen.
Ein Boot, das darauf schwimmt. Die längeren Wellen werden ein zweites Mal zusammengerechnet, diesmal auf dem Prozessor, an fünf Punkten unter dem Rumpf, und das Boot folgt ihnen, als hinge es an Federn. Darum stampft und rollt es mit einem gewissen Gewicht, statt jede kleine Welle nachzumachen.
Licht, das der Physik folgt. Der Himmel stammt aus einem Modell, das ein Grafikforscher bei Epic Games 2020 veröffentlicht hat: Es beschreibt, wie Sonnenlicht in Luft, Dunst und Ozon gestreut wird. Deshalb wird die tiefe Sonne orange, deshalb bleibt der Himmel darüber blau, und deshalb ergibt Mondlicht denselben Himmel, nur viel dunkler. Das Boot wird von derselben Sonne beleuchtet, durch dieselbe Luft.
Segel, die leuchten. Segeltuch lässt Licht durch. Mit der Sonne dahinter leuchten die Segel auf, und Nähte und Segellatten zeichnen sich als dunklere Linien ab. Der Aufdruck auf der anderen Seite des Grosssegels scheint ebenfalls durch, schwach und spiegelverkehrt, wie bei einem echten Segel. Jede Seite hat ihren eigenen Aufdruck, so platziert, dass er von dieser Seite aus richtig herum zu lesen ist.
Details, die niemand erwähnt hat. Der Heimathafen des Boots ist Basel, der Heimathafen jeder Jacht, die unter Schweizer Flagge zur See fährt, und am Heck weht die Schweizer Fahne. Das Boot hinterlässt Kielwasser, nachts gehen die Positionslichter an, die Kamera hebt und senkt sich mit der Dünung wie auf einem Kameraboot, und auf einem schmalen Handybildschirm wird der Bildausschnitt breiter, damit das ganze Boot im Bild bleibt.
Am Heck steht auch ein Name: Brilliant New Hire, das brillante neue Teammitglied, das Bild, mit dem ich beschreibe, was KI bei der Arbeit ist. Der Name stammt nicht aus den fünf Sätzen. Claude Code lief im Code dieser Website und konnte meine Notizen zur Website und zu mir lesen, wusste also vom brillanten neuen Teammitglied und davon, dass ich in der Schweiz lebe. Daher kommen der Name, der Heimathafen und die Flagge, und ein frischer Chat mit demselben Prompt liefert dir nichts davon. Genau darum geht es in Deine KI hat keine Ahnung, was dein Unternehmen macht, nur im Kleinen: Was eine KI über dich und deine Arbeit weiss, zeigt sich in dem, was sie macht.
Was nicht echt ist
Manches ist getrickst:
- Die Wolken sind flach: eine gemalte Schicht mit Beleuchtungstricks. Schau sie dir eine Weile an, dann siehst du es.
- Das Boot bewegt das Wasser nicht. Es gibt keine Strömungssimulation: Das Meer wird einfach aus dem Rumpf herausgehalten, und der Schaum ist dort aufgemalt, wo ein echter Rumpf ihn erzeugen würde.
- Die Segel fangen den Wind nicht wirklich ein. Ihre Form kommt aus einer Formel (wie weit der Baum draussen ist, wie stark sich das Segel nach oben hin verdreht) plus ein wenig Flattern.
- Der Regen fällt nur in der Nähe der Kamera, und der Blitz ist ein gezeichneter Effekt.
- Handys und Tablets bekommen eine leichtere Version, manche davon eine noch einfachere: weniger Wellen, einfachere Wolken und keine Spiegelung des Boots im Wasser. Kommen die Bilder dann immer noch zu langsam, senkt die Szene ihre Auflösung von selbst.
Wie es lief
Claude Code hat die Szene geplant, geschrieben und die eigene Arbeit in einer Schleife geprüft: ein Bild in einem Browser ohne Fenster rendern (gesteuert von einem Skript, damit Screenshots möglich waren), den Screenshot anschauen, korrigieren, was falsch war, und von vorn. Diese Schleife hat er rund 40 Mal durchlaufen. Ein paar Dinge, die dabei auffielen:
- Die Sonne war ein schwarzer Punkt. Sie war heller, als das Bildformat speichern konnte, und der Überlauf machte sie schwarz.
- Der Regen war unsichtbar. Jeder Tropfen war von der Kamera abgewandt, und Grafikchips lassen Flächen weg, die sie von hinten sehen.
- Das Gewitter sah zuerst aus wie ein milder grauer Abend. Der Dunst unter der Gewitterwolke wurde beleuchtet, als käme die Sonne dorthin.
- Die Segel hatten Streifen, weil jedes Segel eine einzige Fläche ist und Schatten auf sich selbst warf.
Einer seiner eigenen Tests meldete die Wellen als zu hoch: 2,3 Meter bei einem Wind, für den eine Faustregel aus dem Lehrbuch 1,6 Meter vorhersagt. Claude Code fand heraus, dass die Faustregel und das Wellenspektrum, auf dem die Szene aufbaut, bereits um rund 30 Prozent voneinander abweichen, nahm das Spektrum als Massstab und änderte den Test, nicht das Meer.
Die fertige Szene umfasst rund 6300 Zeilen Code in 19 Dateien, Tests für die Mathematik inklusive. Ich habe keine Zeile davon geändert.
Der Prompt enthält keine Unternehmensdaten, du kannst ihn also mit allem ausprobieren, was du hast, auch mit dem Assistenten, den dir dein Arbeitgeber gegeben hat. Wenn du sehen willst, wie sich die Arbeit mit einem Coding-Agenten anfühlt, würde ich mit Claude Code: Wenn KI aufhört zu reden und anfängt zu handeln anfangen.
Der Prompt, Wort für Wort
Kopieren, einfügen, schauen, was herauskommt
Diese fünf Sätze sind alles, was ich eingetippt habe. Claude Code konnte zusätzlich den Code dieser Website und meine Notizen dazu lesen. Wenn du es ausprobierst, setz den Namen deines eigenen Unternehmens aufs Segel.
For the "What's possible" section, I want to look into your 3D modelling abilities and your prowess with three.js. Build a 3D render of a boat floating in the clean, as high quality and photo realistic as possible. Create cinematic conditions through weather and light. The boat should have Good AI Guide branding on its main sail. Use three.js.
Ein Chat-Assistent wie Claude, ChatGPT oder Gemini liefert dir wahrscheinlich eine einfachere Version in einer einzigen Datei. Für eine Szene wie diese brauchst du eher einen Coding-Agenten wie Claude Code oder Codex, einen, der Dateien anlegen, sie in einem Browser laufen lassen und sich ansehen kann, was er gebaut hat. Hier hat Claude Code diese Schleife aus Rendern und Anschauen rund 40 Mal von sich aus durchlaufen. Wenn deiner das nicht tut, bitte ihn darum.