Explicador 3D con zoom infinito
Un formato que explica la escala mejor que cualquier gráfico: empieza en un objeto que todos conocemos, vuela hacia él sin un solo corte, mantiene un número en pantalla que le dice al espectador qué tan lejos ha llegado, y termina en un hecho que no esperaban. El resultado de referencia para esta habilidad es "Nada es realmente afilado": una hoja de afeitar, 26 reducciones a la mitad, un átomo de hierro, y la frase de que su filo sigue teniendo unas 300 átomos de ancho.
assets/template/ es ese proyecto terminado. Empieza desde ahí en lugar de desde un archivo vacío: las partes difíciles (zoom de ocho órdenes de magnitud sin pérdida de precisión, detalle que cambia con la escala, profundidad de campo, un renderizador determinista) ya están resueltas ahí y llevaron varias iteraciones para lograrlo.
La fórmula
Mantén las cinco. Cada una está haciendo trabajo.
- Una toma continua. El punto clave es que el espectador nunca pierde su lugar. Un corte reinicia su percepción de la escala.
- Una medición en vivo. Una barra delgada anclada en el sujeto, un número que cambia en cada fotograma, un conteo de mitades (o duplicaciones), y dos o tres palabras para lo que está a la vista. La barra es lo único que el espectador tiene que leer, por lo que debe ser honesta: su longitud en la escena es realmente el número mostrado.
- El sujeto cambia de carácter a cada escala. El pulido se convierte en marcas de esmerilado, luego en astillas, luego en granos de cristal, luego en un borde redondeado, luego en átomos. Si la superficie se ve igual durante tres segundos, el zoom se lee como que no pasa nada.
- Objetos para escala. A medida que el zoom pasa cada tamaño, un objeto familiar de ese tamaño se sienta junto al sujeto con su nombre y tamaño: grano de sal, cabello, glóbulo rojo, bacteria, virus, transistor, anticuerpo, ADN. Convierten un número abstracto en "más pequeño que un virus".
- Un remate. Retrocede rápido hasta donde empezaste y muestra el único número para el que fue el viaje.
Flujo de trabajo
1. Investigar antes de modelar
El video solo vale la pena si es verdadero. Busca las dimensiones reales (búsqueda web, fuentes primarias cuando sea posible) y anota, para el sujeto y para cada objeto de escala: el tamaño, la fuente, y cualquier cosa que estés simplificando. La geometría se construye a partir de esos números, por lo que la imagen no puede alejarse de los hechos. Reporta las fuentes y las simplificaciones al usuario al final; se le preguntará.
Elige de 6 a 9 objetos de escala, cada uno al menos unas 3 veces más pequeño que el anterior. Más cerca de eso y sus etiquetas chocan; más separados que unas 30 veces y la pantalla se queda vacía durante segundos.
2. Mostrar el plan cuando ayude
Si el usuario pidió ver el plan primero, o el resumen deja opciones reales abiertas (voz en off o silencioso, idioma, cuál es el remate), da una tabla breve: tiempo, escala, qué está a la vista, objeto de escala. De lo contrario, continúa; un plan que nadie pidió solo retrasa el primer render.
3. Configurar el proyecto
cp -r <skill>/assets/template <project>/ && cd <project> && npm install
node render.mjs --stills 1,10,20,30,40
El segundo comando debería imprimir el nombre de la GPU y escribir cinco JPEG en out/. Si reporta SwiftShader o llvmpipe, el renderizado está en la CPU y llevará horas: corrige las banderas de GPU antes de seguir adelante (ver references/pitfalls.md).
4. Adaptar la escena
main.js es un archivo, en secciones. Lee references/techniques.md antes de cambiar algo estructural; explica por qué cada parte está construida como está. Lo que normalmente cambia para un nuevo tema:
Sección en main.js | Qué reemplazar |
|---|---|
| constants | Datos físicos en metros, tamaño inicial L0, número de mitades HMAX, línea de tiempo |
| subject surface | La sección transversal prof(), el recorte de contorno, la tabla de características de superficie FEATS (longitud de onda, tipo, intensidad) |
| finest scale | La red atómica (o lo que sea que esté hecha la última etapa) |
| things for scale | La lista addObj(nombre, tamañoTexto, tamañoEnMetros, geometría, material, posición) |
| overlay | LABELS (lo que está a la vista en cada nivel de zoom), el pie de foto final |
| camera keys | K_AZ, K_EL, K_TY, K_D, K_AP como funciones del nivel de zoom |
Para un sujeto con una forma diferente (un chip, una hoja, una hoja de papel), conserva la maquinaria y reemplaza el perfil y las características. Para un zoom hacia afuera, ejecuta la misma línea de tiempo en reversa y di "duplicado".
5. Mirar las imágenes fijas antes de renderizar la película
Renderiza de 8 a 10 imágenes fijas distribuidas a lo largo de la línea de tiempo, colócalas en mosaico en hojas de contacto con ffmpeg y léelas. Luego corrige lo que ves y repite. Este bucle es de donde viene la calidad; cada problema en la primera versión de la película de referencia era visible en las imágenes fijas y ninguno era visible en el código. Verifica en particular:
- Exposición. La primera pasada casi siempre está sobreexpuesta. El metal debe ser mayormente oscuro con reflejos definidos.
- Cualquier cosa cortada por el borde del fotograma, especialmente objetos de escala cerca de la parte superior.
- Etiquetas sobre áreas brillantes o superpuestas. Mantén la etiqueta de medición en negro vacío.
- Si cada etapa se lee como lo que dice su etiqueta. Si la etiqueta dice "granos" y la imagen es rayas, una de ellas está mal.
- El primer y el último fotograma, ya que son la miniatura y el remate.
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. Renderizar y verificar el resultado
node render.mjs --full --o video.mp4 # añadir --audio vo.wav si hay narración
Ejecútalo en segundo plano; una película de 45 segundos a 1080p toma unos minutos en una GPU discreta. Luego verifica el archivo en sí, no las imágenes fijas que hiciste antes: mide la duración y el tamaño, extrae una cuadrícula general, y extrae seis fotogramas consecutivos de una sección ocupada para buscar parpadeo. El detalle procedural fino se comprime mal, así que espera archivos grandes y haz una copia más pequeña cuando sea necesario:
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
Di claramente qué verificaste y qué no. Las cuadrículas de fotogramas prueban que la imagen es correcta; no prueban que el movimiento se sienta correcto, así que di que el usuario debería verlo.
Valores por defecto
- Silencioso. Sin música, sin efectos de sonido, sin voz en off a menos que se pida. El formato se sostiene por sí mismo, y la referencia de la que proviene no tenía narración.
- El texto son solo datos y nombres. La medición, el conteo de mitades, lo que está a la vista, los nombres y tamaños de los objetos de escala, un número final. Si se añade narración, elimina cada etiqueta que la voz ya diga, porque leer y escuchar las mismas palabras divide la atención.
- 1920x1080, 30 fps, 40 a 50 segundos, renderizado a 1.5x y reducido de escala. Para video vertical cambia
WyHy revisa cada imagen fija nuevamente; la composición no se transfiere por sí sola. - Etiquetas en el idioma de la audiencia del usuario, que no siempre es el idioma en el que están chateando. Pregunta si no está claro.
Añadir una voz en off
Solo cuando se pida. Escribe el guion como líneas cortas que pertenezcan cada una a una etapa, genera o recibe el audio, obtén los tiempos de las palabras (faster-whisper funciona bien), y luego maneja el zoom desde el audio: el nivel de zoom se convierte en una función con fotogramas clave del tiempo que se mantiene mientras una línea explica una etapa y viaja entre líneas. Pasa el audio a render.mjs --audio. Deja que algo pequeño suceda durante cada pausa (un barrido de luz, un objeto llegando, átomos vibrando), de lo contrario un zoom en pausa parece congelado.
Archivos de referencia
references/techniques.md- cómo funciona la plantilla y por qué: escalado alrededor del punto de enfoque, detalle procedural con ventana de escala, impostores de esfera, profundidad de campo, objetos anclados en el espacio físico, el renderizador determinista. Léelo antes de cambios estructurales.references/pitfalls.md- fallos ya encontrados y sus correcciones. Léelo cuando un render se vea mal o una herramienta se comporte mal.MASTER_PROMPT.md- un prompt para rellenar para empezar un nuevo video, más ideas de temas que encajan en la fórmula.