remotion: Fix stacked WebGL effects

[samohovets]

Summary

• Fix effect setup caching so repeated WebGL effects get setup state for the correct ping-pong canvas
• Keep same-backend WebGL canvas uploads oriented correctly across stacked effects
• Add a browser visual regression test for stacked blur + noise effects

Fixes #7724.

Testing

• bun run testeffectsvisual
• bun run build
• bun run formatting

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	May 29, 2026 11:46am
remotion	Ready	Preview, Comment	May 29, 2026 11:46am

[pullfrog]

Reviewed changes — Fix for stacked WebGL effects producing blank canvas or flipped output when multiple effects of the same backend are chained. The PR corrects the setup-cache keying to be per-target-canvas and keeps flipSourceY enabled for same-backend ping-pong passes.

• Fix setupCache keying in runEffectChain — Changes setupCache from WeakMap<EffectDefinition, unknown> to a nested WeakMap<EffectDefinition, WeakMap<HTMLCanvasElement, unknown>> so repeated WebGL effects receive setup state for the correct ping-pong canvas instead of reusing state from the wrong one.
• Keep flipWebGLSourceY = true across same-backend WebGL passes — Previously set to false after any WebGL pass, which was incorrect for ping-pong passes that feed the previous WebGL canvas directly back through texImage2D (not via ImageBitmap).
• Add browser visual regression test — New @vitest/browser-playwright test in @remotion/effects renders a blur→blur→noise chain and asserts against a reference screenshot.
• Add testeffectsvisual script and turbo pipeline — Wires the new visual test into the monorepo's task runner.

  ^{｜ View workflow run ｜ Using Kimi K2 ｜ 𝕏}

[pullfrog]

✅ No new issues found.

Reviewed changes — A targeted fix for stacked WebGL effects that were blanking and flipping, plus a new browser visual regression test suite for the effects package.

• Fix setupCache keying per ping-pong canvas — ensureSetup now uses a nested WeakMap<Definition, WeakMap<Canvas, State>> so repeated WebGL effects (e.g. blur + blur) receive the correct GL program / framebuffer for each ping-pong target instead of sharing stale state and rendering blank.
• Keep flipWebGLSourceY = true across same-backend WebGL passes — same-backend ping-pong passes feed a DOM canvas back into texImage2D, so every upload still needs UNPACK_FLIP_Y_WEBGL. The old code set it to false after the first pass, conflating ImageBitmap bridges (already oriented) with canvas reuse (needs flip).
• Export createEffectChainState and cleanupEffectChainState via Internals — enables the new @remotion/effects visual-test harness to imperatively run effect chains outside React.
• Add packages/effects browser visual regression test — stacks blur + blur + noise and asserts against a reference screenshot using @vitest/browser-playwright, matching the existing packages/web-renderer screenshot-test pattern.
• Wire testeffectsvisual into root and turbo.json — consistent with other visual-test pipelines.

  ^{｜ View workflow run ｜ Using Kimi K2 ｜ 𝕏}