remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by createRgbaTexture() when gl.createTexture() returns null. WebGL's createTexture returns null only when the context is lost, the context has been destroyed, or the implementation has exhausted its texture object pool. This is a GPU resource allocation failure, not a param validation issue.

Source

Thrown at packages/effects/src/wave/wave-runtime.ts:93

	return program;
};

const getWaveUniforms = (
	gl: WebGL2RenderingContext,
	program: WebGLProgram,
): WaveState['uniforms'] => ({
	uSource: gl.getUniformLocation(program, 'uSource'),
	uResolution: gl.getUniformLocation(program, 'uResolution'),
	uAmplitude: gl.getUniformLocation(program, 'uAmplitude'),
	uWavelength: gl.getUniformLocation(program, 'uWavelength'),
	uPhase: gl.getUniformLocation(program, 'uPhase'),
	uDirection: gl.getUniformLocation(program, 'uDirection'),
});

const createRgbaTexture = (gl: WebGL2RenderingContext): WebGLTexture => {
	const texture = gl.createTexture();
	if (!texture) {
		throw new Error('Failed to create WebGL texture');
	}

	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.bindTexture(gl.TEXTURE_2D, null);
	return texture;
};

export const setupWave = (target: HTMLCanvasElement): WaveState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure every effect canvas is properly cleaned up — call cleanupWave(state) (or let the effect framework handle cleanup) before creating a new one.
2. Check for a 'webglcontextlost' event listener on your canvas; if the context was lost, discard it and create a new canvas before retrying.
3. Reduce the number of simultaneous effects or scene complexity to lower GPU memory pressure.
4. Restart the browser / render worker to release leaked GPU resources if this appears after long sessions.
5. In Remotion Lambda or headless rendering, ensure the render worker process is recycled between heavy jobs.

Example fix

// before
const state = setupWave(canvas);
// ... many frames later, creating another wave without cleanup
const state2 = setupWave(anotherCanvas); // texture pool exhausted

// after: clean up previous state before allocating new resources
cleanupWave(state);
const state2 = setupWave(anotherCanvas);

// Check context health before setup, and catch allocation failures.
const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  // do not attempt setupWave on a lost context
  return;
}
try {
  const state = setupWave(canvas);
} catch (e) {
  if ((e as Error).message === 'Failed to create WebGL texture') {
    // resource exhaustion or context loss — recreate canvas
    console.warn('Wave texture allocation failed:', (e as Error).message);
  }
}

When it happens

Trigger: Called from setupWave() at packages/effects/src/wave/wave-runtime.ts:146 via createRgbaTexture(gl). Fires when the WebGL2 context on the target canvas is lost or when too many textures are already allocated without being deleted. The effect framework manages texture lifecycle, so this points to either context loss or a leak.

Common situations: Long-running Remotion Studio sessions that create and destroy many effects without proper cleanup (memory leak in custom effect wrappers); rendering a very long video with many scene changes that each create WebGL contexts; the browser tab's GPU process crashed and the context is in a lost state; testing in an environment with very limited GPU memory.

Related errors

• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL texture

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/a7d340468d58a98c. Report an issue: GitHub.