Files
hyperframes/packages
Miguel Ángel 0f528ff2e8 feat(shader-transitions): add playSeamTransitionLoop to preview a seam on a loop (#4307)
* feat(shader-transitions): add playSeamTransitionLoop to preview a seam on a loop

Plays a catalog transition's real WebGL effect between two already-decoded
frames on a caller-supplied canvas, looping 0->1->0 every second. The
caller supplies the two seam frames itself, so this takes two
CanvasImageSource frames directly rather than resolving any DOM scene.

Reuses the existing webgl.ts primitives hyper-shader.ts's full composition
engine already relies on; no GSAP timeline, no scene capture, no
multi-transition scheduling here, just setup + a render loop.

shaderName is the catalog block's own name. 12 of the 14 shader-tagged
catalog blocks match their shaders/registry.ts key verbatim; two are
aliased internally (domain-warp-dissolve->domain-warp,
chromatic-radial-split->chromatic-split) since those registry keys are
also engine/producer's canonical TRANSITIONS[...] names and weren't
renamed to match the catalog. Every other catalog block (including the
CSS/motion-only ones) has no WebGL implementation and throws, so a caller
can fall back to its own render for those.

Re-exported from @hyperframes/studio (new workspace dependency on
shader-transitions) so a consumer of studio and core needs no deep import.

* fix(shader-transitions): keep the WebGL context alive across stop()

- stop() called WEBGL_lose_context.loseContext(), which permanently kills
  the canvas's WebGL context -- a later playSeamTransitionLoop() call on
  the same canvas (a popover reusing its element across hovers) would pass
  the null-context guard with the same dead context object and silently
  render nothing. Delete the program, textures and buffer this call
  created instead, matching the granular-release idiom hyper-shader.ts
  already uses for its own reusable contexts.
- ready never resolved if stop() ran before the first frame (a hover that
  ends within one frame, well under 16ms), hanging any caller awaiting it
  forever along with everything it closed over. stop() now resolves ready
  too; resolving an already-settled promise is a no-op for the normal path.

Also: resolveReady() only needs calling once, on the first frame, not every tick.

* test(shader-transitions): extract shared running-loop setup, dedup per fallow

* fix(shader-transitions): pass accent colors, fix leaks and validation

- renderShader's colors argument was undefined, so u_accent/
  u_accent_dark/u_accent_bright stayed at WebGL's zero default. 7 of the 14
  shader blocks (domain-warp, ridged-burn, sdf-iris, ripple-waves,
  gravitational-lens, thermal-distortion, light-leak) use those uniforms
  for their glow/burn colour, so the preview silently rendered without it
  for half the catalog -- the "plays the real effect" claim was false for
  those seven. Exported webgl.ts's DEFAULT_ACCENT_COLORS (hyper-shader.ts's
  own fallback, previously only inlined twice there) and pass it through.
- Each linkProgram() call leaked its compiled vertex and fragment shader
  objects (created, attached, linked, never deleted) -- a real WebGL
  browser never frees them on its own, and this call is on a hover-repeat
  path via a reused canvas. Fixed in webgl.ts's linkProgram itself, which
  every caller in this package routes through, not just this new one.
- loopMs was never validated: 0 divided to NaN progress, negative values
  ran the shader backwards, Infinity froze it at 0 -- all silently, no
  caller-visible error. Now throws synchronously for a non-finite or
  non-positive value, matching the function's other synchronous-throw
  contract (unknown shader, no WebGL context).
- getFragSource() and the catalog-alias lookup both did an unguarded
  plain-object index (shaders[name], CATALOG_SHADER_ALIASES[shaderName]),
  which returns Object.prototype members for names like "constructor"
  instead of undefined -- an unusual shaderName could reach the shader
  compiler with a garbled error or an unintended match. Both now use
  Object.hasOwn.

Tests: second half of the loop (progress descending, not climbing past 1),
both catalog aliases (only one was covered before), all four invalid-loopMs
shapes, the accent-color uniforms actually being set, and webgl.test.ts's
new deleteShader assertion. All mutation-verified non-vacuous.

* test(shader-transitions): dedup the two timing tests per fallow

* fix(shader-transitions): apply default accent colors and validate loop options

renderShader now defaults colors to DEFAULT_ACCENT_COLORS instead of the
caller deciding, so playSeamTransitionLoop no longer renders 7 of 14 shader
blocks with a zeroed-out accent. Validates width/height alongside loopMs,
switches the catalog alias map to a Map so a bogus name never resolves an
Object.prototype member, and fixes linkProgram to only delete the shader it
created itself.

* fix(shader-transitions): free GL resources when seam-loop setup throws

A bad fromSource/toSource reaching uploadTextureSource previously left
whatever quadBuf/program/textures had already been allocated dangling,
since playSeamTransitionLoop throws before returning a handle a caller
could call stop() on. Trims three over-limit JSDoc blocks and drops a
redundant prototype-pollution rationale now that getFragSource guards it.

* chore(shader-transitions): trim seam-loop comments to the comment ratchet

* test(shader-transitions): unknown-shader throw covers names on Object.prototype
2026-09-26 00:08:47 +00:00
..
2026-09-25 12:51:35 +00:00
2026-09-25 12:51:35 +00:00
2026-09-25 12:51:35 +00:00
2026-09-25 12:51:35 +00:00
2026-09-25 12:51:35 +00:00
2026-09-25 12:51:35 +00:00
2026-09-25 12:51:35 +00:00