Vidéo 3D cinématique

Que fait Vidéo 3D cinématique ?

Claude ne peut pas générer directement des pixels vidéo, mais il peut écrire une scène 3D sous forme de code, la rendre image par image et encoder les images. Cette compétence est ce pipeline.

scène (HTML + Three.js)  -- window.seek(t) -->  scripts/render.mjs  -->  captures d'écran Chrome headless  -->  ffmpeg  -->  MP4

render.mjs avance une horloge virtuelle au lieu d'enregistrer en temps réel. Le résultat est le même sur chaque machine, et une scène lourde ne bégaye pas ; elle rend simplement plus lentement. C'est pourquoi une scène doit être une fonction pure du temps (voir « Règles de la scène »).

1. Vérifier d'abord les outils

node -v        # 22 ou plus récent (render.mjs utilise le WebSocket intégré)
ffmpeg -version

Chrome, Edge ou Chromium doivent être installés (trouvés automatiquement ; définissez CHROME_PATH pour remplacer). Three.js est chargé depuis un CDN par la scène, donc la machine qui rend a besoin d'un accès Internet sauf si Three.js est vendu en local (voir references/troubleshooting.md). Si un outil manque, dites exactement à l'utilisateur quoi installer et arrêtez de deviner des solutions de contournement. Blender n'est nécessaire que pour la voie photoréaliste.

Exécutez le test de fumée sans dépendances une fois lorsque la machine est neuve. Il prouve que Chrome, WebGL et ffmpeg fonctionnent tous, donc tout problème ultérieur vient de la scène et non de la configuration :

node <dossier-compétence>/scripts/render.mjs <dossier-compétence>/templates/smoke-test.html --out smoke.mp4 --duration 2 --width 640 --height 360

2. Flux de travail

1. Définir le brief en une ou deux phrases : sujet, ambiance, durée, rapport d'aspect, tout texte, audio. Lorsque l'utilisateur laisse des choses ouvertes, choisissez des valeurs par défaut et dites ce que vous avez choisi : 1920x1080, 30 ips, 8-12 s, fond sombre, un objet héros, un mouvement de caméra, un titre. Le format vertical (TikTok/Reels/Shorts) est 1080x1920. Poser plus d'une courte question avant de commencer est rarement utile ; un premier rendu est la meilleure question.
2. Partir du modèle. Copiez templates/starter/ dans le répertoire de travail (cp -r) et éditez index.html. Il contient déjà le moteur de rendu, le mappage de tons, les réflexions de studio, le bloom, les ombres, les particules ensemencées, un chemin de caméra, une superposition de titre HTML et le crochet de timeline. Remplacez l'objet héros, la palette, le chemin de caméra et le texte ; conservez la plomberie.
3. Regarder les images fixes avant de rendre la vidéo. Rendez quelques images à pleine taille aux moments les plus chargés et ouvrez-les (Lisez les PNG) :

   node <dossier-compétence>/scripts/render.mjs ma-video/index.html --stills 0,2,4,6,7.5 --out ma-video/stills
   

   Corrigez la composition, l'exposition, les couleurs et la lisibilité du texte ici. Une image fixe prend une seconde ou deux ; un rendu complet prend des minutes.
4. Rendre une fois. Choisissez les paramètres, puis rendez la vidéo entière :

   node <dossier-compétence>/scripts/render.mjs ma-video/index.html --out ma-video/video.mp4 --width 1920 --height 1080 --fps 30 --scale 2
   

   --scale 2 rend en 2x et sous-échantillonne, ce qui supprime les bords scintillants (utile uniquement pour le rendu final). Les longs rendus doivent se faire en arrière-plan avec une progression interrogée, pour que l'utilisateur ne reste jamais à regarder un terminal silencieux.
5. Vérifier le fichier, pas le journal. Utilisez ffprobe pour la durée, la taille et les ips ; extrayez deux ou trois images du MP4 (ffmpeg -ss 3 -i video.mp4 -frames:v 1 check.png) et regardez-les. Ensuite, transmettez le MP4 ainsi que le dossier de la scène pour que l'utilisateur puisse l'ajuster.
6. Les révisions modifient la scène et refont le rendu. Utilisez --start/--end pour ne rendre qu'une plage lors de l'itération sur un seul moment.

