HyperFrames
Arquitectura de HyperFrames: del tiempo a un fotograma capturado
Relaciona core, engine y producer con los adaptadores de animación y las barreras GPU inspeccionadas, sin inventar una traza completa de ejecución.
Qué aprenderás
- Programación, estado de animación y preparación de captura son fronteras distintas.
- Cada adaptador coordina su biblioteca con tiempo explícito.
- Un cambio de recursos puede exigir otro render en el mismo instante.
Antes de empezar
- HTML, CSS y JavaScript básicos
- Node.js 22+ y FFmpeg para el ejercicio local
Explica la frontera del capítulo y utiliza su lista para evaluar un flujo de vídeo repetible.
Conclusiones clave
- Programación, estado de animación y preparación de captura son fronteras distintas.
- Cada adaptador coordina su biblioteca con tiempo explícito.
- Un cambio de recursos puede exigir otro render en el mismo instante.
Sigue el tiempo a través de capas diferentes
El mapa de paquetes asigna análisis, runtime y adaptadores a core; captura con Puppeteer y FFmpeg a engine; y la canalización completa de captura, codificación y mezcla a producer. Esa es la distribución documentada, no una afirmación de que todas las rutas utilicen las mismas llamadas internas.
En la frontera de composición se decide qué clips corresponden al instante. En la de animación, un adaptador coloca la biblioteca en el estado adecuado. En la de captura, ese estado debe estar listo antes de registrar una imagen. Separarlas ayuda a explicar un tiempo correcto que todavía produce un fotograma incompleto.
Los adaptadores coordinan relojes de bibliotecas
El adaptador GSAP inspeccionado obtiene la línea temporal, la pausa y deriva un tiempo no negativo mediante conversión numérica con cero como respaldo. Cuando existe totalTime, hace un pequeño ajuste con eventos suprimidos y después fija el tiempo exacto; en otro caso utiliza seek. Es una adaptación específica de la biblioteca, no una espera genérica antes de capturar.
El adaptador Three.js escribe el tiempo solicitado en window.__hfThreeTime y emite hf-seek. También comprueba una estructura compatible de gestor de carga y expone una promesa mientras los elementos observados siguen pendientes. Esa observación no demuestra que todo cargador externo o tarea GPU personalizada participe automáticamente.
Preparación y posición temporal son contratos distintos
El despachador compartido permite registrar una promesa mediante detail.waitUntil desde un listener síncrono. waitForSeekCompletion espera el trabajo registrado y propaga un rechazo retenido. Si una composición inicia trabajo GPU asíncrono, debe registrarlo durante el callback; descubrir la promesa más tarde no cumple el mismo contrato.
También existe un evento forzado para el mismo instante. El comentario explica un caso donde se inyectan fotogramas de vídeo después de un primer render GPU y es necesario volver a renderizar texturas sin cambiar el tiempo. Por tanto, igual timestamp no siempre significa igual estado de recursos. Este capítulo inspecciona contratos de adaptadores, no todas las etapas del motor.
Pasos de implementación
- 1
Identifica las responsabilidades de core, engine y producer.
- 2
Lee los métodos de posicionamiento de GSAP y Three.js citados.
- 3
Sigue el registro hf-seek hasta la barrera de finalización.
- 4
Distingue adaptadores inspeccionados de internos no revisados.
Ejemplo para copiar
Temporización de composición
-> estado solicitado
-> adaptador / hf-seek
-> preparación registrada
-> captura de cuadro
-> codificación y audio
Mapa documentado y contratos inspeccionados; no es una traza medida.Preguntas frecuentes
¿Basta fijar el tiempo correcto para capturar una escena GPU?
No siempre. Recursos o tareas asíncronas pueden seguir pendientes; el despachador inspeccionado ofrece un mecanismo de finalización separado.
¿Se inspecciona todo el renderizador?
No. Se combina el mapa documentado con tres archivos de adaptadores y se declara expresamente ese alcance.
Fuentes
- README fijadoFuente verificada 2026-09-07
- Adaptador GSAPFuente verificada 2026-09-07
- Despachador temporalFuente verificada 2026-09-07
- Adaptador Three.jsFuente verificada 2026-09-07
- Pruebas GSAPFuente verificada 2026-09-07
- Pruebas del despachadorFuente verificada 2026-09-07