Communitygithub.com

Explorateur 3D à zoom infini

Créez une vidéo MP4 3D « zoom infini » codée, où un unique mouvement de caméra traverse plusieurs ordres de grandeur avec une mesure en direct affichée à l'écran et des objets familiers placés à côté du sujet pour l'échelle.

Qu'est-ce que Explorateur 3D à zoom infini ?

Cette compétence permet de générer automatiquement une vidéo explicative 3D de type « zoom infini » (comme « Rien n'est vraiment tranchant »), où la caméra se déplace sans coupure à travers plusieurs ordres de grandeur, avec une mesure en direct et des objets familiers servant de repères d'échelle. Tout est entièrement généré par code (Three.js, Chrome headless sur GPU, ffmpeg), sans modèle de génération vidéo. Elle est idéale pour créer des clips comparant des tailles, des zooms jusqu'à l'atome, ou des animations « puissances de dix ». Le processus s'appuie sur un template éprouvé qui gère les huit ordres de grandeur sans perte de précision, les détails procéduraux adaptés à l'échelle, la profondeur de champ et un rendu déterministe. L'utilisateur n'a qu'à adapter les données physiques, la géométrie du sujet, les objets d'échelle et les étiquettes, puis lancer le rendu. La compétence gère également l'ajout optionnel de voix off synchronisée avec le zoom.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/igm61799-cloud/zoom-explainer-3d/tree/HEAD

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait Explorateur 3D à zoom infini ?

Un format qui explique l'échelle mieux que n'importe quel graphique : commencer sur un objet que tout le monde connaît, voler vers lui sans un seul cut, garder un nombre à l'écran qui indique au spectateur la distance parcourue, et terminer sur un fait inattendu. Le résultat de référence pour cette compétence est « Rien n'est vraiment tranchant » : une lame de rasoir, 26 divisions par deux, un atome de fer, et la ligne selon laquelle son tranchant fait encore environ 300 atomes de large.

assets/template/ est ce projet terminé. Commencez à partir de celui-ci plutôt que d'un fichier vide : les parties difficiles (zoom de huit ordres de grandeur sans perte de précision, détails qui changent avec l'échelle, profondeur de champ, moteur de rendu déterministe) y sont déjà résolues et ont nécessité plusieurs itérations pour être au point.

La formule

Gardez les cinq éléments. Chacun fait son travail.

  1. Un seul plan continu. Tout l'intérêt est que le spectateur ne perd jamais ses repères. Une coupure réinitialise sa perception de l'échelle.
  2. Une seule mesure en direct. Une fine barre ancrée sur le sujet, un nombre qui change à chaque image, un compte de divisions par deux (ou de multiplications par deux), et deux ou trois mots décrivant ce qui est visible. La barre est la seule chose que le spectateur doit lire, elle doit donc être honnête : sa longueur dans la scène correspond réellement au nombre affiché.
  3. Le sujet change de caractère à chaque échelle. Le poli devient des traces de meulage, puis des éclats, puis des grains cristallins, puis un bord arrondi, puis des atomes. Si la surface reste la même pendant trois secondes, le zoom donne l'impression qu'il ne se passe rien.
  4. Des objets pour l'échelle. Lorsque le zoom traverse chaque taille, un objet familier de cette taille se trouve à côté du sujet avec son nom et sa taille : grain de sel, cheveu, globule rouge, bactérie, virus, transistor, anticorps, ADN. Ils transforment un nombre abstrait en « plus petit qu'un virus ».
  5. Une chute. Revenez rapidement au point de départ et montrez le seul nombre pour lequel le voyage a été fait.

Flux de travail

1. Recherche avant la modélisation

La vidéo ne vaut la peine que si elle est vraie. Recherchez les dimensions réelles (recherche web, sources primaires si possible) et notez, pour le sujet et pour chaque objet d'échelle : la taille, la source, et tout ce que vous simplifiez. La géométrie est ensuite construite à partir de ces nombres, donc l'image ne peut pas s'éloigner des faits. Signalez les sources et les simplifications à l'utilisateur à la fin ; on vous les demandera.

Choisissez 6 à 9 objets d'échelle, chacun au moins environ 3 fois plus petit que le précédent. Plus proches que cela, leurs étiquettes se chevauchent ; plus éloignés qu'environ 30 fois, l'écran reste vide pendant plusieurs secondes.

2. Montrer le plan quand cela aide

Si l'utilisateur a demandé à voir le plan d'abord, ou si le brief laisse des choix réels ouverts (voix off ou silencieux, langue, quelle est la chute), donnez un petit tableau : temps, échelle, ce qui est en vue, objet pour l'échelle. Sinon, continuez ; un plan que personne n'a demandé ne fait que retarder le premier rendu.

3. Configurer le projet

cp -r <skill>/assets/template <project>/ && cd <project> && npm install
node render.mjs --stills 1,10,20,30,40

La deuxième commande doit afficher le nom du GPU et écrire cinq JPEG dans out/. Si elle signale SwiftShader ou llvmpipe, le rendu se fait sur le CPU et prendra des heures : corrigez les flags GPU avant d'aller plus loin (voir references/pitfalls.md).

4. Adapter la scène

main.js est un fichier unique, divisé en sections. Lisez references/techniques.md avant de changer quoi que ce soit de structurel ; cela explique pourquoi chaque partie est construite comme elle l'est. Ce qui change habituellement pour un nouveau sujet :

