7ammad/teardown-cinema

Teardown Cinema

Mismo motor que teardown (código three.js, un reloj, captura fotograma a fotograma, banda sonora hecha con código), propósito opuesto. Teardown explica, por lo que tiene paneles. Cinema muestra, por lo que no tiene nada en pantalla excepto el mundo. Ejemplo funcional, todos los archivos: example/orison en esta skill (la película de 30 segundos Orison y su página interactiva).

Necesita la skill teardown al lado de esta para node_modules (three, esbuild, playwright), sims/capture.mjs y sfx/. La captura no necesita el Chromium propio de Playwright: establece CHROMIUM al Chrome instalado. Si esa descarga se estanca, Chrome funciona.

El método, en orden

1. Una imagen maestra. Genera una imagen compleja con cualquier modelo de imagen potente. Con la app Codex: codex exec --skip-git-repo-check -s workspace-write -C <dir> - < prompt.txt. El prompt sale de tu máquina, así que manten el contenido confidencial fuera de él. Pide algo con estructura que puedas nombrar: una cúpula, costillas, anillos, cintas. Codex no informa qué modelo de imagen usó.
2. Láminas de textura a partir de la maestra. Ajústala con -i master.png y genera láminas planas, frontales, iluminadas uniformemente: panel de vidrio, tracería metálica sobre negro puro, seda, un planeta sobre negro, una sección transversal de anillo, una criatura desde arriba. El negro es lo que se recorta. Estas láminas son la razón por la que el resultado conserva el detalle de la pintura. Genera una a la vez.
3. Mide la maestra, luego reconstruye. Lee las proporciones de la imagen en píxeles y conviértelas en unidades del mundo antes de escribir geometría. Casi todos los errores tempranos aquí fueron una proporción que nadie midió.
4. Una entrada controla el cuerpo. Elige el ritmo de la criatura o máquina, escríbelo en JS y GLSL, y posa cada parte a partir de él en el shader de vértices. Nada está animado con fotogramas clave. Ver shared/kin.js, shared/glsl.js.
5. Planos, no un paseo. Una lista de planos, cada uno una función pura del tiempo dentro de él, con cortes duros y una gradación por plano. Los cortes son lo que la convierte en una película. Ver orison-film/shots.js.
6. Compara con la maestra en cada pasada. Renderiza el fotograma principal junto a la imagen y escribe qué difiere. Corrige, repite.
7. Banda sonora en código en la misma línea de tiempo con sfx/ de teardown. Ver score.py.
8. La página es el mismo mundo con una mano diferente en la cámara. El desplazamiento elige un punto en un camino, un clic es un pulso, un arrastre mira alrededor. Ver orison-live/.

Diseño

mi-pelicula/
  brief/            imagen maestra y prompts
  assets/           láminas, como .jpg (incrustadas en la página)
  shared/           el mundo: kin.js, glsl.js, sky.js, creature.js, world.js
  mi-pelicula-film/     main.js, shots.js, timeline.json
  mi-pelicula-live/     main.js, path.js, audio.js, body.html, style.css
  score.py

Comandos

Ejecuta desde la carpeta de la película. SKILL_DIR es esta skill, T es la skill hermana teardown. En Windows PowerShell 5.1 usa npx.cmd y npm.cmd y no &&.

node "$SKILL_DIR/build.mjs" ./mi-pelicula-film ./mi-pelicula-live
export CHROMIUM="C:/Program Files/Google/Chrome/Application/chrome.exe"    # la captura puede usar el Chrome instalado

# un fotograma, o una hoja, a una calidad elegida: --config apunta a {"samples": N}
node "$T/sims/capture.mjs" mi-pelicula-film --size 1920x1080 --dpr 1 --config s.json --still 12.5 --out frame.png
node "$T/sims/capture.mjs" mi-pelicula-film --size 1920x1080 --dpr 1 --config s.json --stills 3,8,12,18,23,29 --cols 3 --out sheet.png

# la película completa
node "$T/sims/capture.mjs" mi-pelicula-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/mi-banda.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart film.mp4

--stills organiza en mosaico a través de una paleta, por lo que las hojas muestran un falso bandeado. Evalúa el color y el bandeado en los fotogramas completos a su lado.

Qué te da kit/cinema.js

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

