7ammad/teardown-cinema

Teardown Cinema

Même moteur que teardown (code three.js, une horloge, capture image par image, bande-son codée), objectif opposé. Teardown explique, donc il a des panneaux. Cinema montre, donc il n'y a rien à l'écran sauf le monde. Exemple fonctionnel, tous les fichiers : example/orison dans ce skill (le film de 30 secondes Orison et sa page interactive).

Nécessite le skill teardown à côté de celui-ci pour node_modules (three, esbuild, playwright), sims/capture.mjs et sfx/. La capture n'a pas besoin du Chromium propre à Playwright : définissez CHROMIUM pour utiliser Chrome installé. Si le téléchargement bloque, Chrome fonctionne.

La méthode, dans l'ordre

1. Une image maîtresse. Générez une image complexe avec un modèle d'image puissant. Avec l'application Codex : codex exec --skip-git-repo-check -s workspace-write -C <dir> - < prompt.txt. Le prompt quitte votre machine, donc gardez le contenu confidentiel en dehors. Demandez quelque chose avec une structure que vous pouvez nommer : un dôme, des nervures, des anneaux, des rubans. Codex ne rapporte pas quel modèle d'image il a utilisé.
2. Plans de texture à partir de l'image maîtresse. Attachez-la avec -i master.png et générez des plans plats, de face, éclairés uniformément : un panneau de verre, des entrelacs métalliques sur fond noir pur, de la soie, une planète sur fond noir, une coupe d'anneau, une créature vue de dessus. Le noir est ce que vous découpez. Ces plans sont pourquoi le résultat conserve le détail de la peinture. Générez un à la fois.
3. Mesurez l'image maîtresse, puis reconstruisez-la. Lisez les proportions de l'image en pixels et convertissez-les en unités du monde avant d'écrire la géométrie. Presque chaque erreur précoce ici était une proportion que personne n'avait mesurée.
4. Une seule entrée anime le corps. Choisissez le battement de la créature ou de la machine, écrivez-le en JS et GLSL, et posez chaque partie à partir de lui dans le shader de vertex. Rien n'est keyframe. Voir shared/kin.js, shared/glsl.js.
5. Plans, pas un survol. Une liste de plans, chacun une fonction pure du temps à l'intérieur, avec des coupures franches et un étalonnage par plan. Les coupures sont ce qui en fait un film. Voir orison-film/shots.js.
6. Comparez avec l'image maîtresse à chaque passage. Rendez l'image héroïque à côté de l'image et écrivez ce qui diffère. Corrigez, répétez.
7. Bande-son en code sur la même timeline avec sfx/ de teardown. Voir score.py.
8. La page est le même monde avec une main différente sur la caméra. Le défilement choisit un point sur un chemin, un clic est un battement, un glissement regarde autour. Voir orison-live/.

Disposition

mon-film/
  brief/            image maîtresse et prompts
  assets/           plans, en .jpg (intégrés dans la page)
  shared/           le monde : kin.js, glsl.js, sky.js, creature.js, world.js
  mon-film-film/    main.js, shots.js, timeline.json
  mon-film-live/    main.js, path.js, audio.js, body.html, style.css
  score.py

Commandes

Exécutez depuis le dossier du film. SKILL_DIR est ce skill, T est le skill frère teardown. Dans Windows PowerShell 5.1, utilisez npx.cmd et npm.cmd et pas de &&.

node "$SKILL_DIR/build.mjs" ./mon-film-film ./mon-film-live
export CHROMIUM="C:/Program Files/Google/Chrome/Application/chrome.exe"    # la capture peut utiliser Chrome installé

# une image, ou une planche, à une qualité choisie : --config pointe vers {"samples": N}
node "$T/sims/capture.mjs" mon-film-film --size 1920x1080 --dpr 1 --config s.json --still 12.5 --out frame.png
node "$T/sims/capture.mjs" mon-film-film --size 1920x1080 --dpr 1 --config s.json --stills 3,8,12,18,23,29 --cols 3 --out sheet.png

# tout le film
node "$T/sims/capture.mjs" mon-film-film --size 1920x1080 --dpr 1 --fps 24 --crf 15 --config s.json --out silent.mp4
python "$T/run_sfx.py" score.py
ffmpeg -i silent.mp4 -i teardown-out/mon-score.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart film.mp4

--stills juxtapose à travers une palette, donc les planches montrent de fausses bandes. Jugez la couleur et les bandes sur les images complètes à côté.

Ce que kit/cinema.js vous donne

new Cinema({canvas, samples, fps, shutter, msaa}), puis cine.frame(t, draw, look).

