Estudio de vídeo 3D

Video 3D Studio

Construye cada toma como código, revisa fotogramas estáticos de la misma y luego renderiza un MP4 en la máquina del usuario. Habla al usuario en su propio idioma y en términos sencillos. Muchas personas que piden esto nunca han escrito código.

1. Preparar un proyecto

Primero busca un proyecto existente: una carpeta con tools/render.mjs y src/kit/. Si existe, agrega una nueva escena.

De lo contrario, verifica node --version (18 o superior), luego crea un proyecto en la carpeta actual del usuario, nombrado según la toma:

node <ruta-de-esta-habilidad>/scripts/new-project.mjs video-<tema>

Informa al usuario que esto toma un par de minutos y cerca de 1 GB de disco, y que el primer renderizado también descarga un navegador sin cabeza de 130 MB. Cada comando posterior se ejecuta desde dentro de la carpeta del proyecto.

2. Definir la toma

Determina el formato, duración, tema, ambiente, colores, texto exacto y cualquier archivo de logo o modelo. Pregunta solo sobre lo que cambiaría el resultado y no tiene un valor predeterminado razonable. Valores predeterminados: 9:16 para redes sociales, 16:9 en caso contrario, 5 a 8 segundos, 30 fps.

Escribe un plan corto para ti mismo antes de construir, ya que una toma con una idea clara se ve mejor que una con varias:

• Tema: lo único que el espectador debe mirar
• Cámara: lente y un solo movimiento
• Luz: de dónde viene y qué revela
• Momento clave: el instante en que ocurre lo principal, en segundos

Los archivos que proporcione el usuario van en la carpeta public/ del proyecto.

3. Construir desde la escena más cercana

La solicitud es principalmente sobre	Comenzar desde	Toma parámetros
Un objeto o producto	src/scenes/ProductOrbit.tsx	modelFile, color, backdrop
Una palabra o título corto	src/scenes/KineticTitle.tsx	text, fontFile, color, backdrop
Un logo	src/scenes/LogoReveal.tsx	logoFile, tagline, color, glow, backdrop
Una habitación, lugar o ambiente	src/scenes/MorningRoom.tsx	wall, accent
Algo abstracto, líquido o impulsado por shaders	src/scenes/LiquidForm.tsx	look

Si la solicitud solo cambia esos parámetros, pásalos con --set y deja el código intacto. De lo contrario, copia la escena a un nuevo archivo, regístrala en src/Root.tsx y modifica la copia, para que los ejemplos sigan disponibles como referencia.

Antes de escribir código de escena, lee references/toolkit.md, que enumera lo que proporciona el kit. Para decisiones sobre lente, luz, material y temporización, lee references/craft.md.

Sin un archivo de modelo, construye el objeto a partir de las piezas del kit: useLathe para cualquier cosa redonda, useRoundedBox para cualquier cosa con forma de caja, useExtrudedSvg para siluetas planas, agrupadas. Los pequeños detalles como costuras, anillos, estrías de agarre, texto impreso y bordes ligeramente redondeados son lo que hace que un modelo simple sea creíble, así que dale a cada objeto algunos de ellos y un mapa de superficie del kit. Un color plano en una forma suave siempre parece un marcador de posición.

Lo que mantiene un renderizado correcto

Remotion renderiza los fotogramas fuera de orden y en varias pestañas del navegador a la vez, por lo que un fotograma no puede depender del anterior:

• Calcula todo lo que cambia a partir de useShot(). useState, useFrame, Math.random() y Date producen parpadeo o saltos, por lo que usa wobble y scatter para la aleatoriedad.
• Carga solo desde public/, a través de usePublicFile o los hooks construidos sobre él. Un renderizado no debe depender de la red.
• Mantén el 3D dentro de <Stage>. Este gestiona el pipeline de renderizado, por lo que no agregues un segundo bucle de renderizado ni establezcas mapeo de tonos en otro lugar.
• Cada fotograma se dibuja muchas veces y se promedia, de ahí provienen las sombras suaves, el desenfoque de enfoque real y los bordes limpios. Cualquier cosa que deba desenfocarse dentro de un fotograma va en useEachSample.
• Coloca texto pequeño en un AbsoluteFill normal sobre el Stage, como hace LogoReveal. Se mantiene más nítido que el texto 3D en tamaños pequeños.

4. Revisar fotogramas antes de renderizar

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

Abre cada imagen que enumere el comando y mírala. No puedes ver un video, por lo que los fotogramas estáticos son cómo ves la toma. Para juzgar el movimiento, solicita fotogramas cercanos alrededor del momento clave, por ejemplo --frames 20,24,28,32.

Busca:

• El tema está dentro del encuadre y claro de los bordes en el primer fotograma, el último fotograma y en medio del movimiento.
• En 9:16, nada importante se encuentra en el 14% superior o 20% inferior, donde las aplicaciones de teléfono colocan sus botones.
• Los reflejos conservan su detalle y la imagen no está deslavada ni embarrada.
• El texto está escrito correctamente y cada letra ha aparecido para cuando debería ser legible.
• Nada flota, se atraviesa entre sí, ni proyecta una sombra con escalones visibles.

Cuando algo está mal, cambia una cosa y vuelve a revisar, para que puedas saber qué lo solucionó. references/troubleshooting.md enumera los síntomas y soluciones habituales.

Luego escanea cada fotograma en busca de destellos y saltos, usando los mismos valores --set:

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

Los fotogramas estáticos muestrean solo unos pocos momentos, por lo que un destello que dura unos pocos fotogramas se escapa entre ellos. Las superficies planas y brillantes son la causa habitual, porque pueden reflejar una luz brillante de repente. Si el comando informa CHECK, mira los fotogramas que nombra y corrígelos antes de renderizar, a menos que el cambio repentino sea intencional, como un corte deliberado.

5. Renderizar

node tools/render.mjs <Toma> --set format=vertical --out out/<nombre>.mp4

Usa --quality draft para una prueba de media resolución. A máxima calidad, las tomas de 5 a 8 segundos tardaron de 36 a 88 segundos en una tarjeta gráfica de escritorio. Sin una, las herramientas caen a 4 pases por fotograma, que es mucho más rugoso y aún mucho más lento, así que informa al usuario y ejecuta los renderizados largos en segundo plano.

Proporciona al usuario la ruta al MP4, su formato y duración, y cuánto tiempo tomó. Deja claro que revisaste los fotogramas estáticos y los cambios entre fotogramas, y que no viste el video reproducirse.

6. Gestionar notas

Aplica exactamente lo que el usuario pidió y deja todo lo demás igual, para que una nota como "luz más cálida" no cambie también el encuadre. Vuelve a revisar los fotogramas estáticos y luego renderiza de nuevo.

Límites que debes mencionar de antemano

• No hay desenfoque de movimiento real, por lo que los movimientos muy rápidos pueden verse escalonados. Mantenlos moderados, o prueba --set fps=60.
• La iluminación no es trazado de rayos completo. Las sombras y la oclusión del cielo son suaves y precisas, pero la luz no rebota por sí sola, por lo que los interiores necesitan luz de relleno adicional.
• Remotion tiene su propia licencia: gratuita para individuos y para empresas de hasta 3 personas, mientras que las empresas más grandes necesitan una licencia paga de remotion.dev. Menciona esto si el usuario parece trabajar para una empresa.