Kino-3D-Video (cinematic-3d-video)

Kino-3D-Video

Claude kann keine Videopixel direkt erzeugen, aber es kann eine 3D-Szene als Code schreiben, diese Bild für Bild rendern und die Bilder codieren. Diese Skill ist genau diese Pipeline.

Szene (HTML + Three.js)  -- window.seek(t) -->  scripts/render.mjs  -->  Headless-Chrome-Screenshots  -->  ffmpeg  -->  MP4

render.mjs bewegt eine virtuelle Uhr statt in Echtzeit aufzunehmen. Das Ergebnis ist auf jedem Rechner identisch, und eine schwere Szene kann nicht stottern; sie rendert nur langsamer. Deshalb muss eine Szene eine reine Funktion der Zeit sein (siehe "Szenenregeln").

1. Überprüfe zuerst die Werkzeuge

node -v        # 22 oder neuer (render.mjs verwendet den integrierten WebSocket)
ffmpeg -version

Chrome, Edge oder Chromium müssen installiert sein (werden automatisch gefunden; setze CHROME_PATH, um zu überschreiben). Three.js wird von einem CDN durch die Szene geladen, daher benötigt der Rechner, der rendert, Internetzugang, es sei denn, Three.js ist lokal eingebunden (siehe references/troubleshooting.md). Falls ein Werkzeug fehlt, teile dem Benutzer genau mit, was installiert werden muss, und höre auf, Workarounds zu erraten. Blender wird nur für den fotorealistischen Pfad benötigt.

Führe den abhängigkeitsfreien Rauchtest einmal aus, wenn der Rechner neu ist. Er bestätigt, dass Chrome, WebGL und ffmpeg alle funktionieren, sodass jedes spätere Problem in der Szene und nicht in der Einrichtung liegt:

node <skill-verzeichnis>/scripts/render.mjs <skill-verzeichnis>/templates/smoke-test.html --out smoke.mp4 --dauer 2 --breite 640 --höhe 360

2. Arbeitsablauf

1. Halte das Briefing fest in ein oder zwei Sätzen: Thema, Stimmung, Länge, Seitenverhältnis, Text, Audio. Wenn der Benutzer offene Punkte lässt, wähle Standardwerte und sage, was du gewählt hast: 1920x1080, 30 fps, 8-12 s, dunkler Hintergrund, ein Heldenobjekt, eine Kamerabewegung, ein Titel. Vertikal (TikTok/Reels/Kurzfilme) ist 1080x1920. Mehr als eine kurze Frage vor dem Start zu stellen, lohnt sich selten; ein erster Render ist die beste Frage.
2. Starte mit dem Starter. Kopiere templates/starter/ in das Arbeitsverzeichnis (cp -r) und bearbeite index.html. Es enthält bereits den Renderer, Tone-Mapping, Studio-Reflexionen, Bloom, Schatten, gesäte Partikel, einen Kamerapfad, einen HTML-Titel-Overlay und den Timeline-Hook. Ersetze das Heldenobjekt, die Farbpalette, den Kamerapfad und den Text; behalte die Infrastruktur bei.
3. Betrachte Standbilder, bevor du das Video renderst. Rendere einige Frames in voller Größe zu den geschäftigsten Momenten und öffne sie (lies die PNGs):

   node <skill-verzeichnis>/scripts/render.mjs mein-video/index.html --stills 0,2,4,6,7.5 --out mein-video/stills
   

   Korrigiere hier Komposition, Belichtung, Farbe und Textlesbarkeit. Ein Standbild dauert ein oder zwei Sekunden; ein vollständiger Render dauert Minuten.
4. Rendere einmal. Wähle die Einstellungen und rendere dann das gesamte Video:

   node <skill-verzeichnis>/scripts/render.mjs mein-video/index.html --out mein-video/video.mp4 --breite 1920 --höhe 1080 --fps 30 --skalieren 2
   

   --skalieren 2 rendert in 2-facher Auflösung und skaliert herunter, was flimmernde Kanten entfernt (nur für den finalen Render sinnvoll). Lange Render-Vorgänge sollten im Hintergrund laufen, wobei der Fortschritt abgefragt wird, damit der Benutzer nie vor einem stummen Terminal sitzt.
5. Überprüfe die Datei, nicht das Log. ffprobe für Dauer, Größe und fps; extrahiere zwei oder drei Bilder aus dem MP4 (ffmpeg -ss 3 -i video.mp4 -frames:v 1 check.png) und betrachte sie. Übergib dann das MP4 plus den Szenenordner, damit der Benutzer Anpassungen vornehmen kann.
6. Überarbeitungen ändern die Szene und rendern neu. Verwende --start/--end, um bei der Iteration über einen bestimmten Moment nur einen Bereich erneut zu rendern.