Un fotograma de película es el promedio de N subfotogramas. Cada subfotograma mueve el tiempo dentro del obturador (desenfoque de movimiento real), la cámara sobre el disco de lente manteniendo el plano de enfoque (profundidad de campo real, también a través de capas transparentes), y un desplazamiento de subpíxel (anti-aliasing). El trazado de rayos tramado converge con ello. El postprocesado se ejecuta una vez sobre la imagen HDR promediada: bloom, destello anamórfico, rayos de luz hacia un punto, ACES, gradación, grano, viñeta. samples: 1 es el mismo pipeline para páginas en vivo.

Números de un portátil con una Radeon 780M integrada, a 1920x1080: 32 muestras por fotograma tardaron 2.3 segundos por fotograma incluyendo la codificación: 27 minutos para 30 segundos de película a 24 fps. Un borrador a 960x480 y 4 muestras tardó 41 segundos para toda la película, así que usa borradores libremente. La página en vivo funcionó a 37 a 51 fps en todo su desplazamiento a 1600x900, y más alto en lecturas puntuales sin nada más ejecutándose. Verifica gpu: en la salida de la captura; un renderizador por software significa que las banderas de GPU no funcionaron.

Reglas que decidieron si funcionaba

• Sin texto en el encuadre. Sin etiquetas, números, tarjetas de título o subtítulos. La imagen lo carga.
• Empaqueta exactamente un three.js. build.mjs lo fuerza. Una segunda copia cerca de la película (un node_modules propio del proyecto) falla silenciosamente: el entorno de reflexión pierde sus niveles de desenfoque y el metal se oscurece.
• Coloca el render junto a la maestra al mismo tamaño y enumera qué difiere. Primero proporciones, luego color. Mide posiciones en píxeles y conviértelas en direcciones. La mayor parte del parecido en Orison vino de esas pasadas.
• Mantén la profundidad de campo reducida solo para cosas pequeñas. Un desenfoque intenso en un gigante hace que parezca una miniatura. Los radios de lente de la película son de 0.012 a 0.03 unidades en una criatura de 26 unidades.
• Las muestras de tiempo y lente no deben compartir una secuencia. Si lo hacen, el desenfoque traza arcos visibles. Ángulo dorado para la lente, Halton base 5 para el tiempo.
• Nunca hagas pow() de un valor que pueda ser negativo. D3D devuelve NaN, y un píxel NaN se extiende por el bloom como rectángulos negros. Escribe x*x. max(1.-ndv,0.), no 1.-ndv. El kit también sanitiza sus entradas.
• smoothstep(a, b, x) invertido con a > b devuelve 0 en Windows. Escribe 1.-smoothstep(b,a,x).
• Láminas reflejadas en una superficie que se estrecha: mapea con Mercator para que las celdas se mantengan redondas, y refleja solo las celdas grandes de la lámina. Las finas se convierten en confeti de cerca.
• Los paneles en línea con la luz deben ser más claros, no más brillantes. De lo contrario, lo que hay dentro de un cuerpo de vidrio nunca se lee.
• Una abertura oscura necesita algo vivo dentro. Un brillo tenue a través de la niebla lo sostiene hasta el primer pulso.
• Nubes en vivo: media resolución con un promedio móvil; marcha más densa cerca de la cámara. Las nubes son suaves, así que no se pierde nada.
• El primer segundo de una página en vivo es compilación de shaders. Compila antes del primer fotograma y muestra un pequeño pulso mientras tanto, sin texto de carga.

Reglas de la página en vivo

Todas las reglas de las páginas en vivo de teardown aplican (niveles de calidad, calentar los shaders). También: abre con la imagen maestra y disuelve al 3D una vez que los shaders estén listos; los niveles vuelven a subir cuando los fotogramas se recuperan, no solo bajan; sin etiquetas en la página; un nombre accesible en el canvas y en cualquier botón; un objetivo de clic de al menos 44 píxeles; el sonido comienza solo después del primer gesto; el cuerpo se estabiliza después de un pulso en lugar de escalar para siempre; la calidad baja según la tasa de fotogramas medida sin preguntar.

Revisión

No puedes ver video, pero puedes leer fotogramas. Primero una hoja de cada plano, fotogramas completos para lo que la hoja señale, luego --stills every:0.2 --from A --to B a través de una transición. Lee una hoja de un fotograma por segundo de la codificación final: eso muestra lo que el codificador escribió. Mide la banda sonora con ffmpeg -af ebur128=peak=true. Una persona aún tiene que ver la película y escuchar la banda sonora una vez; dilo al informar.

Para un anfitrión que añade su propio esqueleto de documento, como un Claude Artifact, construye con FRAGMENT=1 y establece el nombre con PAGE_TITLE: también escribe <nombre>.fragment.html.