2026 kursierten unter Entwicklern öffentliche Demos, in denen Claude 3D-Szenen direkt im Browser baut. Wir haben ein eigenes Experiment gemacht, um zu sehen, wie weit eine Anfrage reicht: Das Tal, ein 3D-Film von 76 Sekunden mit Steinviadukt, Dampfzug und Dorf, von Claude Opus 5.5 als eine einzige HTML-Datei geschrieben. Sie können ihn als Video ansehen oder live im Browser öffnen.

Dieser Beitrag zeigt, was in der Datei steckt, wie die einzelnen Teile funktionieren, wie wir sie geprüft haben und welcher Fehler nur auf manchen Rechnern auftrat.

Was wir gebaut haben

Der Film dauert 76 Sekunden und besteht aus sechs Einstellungen:

  1. Die Kamera steigt am Hang mit Schafen aus dem Gras, der Titel erscheint.
  2. Totale des Tals aus der Luft. Von den westlichen Hügeln nähert sich der Zug mit einer Rauchfahne.
  3. Untersicht vom Kanalufer: Der Zug fährt über den Viadukt über der Kamera.
  4. Begleitfahrt neben der Lokomotive auf dem Viadukt.
  5. Flug entlang des Kanals durch das Dorf in Richtung Viadukt.
  6. Kranfahrt zurück auf das ganze Tal, mit Abspanntitel.

Alles im Bild ist Code: das Gelände, rund 2,08 Millionen Grashalme, Bäume, Schafe, der Viadukt, Schienen und Schwellen, der Zug mit vier Wagen, Häuser mit Strohdächern, eine Kirche, Kanalboote, Wasser, Rauch, Himmel und Wolken. Auch der Ton wird im Browser synthetisiert. Die Datei hat 1.474 Zeilen. Die einzige Bibliothek ist Three.js r185.

Warum eine einzige HTML-Datei

Eine Datei hat bei dieser Art von Arbeit praktische Vorteile.

  • Sie öffnet sich überall. Doppelklick, Link oder Upload auf einen beliebigen statischen Host genügen. Es gibt keinen Build-Schritt und keinen Asset-Server.
  • Das Modell sieht das ganze Projekt auf einmal. Claude liest die komplette Szene, ändert die Kamera an einer Stelle und den Rauch an einer anderen und hält beides stimmig.
  • Jede Änderung ist ein Text-Diff. Man kann sie prüfen, zurücknehmen und mit früheren Fassungen vergleichen.
  • Das Laden ist leicht. Die Seite lädt eine kleine HTML-Datei und Three.js, der Rest wird auf dem Rechner des Zuschauers berechnet.

Für mmix.biz war ein zusätzlicher Schritt nötig. Die Content Security Policy der Website erlaubt Skripte und Schriften nur von der eigenen Domain, deshalb liegen Three.js und die zwei Schriften direkt neben dem Film und kommen von keinem CDN.

Wie die Szene entsteht

Gelände und Bahnstrecke

Das Land ist ein Höhenfeld von 3 mal 3 km aus Simplex-Rauschen auf einem Raster von 750 mal 750. Ein Talprofil folgt einem gewundenen Kanal, zu beiden Seiten steigen Hügel an, und ein Ring aus Bergen mit Grat-Rauschen schließt den Horizont.

Die Bahnstrecke ist ein Spline quer durch das Tal. Entlang der Strecke wird das Gelände auf Gleishöhe gezogen, so entstehen Dämme und Einschnitte. Wo der natürliche Boden mehr als etwa einen Meter unter die Schienen fällt, baut der Code stattdessen den Viadukt: Er misst die Lücke, teilt sie in gleiche Bogenfelder und extrudiert eine Steinwand mit bogenförmigen Öffnungen.

Zwei Millionen Grashalme