3. Règles de la scène (et pourquoi)

• Tout ce qui est animé est une fonction pure de t secondes, définie à l'intérieur de update(t). Pas de Math.random() (utilisez le rng() ensemencé), pas de Date.now(), pas de clock.getDelta(), pas d'état accumulé entre les images. Le moteur de rendu peut appeler seek avec n'importe quel temps dans n'importe quel ordre, et un aperçu dans le navigateur doit correspondre exactement à la vidéo.
• Le contrat de la page est window.seek(t) (dessiner de manière synchrone), window.__duration (secondes) et window.__ready = true une fois les ressources chargées. installTimeline() dans lib/stage.js fait les trois. Détails dans references/contract.md.
• Les couleurs HDR au-dessus de 1.0 font briller les choses. Le bloom ne capture que les pixels plus lumineux que son seuil, donc les parties émissives utilisent new THREE.Color(hex).multiplyScalar(3..6) ; les surfaces ordinaires restent en dessous du seuil.
• Le texte est en HTML/CSS par-dessus le canvas (la capture d'écran inclut la page). Il est net à n'importe quelle résolution, ne nécessite pas de fichiers de police, et s'anime par de simples changements de style dans update(t).
• Chargez les ressources avec await avant de définir __ready (modèles GLTF, textures, polices). Une image rendue avant l'arrivée d'une ressource est un défaut permanent dans la vidéo.
• Gardez une seule histoire de lumière : une lumière principale, une ou deux lumières de contour colorées, et des réflexions basées sur l'image. Les matériaux réfléchissants (métal, verre, vernis) sur un sol sombre et légèrement réfléchissant sont ce qui se lit comme « animation 3D » plutôt que « démo web ». references/cinematography.md contient les recettes pour les mouvements de caméra, le rythme, les courbes d'atténuation, l'éclairage et les couleurs.

4. Plusieurs scènes, audio, autres formats

• Vidéos multi-scènes : rendez chaque scène dans son propre MP4 avec des paramètres de taille, d'ips et d'encodeur identiques, puis joignez sans ré-encodage : écrivez un list.txt avec des lignes file 'a.mp4' et lancez ffmpeg -f concat -safe 0 -i list.txt -c copy out.mp4. Placez les fondus enchaînés dans la propre timeline d'une scène (la dernière seconde d'une scène et la première seconde de la suivante fondent toutes deux dans le noir/une couleur) plutôt que de mélanger des fichiers finis, ce qui encoderait tout deux fois.
• Audio : --audio track.mp3 le muxe et le coupe à la vidéo. Pour ne changer que le son plus tard : ffmpeg -i video.mp4 -i new.mp3 -map 0:v -map 1:a -c:v copy -shortest out.mp4.
• GIF / WebM / copie plus petite : ré-encodez le MP4 fini avec ffmpeg ; ne refaites jamais un rendu pour un changement de format.
• Changer une scène signifie refaire le rendu du fichier de cette scène (et du suivant seulement si un fondu enchaîné y réside).

5. Quand utiliser Blender à la place

Utilisez Blender (references/blender.md, templates/blender/render_blender.py) uniquement lorsque le brief nécessite ce qu'un moteur temps réel ne peut pas bien simuler : verre et caustiques par lancer de rayons, lumière volumétrique, peau sous-surfacique, simulation de fluide/tissu/fumée, ou prises de vue produit entièrement photoréalistes. C'est beaucoup plus lent par image et nécessite Blender 4+ installé ; pour tout le reste, Three.js aboutit à un bon résultat en une fraction du temps et itère plus rapidement.

Fichiers de référence

Fichier	À lire quand
references/contract.md	écrire une scène de zéro, charger des modèles/textures, ou déboguer « __ready jamais défini »
references/cinematography.md	rendre le résultat beau : caméra, lumière, matériaux, courbes d'atténuation, rythme, couleurs, texte, particules
references/troubleshooting.md	images noires, rendus lents, configuration CDN/hors ligne, bizarreries Windows/macOS/Linux, tailles impaires
references/blender.md	travail photoréaliste ou simulations
scripts/render.mjs	toutes les options : node scripts/render.mjs --help