3. Szenenregeln (und warum)

• Alles, was animiert ist, ist eine reine Funktion von t Sekunden, gesetzt innerhalb von update(t). Kein Math.random() (verwende den gesäten rng()), kein Date.now(), kein clock.getDelta(), kein akkumulierender Zustand zwischen Frames. Der Renderer kann seek mit jeder beliebigen Zeit in beliebiger Reihenfolge aufrufen, und eine Vorschau im Browser muss exakt mit dem Video übereinstimmen.
• Der Seitenvertrag ist window.seek(t) (synchron zeichnen), window.__duration (Sekunden) und window.__ready = true, sobald Ressourcen geladen sind. installTimeline() in lib/stage.js erledigt alle drei. Details in references/contract.md.
• HDR-Farben über 1.0 lassen Dinge leuchten. Bloom erfasst nur Pixel, die heller als sein Schwellenwert sind, daher verwenden emittierende Teile new THREE.Color(hex).multiplyScalar(3..6); gewöhnliche Oberflächen bleiben unter dem Schwellenwert.
• Text ist HTML/CSS über der Leinwand (der Screenshot enthält die Seite). Er ist bei jeder Auflösung gestochen scharf, benötigt keine Schriftdateien und animiert mit einfachen Stiländerungen innerhalb von update(t).
• Lade Ressourcen mit await vor dem Setzen von __ready (GLTF-Modelle, Texturen, Schriftarten). Ein Frame, der gerendert wird, bevor eine Ressource eintrifft, ist ein permanenter Fehler im Video.
• Behalte eine einzige Lichtgeschichte: ein Schlüssellicht, ein oder zwei farbige Randlichter und bildbasierte Reflexionen. Reflektierende Materialien (Metall, Glas, Klarlack) auf einem dunklen, leicht reflektierenden Boden sorgen dafür, dass es sich eher wie "3D-Animation" anfühlt als wie "Web-Demo". references/cinematography.md enthält die Rezepte für Kamerafahrten, Tempo, Easing, Beleuchtung und Farbe.

4. Mehrere Szenen, Audio, andere Formate

• Multi-Szenen-Videos: Rendere jede Szene in ein eigenes MP4 mit identischer Größe, fps und Encoder-Einstellungen und füge sie dann ohne Neucodierung zusammen: Schreibe eine list.txt mit file 'a.mp4'-Zeilen und führe aus ffmpeg -f concat -safe 0 -i list.txt -c copy out.mp4. Setze Überblendungen innerhalb der eigenen Timeline einer Szene (die letzte Sekunde einer Szene und die erste Sekunde der nächsten blenden beide durch Schwarz/Farbe), anstatt fertige Dateien zu mischen, was alles doppelt codieren würde.
• Audio: --audio track.mp3 mischt es hinein und schneidet es auf die Videolänge zu. Um später nur den Ton zu ändern: ffmpeg -i video.mp4 -i new.mp3 -map 0:v -map 1:a -c:v copy -shortest out.mp4.
• GIF / WebM / kleinere Kopie: Codiere das fertige MP4 mit ffmpeg neu; rendere nie für eine Formatänderung neu.
• Eine Szene ändern bedeutet, die Datei dieser Szene erneut zu rendern (und die nächste nur, wenn eine Überblendung darin enthalten ist).

5. Wann stattdessen Blender verwenden

Verwende Blender (references/blender.md, templates/blender/render_blender.py) nur, wenn das Briefing etwas benötigt, das eine Echtzeit-Engine nicht gut vortäuschen kann: path-traced Glas und Kaustiken, volumetrisches Licht, Unterhaut, Flüssigkeits-/Stoff-/Rauchsimulation oder vollständig fotorealistische Produktaufnahmen. Es ist pro Frame viel langsamer und benötigt Blender 4+; für alles andere liefert Three.js in einem Bruchteil der Zeit und mit schnellerer Iteration gute Ergebnisse.

Referenzdateien

Datei	Lies sie, wenn
references/contract.md	beim Schreiben einer Szene von Grund auf, beim Laden von Modellen/Texturen oder beim Debuggen von "__ready nie gesetzt"
references/cinematography.md	um das Ergebnis gut aussehen zu lassen: Kamera, Licht, Materialien, Easing, Tempo, Farbe, Text, Partikel
references/troubleshooting.md	bei schwarzen Frames, langsamen Render-Vorgängen, CDN/Offline-Setup, Windows/macOS/Linux-Besonderheiten, ungewöhnlichen Größen
references/blender.md	für fotorealistische Arbeiten oder Simulationen
scripts/render.mjs	alle Optionen: node scripts/render.mjs --help