z1fex/3d-cartoon-animation

3D Cartoon Animation

Version 1.0.1 (öffentliche Ausgabe) · Methode und Look vom Eigentümer in der ersten Runde genehmigt („Wie die Schwerkraft entdeckt wurde“, v3, 26. Oktober 2026). 1.0.1 lässt die Werkzeuge auf jedem Computer laufen; Filme rendern identisch zu 1.0.0.

„Der Eigentümer“ in diesen Dateien ist die Person, für die die Filme gemacht werden: diejenige, die den Film anfordert und genehmigt.

Zuerst das Storyboard (Regel des Eigentümers, 27. Oktober 2026). Jeder Film und jede neue Version beginnt als Storyboard im Framework des Eigentümers. Nichts wird vertont, detailliert gebaut oder gerendert, bis sie es genehmigen (Skill 4).

Dieses Paket ist eine vollständige, wiederverwendbare Methode, um eine Art von Video zu erstellen: einen kurzen, schnellen, warmen 3D-Cartoon-Erklärfilm. Es funktioniert für jedes Thema. Das ausgearbeitete Beispiel handelt von der Schwerkraft, aber nichts an der Methode hängt davon ab: Die Skills beschreiben, wie man den Aufhänger findet, die Charaktere besetzt, die Orte baut, jede Zahl in ein Objekt verwandelt, jede Geste mit der Stimme timet, den Sound gestaltet und jeden Frame überprüft – für was auch immer das nächste Thema ist.

Wie ein fertiges Video aussieht

• Format: 1080×1920, 30 fps, 30–60 s. Ein Erzählssatz = eine Einstellung (alle 1,1–1,5 s ein neues Bild). Die letzte Zeile loopt in den ersten Frame.
• Geschichte: ein Aufhänger in den ersten 2 s, der eine Frage eröffnet; eine frühe Auszahlung; an „dich“ gerichtete Einsätze; Eskalation; ein Wiedereinstieg nach zwei Dritteln; eine Wendung, die als ein wörtliches Bild gezeigt wird; ein Loop-Ende.
• Look: weiche Toon-Shader, Tintenlinien, warme praktische Lichter, Randlicht, Tiefenschärfe, Lichtblüte und Körnung. Hautton-Gesichter; Markenfarben (Rouge Noir, Blue Coral, Cognac, White Sand, Anthracite) auf Kleidung, Requisiten und Sets. Reale Dinge sehen real aus (die Erde ist blau und grün).
• Charaktere: Kugelkopf, Bohnenkörper, Stockglieder, Fäustlingshände; bemalte Gesichter ohne Lippensynchronisation; Gesichter wechseln durch einen Blinzler kurz vor dem betonten Wort; Haltepunkte sind absolut still.
• Kamera: immer in Bewegung, zwischen den Bewegungen kriechend, beschleunigend in 6-Frame-Überblendungen beim ersten Wort jedes Satzes.
• Zahlen sind Objekte: jede gesprochene Zahl landet auf ihrem Frame als Zähler, Kalender, Maßband, Messgerät oder beleuchtetes Schild.
• Text: eine Themenfrage oben für die ersten 2–3 s („Wie wurde die Schwerkraft entdeckt?“) und redaktionelle Bildunterschriften bei 70 % Höhe (ALLES über weißt du).
• Sound: eine Stimme (ElevenLabs), ein originaler Musikteppich 18 LU darunter, ein leises Foley-Geräusch bei jeder sichtbaren Aktion und ein Akzent bei jedem Storybeat, gemastert auf −14 LUFS.

Die Pipeline (jeder Schritt ist ein Skill)

