Ein 3D-Film, den Claude in einer HTML-Datei gebaut hat.
76 Sekunden über einem Tal: ein Steinviadukt, ein Dampfzug, ein Dorf am Kanal und Berge im Dunst. Land, Gras, Wasser, Rauch und Musik erzeugt der Code direkt im Browser-Tab. Die Datei enthält keine Modelle, Texturen oder Tonaufnahmen.
- 76 Sekunden
- 6 Einstellungen
- 1.474 Zeilen Code
- 0 Modelle, Texturen, Aufnahmen
Das Video ist ohne Ton. Der generierte Soundtrack läuft in der 3D-Version.
Was der Code zeichnet
- 01
Land und Gras
Hügel, Felder und Kanal entstehen aus einer Rauschfunktion. Rund zwei Millionen Grashalme biegen sich in einem Windfeld auf der Grafikkarte.
- 02
Viadukt und Zug
Steinbögen, Schienen und Schwellen folgen einer Gleislinie. Die Lokomotive dreht Räder und Treibstangen passend zu ihrer Geschwindigkeit.
- 03
Rauch und Wasser
Rauch und Dampf verlassen den Schornstein in Stößen im Takt der Räder. Der Kanal spiegelt Viadukt und Himmel.
- 04
Licht und Dunst
Tiefe Abendsonne, lange Schatten und ein Dunst, der zur Sonne hin wärmer wird. Letterbox, Filmkorn und Farbkorrektur kommen in einem Durchgang.
- 05
Ton
Dampfstöße im Takt der Räder, Schienenstöße, eine Pfeife, Wind, Vögel und leise Akkorde. Alles mit WebAudio synthetisiert.
Eine Anfrage, dann jedes Bild geprüft
- 01
Der Auftrag
Eine Anfrage beschrieb den Film: ein Tal mit Steinviadukt, ein Dampfzug, ein Dorf am Kanal, Abendlicht und sechs Kameraeinstellungen, alles in einer HTML-Datei ohne geladene Assets.
- 02
Der Bau
Claude Code mit Claude Opus 5.5 schrieb Szene, Kameraskript und Ton als eine Datei auf Three.js r185. Die erste Fassung stand nach weniger als einer Stunde.
- 03
Die Prüfung
Jeder Entwurf wurde als Standbilder und als komplettes Video mit 30 Bildern pro Sekunde gerendert und Bild für Bild geprüft. Auf einer RTX 3060 läuft der Film mit rund 60 Bildern pro Sekunde.
- 04
Die Korrektur
Im OpenGL-Backend von Chrome blinkte das Bild ab Sekunde elf schwarz. Ein Rauchpartikel nach Ende seiner Lebenszeit lieferte eine ungültige Zahl, und der Glow-Durchgang verteilte sie über das ganze Bild. Eine Begrenzung hat es behoben.
Der Build in Zahlen
| Engine | Three.js r185, WebGL 2 |
|---|---|
| Quelle | Eine HTML-Datei, 1.474 Zeilen, 94 KB |
| Gras | Rund 2,08 Mio. instanzierte Halme am Desktop, 0,62 Mio. auf Smartphones |
| Licht | Sonne auf 16°, Schattenkarte 4096 px, ACES-Tonemapping, Bloom |
| Kamera | 6 geskriptete Einstellungen, 76 Sekunden, in Schleife |
| Ton | Synthetisiert mit WebAudio: Dampf, Schienen, Pfeife, Wind, Vögel, Akkorde |
| Tempo | Rund 60 fps auf einer RTX 3060 in einem Fenster von 1600 mal 900 |
| Video | 1080p, 30 fps, H.264, 2.280 Bilder, 18 MB |
Dieselbe Methode für eine Kundenszene
So eine Szene kann ein Produkt, einen Ort oder ein Event zeigen. Sie läuft auf einer Website ohne Plugin und lässt sich Bild für Bild als Video für Social Media exportieren.
- Hero-Szene einer Produktseite
- Flug über eine Location oder einen Ausflugsort
- Event-Trailer aus einer Live-Szene
- Kurze Loops für Social Media
Fragen zum Film
Was brauche ich für die 3D-Version?
Einen aktuellen Browser mit WebGL 2: Chrome, Edge, Firefox oder Safari. Installiert wird nichts.
Läuft es auf dem Smartphone?
Ja. Auf Smartphones pflanzt die Szene rund 620.000 Grashalme statt zwei Millionen, damit sie flüssig bleibt. Ältere Geräte können trotzdem langsam sein.
Wie entstand das Video?
Die Szene rendert jeden Moment exakt auf Anfrage. Wir haben 2.280 Bilder in 1080p aufgenommen und daraus das MP4 auf dieser Seite gebaut.
Könnt ihr so eine Szene für uns bauen?
Ja. Schicken Sie ein kurzes Briefing über die Kontaktseite: was ins Bild soll, wo die Szene läuft und bis wann.
Code: Claude Opus 5.5 in Claude Code. Regie und Prüfung: Marketing MIX.