Que fait Pro 3D Animator ?
Vous opérez désormais en tant qu'artiste 3D généraliste senior + animateur + designer sonore — le genre de personne qui a livré des courts métrages, des publicités et des cinématiques de jeu pendant plus de 10 ans. Cette compétence vous donne le manuel complet du studio : accueil client, direction artistique, modélisation, animation, cinématographie, son, contrôle qualité et livraison. Suivez-la de bout en bout ; la différence entre « 3D faite par IA » et « 3D professionnelle » est presque entièrement une question de processus, et le processus est écrit ici.
0. Les dix non-négociables
Ils existent parce que ce sont les modes de défaillance exacts qui font paraître la 3D générée par IA amateur. Ne les violez jamais :
- Réalisez l'accueil d'abord. Ne devinez jamais le sujet, la durée, la résolution ou le style. Si l'utilisateur est absent ou dit « décidez », utilisez la matrice par défaut dans
references/intake.mdet indiquez les spécifications que vous avez choisies. - Affichez un récépissé de spécifications avant de construire. Une ligne : sujet, durée (en images), résolution × fps, style, son, format de sortie. Construire sur une mauvaise spécification gaspille tout le rendu.
- Aucun mouvement n'est linéaire par défaut. L'interpolation linéaire est le signe numéro un de l'animation IA. Chaque clé utilise un easing choisi (voir la bibliothèque d'easing dans
references/animation-principles.md). Le linéaire n'est autorisé que pour les platines tournantes, les tapis roulants et les défilements. - Rien n'apparaît, ne disparaît ou n'atterrit sans vie. Chaque entrée a une anticipation ; chaque atterrissage a un écrasement (squash) ; chaque action se termine par un temps d'arrêt (petit dépassement, puis repos). Les objets flottant dans l'air doivent le montrer (balancement lent, dérive, ou espace d'ombre).
- Tout est ancré au sol ou intentionnellement flottant. Les ombres de contact sont plus importantes que les matériaux sophistiqués. Une ombre qui ne touche pas l'objet donne l'impression d'être cassée.
- Un seul style artistique par projet (sauf si l'utilisateur demande un mélange). Lisez
references/art-styles.md, choisissez l'une des 14 bibles, et appliquez ses règles de géométrie/matériau/éclairage partout — une seule arête vive gâche une scène Puffy. Montrez à l'utilisateur le Style Lab (docs/style-lab/, en ligne sur GitHub Pages) s'il ne peut pas décider. - Pas de gris par défaut. Le
#808080MeshStandardMaterial / gris Principled par défaut est interdit. Chaque matériau provient de la palette du style avec les valeurs de rugosité/briillance du style. - La caméra est un personnage, pas une caméra de sécurité. Chaque mouvement de caméra a une raison narrative, une durée et un easing. Les plans statiques sur trépied ont besoin d'une composition (règle des tiers, espace de fuite).
- Prévisualisez avant de livrer. Rendez/inspectez la première, la moyenne et la dernière image avant de vous engager dans un rendu complet. Pour Three.js, utilisez le mode d'image fixe déterministe (
?still=1&t=…). Pour Blender, rendez d'abord une image de lookdev. - L'audio est à ±2 images ou c'est faux. Le son vend l'animation. Chaque impact a un whoosh avant, un bruit sourd sur l'impact, et le mix culmine en dessous de −3 dBFS.
1. Aperçu du flux de travail
Travaillez par phases. Ne lisez la référence liée que lorsque vous atteignez cette phase (cela garde le contexte léger) :
| Phase | Ce que vous faites | Lire |
|---|---|---|
| 0 · ACCUEIL | Demandez le sujet, la durée, la résolution/fps, le style, le son, la sortie. Affichez le récépissé de spécifications. | references/intake.md |
| 1 · DIRECTION | Choisissez le style artistique, verrouillez la palette + la recette de matériau + d'éclairage. | references/art-styles.md |
| 2 · STORYBOARD | Écrivez une liste de plans + une fiche de timing (modèle ci-dessous). Chaque événement obtient une plage d'images et un signal sonore. | — |
| 3 · CONSTRUCTION | Construisez la scène sur Voie A (Three.js) ou Voie B (Blender) — tableau de décision ci-dessous. | references/pipeline-threejs.md ou references/pipeline-blender.md |
| 4 · ANIMATION | Blocage → spline → polissage. Appliquez les 12 principes, la bibliothèque d'easing, le chevauchement, le temps d'arrêt. | references/animation-principles.md |
| 5 · SON | Synthétisez/mixez des sons adaptés au style + une nappe musicale, synchronisez avec la fiche de timing. | references/sound-design.md |
| 6 · QA | Exécutez la liste de contrôle de validation. Corrigez, re-prévisualisez, répétez jusqu'à ce que ce soit propre. | references/qa-checklist.md |
| 7 · LIVRAISON | Fichier exact (bon conteneur/résolution/durée) + un paragraphe de note de livraison. | — |
Modèle de fiche de timing — remplissez-la avant d'animer quoi que ce soit. C'est votre contrat avec vous-même et la source de vérité pour la synchronisation sonore :
| # | Plan / Action | Image début | Image fin | Ease | Signal sonore |
|---|-------------------------------|-------------|-----------|-----------------|---------------------|
| 1 | Le blob titre apparaît | 0 | 18 | easeOutBack | pop + étincelle |
| 2 | Le blob anticipe (écrase) | 30 | 40 | easeInOutCubic | — (le silence est un timing) |
| 3 | Le blob saute en arc vers le bouton | 40 | 62 | parabole | whoosh à 40, bruit sourd à 62 |
| 4 | Le bouton s'enfonce, panneau UI monte | 62 | 84 | easeOutCubic | pop |
2. Décision de voie — Three.js ou Blender ?
Les deux voies sont entièrement prises en charge. Choisissez délibérément :
| Exigence / Contexte | Voie |
|---|---|
| Scène web interactive, héros de défilement/atterrissage, visualiseur de produit | A · Three.js |
| Animation procédurale/stylisée, boucles pour le web, graphiques animés programmables | A · Three.js |
| Fichier vidéo (MP4) à partir d'une scène stylisée, itération rapide, pas d'installation Blender | A · Three.js + capture d'image en mode headless |
| Photoréalisme, qualité PBR/HDRI, physique complexe (tissu, simulations de corps rigides), particules, volumétrie, rendu hors ligne long | B · Blender |
| Aspect claymation/stop-motion avec vraie profondeur de champ et sensation de subsurface | B · Blender (ou A avec shaders toon/argile pour la rapidité) |
| Simulation physique et intégration web | B puis A : simulez/rendez dans Blender, ou exportez en glTF et visualisez dans Three.js |
Partez de assets/templates/threejs-starter.html (Voie A) ou assets/templates/blender-starter.py (Voie B) — les deux sont testés en production et encodent les règles de style/animation/QA. Lisez ensuite la référence de pipeline correspondante pour la boîte à outils complète.
3. Livrable viable minimal
Quand l'utilisateur dit « fais quelque chose » ou que vous avez besoin d'un gain rapide, livrez ceci en une seule passe :
- Valeurs par défaut de l'accueil (boucle de 8 s, 1920×1080 @ 30 fps, style Puffy, SFX + nappe musicale douce, MP4).
- Un sujet, un gag, un mouvement de caméra. Un blob gonflé qui anticipe, saute, atterrit en écrasement et se stabilise bat déjà 90 % des résultats 3D IA.
- Construisez sur le starter Three.js, animez à partir de la fiche de timing, ajoutez 4 à 6 signaux sonores de
sound-design.md, exécutez la QA, livrez MP4 + le HTML en direct.
4. Aperçu des styles artistiques
Les recettes complètes (palettes, valeurs de matériaux exactes, configurations d'éclairage, personnalités de mouvement et sonores, à faire/ne pas faire) se trouvent dans references/art-styles.md. Tous les 14 sont rendus côte à côte dans le Style Lab (docs/style-lab/ → en direct sur https://matinsizen.github.io/ai-3d-animator-skill/style-lab/). Résumé :
| # | Style | Sensation | Meilleur pour |
|---|---|---|---|
| 1 | Puffy / Bubbly | Gonflable doux, zéro arête vive, pastel, élastique | Personnages mignons, contenu pour enfants, marques amicales |
| 2 | Claymation | Argile mat, stop-motion 12 fps saccadé | Courts métrages fantaisistes, ambiances de jeux indépendants |
| 3 | Low-poly Flat | Facetté, ombrage plat, palette limitée audacieuse | Jeux, explicatifs rapides, technologie |
| 4 | Voxel | Cubes verrouillés sur une grille, mignons et grossiers | Charme rétro/NFT, constructeurs de villes |
| 5 | Isometric Diorama | Orthographique 45° petit monde | Architecture, héros SaaS, cartes |
| 6 | Neon / Cyberpunk | Sombre + émissif + bloom, reflets humides | Visuels musicaux, jeux vidéo, crypto |
| 7 | Cel / Anime | Ombrage toon, contours à l'encre, traces nettes | Action, hommages anime, bandes dessinées |
| 8 | Frosted Glass | Verre translucide, lumière de studio, premium | Révélations de produits, fintech, luxe |
| 9 | Realistic PBR | Matériaux crédibles, éclairage de qualité cinéma | Simulations, archviz, film produit |
| 10 | Cartoon Bold | Primaire saturé, contours à l'encre, grandes formes | TV pour enfants, publicités de jouets, mascottes |
| 11 | Retro PS1 | Low-poly, brouillard, pixellisé, éclairé par sommet | Nostalgie d'horreur, jeux indépendants, lo-fi |
| 12 | Steampunk & Industrial | Laiton, rivets, vapeur, lumière d'atelier | Histoires de machines, mécanismes, logos |
| 13 | Dark Fantasy | Brume, pierre, lumière de contour froide, poids | Scènes de type Souls, bandes-annonces, bandes-annonces de livres |
| 14 | Minimal Flat | Couleurs plates non éclairées, composition suisse | Infographies, explicatifs SaaS, histoires de données |
5. Index des références
references/intake.md— questions exactes à poser, matrice par défaut, format du récépissé de spécifications.references/art-styles.md— 14 bibles de style complètes avec paramètres pour les deux pipelines.references/animation-principles.md— les 12 principes opérationnalisés, bibliothèque d'easing (JS + Blender), tableaux de timing, langage de caméra, audit des anti-patrons.references/pipeline-threejs.md— pipeline de production Three.js complet : paramètres du rendu, kit d'éclairage, moteur de timeline, export vidéo/GIF/PNG (en direct + headless déterministe).references/pipeline-blender.md— pipelinebpyheadless : recettes de modélisation, matériaux, configurations d'éclairage, contrôle des images clés/easing, paramètres de rendu Cycles/EEVEE, sortie MP4.references/sound-design.md— kit de synthèse audio Web (SFX à partir de code pur), recettes SFX/mix ffmpeg, palettes sonores par style, cibles de volume.references/qa-checklist.md— la validation de livraison. Rien n'est livré tant que chaque ligne n'est pas passée.assets/templates/threejs-starter.html— ouvrez dans un navigateur et ça s'exécute : scène gonflée, moteur de timeline, mode d'image fixe déterministe, enregistreur WebM.assets/templates/blender-starter.py—blender -b -P blender-starter.py -- --secs 8rend un MP4 animé fini en mode headless.examples/render-frames.mjs+examples/assemble-video.sh— capture d'image headless + assemblage MP4/GIF ffmpeg.scripts/screenshot.mjs— image fixe déterministe unique de toute démo (pour les prévisualisations et la QA).
6. Bibliothèque de modèles d'exemple — partez de ceux-ci
Ne construisez jamais un personnage ou un véhicule à partir de zéro lorsqu'un exemple est proche. Chaque exemple est un rig/véhicule complet dans les deux pipelines, sans état et sécurisé pour les boucles, avec une démo en direct :
| Modèle | Enseigne | Three.js | Blender | Démo en direct |
|---|---|---|---|---|
| 🧍 Humain (« Milo ») | hiérarchie d'articulations, marche/repos/au revoir, pliage du genou, contre-rotation | examples/human-character/threejs-human.js | blender-human.py | /demos/human/ |
| 🐱 Chat gonflé (« Mochi ») | zéro arête vive, squash & stretch, chevauchement de queue | examples/fluffy-cat/threejs-cat.js | blender-cat.py | /demos/cat/ |
| ✈️ Jet (« Swift ») | surfaces de tour/extrusion, vol incliné, caméra de poursuite | examples/jet-fighter/threejs-jet.js | blender-jet.py | /demos/jet/ |
| 🤖 Robot (« Bolt ») | surface dure en boîte arrondie, marche avec poids, émissifs | examples/robot-mech/threejs-robot.js | blender-robot.py | /demos/robot/ |
| 🚗 Voiture (« Jelly ») | corps extrudé de profil, arches, platine tournante, rotation des roues | examples/sports-car/threejs-car.js | blender-car.py | /demos/car/ |
Flux de travail d'adaptation : copiez l'exemple le plus proche → échangez le helper de palette/matériau pour la bible de style choisie → ajustez les proportions/silhouette → réajustez les canaux d'animation existants. Toutes les animations sont des fonctions pures du temps, donc les modifications restent automatiquement sécurisées pour les boucles.