Studio vidéo 3D

Que fait Studio vidéo 3D ?

Construisez chaque plan sous forme de code, vérifiez les images fixes, puis effectuez le rendu d'un MP4 sur la machine de l'utilisateur. Parlez à l'utilisateur dans sa propre langue et en termes simples. Beaucoup de personnes qui demandent cela n'ont jamais écrit de code.

1. Préparer un projet

Cherchez d'abord un projet existant : un dossier contenant tools/render.mjs et src/kit/. S'il y en a un, ajoutez-y une nouvelle scène.

Sinon, vérifiez node --version (18 ou plus récent), puis créez un projet dans le dossier actuel de l'utilisateur, nommé d'après le plan :

node <dossier-de-ce-skill>/scripts/new-project.mjs video-<sujet>

Prévenez l'utilisateur que cela prend quelques minutes et environ 1 Go d'espace disque, et que le premier rendu télécharge également un navigateur sans tête de 130 Mo. Chaque commande ultérieure s'exécute depuis l'intérieur du dossier du projet.

2. Définir le plan

Déterminez le format, la durée, le sujet, l'ambiance, les couleurs, le texte exact et les éventuels fichiers de logo ou de modèle. Ne posez de questions que sur ce qui changerait le résultat et qui n'a pas de valeur par défaut raisonnable. Valeurs par défaut : 9:16 pour les réseaux sociaux, 16:9 sinon, 5 à 8 secondes, 30 images par seconde.

Rédigez un court plan pour vous-même avant de construire, car un plan avec une seule idée claire est plus lisible qu'un plan avec plusieurs :

• Sujet : la seule chose que le spectateur doit regarder
• Caméra : objectif et un seul mouvement
• Lumière : d'où elle vient et ce qu'elle révèle
• Temps fort : le moment où l'action principale se produit, en secondes

Les fichiers fournis par l'utilisateur sont placés dans le dossier public/ du projet.

3. Construire à partir de la scène la plus proche

La demande porte principalement sur	Partir de	Prend en paramètre
Un objet ou un produit	src/scenes/ProductOrbit.tsx	modelFile, color, backdrop
Un mot ou un titre court	src/scenes/KineticTitle.tsx	text, fontFile, color, backdrop
Un logo	src/scenes/LogoReveal.tsx	logoFile, tagline, color, glow, backdrop
Une pièce, un lieu ou une ambiance	src/scenes/MorningRoom.tsx	wall, accent
Quelque chose d'abstrait, de liquide ou piloté par shader	src/scenes/LiquidForm.tsx	look

Si la demande ne modifie que ces réglages, passez-les avec --set et laissez le code intact. Sinon, copiez la scène dans un nouveau fichier, enregistrez-la dans src/Root.tsx, et modifiez la copie, afin que les exemples restent disponibles comme référence.

Avant d'écrire le code de la scène, lisez references/toolkit.md, qui liste ce que fournit le kit. Pour les décisions concernant l'objectif, la lumière, le matériau et le timing, lisez references/craft.md.

Sans fichier de modèle, construisez l'objet à partir des pièces du kit : useLathe pour tout ce qui est rond, useRoundedBox pour tout ce qui est cubique, useExtrudedSvg pour les silhouettes plates, regroupés ensemble. Les petits détails tels que les coutures, les anneaux, les nervures de préhension, le texte imprimé et les bords légèrement arrondis sont ce qui rend un modèle simple crédible, alors donnez à chaque objet quelques-uns de ces éléments et une carte de surface provenant du kit. Une couleur unie sur une forme lisse ressemble toujours à un espace réservé.

Ce qui garantit la correction d'un rendu

Remotion effectue le rendu des images dans le désordre et dans plusieurs onglets de navigateur à la fois, donc une image ne peut pas dépendre de celle qui la précède :

