Cartoon-3D-Geschichten-Kurzfilm (three.js + Remotion)
Bewährtes Beispiel: The Bridge That Fell for a Song. Es ist ein origineller 67 s langer Kurzfilm über die Broughton-Brücke von 1831 und 74 Soldaten, die im Gleichschritt marschieren.
- Code:
src/videos/bridge/Ihres Remotion-Projekts (KompositionBridgeShort, 1080x1920, 30 fps). - Skript, Stimme und Ton:
~/bridge-short/. - Stil-Recherche:
references/.
Die Stil-Referenz ist ein privat studierter Kanal (references/: STYLE_BIBLE.md, reports/*.md, frames/).
- Diese Videos sind privates Studienmaterial. Laden Sie sie niemals hoch, veröffentlichen oder versenden Sie sie.
- Kopieren Sie niemals deren Skripte, Charaktere oder Einstellungen. Geschichte, Charaktere und Stimme sind IMMER UNSERE EIGENEN.
- Nennen Sie niemals den Namen des Kanals in einer Voice-Over oder Beschreibung.
Geltende Benutzerregeln:
- Keine Untertitel oder Beschriftungen im Video.
- Nur Englisch.
- Stimme: gleichbleibender Tonfall.
- Witze sind recherchierte wahre Fakten.
- Standard-Mix: Musik +3 dB, SFX -6 dB, Stimme unverändert.
- Finaler Export 2K vertikal: 1440x2560,
--scale 1.3333. - Opus max überprüft jeden Schritt.
- Nach jedem Schritt speichern.
- „Einfach machen“, sobald das Skript genehmigt ist.
Pipeline
- Thema und Fakten. Wählen Sie eine überraschende wahre Geschichte mit einer physikalischen Ursache und Wirkung (sie sollte visuell sein) sowie eine einfache alltägliche Analogie, die sie erklärt.
- Schreiben Sie die Fakten mit ihrer Quelle am Anfang von
SCRIPT.md.
- Schreiben Sie die Fakten mit ihrer Quelle am Anfang von
- Skript (~3,7 Wörter/s, 55-70 s). Beat-Formel aus dem Brücken-Kurzfilm:
- Hook: die absurde Tatsache in einem Satz („Vierundsiebzig Soldaten haben eine eiserne Brücke nur durchs Darüberlaufen zum Einsturz gebracht.“).
- Setting: Jahr, Ort, Stolz.
- Action: Eskalation über drei oder vier Beats, jeder etwas größer.
- Snap: der Moment, in dem es bricht.
- Trockene Doppelzeile: „Zum Glück ... / Zum Pech ...“.
- Erklärung: eine physikalische Idee durch eine alltägliche Analogie (das Kind auf einer Schaukel).
- Konsequenz: die Regel, die es geschaffen hat.
- Callback-Twist: das Ende.
- Beschreiben Sie niemals auf dem Bildschirm, was der Zuschauer bereits sieht.
- Stimme. Nehmen Sie
voice.wavauf oder generieren Sie es, erstellen Sie dann die Wortzeitenwords.json(jede Speech-to-Text mit Wortzeiten).- Legen Sie sie im Projektordner ab, z. B.
~/bridge-short/voice/. - Korrigieren Sie die Wortzeiten von Hand. Alles ist auf words.json getaktet.
- Legen Sie sie im Projektordner ab, z. B.
- Einstellungsplan in
story.ts: Kopieren Sietemplates/bridge/(den finalen Brücken-Quellcode, derselbe wiesrc/videos/bridge/Ihres Remotion-Projekts) nachsrc/videos/<name>/, registrieren Sie eine neue Komposition nebenBridgeShortinsrc/Root.tsxund benennen Sie sie um.SHOTS: id, a/b-Frames, Licht Tag/Golden, Crowd-Modus,tauGeschichtszeit.XFADE: Überblendungen bei Orts-/Zeitwechseln.FLASH_AT: ein weißer Blitz nach dem Hook.CAMS: pro-Einstellung Keys{f, dur?, cut?, s: f => {pos, look, fov, roll}}.KICKS: Impact-Flip-Erschütterungen.DOF/dofAt: Linsenunschärfe pro Beat.FOREGROUND: nahe Rahmungs-Props.- Jede visuelle Reaktion erfolgt 0–3 Frames vor ihrem Wort.
- Welt.
lights.ts: LIGHTS plus das LOOK-Sky/River/Cloud-Palette pro Licht.shade.ts: Zweiton-Schattierung unduntone().build.ts: Stadt, Häuser und Kenney-CC0-Kit-Props, neu eingefärbt, mit Sichtlinien-Ausblendung von allem, was eine Kamera blockiert.paint.ts: HD-Canvas2D-bemalte Texturen mit als dunkle Tönungen eingezeichneten Nähten.world.ts: Sky-Shader, Nebel = Horizontfarbe, Fluss, Pose pro Frame, Sonne pro Einstellung eingefroren und kamerarelativ.
- Figuren.
toon.ts: die Canvas2D-Pen-Zeichen-API, 600x1000 Design-Canvas, Sohlen bei y = 975, Bohnenköpfe, Strichglieder, Pflaumen-Variable-Breiten-Umriss, Gesichtsbibliothek.cast.ts: kamerazugewandte Billboards, Menschenmengen, Effektkarten, Blinzeln, Gehzyklen. Alle Billboards gehen auf dieNOINK-Ebene.cardshade.ts: Karten beleuchtet durch das Szenenlicht, keine Emission.
- Post (
Bridge.tsx+ink.ts+lensblur.ts+grade.ts).- Compositor-Reihenfolge: Ink → Lens Pre → Lens Main → Bloom → NEUTRAL Tone Map → Grade (MSAA 4).
- Jeder Pixel-Parameter skaliert mit der Ausgabe-Höhe / 1920.
- Ton (
~/bridge-short/audio/: timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).- Ereignistabelle → synthetisierte SFX plus eine originale Partitur, die unter der Stimme geduckt ist.
- Ausgabe: mix.wav (48 kHz, exakte Länge), Stems und cues.md.
- Fixieren Sie die Zeitkonstanten des Bildes, bevor der Ton erstellt wird. Jede spätere Timing-Änderung bedeutet, den Ton neu zu generieren.
- Look-Checks. Führen Sie
node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5aus.- Setzen Sie
BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx, um eine Sandbox-Kopie zu rendern. - Erstellen Sie Side-by-Side-Vergleiche mit Referenz-Frames mit
python scripts/sbs_sheet.py out.jpg --ours ... --ref .... - Senden Sie sie an einen Opus-Max-Verifizierer: 1–3 Bilder, ein ≤200-Wörter-Urteil.
- Setzen Sie
- Finaler Render.
npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333- Muxen mit
-map 0:v:0 -map 1:a:0(Remotion schreibt eine stille Tonspur). - QA:
python scripts/short_qa.py final.mp4 out/<name>/qa shots.jsonprüft jeden Frame auf Schwarz, Weiß, eingefrorene und Pop-Frames, plus Lautstärke und Sheets. - Beheben Sie alles, was es findet, führen Sie dann ein tiefgehendes Opus-Audit durch.
- Liefern. Senden Sie die finale mp4 als Datei, aktualisieren Sie den Speicher, schreiben Sie Notizen.
Finale Look-Werte (Brücke nach 4 Verifizierer-Durchgängen; alle in templates/bridge/)
Starten Sie jeden neuen Kurzfilm von templates/bridge/ (kopieren nach src/videos/<name>/): Der Look lebt in diesen Werten, die Geschichte lebt in story.ts / build.ts-Layout / cast.ts-Rollen. Opus-Max-Bewertungen am Ende: Farbe Tag 7, Golden 5-6, Beleuchtung 5-6, Tinte 6, Texturen 5-6, Figuren 7, Tiefe 6-7, Komposition 6-7 (von 5/3/4/5/4/7/4/6 zu Beginn).
- Licht-Voreinstellungen (
lights.ts, Sonne kamerarelativ und pro Einstellung eingefroren):- Tag: az 75 / el 48, lit [1.58,1.5,1.33], shade [.30,.29,.36], lift [.05,.06,.11] (kühler Farbton NUR im Schatten), Himmel oben #3e7fd2 → Horizont #b8d0ec, Nebel = Horizont, 25→300 m, uSat 1.08, ~15 % blauer Dunst ab 60 m.
- Golden: az 6 / el 7 (Gegenlicht tiefe Sonne), Key zu #FFB36B ×1,5, violett-blauer Schatten (Fassade ≈ #444380), Himmel #ffc47c → #8a6f8a, Pfirsichnebel nur ab 50 m, Sonnenscheibe #ffcf9e + Bloom, Kontaktklumpen + echte Kartenschatten.
- Albedos (
paint.ts/build.ts): gedämpftes Ziegel / Creme / Ocker / Terrakotta-Häuser mit Sockel, Gesims, Fensterbänken, Hauben, Türstufe, Schornstein + Topf, Höhen 7 / 8,4 / 9,8 m; warmgrau/beiger Stein (Sättigung −35 % von „Märchenbuch“); Ockerholzdeck C* ~51-58 mit fast schwarzen Nähten; Eisen dunkel und entsättigt. Niemals Zitrone, niemals Lavendel beleuchtete Flächen. - Tinte (
ink.ts): #030303, 5,1 px nah (6 m) → 3,3 px fern (90 m) bei 1080x1920, Falten ×0,8 ab 35°, Tiefensprünge ab 1 %, Nebeltönung 0,3 nur fern; Figurenkarten auf EbeneNOINK(sie tragen ihre eigene Pflaumentinte). - Linse (
lensblur.ts+dofAtin story.ts): cInf px bei 1080: Hook/Fluss-CU 15-16, Nahaufnahmen 12-14, MS 10-12, Park 7, Golden Sway 5, Weit-/Luftaufnahmen 0. Fokus auf die Augen der ersten Reihe. - Post (
Bridge.tsx): Ink → Lens Pre → Lens Main → Bloom (thr 1,0, int .5, 6 Ebenen, radius .6) → NEUTRAL Tone Map → Grade; MSAA 4. Filmkorn existiert, ist aber AUS (Referenz misst kein Korn; es vervierfacht die Dateigröße). - Figuren (
toon.ts/cast.ts/cardshade.ts): Bohnenköpfe h/w .94, Pflaumentinte #241726, Augen .26 W auseinander, kein Rouge, 14 Ausdrücke; Erwachsene 3,5 Kopfhöhen; Gehwippen 5 %, Neigung 1-7°, Standfuß 0,8 m Schritt; Blinzeln 0,5-2,3 s; enger Kontaktschatten ~.5 unter den Füßen + Sonnenrichtungsschweif bei Tag; Goldener Rand nur innen (niemals eine versetzte äußere Kopie). - Kamera (
story.ts): Schnitte bei großen Sprüngen, smootherstep-Gleiter 18-40 f, jede Halteposition kriecht (keine statische Halteposition ≥4 f), Flip-Kicks abklingend über 7 f bei Einschlägen, 4-4,6° Rollen, Vordergrund-Props (FOREGROUND) in etwa 1/3 der Einstellungen.
Look-Ziele (gemessen an der Referenz; siehe references/reports/)
- Tinte:
- Weltlinien: etwa 3 px bei 1080 Breite, fast schwarz #0b0a0c, nahezu konstant mit der Entfernung. Nur Silhouetten, Tiefensprünge und Normalfalten. Keine Linie an Wand-/Bodenverbindungen oder am Horizont. Figurenkarten werden niemals von der Welttinte umrandet.
- Figurentinte: dunkles Pflaume #201628-#2f1d28, dicker auf der Unterseite/Schattseite.
- Farbe:
- Tages-Median-Luma ~.57. Nicht-Tinte p5 ~.23 (keine zerdrückten Schwarztöne). Beleuchtetes Chroma C* p90 ~55. Tageshimmel oben ~#5e93d9, Horizont 1,28x heller.
- Golden: Pfirsichhorizont #ffd08a, violett-blaue Schatten (niemals braun), Gegenlicht-Sonne.
- Tiefe:
- DOF auf etwa 1/3 der Bildschirmzeit (CU, MS, Insert), cInf 10-16 px bei 1080, Fokus auf die Augen. Einrichtungs- und Weitwinkelaufnahmen bleiben scharf.
- Nebel = Horizontfarbe, 25→420 m Tag, 20→360 m Golden.
- Bloom nur auf HDR-Emissiven: Schwelle 1.0.
- Kamera:
- Harte Schnitte bei großen Sprüngen. Alles andere ist ein smootherstep-Gleiter von 18-40 f, Spitze ≤ 25 px/f bei 720p.
- Jede Halteposition drückt um 0,15–0,35 %/f herein, mit 0,6 %/f bei Punch-Wörtern.
- Rollen von 4–5°.
- Kein Handheld-Geschwebe. Impact-Shakes wechseln das Vorzeichen jedes Frames und klingen über 7 f ab.
- Figuren:
- Etwa 3,5 Kopfhöhen groß, Beine 1,4 KH.
- Strichglieder etwa 0,055 der Kopfbreite, Tintenpunkt-Hände.
- Bohnenkopf (h/w ~0,93, schmaleres Kinn, spitzere Krone).
- Kein Rouge oder Augen-Highlights. Gesichter bei Helligkeit ~.93.
- Gehwippen 3–7 %, Neigung 1–7°, Standfüße.
- Blinzeln alle 0,5–2,3 s, Dauer 4 f.
Look-Match-Schleife (wie der Brücken-Look erreicht wurde; wiederverwenden für jeden „Mach es aussehen wie X“-Durchlauf)
- Zuerst die Referenz messen. Ein Analyse-Agent pro Thema (Bewegung, Tiefe, Texturen, Figuren, Beleuchtung, Umrisse, Grading), jeder schreibt Zahlen, keine Adjektive, in
references/reports/<topic>.md. Gemeinsames Briefing:compare/CONTEXT.md. Die Reports sind die Quelle der Wahrheit für jeden folgenden Agenten. - Sandboxes, ein Besitzer pro Datei. Kopieren Sie den Projektordner nach
src/videos/<name>_{cam,world,mat,char,post}mit Einträgensrc/sandboxes/<n>/index.tsx(gleichesindex.tsxwie main, nur der Import-Pfad geändert). Besitzverhältnisse für die Brücke:- cam: story.ts (Kamera-Keys, Schnitte, Kicks, DOF-Tabelle, Vordergrund-Props)
- world: world.ts, lights.ts, shade.ts, grade.ts (Sonne, Himmel, Nebel, Fluss, Farbe, Grading)
- mat: paint.ts, build.ts (bemalte Texturen, Gebäude, Props)
- char: toon.ts, cast.ts, cardshade.ts (Figurenzeichnung, Posen, Kartenbeleuchtung, FX-Karten)
- post: ink.ts, Bridge.tsx, lensblur.ts (Umriss-Durchlauf, Komponist, Linsenunschärfe, Bloom)
Agenten bearbeiten nur ihre eigenen Dateien in ihrer eigenen Sandbox und rendern Standbilder mit
BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<name>/<n>/x_ <frames> 0.5.
- Merge mit
python scripts/bridge_merge.py [cam,world,mat,char,post](sichert main inbackup/bridge_<time>/, kopiert nur besessene Dateien). Dannnpx tsc --noEmit(filtern auf den Projektordner), dann jede Sandbox von main neu abgleichen (cp -f src/videos/<name>/* src/videos/<name>_<n>/) vor der nächsten Runde. - Verifizieren mit einem frischen Opus-Max-Agenten: Side-by-Side-Sheets (
python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2), jede Kategorie aus 10 bewerten (Farbe Tag / Golden, Beleuchtung, Tinte, Texturen, Figuren, Tiefe, Komposition) plus eine nummerierte Fehlerliste mit Frame-Nummern. Ordnen Sie jede Korrektur dem Dateibesitzer zu und setzen Sie den Agenten dieses Besitzers mit SendMessage fort (behält seinen Kontext). Brücken-Bewertungen: Runde 1 5/3/4/5/4/7/4/6 → Runde 2 5/4/5/6/4/7/6/6 → Runde 3 siehe Notizen. - Verträge zwischen Besitzern leben in exportierten Konstanten (z. B.
NOINK-Ebene aus ink.ts,dofAt/FOREGROUNDaus story.ts,LIGHTS/LOOKaus lights.ts). Das Ändern eines Vertrags bedeutet, jeden Besitzer, der ihn liest, zu informieren.
Fallstricke
- Kenney-Naturkit-Materialien sind türkis: Färben Sie sie nach Materialname in build.ts neu ein.
- Kameras landen in Häusern: Der Sichtlinien-Culler in build.ts/world.ts entfernt alles, was einen Kamera-Strahl blockiert.
- Tinte im selben gemergten Effekt-Durchlauf wie DOF wird überschrieben. Tinte muss ihr eigener Durchlauf vor der Unschärfe sein.
- Pixelgroße Post-Parameter müssen mit der Auflösung skalieren: Standbilder sind bei 0,5, das Finale bei 1,333. R3F klemmt dpr auf ≥ 1, also rendern
--scale 0.5Standbilder immer noch einen 1080x1920 Puffer. - Festplatte: Jedes Remotion-Bundle kopiert
public/(~1,3 GB) in dentmp-Ordner\remotion-webpack-bundle-*und löscht es nie. 60+ GB haben bei den Brücken-Durchläufen das Systemlaufwerk gefüllt und ein Render starb mit ENOSPC. Rendern Sie immer mitexport TEMP='<großes Laufwerk>/remotion-tmp' TMP='<großes Laufwerk>/remotion-tmp'(bridge-stills.mjs setzt es selbst) und fragen Sie den Benutzer, bevor Sie alte Bundle-Ordner im gemeinsamen tmp-Ordner löschen (Auto-Modus blockiert die Bereinigung). <großes Laufwerk>/remotion-tmp füllt sich ebenfalls (~500 Ordner / 110 GB nach den 4 Brücken-Durchläufen): Wenn ein Projekt abgeschlossen ist und nichts rendert, löschen Sie dort seineremotion-webpack-bundle-*undpuppeteer_dev_chrome_profile-*Ordner. - In JS-Strings schreiben Sie
"<großes Laufwerk>/remotion-tmp", niemals"<großes Laufwerk>\remotion-tmp"(\rwird zu einem Wagenrücklauf). - Remotion schreibt eine stille Tonspur: Muxen mit
-map 0:v:0 -map 1:a:0. - Sub-Agenten können in diesem Harness keine Report-Dateien schreiben: Bitten Sie sie um eine ≤150-Wörter-Endnachricht und speichern Sie sie selbst in
out/<name>/<n>/REPORT.md. - Scratch
.ts-Dateien inout/brechentsc: Benennen Sie sie.txt. - 2K-Render laufen mit ~4 fps (≈10 min für 67 s). Standbilder bei 0,5 brauchen 3-8 s pro Stück nach einem ~40 s Bundle.
- Filmkorn bei 2,5 % machte die 2K-Datei 910 MB statt ~250 MB und wird auf YouTube zu Matsch; die Referenz hat keins. Lassen Sie es aus.
Lesbarkeitsfallen, die der Verifizierer erwischt hat (bei jedem neuen Prop/Shot auf diese achten)
- Eine Schaukel, die als ein Seil gezeichnet wird, das hinter dem Kind verschwindet, sieht aus wie ein ERHÄNGEN. Immer zwei Seile zu einem breiten Brett mit dem Kind dazwischen (
swingKidin toon.ts), und ein Rahmen, dessen Beine den Bogen freimachen (A-Rahmen an jedem Ende). - Props oder Treibgut näher als ~2 m an einer Linse werden zu riesigen abgeschnittenen Klecksen am Bildrand. Wenn sich eine Kamera bewegt, überprüfen Sie jedes Prop in der Nähe ihrer neuen Position (die Flusskameras sind in die schwimmenden Hüte gerückt).
- Ein vom Bildrand abgeschnittener Vordergrundbusch sieht aus wie ein „grüner Ball“; ein Vordergrund-Prop muss erkennbar sein oder weg.
- Flaggen: Rot + gelber Stern/Raute steht für Vietnam. Verwenden Sie eine zeitkorrekte Flagge (St.-Georgs-Kreuz für England 1831).