What causes "Failed to create WebGL texture" in remotion-dev/remotion?

Reduce the number of concurrent WebGL effects or the resolution of source textures.

remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

While creating the source texture for the mirror effect, gl.createTexture() returned null. The WebGL2 context is alive but cannot allocate a texture object. This usually signals context loss, GPU memory exhaustion, or an environment with marginal WebGL2 resource support.

Source

Thrown at packages/effects/src/mirror/mirror-runtime.ts:81

};

const createProgram = (
	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 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 setupMirror = (target: HTMLCanvasElement): MirrorState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Reduce the number of concurrent WebGL effects or the resolution of source textures.
Check for and handle WebGL context loss — retry rendering after context restoration.
Update GPU drivers or use SwiftShader in headless environments.
Ensure the render environment has adequate GPU memory for the composition.

Defensive patterns

Strategy: try-catch

Try / catch

try {
  // apply mirror effect
} catch (e) {
  if (e instanceof Error && e.message.includes('WebGL texture')) {
    console.warn('WebGL texture creation failed, skipping mirror effect');
    // fallback path
  } else {
    throw e;
  }
}

Prevention

Reduce texture resolution or number of concurrent effects to lower GPU memory pressure.
Handle WebGL context loss events and retry.
Ensure the render environment has adequate GPU memory.

When it happens

Trigger: During setupMirror, createRgbaTexture calls gl.createTexture() which returns null. This happens late in setup — after shaders, program, VAO, and VBO are already created — so earlier resources succeeded but texture allocation failed.

Common situations: GPU memory exhaustion from many simultaneous effects or large textures; context loss between setup steps; headless/CI environments with limited texture allocation; corrupted GPU driver state.

Related errors

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