Loading the demo.
pnpm add @quartifex/understudyNot on npm yet: the first release is pending. The quickstart, API table, browser support and limitations are in the README.
Concept visual: a gyroscope built in code. The sequence is the same gyroscope, pre-rendered from the same angles.
Push the simulated frame time up: post-processing goes first, then pixel ratio, shadows and particles. At the bottom of the ladder, or on a lost context, the image sequence takes over at the same position.
const [state, understudy] = useUnderstudy({ rungs: ["webgl", "sequence", "poster"] });
<Ladder state={state}
webgl={<Canvas shadows><Governor understudy={understudy} /><Scene /></Canvas>}
sequence={null} poster={null} /> // the stand-in draws on its own canvas
<canvas ref={reelCanvas} />
createStandIn(reelCanvas, manifest, { baseUrl, understudy, progress: () => scroll });
// In the scene: const { particles, post } = useQuality(understudy);