Section dans main.jsCe qu'il faut remplacer
constantsDonnées physiques en mètres, taille de départ L0, nombre de divisions par deux HMAX, chronologie
subject surfaceLa section transversale prof(), le contour de découpe, la table des caractéristiques de surface FEATS (longueur d'onde, type, force)
finest scaleLe réseau atomique (ou quel que soit le dernier stade)
things for scaleLa liste addObj(name, sizeText, sizeInMetres, geometry, material, placement)
overlayLABELS (ce qui est en vue à chaque niveau de zoom), la légende finale
camera keysK_AZ, K_EL, K_TY, K_D, K_AP en fonction du niveau de zoom

Pour un sujet de forme différente (une puce, une feuille, une feuille de papier), conservez la mécanique et remplacez le profil et les caractéristiques. Pour un zoom arrière, exécutez la même chronologie en sens inverse et dites « doublé ».

5. Regarder les images fixes avant de rendre le film

Rendez 8 à 10 images fixes réparties sur la chronologie, assemblez-les en planches contact avec ffmpeg et lisez-les. Ensuite, corrigez ce que vous voyez et répétez. C'est dans cette boucle que la qualité se construit ; chaque problème de la première version du film de référence était visible sur les images fixes et aucun n'était visible dans le code. Vérifiez en particulier :

  • L'exposition. Le premier passage est presque toujours surexposé. Le métal doit être principalement sombre avec des reflets définis.
  • Tout ce qui est coupé par le bord du cadre, en particulier les objets d'échelle près du haut.
  • Les étiquettes sur des zones claires ou les unes sur les autres. Gardez l'étiquette de mesure dans un noir vide.
  • Si chaque étape correspond à ce que dit son étiquette. Si l'étiquette dit « grains » et que l'image montre des rayures, l'un des deux est faux.
  • La première et la dernière image, car ce sont la vignette et la chute.
ffmpeg -y -i a.jpg -i b.jpg -i c.jpg -i d.jpg -filter_complex "[0][1]hstack[t];[2][3]hstack[u];[t][u]vstack,scale=1920:-1" sheet.jpg

6. Rendre et vérifier le résultat

node render.mjs --full --o video.mp4            # ajouter --audio vo.wav s'il y a une narration

Exécutez-le en arrière-plan ; un film de 45 secondes en 1080p prend quelques minutes sur un GPU discret. Ensuite, vérifiez le fichier lui-même, pas les images fixes que vous avez faites plus tôt : probez la durée et la taille, extrayez une grille d'aperçu et extrayez six images consécutives d'une section chargée pour rechercher des scintillements. Les détails procéduraux fins se compressent mal, attendez-vous donc à des fichiers volumineux et faites une copie plus petite si nécessaire :

ffmpeg -i video.mp4 -vf "fps=1/3,scale=640:-1,tile=4x4" -frames:v 1 overview.jpg
ffmpeg -ss 13 -i video.mp4 -vf "crop=960:540:480:270,tile=3x2" -frames:v 1 consecutive.jpg
ffmpeg -i video.mp4 -vf scale=1280:720 -c:v libx264 -preset slow -crf 25 -maxrate 4200k -bufsize 8400k small.mp4

Dites clairement ce que vous avez vérifié et ce que vous n'avez pas vérifié. Les grilles d'images prouvent que l'image est correcte ; elles ne prouvent pas que le mouvement est bon, alors dites que l'utilisateur doit regarder.

Valeurs par défaut

  • Silencieux. Pas de musique, pas d'effets sonores, pas de voix off sauf demande explicite. Le format se suffit à lui-même, et la référence dont il est issu n'avait pas de narration.
  • Le texte est uniquement des données et des noms. La mesure, le compte de divisions par deux, ce qui est en vue, les noms et tailles des objets d'échelle, un seul nombre final. Si une narration est ajoutée, supprimez chaque étiquette que la voix dit déjà, car lire et écouter les mêmes mots divise l'attention.
  • 1920x1080, 30 ips, 40 à 50 secondes, rendu à 1,5x et réduit. Pour une vidéo verticale, changez W et H et revérifiez chaque image fixe ; la composition ne se transfère pas d'elle-même.
  • Étiquettes dans la langue du public de l'utilisateur, qui n'est pas toujours la langue dans laquelle l'utilisateur discute. Demandez en cas de doute.

Ajouter une voix off

Seulement si demandé. Écrivez le script en courtes lignes, chacune appartenant à une étape, générez ou recevez l'audio, obtenez les timings des mots (faster-whisper fonctionne bien), puis pilotez le zoom à partir de l'audio : le niveau de zoom devient une fonction interpolée du temps qui se maintient pendant qu'une ligne explique une étape et se déplace entre les lignes. Passez l'audio à render.mjs --audio. Laissez un petit événement se produire pendant chaque maintien (un balayage de lumière, un objet qui arrive, des atomes qui vibrent), sinon un zoom en pause semble figé.

Fichiers de référence

  • references/techniques.md - comment le template fonctionne et pourquoi : mise à l'échelle autour du point focal, détails procéduraux adaptés à l'échelle, imposteurs de sphères, profondeur de champ, objets ancrés dans l'espace physique, moteur de rendu déterministe. À lire avant les modifications structurelles.
  • references/pitfalls.md - échecs déjà rencontrés et leurs corrections. À lire quand un rendu semble erroné ou qu'un outil se comporte mal.
  • MASTER_PROMPT.md - une invite à remplir pour démarrer une nouvelle vidéo, ainsi que des idées de sujets qui correspondent à la formule.

Skills associés