Render deterministic Three.js/WebGL scenes from HyperFrames time using hf-seek events.
npx skills add https://github.com/compozy/agh --skill three-compozy
Please help me install this Agent Skill. Skill: three Source: https://github.com/compozy/agh/tree/main/.agents/skills/hyperframes/three Command: npx skills add https://github.com/compozy/agh --skill three-compozy
This Skill solves the challenge of making Three.js/WebGL rendering deterministic and frame-accurate inside HyperFrames timelines, instead of relying on real-time clocks or free-running animation loops.
hf-seek so the same composition produces the same visuals every run.three runtime adapter as a timing/dispatch layer rather than letting it own the scene.AnimationMixer timelines directly with a provided frame time for GLTF/clip animations.Use the HyperFrames Three.js adapter by listening to the hf-seek event and rendering your scene from event.detail.time for the target canvas layer.
High-intent search queries and answers about installing and using this skill.
To make Three.js rendering deterministic, you render from HyperFrames time and respond to `hf-seek` events, ensuring the same composition produces identical visuals every run by avoiding wall-clock updates.
You synchronize AnimationMixer timelines by seeking them directly with the frame time provided by the `hf-seek` event, matching GLTF clip animations to the exact HyperFrames time.
Jitter during time-locked frame rendering occurs when assets like models, textures, and HDRIs are fetched at render time; loading them before seek-critical rendering eliminates the jitter.
The Three.js runtime adapter functions as a timing and dispatch layer rather than owning the scene, ensuring scene ownership remains safe while synchronizing to HyperFrames frames.
The best way to handle shader-driven visuals and camera motion is applying deterministic frame rendering by listening to `hf-seek` events and rendering your scene from `event.detail.time`.
Yes, you must avoid wall-clock updates and render-time asset fetching for deterministic Three.js scene rendering, relying exclusively on HyperFrames time to drive reproducible visuals.
heygen-comRender deterministic Three.js scenes synced to HyperFrames time via hf-seek events.
zengxiaoqiIntegrate Three.js scenes with HyperFrames' timeline for frame-synchronized WebGL rendering.
hoanghd218Render Three.js scenes deterministically in response to HyperFrames hf-seek events.
boraoztuncRender Three.js scenes deterministically using HyperFrames time and hf-seek events.