Une image de film est la moyenne de N sous-images. Chaque sous-image déplace le temps dans l'obturateur (vrai flou de mouvement), la caméra sur le disque de l'objectif avec le plan de netteté maintenu (vraie profondeur de champ, y compris à travers les couches transparentes), et un sous-pixel offset (anticrénelage). Le ray marchiné tramé converge avec cela. La post-production s'exécute une fois sur l'image HDR moyennée : bloom, traînée anamorphique, rayons lumineux vers un point, ACES, étalonnage, grain, vignette. samples: 1 est le même pipeline pour les pages live.

Chiffres d'un ordinateur portable avec un Radeon 780M intégré, à 1920x1080 : 32 échantillons par image ont pris 2,3 secondes par image, encodage inclus : 27 minutes pour 30 secondes de film à 24 fps. Une ébauche à 960x480 et 4 échantillons a pris 41 secondes pour tout le film, donc utilisez librement des ébauches. La page live tournait entre 37 et 51 fps sur tout son défilement à 1600x900, et plus élevé dans des lectures ponctuelles sans rien d'autre en cours d'exécution. Vérifiez gpu: dans la sortie de capture ; un rendu logiciel signifie que les drapeaux GPU n'ont pas été pris en compte.

Règles qui ont décidé si cela fonctionnait

• Pas de texte dans l'image. Pas d'étiquettes, de chiffres, de cartes de titre ou de légendes. L'image porte tout.
• Regroupez exactement un three.js. build.mjs le force. Une deuxième copie près du film (les propres node_modules d'un projet) échoue silencieusement : l'environnement de réflexion perd ses niveaux de flou et le métal devient sombre.
• Placez le rendu à côté de l'image maîtresse à la même taille et listez ce qui diffère. Les proportions d'abord, puis la couleur. Mesurez les positions en pixels et convertissez-les en directions. La plupart de la ressemblance sur Orison est venue de ces passages.
• Gardez la profondeur de champ faible uniquement pour les petites choses. Un flou intense sur un géant le fait ressembler à une miniature. Les rayons de l'objectif du film sont de 0,012 à 0,03 unités sur une créature de 26 unités.
• Les échantillons de temps et d'objectif ne doivent pas partager une séquence. S'ils le font, le flou trace des arcs visibles. Angle d'or pour l'objectif, base de Halton 5 pour le temps.
• Ne jamais pow() une valeur qui peut être négative. D3D renvoie NaN, et un pixel NaN se propage dans le bloom sous forme de rectangles noirs. Écrivez x*x. max(1.-ndv,0.), pas 1.-ndv. Le kit assainit également ses entrées.
• smoothstep(a, b, x) inversé avec a > b renvoie 0 sous Windows. Écrivez 1.-smoothstep(b,a,x).
• Plans en miroir sur une surface qui se rétrécit : cartographiez avec Mercator pour que les cellules restent rondes, et ne mettez en miroir que les grandes cellules du plan. Les petites se transforment en confettis de près.
• Les panneaux alignés avec la lumière doivent être plus clairs, pas plus brillants. Sinon, l'objet à l'intérieur d'un corps de verre n'est jamais lisible.
• Une ouverture sombre a besoin de quelque chose de vivant à l'intérieur. Une lueur tamisée à travers le brouillard la porte jusqu'au premier battement.
• Nuages live : demi-résolution avec une moyenne glissante ; marchez plus dense près de la caméra. Les nuages sont doux, donc rien n'est perdu.
• La première seconde d'une page live est la compilation du shader. Compilez avant la première image et montrez une petite pulsation en attendant, pas de texte de chargement.

Règles de la page live

Toutes les règles live de teardown s'appliquent (niveaux de qualité, réchauffement des shaders). Aussi : ouvrez sur l'image maîtresse et fondez dans la 3D une fois les shaders prêts ; les niveaux remontent lorsque les images se rétablissent, pas seulement en baisse ; pas d'étiquettes sur la page ; un nom accessible sur le canvas et sur tout bouton ; une cible de clic d'au moins 44 px ; le son ne démarre qu'après le premier geste ; le corps se stabilise après un battement au lieu de grimper indéfiniment ; la qualité diminue en fonction du taux d'images mesuré sans demander.

Revue

Vous ne pouvez pas regarder une vidéo, mais vous pouvez lire des images. D'abord une planche de chaque plan, des images complètes pour ce que la planche signale, puis --stills every:0.2 --from A --to B à travers une transition. Lisez une planche d'une image par seconde de l'encodage final : cela montre ce que l'encodeur a écrit. Mesurez la bande-son avec ffmpeg -af ebur128=peak=true. Une personne doit encore regarder le film et entendre la bande-son une fois ; dites-le lors du rapport.

Pour un hôte qui ajoute son propre squelette de document, comme un Artefact Claude, construisez avec FRAGMENT=1 et définissez le nom avec PAGE_TITLE : cela écrit aussi <name>.fragment.html.