remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by createTexture() inside the waves effect when gl.createTexture() returns null. The waves effect creates two textures (source and palette) with configurable min/mag filters. createTexture returns null on context loss, context destruction, or GPU resource exhaustion.

Source

Thrown at packages/effects/src/waves.ts:422

	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): WebGLProgram => {
	const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
	const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
	const program = linkProgram(gl, vs, fs);
	gl.deleteShader(vs);
	gl.deleteShader(fs);
	return program;
};

const createTexture = (
	gl: WebGL2RenderingContext,
	filter: number,
): 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, filter);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
	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;
};

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Handle 'webglcontextlost'/'webglcontextrestored' and recreate the effect.
2. Ensure waves effect cleanup (which deletes both textures) runs before creating new instances.
3. Reduce the number of concurrent effect canvases.
4. Recycle render worker processes in long-running server-side rendering to free GPU resources.

const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  return;
}
try {
  const state = setupWaves(canvas);
} catch (e) {
  if ((e as Error).message === 'Failed to create WebGL texture') {
    console.warn('Waves texture allocation failed:', (e as Error).message);
  }
}

When it happens

Trigger: Called from setupWaves() at packages/effects/src/waves.ts:489 (sourceTexture: createTexture(gl, gl.LINEAR)) and line 490 (paletteTexture: createTexture(gl, gl.NEAREST)). Fires when the GL context cannot allocate a texture object — typically context loss or texture pool exhaustion.

Common situations: Context loss during setup; many concurrent waves effect instances without cleanup; long render sessions leaking textures; constrained GPU memory on mobile or VM environments.

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/5d730f9503877a3b. Report an issue: GitHub.