#	Schritt	Skill	Ausgabe
1	Thema in eine Filmidee verwandeln	topic-to-film	Blickwinkel, Aufhänger, Besetzung, Orte, Zahlenliste, das große Ganze
2	Das Skript schreiben	script-and-retention	script.md mit Quellen
3	Die Stimme aufnehmen und jedes Wort timen	voiceover-and-timing	vo/voice-final.wav, vo/words-final.json
4	Jede Einstellung storyboarden; der Eigentümer genehmigt es	storyboard-and-shot-plan	storyboard.md, Storyboard-Stills, das Board des Eigentümers (storyboard/<v>/<Titel> - storyboard <n>.png und .html)
5	Den Look festlegen	look-lighting-and-brand	Lichtvoreinstellung, Palette, Objektiv pro Einstellung
6	Die Besetzung bauen	characters-and-faces	Rigs, Outfits, Gesichtswechsel
7	Jeden Satz spielen	motion-and-acting	Posenkeys, Gags, Physik
8	Die Kamera bewegen	camera-and-transitions	eine Orbit-Bewegung pro Einstellung
9	Die Zahlen physisch machen	facts-as-objects	ein Gerät pro Zahl
10	Die Orte bauen und einrichten	sets-and-props	Orte aus dem Bausatz, eingerichtet
11	Den Bildschirmtext schreiben	captions-and-title-hook	Caption-Lockups, Titelfrage
12	Den Sound gestalten	sound-design-and-mix	Cue-Liste, Mix, Stems
13	Jeden Frame rendern und prüfen	render-and-quality-checks	das MP4, der QA-Bericht
14	Mit dem Eigentümer prüfen und lernen	review-rounds-and-learning	Feedback, nächste Version, Paketaktualisierung

Führe die Schritte in dieser Reihenfolge aus. Die Schritte 4–11 finden alle innerhalb einer Datei pro Film (film.mjs) statt, sodass du in der Praxis das Storyboard planst, dann Einstellung für Einstellung baust und dabei Stills renderst.

Nicht verhandelbar

1. Zuerst das Storyboard. Der Eigentümer genehmigt das Board (Skill 4), bevor die Stimme aufgenommen, die Einstellungen detailliert gebaut oder etwas gerendert wird.
2. Die Technik kopieren, niemals den Inhalt. Jeder Charakter, jedes Set, jedes Schild, jeder Witz und jeder erfundene Markenname sind unsere eigenen. Reale historische Personen werden als unsere eigenen Cartoon-Charaktere gezeichnet; zeichne niemals einen urheberrechtlich geschützten Charakter.
3. Zuerst der Aufhänger. Die ersten 2 Sekunden müssen eine Frage eröffnen; die Titelfrage nennt das Thema.
4. Jede Zahl wird zu einem Objekt, das auf ihrem gesprochenen Wort erscheint. Niemals eine einfache Texteinblendung.
5. Gesten landen 4 Frames vor ihrem Wort; Gesichter wechseln 2 Frames davor durch einen Blinzler.
6. Jede sichtbare Aktion hat einen Sound; kein Sound ohne Aktion.
7. Jeder Frame wird überprüft (automatischer Framing-Check und Jump-Scan, dann mit dem Auge), bevor der Eigentümer ihn sieht.
8. Fakten sind belegt. Wenn Quellen sich widersprechen, mit klaren Worten absichern.
9. Die Marke des Eigentümers: Hautton-Gesichter, die fünf Markenfarben plus Markenrot und die enthaltenen Schriftarten: TeX Gyre Heros Bold + Instrument Serif Italic für Bildunterschriften, Titan One für Beschriftungen (oder lizenzierte Helvetica Bold + Editorial New Italic, falls der Eigentümer sie hinzufügt; angeben, welche). Alles in brand/.

Schnellstart für ein neues Thema

