@remotion/web-renderer: Reuse WebGL context for more performance

[JonnyBurger]

No description provided.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
bugs	Ready	Preview, Comment	Jan 3, 2026 10:45am
remotion	Ready	Preview, Comment	Jan 3, 2026 10:45am

[Copilot]

Pull request overview

This PR optimizes WebGL rendering performance by reusing the WebGL context, shader programs, and attribute/uniform locations across multiple rendering calls, rather than creating and destroying them for each transformation. This significantly reduces overhead when rendering many layers with 3D transforms.

Key Changes

• WebGL context reuse: The WebGL context, compiled shader program, and cached attribute/uniform locations are now stored and reused across rendering operations
• Centralized cleanup: Cleanup of WebGL resources is moved to a single cleanup call at the end of rendering via internalState.cleanup()
• Performance testing: Added test assertions to verify pixel count and tile count metrics stay within expected ranges

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/web-renderer/src/drawing/transform-in-3d.ts	Implements WebGL context caching with shader program reuse; moves shader source to module scope; adds logic to reuse or create helper canvas based on state
packages/web-renderer/src/internal-state.ts	Adds HelperCanvasState type and state management for cached WebGL resources; implements cleanup method to release resources
packages/web-renderer/src/render-still-on-web.tsx	Calls internalState.cleanup() in finally block to ensure WebGL resources are properly released
packages/web-renderer/src/drawing/handle-3d-transform.ts	Updates to pass internalState parameter and removes per-call cleanup handling
packages/web-renderer/src/drawing/process-node.ts	Updates to pass internalState and removes per-call WebGL cleanup; adds source cropping parameters to drawImage call
packages/web-renderer/src/test/many-layers.test.tsx	Adds performance assertions for drawn pixels and precomposed tiles; removes debug logLevel parameter

[JonnyBurger]

@claude it was a mistake to set

	drawnPrecomposedPixels = 0;
		precomposedTextures = 0;

in the cleanup. it was needed for post render stats
Remove it

[claude]

Claude finished @JonnyBurger's task in 1m 1s —— View job

---

Done!

• Read the internal-state.ts file to locate the cleanup function
• Remove the problematic assignments from cleanup
• Commit and push the changes

Removed the drawnPrecomposedPixels = 0 and precomposedTextures = 0 assignments from the cleanup function in packages/web-renderer/src/internal-state.ts. These stats are now preserved for post-render reporting.

--- | View commit