kbohara315/cartoon-3d-short

Cartoon 3D-Geschichtenkurzfilm (three.js + Remotion)

Bewährtes Beispiel: The Bridge That Fell for a Song. Es ist ein 67 s langer Originalkurzfilm über die Broughton-Brücke von 1831 und 74 Soldaten, die im Gleichschritt marschieren.

• Code: src/videos/bridge/ Ihres Remotion-Projekts (Composition BridgeShort, 1080x1920, 30 fps).
• Skript, Stimme und Sound: ~/bridge-short/.
• Stilstudien: references/.

Die Stilreferenz ist ein privat studierter Kanal (references/: STYLE_BIBLE.md, reports/*.md, frames/).

• Diese Videos sind privates Studienmaterial. Laden Sie sie niemals hoch, veröffentlichen Sie sie nicht und senden Sie sie nicht.
• Kopieren Sie niemals deren Skripte, Charaktere oder Einstellungen. Geschichte, Figuren und Stimme sind IMMER UNSERE EIGENEN.
• Nennen Sie den Namen des Kanals niemals in einem Voice-Over oder einer Beschreibung.

Anwenderregeln, die gelten:

• Keine Untertitel oder Beschriftungen im Video.
• Nur Englisch.
• Stimme: ein gleichmäßiger Ton.
• Witze sind recherchierte Fakten.
• Standardmischung: Musik +3 dB, SFX -6 dB, Stimme unverändert.
• Finaler Export 2K vertikal: 1440x2560, --scale 1.3333.
• Opus Max verifiziert jeden Schritt.
• Nach jedem Schritt speichern.
• „Mach es einfach“, sobald das Skript genehmigt ist.

Pipeline

1. Thema und Fakten. Wählen Sie eine überraschende wahre Geschichte mit einer physikalischen Ursache und Wirkung (sie sollte visuell sein), plus eine einfache alltägliche Analogie, die sie erklärt.
   • Schreiben Sie die Fakten mit ihrer Quelle am Anfang der SCRIPT.md.
2. Skript (~3,7 Wörter/s, 55-70 s). Beat-Formel aus dem Brückenkurzfilm:
   • Aufhänger: die absurde Tatsache in einem Satz („Vierundsiebzig Soldaten haben eine eiserne Brücke nur durch das Darüberlaufen zum Einsturz gebracht.“).
   • Setting: Jahr, Ort, Stolz.
   • Handlung: Eskalation über drei oder vier Beats, jeder ein bisschen größer.
   • Knackpunkt: der Moment, in dem es bricht.
   • Trockene Doppelzeile: „Zum Glück ... / Zum Unglück ...“.
   • Erklärung: eine physikalische Idee durch eine alltägliche Analogie (das Kind auf einer Schaukel).
   • Konsequenz: die Regel, die es geschaffen hat.
   • Rückblick-Twist: das Ende.
   • Beschreiben Sie niemals auf dem Bildschirm, was der Betrachter bereits sieht.
3. Stimme. Nehmen Sie voice.wav auf oder generieren Sie es, erstellen Sie dann dessen Wortzeitsteuerung words.json (eine beliebige Spracherkennung mit Wortzeiten).
   • Legen Sie sie in den Projektordner, z. B. ~/bridge-short/voice/.
   • Korrigieren Sie die Wortzeiten von Hand. Alles ist auf words.json getaktet.
4. Einstellungsplan in story.ts: Kopieren Sie templates/bridge/ (die finale Brückenquelle, identisch mit src/videos/bridge/ Ihres Remotion-Projekts) nach src/videos/<name>/, registrieren Sie eine neue Composition neben BridgeShort in src/Root.tsx und benennen Sie sie um.
   • SHOTS: id, a/b Frames, Licht Tag/Golden, Crowd-Modus, tau Story-Zeit.
   • XFADE: Überblendungen bei Orts-/Zeitwechseln.
   • FLASH_AT: ein weißer Blitz nach dem Aufhänger.
   • CAMS: pro Einstellung Keys {f, dur?, cut?, s: f => {pos, look, fov, roll}}.
   • KICKS: Impact-Flip-Shakes.
   • DOF/dofAt: Objektivunschärfe pro Beat.
   • FOREGROUND: Nahe Rahmenrequisiten.
   • Jede visuelle Reaktion landet 0-3 Frames vor ihrem Wort.
5. Welt.
   • lights.ts: LIGHTS plus das LOOK Himmel/Fluss/Wolken-Palette pro Licht.
   • shade.ts: Zweifarbige Schattierung und untone().
   • build.ts: Stadt, Häuser und Kenney CC0 Kit-Props, umgefärbt, mit Sichtlinien-Culling für alles, was eine Kamera blockiert.
   • paint.ts: HD Canvas2D gemalte Texturen mit als dunkle Tönung eingezeichneten Nähten.
   • world.ts: Himmel-Shader, Nebel = Horizontfarbe, Fluss, Pose pro Frame, Sonne pro Einstellung eingefroren und kamera-relativ.
6. Figuren.
   • toon.ts: die Canvas2D Pen Zeichen-API, 600x1000 Design-Canvas, Fußsohlen bei y = 975, Bohnenköpfe, Strichglieder, Pflaumen-Variablenbreite-Kontur, Gesichtsbibliothek.
   • cast.ts: Kamerafreundliche Billboards, Menschenmengen, Effektkarten, Blinzeln, Gehzyklen. Alle Billboards gehen auf die NOINK-Ebene.
   • cardshade.ts: Karten, die durch das Szenenlicht beleuchtet werden, keine Emission.
7. Postproduktion (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
   • Composer-Reihenfolge: Tinte → Objektivvorbereitung → Objektivhauptteil → Bloom → NEUTRAL Tone Map → Grading (MSAA 4).
   • Jeder Pixelparameter skaliert mit Ausgabehöhe / 1920.
8. Sound (~/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 unter der Stimme.
   • Ausgabe: mix.wav (48 kHz, exakte Länge), Stems und cues.md.
   • Sperren Sie die Zeitkonstanten des Bildes, bevor der Sound erstellt wird. Jede spätere Timing-Änderung bedeutet ein erneutes Ausführen des Sounds.
9. Look-Prüfungen. Führen Sie node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5 aus.
   • Setzen Sie BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx, um eine Sandbox-Kopie zu rendern.
   • Erstellen Sie Gegenüberstellungen mit Referenzframes 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.
10. Finales Rendern.
    • 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 stumme Audiospur).
    • QA: python scripts/short_qa.py final.mp4 out/<name>/qa shots.json überprüft jedes Bild auf schwarze, weiße, eingefrorene und Pop-Frames, sowie Lautstärke und Blätter.
    • Beheben Sie alles, was es findet, führen Sie dann ein tiefgehendes Opus-Audit durch.
11. Ausliefern. Senden Sie die finale mp4 als SendUserFile, aktualisieren Sie den Speicher, schreiben Sie Notizen.

Finale Look-Werte (Brücke nach 4 Verifizierer-Runden; alle in templates/bridge/)

Starten Sie jeden neuen Kurzfilm von templates/bridge/ (kopieren Sie nach src/videos/<name>/): der Look lebt in diesen Werten, die Geschichte lebt in story.ts / build.ts Layout / cast.ts Rollen. Opus-Max-Punktzahl 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 kamera-relativ und pro Einstellung eingefroren):
  • Tag: az 75 / el 48, beleuchtet [1.58,1.5,1.33], Schatten [.30,.29,.36], Lift [.05,.06,.11] (kühler Farbstich NUR in 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 Richtung #FFB36B ×1.5, violett-blauer Schatten (Fassade ≈ #444380), Himmel #ffc47c → #8a6f8a, Pfirsich-Nebel nur ab 50 m, Sonnenscheibe #ffcf9e + Bloom, Kontakt-Tropfen + echte Kartenschatten.
• Albedos (paint.ts/build.ts): gedämpfte Ziegel / Creme / Ocker / Terrakotta-Häuser mit Sockel, Gesims, Fensterbänken, Hauben, Türstufen, Schornstein + Aufsatz, Höhen 7 / 8,4 / 9,8 m; warmgrauer/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 lavendelbeleuchtete Flächen.
• Tinte (ink.ts): #030303, 5.1 px nah (6 m) → 3.3 px fern (90 m) bei 1080x1920, Knicke ×0.8 ab 35°, Tiefensprünge ab 1 %, Nebeltönung 0.3 nur fern; Charakterkarten auf Ebene NOINK (sie tragen ihre eigene Pflaumentinte).
• Objektiv (lensblur.ts + dofAt in story.ts): cInf px bei 1080: Aufhänger/Fluss-Nahaufnahme 15-16, Close-ups 12-14, MS 10-12, Park 7, Golden-Sway 5, Weitwinkel/Luftaufnahmen 0. Fokus auf die Augen der ersten Reihe.
• Postproduktion (Bridge.tsx): Tinte → Objektivvorbereitung → Objektivhauptteil → Bloom (thr 1.0, int .5, 6 Ebenen, Radius .6) → NEUTRAL Tone Map → Grading; MSAA 4. Filmkörnung existiert, ist aber AUS (Referenz misst keine Körnung; sie vervierfacht die Dateigröße).
• Figuren (toon.ts/cast.ts/cardshade.ts): Bohnenköpfe h/w .94, Pflaumentinte #241726, Augen .26 W voneinander entfernt, kein Rouge, 14 Ausdrücke; Erwachsene 3.5 Kopfhöhen; Gehwippen 5 %, Neigung 1-7°, aufgesetzte Füße 0.8 m Schrittlänge; Blinzeln 0.5-2.3 s; enger Kontaktschatten ~.5 unter den Füßen + Sonnenrichtungsschweif bei Tag; Goldener Rand nur innen (niemals eine versetzte Außenkopie).
• Kamera (story.ts): Schnitte bei großen Sprüngen, smootherstep-Gleitflüge 18-40 f, jede Halteposition kriecht (keine statische Halteposition ≥4 f), Flip-Kicks abklingend über 7 f bei Impacts, 4-4.6° Rollbewegungen, Vordergrund-Props (FOREGROUND) in ~1/3 der Einstellungen.

Look-Ziele (gemessen an der Referenz; siehe references/reports/)

• Tinte:
  • Weltlinien: etwa 3 px bei 1080 Breite, fast schwarz #0b0a0c, fast konstant mit der Entfernung. Nur Silhouetten, Tiefensprünge und normale Knicke. Keine Linie an Wand-/Bodenfugen oder am Horizont. Charakterkarten werden niemals von der Welttinte umrandet.
  • Figurentinte: dunkles Pflaume #201628-#2f1d28, dicker auf der Unterseite/Schattenseite.
• Farbe:
  • Tag mediane Luma ~.57. Nicht-Tinte p5 ~.23 (keine zerdrückten Schwarztöne). Beleuchtete Chroma C* p90 ~55. Tag Himmel oben ~#5e93d9, Horizont 1.28x heller.
  • Golden: Pfirsich-Horizont #ffd08a, violett-blaue Schatten (niemals braun), Gegenlicht.
• Tiefe:
  • DOF etwa 1/3 der Bildschirmzeit (Nahaufnahme, 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: Schwellwert 1.0.
• Kamera:
  • Harte Schnitte bei großen Sprüngen. Alles andere ist ein smootherstep-Gleitflug von 18-40 f, Spitze ≤ 25 px/f bei 720p.
  • Jede Halteposition drückt 0.15-0.35 %/f hinein, mit 0.6 %/f bei Punch-Wörtern.
  • Rollen von 4-5°.
  • Kein Handkamera-Float. 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°, aufgesetzte Füße.
  • Blinzeln alle 0.5-2.3 s, Dauer 4 f.

Look-Match-Loop (wie der Brücken-Look erreicht wurde; wiederverwendbar für jeden „mach es aussehen wie X“-Durchlauf)

1. Zuerst die Referenz messen. Ein Analyse-Agent pro Thema (Bewegung, Tiefe, Texturen, Figuren, Beleuchtung, Konturen, Grading), jeder schreibt Zahlen, keine Adjektive, in references/reports/<topic>.md. Gemeinsames Briefing: compare/CONTEXT.md. Reports sind die Wahrheitsquelle für jeden danach kommenden Agenten.
2. Sandboxes, ein Besitzer pro Datei. Kopieren Sie den Projektordner nach src/videos/<name>_{cam,world,mat,char,post} mit Einträgen src/sandboxes/<n>/index.tsx (gleiches index.tsx wie das Hauptprojekt, nur der Importpfad geändert). Besitzverhältnisse, die für die Brücke verwendet wurden:
   • 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 (gemalte Texturen, Gebäude, Props)
   • char: toon.ts, cast.ts, cardshade.ts (Figurenzeichnung, Posen, Kartenbeleuchtung, FX-Karten)
   • post: ink.ts, Bridge.tsx, lensblur.ts (Kontur-Pass, Composer, Objektivunschä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.
3. Zusammenführen mit python scripts/bridge_merge.py [cam,world,mat,char,post] (sichert das Hauptprojekt nach backup/bridge_<time>/, kopiert nur besessene Dateien). Dann npx tsc --noEmit (filtern auf den Projektordner), dann jede Sandbox vom Hauptprojekt neu synchronisieren (cp -f src/videos/<name>/* src/videos/<name>_<n>/) vor der nächsten Runde.
4. Verifizieren mit einem neuen Opus-Max-Agenten: Gegenüberstellungsblätter (python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2), jede Region mit einer Punktzahl von 10 bewerten (Farbe Tag / Golden, Beleuchtung, Tinte, Texturen, Figuren, Tiefe, Komposition) plus eine nummerierte Fehlerliste mit Bildnummern. Ordnen Sie jeden Fehler dem Dateibesitzer zu und setzen Sie den Agenten dieses Besitzers mit SendMessage fort (behält seinen Kontext). Brücken-Punktzahlen: Runde 1 5/3/4/5/4/7/4/6 → Runde 2 5/4/5/6/4/7/6/6 → Runde 3 siehe Notizen.
5. Verträge zwischen Besitzern leben in exportierten Konstanten (z. B. NOINK-Ebene aus ink.ts, dofAt/FOREGROUND aus story.ts, LIGHTS/LOOK aus lights.ts). Das Ändern eines Vertrags bedeutet, jeden Besitzer zu informieren, der ihn liest.

Fallstricke

• Kenney Natur-Kit-Materialien sind türkis: färben Sie sie nach Materialnamen in build.ts um.
• Kameras landen in Häusern: der Sichtlinien-Culler in build.ts/world.ts entfernt alles, was einen Kamerastrahl blockiert.
• Tinte im selben gemergten Effekt-Pass wie DOF wird überschrieben. Tinte muss ihr eigener Pass 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, daher rendern --scale 0.5 Standbilder immer noch einen 1080x1920 Puffer.
• Festplatte: Jedes Remotion-Bundle kopiert public/ (~1.3 GB) in den temporären Ordner remotion-webpack-bundle-* und löscht es nie. 60+ GB füllten das Systemlaufwerk während der Brücken-Durchläufe und ein Render starb mit ENOSPC. Rendern Sie immer mit export 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 temporären Ordner löschen (Auto-Modus blockiert die Säuberung). <großes Laufwerk>/remotion-tmp füllt sich auch (~500 Ordner / 110 GB nach den 4 Brücken-Runden): Wenn ein Projekt abgeschlossen ist und nichts rendert, löschen Sie dessen remotion-webpack-bundle-* und puppeteer_dev_chrome_profile-* Ordner dort.
• In JS-Strings schreiben Sie "<großes Laufwerk>/remotion-tmp", niemals "<großes Laufwerk>\remotion-tmp" (\r wird zu einem Wagenrücklauf).
• Remotion schreibt eine stumme Audiospur: muxen Sie mit -map 0:v:0 -map 1:a:0.
• Sub-Agenten können in dieser Umgebung keine Berichtsdateien schreiben: bitten Sie sie um eine ≤150-Wörter-Nachricht und speichern Sie sie selbst unter out/<name>/<n>/REPORT.md.
• Entwürfe .ts-Dateien innerhalb von out/ brechen tsc: benennen Sie sie .txt.
• 2K-Render laufen mit ~4 fps (≈10 min für 67 s). Standbilder bei 0.5 dauern jeweils 3-8 s nach einem ~40 s Bundle.
• Filmkörnung bei 2.5 % machte die 2K-Datei 910 MB statt ~250 MB und wird auf YouTube zu Matsch; die Referenz hat keine. Lassen Sie sie ausgeschaltet.

Lesbarkeitsfallen, die der Verifizierer gefangen hat (überprüfen Sie jedes neue Prop/ jede neue Einstellung darauf)

• Eine Schaukel, die als ein Seil gezeichnet wird, das hinter dem Kind verschwindet, liest sich als AUFHÄNGUNG. Immer zwei Seile zu einem breiten Brett mit dem Kind dazwischen (swingKid in toon.ts), und ein Rahmen, dessen Beine den Bogen freihalten (A-Rahmen an jedem Ende).
• Props oder Treibgut näher als ~2 m an einem Objektiv 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 bewegten sich in die schwimmenden Hüte).
• Ein Vordergrundbusch, der vom Bildrand abgeschnitten wird, liest sich als „grüner Ball“; ein Vordergrund-Prop muss erkennbar oder weg sein.
• Flaggen: rot + gelber Stern/Raute liest sich als Vietnam. Verwenden Sie eine zeitlich korrekte Flagge (St. Georgs Kreuz für England 1831).