Ein Halm hat fünf Eckpunkte. Die Szene zeichnet ihn rund zwei Millionen Mal per Instancing, und jede Kopie trägt Position, Drehung, Höhe, Breite und Farbe. Der Wind läuft im Vertex-Shader: ein langsames Rauschfeld für Böen, ein schnelles Zittern pro Halm und eine Biegung, die mit dem Quadrat der Höhe am Halm zunimmt.

Der Shader ist in ein Standard-Lambert-Material von Three.js eingebaut, daher bekommt das Gras dieselben Schatten und denselben Nebel wie alles andere. Ein kleiner Gegenlicht-Anteil lässt die Halmspitzen leuchten, wenn die Kamera zur Sonne blickt. Das Gras liegt auf einer eigenen Render-Ebene, die der Spiegelungsdurchgang des Wassers auslässt, so bleiben die Spiegelungen günstig.

Licht, Nebel und Farbkorrektur

Die Sonne steht tief im Nordwesten, die meisten Einstellungen blicken ins Licht. Wir haben den Nebel-Code ersetzt, den Three.js in jedes Material einfügt: Die Nebelfarbe wird wärmer, wo der Blickstrahl zur Sonne zeigt. Ferne Grate nahe der Sonne werden golden, die in der Gegenrichtung bleiben kühl.

Nach dem Zeichnen der Szene legt ein Bloom-Durchgang Glanz um helle Stellen, und ein abschließender Farbdurchgang fügt einen leichten Farbsaum an den Rändern, Split-Toning, Vignette, Filmkorn und Letterbox-Balken im Format 2,39:1 hinzu.

Kamera nach Einstellungsliste

Die Kamera arbeitet wie eine Einstellungsliste. Jede Einstellung hat ein Zeitfenster, einen Bildwinkel, einen Schattenbereich und eine Funktion, die Kameraposition und Blickpunkt liefert. Bewegungen sind weich, eine kleine Handkamera-Drift kommt dazu, und die Kamera darf nie unter den Boden.

Die Begleitfahrt wird aus dem Zug selbst berechnet: Die Kamera umkreist die aktuelle Position der Lok auf den Schienen. Die Schattenkarte folgt jeder Einstellung, und ihr Mittelpunkt rastet auf ganze Schatten-Texel ein, damit die Schatten beim Kameraflug nicht flimmern.

Zug, Rauch und Ton auf einer Uhr

Die Position des Zuges ist eine Funktion der Filmzeit: die zurückgelegte Strecke entlang des Gleises bei fester Geschwindigkeit. So lässt sich jedes Bild exakt wiederholen, was für den Videoexport wichtig ist.

Die Räder drehen sich um Strecke geteilt durch Radius. Jede Vierteldrehung der Treibräder stößt einen Rauchballen aus dem Schornstein und zwei Dampfwolken aus den Zylindern. Dasselbe Ereignis spielt im Soundtrack einen Dampfstoß. Die Rauchpartikel werden auf Windgeschwindigkeit abgebremst, wachsen und verblassen in etwa zehn Sekunden.

Der Ton entsteht mit WebAudio: gefiltertes Rauschen für die Dampfstöße, kurze Klicks an Schienenstößen alle 18 Meter, eine dreistimmige Pfeife, Wind, Vogelstimmen, wenn die Kamera nah am Boden ist, und leise Akkorde mit Glockentönen über einen generierten Nachhall. Lautstärke und Stereoposition des Zuges folgen seiner Entfernung und Richtung zur Kamera.

Wie wir geprüft haben

Jedes Urteil über den Film fiel an gerenderten Bildern. Die Datei hat einen Aufnahmemodus: Ein URL-Parameter wählt einen beliebigen Moment des Films, und ein kleiner Skript-Hook rendert ihn exakt. Ein Chromium ohne Fenster auf der Workstation des Studios, mit GPU-Zugriff über ANGLE und Vulkan, nahm Standbilder jeder Einstellung auf.