• Calculez tout ce qui change à partir de useShot(). useState, l'animation avec useFrame, Math.random() et Date provoquent des scintillements ou des sauts, utilisez donc wobble et scatter pour l'aléatoire.
• Chargez uniquement depuis public/, via usePublicFile ou les hooks construits dessus. Un rendu ne doit pas dépendre du réseau.
• Gardez la 3D à l'intérieur de <Stage>. Il possède le pipeline de rendu, n'ajoutez donc pas de deuxième boucle de rendu et ne définissez pas le tone mapping ailleurs.
• Chaque image est dessinée plusieurs fois et moyennée, ce qui donne des ombres douces, un flou de mise au point réaliste et des bords nets. Tout ce qui doit être flou dans une image va dans useEachSample.
• Placez le petit texte dans un AbsoluteFill normal au-dessus du Stage, comme le fait LogoReveal. Il reste plus net que le texte 3D aux petites tailles.

4. Vérifier les images fixes avant le rendu

npm run check
node tools/stills.mjs <Plan> --set format=vertical --count 5

Ouvrez chaque image listée par la commande et regardez-la. Vous ne pouvez pas regarder une vidéo, donc les images fixes sont la façon dont vous voyez le plan. Pour juger du mouvement, demandez des images rapprochées autour du temps fort, par exemple --frames 20,24,28,32.

Recherchez :

• Le sujet est dans le cadre et dégagé des bords sur la première image, la dernière image et au milieu du mouvement.
• En 9:16, rien d'important ne se trouve dans les 14% supérieurs ou les 20% inférieurs, là où les applications mobiles placent leurs boutons.
• Les hautes lumières conservent leurs détails et l'image n'est ni délavée ni boueuse.
• Le texte est correctement orthographié et chaque lettre est apparue au moment où elle doit être lisible.
• Rien ne flotte, ne traverse quelque chose d'autre, ou ne projette une ombre avec un crénelage visible.

Quand quelque chose ne va pas, modifiez une chose et vérifiez à nouveau, afin de pouvoir dire ce qui a résolu le problème. references/troubleshooting.md liste les symptômes et correctifs habituels.

Ensuite, scannez chaque image à la recherche de flashs et de sauts, en utilisant les mêmes valeurs --set :

node tools/check-motion.mjs <Plan> --set format=vertical

Les images fixes n'échantillonnent que quelques instants, donc un flash durant quelques images peut passer entre elles. Les surfaces planes et brillantes en sont la cause habituelle, car elles peuvent refléter une lumière vive d'un seul coup. Si la commande signale CHECK, regardez les images qu'elle nomme et corrigez-les avant le rendu, à moins que le changement soudain ne soit intentionnel, comme un cut délibéré.

5. Rendu

node tools/render.mjs <Plan> --set format=vertical --out out/<nom>.mp4

Utilisez --quality draft pour un test en demi-résolution. En pleine qualité, les plans de 5 à 8 secondes ont pris 36 à 88 secondes sur une carte graphique de bureau. Sans carte graphique, les outils passent à 4 passes par image, ce qui est beaucoup plus grossier et encore bien plus lent, donc prévenez l'utilisateur et lancez les rendus longs en arrière-plan.

Donnez à l'utilisateur le chemin du MP4, son format et sa durée, et le temps qu'il a fallu. Soyez clair sur le fait que vous avez vérifié les images fixes et les changements d'image à image, et que vous n'avez pas regardé la vidéo jouer.

6. Gérer les commentaires

Appliquez exactement ce que l'utilisateur a demandé et ne touchez à rien d'autre, de sorte qu'un commentaire comme "lumière plus chaude" ne modifie pas également le cadrage. Vérifiez à nouveau les images fixes, puis refaites le rendu.

Limites à mentionner clairement

• Il n'y a pas de véritable flou de mouvement, donc les mouvements très rapides peuvent sembler saccadés. Gardez-les modérés, ou essayez --set fps=60.
• L'éclairage n'est pas du ray tracing complet. Les ombres et l'occlusion du ciel sont douces et précises, mais la lumière ne rebondit pas toute seule, donc les intérieurs ont besoin d'une lumière d'appoint supplémentaire.
• Remotion a sa propre licence : gratuite pour les particuliers et pour les entreprises de moins de 3 personnes, tandis que les grandes entreprises ont besoin d'une licence payante sur remotion.dev. Mentionnez-le si l'utilisateur semble travailler pour une entreprise.