Ein 3D-Film, der in eine einzige HTML-Datei passt.
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
Die Vorlage
Die Idee stammt aus einer Demo von Lentils (@Lentils80): ein Flug über ein Tal mit Viadukt und Dampfzug in einer Datei, gebaut mit Claude Opus 5.
- 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.
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.
Idee: Lentils (@Lentils80). Code: Claude Opus 5.5 in Claude Code. Regie und Prüfung: Marketing MIX. x.com/Lentils80