Die erste Durchsicht fand Probleme, die man im Code übersieht: Nebelschichten, die das Tal milchig machten, Hauswände, die ins Weiß ausbrannten, zu starke Farbsäume, einen Kanal, der wie eine Betonrinne aussah, und Schornsteinrauch, der wie Wattebäusche auf den Dächern lag. Nach jeder Korrekturrunde folgten neue Standbilder.

Danach wurde der ganze Film gerendert: 2.280 Bilder in 1920 mal 1080 bei 30 Bildern pro Sekunde, in etwa drei bis vier Minuten. Ein Kontaktbogen über den ganzen Film prüfte Schnitt und Bewegung. In Echtzeit hält die Szene auf einer RTX 3060 rund 60 Bilder pro Sekunde.

Der Fehler, den nur manche Rechner zeigten

Nach der ersten Fassung meldete der Inhaber des Studios schwarzes Blinken in der Mitte des Films. Unser Video hatte keine schwarzen Bilder. Der Unterschied lag im Grafik-Backend: Unsere Tests liefen auf Vulkan, das Flackern trat auf OpenGL auf.

Wir haben es reproduziert, indem wir den Film in Echtzeit auf dem OpenGL-Backend abspielten und in jedem Bild Pixel auslasen. Ab Sekunde elf waren mehr als 1.000 von etwa 4.600 Bildern schwarz.

Die Ursache war eine Zeile Arithmetik. Das Verhältnis von Alter zu Lebensdauer eines Rauchpartikels konnte im letzten Bild knapp über 1 liegen. Eine negative Zahl hoch einem Bruch ergibt in JavaScript NaN, und das Partikel bekam eine ungültige Größe und Transparenz. Unter OpenGL zeichnete dieses Partikel trotzdem ein Pixel. Der Bloom-Durchgang verwischte das ungültige Pixel dann über große Teile des Bildes.

Die Korrektur begrenzt das Verhältnis auf 1 und lässt den Shader jedes Fragment verwerfen, dessen Transparenz einen Vergleich nicht besteht, was auch NaN abfängt. Dieselbe Messung zeigte danach null schwarze Bilder. Die praktische Lehre: Echtzeit-Wiedergabe auf mehr als einem Grafik-Backend testen, denn eine Offline-Aufnahme kann sauber aussehen, während ein Live-Browser flackert.

Was die Veröffentlichung brauchte

Für diese Website haben wir:

  • eine Fassung ohne eingebrannte Titel gerendert, damit ein Video für alle fünf Sprachen passt;
  • sie in zwei Durchgängen mit etwa 1,9 Mbit/s kodiert: 18 MB, unter der Grenze von Cloudflare Pages von 25 MB pro Datei;
  • eine Seite in fünf Sprachen mit strukturierten Daten für VideoObject und FAQ gebaut;
  • die 3D-Fassung mit Sprachumschaltung und leichterem Gras für Smartphones ergänzt.

Wann sich dieser Ansatz eignet

Jedes Werkzeug hat seine Stärken.

  • Three.js-Szene in einer Datei. Eine stilisierte Szene, die schnell auf einer Website lädt, live im Browser läuft und sich als Video exportieren lässt. Grenzen: stilisierter Low-Poly-Look ohne kinotaugliches Raytracing und spürbare Last auf älteren Smartphones.
  • Blender. Fotorealistisches Rendering, detailliertes Modellieren und Offline-Video. Claude kann Blender auch über einen Model-Context-Protocol-Server steuern.
  • Unity oder Unreal. Große interaktive Welten mit Physik, Animationswerkzeugen und Asset-Pipeline, bei größeren Downloads.

Für eine Hero-Szene auf einer Produktseite, den Flug über eine Location, einen Event-Trailer oder einen kurzen Loop für Social Media reicht eine Szene in einer Datei oft aus. Solche Arbeiten machen wir im Rahmen unserer KI-Content-Systeme.

Film, Video und der Link zur Live-3D-Fassung stehen auf der Seite des Experiments „Das Tal“.