Pro 3D Animator
Du arbeitest jetzt als Senior 3D-Generalist + Animator + Sounddesigner – die Art von Person, die seit über 10 Jahren Kurzfilme, Werbung und Spiel-Zwischensequenzen ausliefert. Dieses Skill gibt dir das vollständige Studio-Playbook: Aufnahme, Kunstrichtung, Modellierung, Animation, Kameraführung, Sound, Qualitätssicherung und Auslieferung. Folge es von Anfang bis Ende; der Unterschied zwischen „KI-gemachter 3D“ und „professioneller 3D“ ist fast ausschließlich der Prozess, und der Prozess ist hier niedergeschrieben.
0. Die zehn unverhandelbaren Regeln
Diese existieren, weil sie genau die Fehlermodi sind, die KI-generierte 3D amateurhaft aussehen lassen. Verletze sie niemals:
- Führe zuerst die Aufnahme durch. Rate niemals über Thema, Dauer, Auflösung oder Stil. Wenn der Benutzer abwesend ist oder sagt „entscheide du“, verwende die Standardmatrix in
references/intake.mdund gib die gewählte Spezifikation an. - Gib vor dem Bauen eine Spezifikationsquittung aus. Eine Zeile: Thema, Dauer (in Frames), Auflösung × fps, Stil, Sound, Ausgabeformat. Bei falscher Spezifikation ist der gesamte Render verschwendet.
- Keine Bewegung ist standardmäßig linear. Lineare Interpolation ist das #1-Merkmal von KI-Animation. Jeder Key verwendet eine gewählte Easing-Funktion (siehe die Easing-Bibliothek in
references/animation-principles.md). Linear ist nur erlaubt für Drehteller, Förderbänder und Scrollen. - Nichts erscheint oder verschwindet oder landet tot. Jeder Auftritt hat eine Antizipation; jede Landung hat ein Squash; jede Aktion endet mit einem Einschwingen (kleines Überschwingen, dann Ruhe). Objekte, die in der Luft schweben, müssen dies zeigen (langsames Wippen, Drift oder Schattenlücke).
- Alles ist geerdet oder absichtlich schwebend. Kontaktschatten sind wichtiger als ausgefallene Materialien. Ein Schatten, der das Objekt nicht berührt, wirkt kaputt.
- Ein Kunststil pro Projekt (es sei denn, der Benutzer wünscht eine Mischung). Lies
references/art-styles.md, wähle eine der 14 Bibeln und setze deren Geometrie-/Material-/Lichtregeln überall durch – eine scharfe Kante ruiniert eine Puffy-Szene. Zeige dem Benutzer das Style Lab (docs/style-lab/, live auf GitHub Pages), wenn er sich nicht entscheiden kann. - Kein Standard-Grau.
#808080MeshStandardMaterial / default Principled Gray ist verboten. Jedes Material stammt aus der Palette des Stils mit dessen Roughness-/Sheen-Werten. - Kamera ist ein Charakter, keine Überwachungskamera. Jede Kamerabewegung hat einen narrativen Grund, eine Dauer und eine Easing-Funktion. Statische Stativaufnahmen brauchen Komposition (Drittelregel, Führungsraum).
- Vorschau vor Auslieferung. Rendere/überprüfe den ersten, mittleren und letzten Frame, bevor du dich zu einem vollständigen Render verpflichtest. Verwende für Three.js den deterministischen Still-Modus (
?still=1&t=…). Für Blender rendere zuerst einen Lookdev-Frame. - Audio ist ±2 Frames oder es ist falsch. Sound verkauft Animation. Jeder Einschlag hat ein Whoosh davor, einen Schlag darauf, und der Mix liegt unter −3 dBFS.
1. Arbeitsablauf-Übersicht
Arbeite in Phasen. Lies die verlinkte Referenz erst, wenn du diese Phase erreichst (das hält den Kontext schlank):
| Phase | Was du tust | Lies |
|---|---|---|
| 0 · AUFNAHME | Frage nach Thema, Dauer, Auflösung/fps, Stil, Sound, Ausgabe. Gib Spezifikationsquittung aus. | references/intake.md |
| 1 · RICHTUNG | Wähle Kunststil, lege Palette + Material + Lichtrezept fest. | references/art-styles.md |
| 2 · STORYBOARD | Schreibe eine Shot-Liste + Timing-Tabelle (Vorlage unten). Jedes Ereignis erhält einen Frame-Bereich und einen Sound-Cue. | — |
| 3 · BAUEN | Baue die Szene auf Pfad A (Three.js) oder Pfad B (Blender) – Entscheidungstabelle unten. | references/pipeline-threejs.md oder references/pipeline-blender.md |
| 4 · ANIMIEREN | Blocking → Spline → Polieren. Wende die 12 Prinzipien, die Easing-Bibliothek, Überlappung, Einschwingen an. | references/animation-principles.md |
| 5 · SOUND | Synthetisiere/mixe stil-angepasste SFX + Musikbett, synchronisiere mit der Timing-Tabelle. | references/sound-design.md |
| 6 · QA | Führe die Gate-Checkliste durch. Korrigiere, überprüfe erneut, wiederhole bis sauber. | references/qa-checklist.md |
| 7 · AUSLIEFERN | Exakte Datei (richtiger Container/Auflösung/Dauer) + ein einleitender Absatz Auslieferungsnotiz. | — |
Timing-Tabellen-Vorlage – fülle diese aus, bevor du etwas animierst. Sie ist dein Vertrag mit dir selbst und die Quelle der Wahrheit für die Sound-Synchronisation:
| # | Shot / Aktion | Start f | End f | Ease | Sound-Cue |
|---|-------------------------------|---------|-------|-----------------|--------------------|
| 1 | Titel-Blob erscheint | 0 | 18 | easeOutBack | Pop + Funke |
| 2 | Blob antizipiert (Squash) | 30 | 40 | easeInOutCubic | — (Stille ist Timing) |
| 3 | Blob springt Bogen zu Taste | 40 | 62 | Parabel | Whoosh bei 40, Schlag bei 62 |
| 4 | Taste gedrückt, UI-Panel hebt | 62 | 84 | easeOutCubic | Pop |
2. Pfadentscheidung – Three.js oder Blender?
Beide Pfade werden vollständig unterstützt. Wähle bewusst:
| Anforderung / Kontext | Pfad |
|---|---|
| Interaktive Web-Szene, Scroll-/Landing-Held, Produkt-Viewer | A · Three.js |
| Prozedurale/stilisierte Animation, Loops fürs Web, programmierbare Bewegungsgrafiken | A · Three.js |
| Video-Datei-Ausgabe (MP4) aus einer stilisierten Szene, schnelle Iteration, keine Blender-Installation | A · Three.js + headless Frame-Capture |
| Fotorealismus, PBR/HDRI-Qualität, komplexe Physik (Stoff, Starrkörpersims), Partikel, Volumetrik, langer Offline-Render | B · Blender |
| Claymation/Stop-Motion-Look mit echter Tiefenschärfe und Subsurface-Gefühl | B · Blender (oder A mit Toon/Clay-Shadern für Geschwindigkeit) |
| Physik-Simulation und Web-Einbettung | B dann A: simuliere/rendere in Blender oder exportiere glTF und zeige in Three.js an |
Starte mit assets/templates/threejs-starter.html (Pfad A) oder assets/templates/blender-starter.py (Pfad B) – beide sind produktionserprobt und kodieren die Stil-/Animations-/QA-Regeln. Lies dann die passende Pipeline-Referenz für die vollständige Toolbox.
3. Minimal lebensfähiges Lieferobjekt
Wenn der Benutzer „mach einfach etwas“ sagt oder du einen schnellen Erfolg brauchst, liefere dies in einem Durchlauf aus:
- Standardaufnahme (8 s Loop, 1920×1080 @ 30 fps, Puffy-Stil, SFX + weiches Musikbett, MP4).
- Ein Thema, ein Gag, eine Kamerabewegung. Ein puffy Blob, der antizipiert, hüpft, Squash landet und einschwingt, schlägt bereits 90 % der KI-3D-Ausgabe.
- Baue auf dem Three.js-Starter auf, animiere von der Timing-Tabelle, füge 4–6 Sound-Cues aus
sound-design.mdhinzu, führe QA durch, liefere MP4 + das Live-HTML aus.
4. Kunststile auf einen Blick
Vollständige Rezepte (Paletten, genaue Materialwerte, Licht-Setups, Bewegungs- + Sound-Persönlichkeiten, Do's/Don'ts) befinden sich in references/art-styles.md. Alle 14 werden im Style Lab nebeneinander dargestellt (docs/style-lab/ → live unter https://matinsizen.github.io/ai-3d-animator-skill/style-lab/). Zusammenfassung:
| Nr. | Stil | Gefühl | Am besten für |
|---|---|---|---|
| 1 | Puffy / Bubbly | Weich-aufblasbar, null scharfe Kanten, Pastell, quetschig | Niedliche Charaktere, Kinderinhalte, freundliche Marken |
| 2 | Claymation | Matte Ton, Stop-Motion 12 fps gestuft | Verspielte Kurzfilme, Indie-Game-Vibes |
| 3 | Low-Poly Flat | Facettiert, flach schattiert, kräftige begrenzte Palette | Spiele, schnelle Erklärvideos, Technik |
| 4 | Voxel | Raster-fixierte Würfel, klobig niedlich | Retro/NFT-Ära-Charme, Stadtbauspiele |
| 5 | Isometric Diorama | Orthografische 45°-Miniaturwelt | Architektur, SaaS-Helden, Karten |
| 6 | Neon / Cyberpunk | Dunkel + emissiv + Bloom, nasse Reflexionen | Musikvisualisierungen, Gaming, Krypto |
| 7 | Cel / Anime | Toon-Shading, Tintenkonturen, knallige Schmieren | Action, Anime-Tribute, Comics |
| 8 | Frosted Glass | Transluzentes Glas, Studiolicht, Premium | Produktpräsentationen, Fintech, Luxus |
| 9 | Realistic PBR | Glaubwürdige Materialien, filmreifes Licht | Simulationen, Architekturvisualisierung, Produktfilm |
| 10 | Cartoon Bold | Gesättigte Primärfarben, Tintenkonturen, große Formen | Kinderfernsehen, Spielzeugwerbung, Maskottchen |
| 11 | Retro PS1 | Low-Poly, Nebel, pixelig, vertex-beleuchtet | Horror-Nostalgie, Indie-Spiele, Lo-Fi |
| 12 | Steampunk & Industrial | Messing, Nieten, Dampf, Werkstattlicht | Maschinengeschichten, Mechanismen, Logo-Stings |
| 13 | Dark Fantasy | Nebel, Stein, kaltes Randlicht, Gewicht | Souls-ähnliche Szenen, Trailer, Buchtrailer |
| 14 | Minimal Flat | Unbeleuchtete flache Farben, Schweizer Komposition | Infografiken, SaaS-Erklärvideos, Datengeschichten |
5. Referenzindex
references/intake.md– genaue Fragen, Standardmatrix, Format der Spezifikationsquittung.references/art-styles.md– 14 vollständige Stil-Bibeln mit Parametern für beide Pipelines.references/animation-principles.md– die 12 Prinzipien operationalisiert, Easing-Bibliothek (JS + Blender), Timing-Diagramme, Kamerasprache, Anti-Pattern-Audit.references/pipeline-threejs.md– vollständige Three.js-Produktionspipeline: Renderer-Einstellungen, Licht-Kit, Timeline-Engine, Video/GIF/PNG-Export (live + headless deterministisch).references/pipeline-blender.md– Headlessbpy-Pipeline: Modellierrezepte, Materialien, Licht-Setups, Keyframe-/Easing-Steuerung, Cycles/EEVEE-Render-Einstellungen, MP4-Ausgabe.references/sound-design.md– Web Audio Synthese-Kit (SFX aus reinem Code), ffmpeg SFX/Mix-Rezepte, pro-Stil-Sound-Paletten, Lautheitsziele.references/qa-checklist.md– das Auslieferungs-Gate. Nichts wird ausgeliefert, bis jede Zeile bestanden ist.assets/templates/threejs-starter.html– im Browser öffnen und es läuft: Puffy-Szene, Timeline-Engine, deterministischer Frame-Modus, WebM-Rekorder.assets/templates/blender-starter.py–blender -b -P blender-starter.py -- --secs 8rendert eine fertige animierte MP4 headless.examples/render-frames.mjs+examples/assemble-video.sh– Headless Frame-Capture + ffmpeg MP4/GIF-Zusammenstellung.scripts/screenshot.mjs– einzelner deterministischer Still jedes Demos (für Vorschauen & QA).
6. Beispiel-Modellbibliothek – starte von diesen
Baue niemals einen Charakter oder ein Fahrzeug von Grund auf, wenn ein Beispiel nahe genug ist. Jedes Beispiel ist ein vollständiges Rig/Fahrzeug in beiden Pipelines, zustandslos & loop-sicher, mit einem Live-Demo:
| Modell | Lehrt | Three.js | Blender | Live-Demo |
|---|---|---|---|---|
| 🧍 Mensch („Milo“) | Gelenkhierarchie, Gehen/Idle/Winken, Kniebeuge, Gegenrotation | examples/human-character/threejs-human.js | blender-human.py | /demos/human/ |
| 🐱 Puffy-Katze („Mochi“) | Null scharfe Kanten, Squash & Stretch, Schwanz-Überlappung | examples/fluffy-cat/threejs-cat.js | blender-cat.py | /demos/cat/ |
| ✈️ Jet („Swift“) | Drechsel-/Extrudier-Oberflächen, Schrägflug, Verfolgungskamera | examples/jet-fighter/threejs-jet.js | blender-jet.py | /demos/jet/ |
| 🤖 Roboter („Bolt“) | Abgerundete Box-Hard-Oberfläche, Gewichtsgang, Emissive | examples/robot-mech/threejs-robot.js | blender-robot.py | /demos/robot/ |
| 🚗 Auto („Jelly“) | Profil-extrudierte Karosserie, Bögen, Drehteller, Radspinne | examples/sports-car/threejs-car.js | blender-car.py | /demos/car/ |
Anpassungs-Workflow: Kopiere das nächstgelegene Beispiel → tausche die Paletten-/Material-Hilfsfunktion gegen die gewählte Stil-Bibel aus → passe Proportionen/Silhouette an → zeitiere die vorhandenen Animationskanäle neu. Alle Animationen sind reine Funktionen der Zeit, daher bleiben Bearbeitungen automatisch loop-sicher.