1. Kopiere templates/new-film/ nach examples/<topic-slug>/.
2. Fülle das neue-Thema-Arbeitsblatt (Skill 1) aus und schreibe das Skript (Skill 2) in SCRIPT in film.mjs.
3. Baue die Einstellungen mit vorläufigem Timing und rendere Storyboard-Stills: node recipe/tools/render.mjs examples/<slug>/film.mjs <outDir> --stills shots --qa
4. Zuerst das Storyboard.
   • Kopiere templates/storyboard.json nach examples/<slug>/storyboard/v1/storyboard-1.json, mit einem Panel pro Einstellung und seinem Still.
   • Zeichne das Board: node recipe/tools/storyboard-board.mjs examples/<slug>/storyboard/v1/storyboard-1.json.
   • Gib dem Eigentümer das Board und überarbeite es (storyboard-2, …), bis sie es genehmigen.
   • Dann nimm die Stimme auf: ELEVENLABS_API_KEY=… node recipe/tools/voiceover.mjs examples/<slug> (nachdem du vo/text.txt geschrieben hast).
5. Neu timen auf die echten Wörter (automatisch), das Video rendern, dann den Sound: node recipe/tools/render.mjs examples/<slug>/film.mjs <out> --video --name silent.mp4 python -I recipe/tools/sound.py examples/<slug> <out>/silent.mp4 <out>/shots.json "<out>/<Titel>.mp4"
6. Prüfen: Framing-Bericht, node recipe/tools/jump-scan.mjs <video> <out>/shots.json, python -I recipe/tools/sfx-levels.py <out> <out>/cue-sheet.txt, dann jeden Frame mit dem Auge (Skill 13).

Wo die Dinge sind

Pfad	Was
skills/	die 14 Schritt-Skills
recipe/engine/	der Renderer: core.mjs (Look, Post, Captions, Compositing, Checks), faces.mjs, character.mjs, props.mjs, props2.mjs, kit.mjs (themenneutrale Orte und Lichtvoreinstellungen), places.mjs / places2.mjs (die eingerichteten Orte des Beispiels), index.html, vendor/three (three.js r186, MIT), fonts/
recipe/tools/	storyboard-board.mjs (das Storyboard-Board des Eigentümers, als PNG und als klickbare HTML-Seite), render.mjs, voiceover.mjs, sound.py, jump-scan.mjs, sfx-levels.py, paths.mjs (wo FFmpeg, Chrome und Playwright gefunden werden)
templates/	new-film/film.mjs (ein themenneutraler Starter, der mit vorläufigem Timing läuft) und die Arbeitsblätter
examples/how-gravity-was-found/	der genehmigte Film: Quelle, Stimme, finales Video, Storyboard, Cue-Sheet, Stems, frühere Versionen
references/	die Referenzstudie, die Anweisungen des Eigentümers, die Engine-API, der Glitch-Katalog, Feedback-Verlauf, Engine-Notizen
brand/	die Farben und Schriftarten des genehmigten Films: palette.json, palette.css, style-sheet.png (gezeichnet von recipe/tools/style-sheet.mjs)
evaluation/	Liefer-Checkliste, Akzeptanzkriterien, bekannte Grenzen
preview/	style-card.json: der Name, Look und Format des Stils in einer Karte, die auf das Poster, den Film und das Storyboard des Beispiels verweist

Einrichtung auf einem neuen Rechner

Die Werkzeuge benötigen:

• Node 22+;
• FFmpeg 6+ mit ffprobe, im PATH;
• Python 3.10+ mit NumPy;
• eine Grafikkarte, die Chrome für WebGL2 verwenden kann.

Führe im Paketordner npm install, npx playwright install chromium und pip install -r requirements.txt aus; die README enthält die vollständigen Schritte. Wenn FFmpeg woanders ist, setze CARTOON_FFMPEG. Um einen anderen Chrome zu verwenden, setze CARTOON_CHROME (siehe recipe/tools/paths.mjs).

Filme müssen im Paketordner (examples/<slug>/) liegen, da der Renderer das Paket an den Browser ausliefert. Die Stimme benötigt einen ElevenLabs-API-Schlüssel mit Text-to-Speech-Berechtigung, der als ELEVENLABS_API_KEY für den einen Befehl übergeben und niemals in eine Datei geschrieben wird.