remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by createRgbaTexture in the color key effect when gl.createTexture() returns null. The GL context cannot allocate another texture object, indicating resource/memory exhaustion or context loss. The color key effect needs the source texture for frame pixels, so setup aborts.

Source

Thrown at packages/effects/src/color-key.ts:244

};

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;
};

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce render concurrency so fewer textures are live.
2. Render with GPU acceleration instead of software GL.
3. Update drivers/Chrome and retry for transient context loss.
4. Fewer concurrent WebGL effects reduces texture allocation.

Example fix

// before
remotion render main --concurrency=8

// after
remotion render main --concurrency=1

function webgl2TextureAvailable(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const t = gl.createTexture();
    const ok = t !== null;
    if (t) gl.deleteTexture(t);
    return ok;
  } catch {
    return false;
  }
}

try {
  await renderMedia({...});
} catch (err) {
  if (/Failed to create WebGL texture/i.test(String(err))) {
    await renderMedia({...opts, concurrency: 1});
  } else {
    throw err;
  }
}

When it happens

Trigger: At color-key.ts:244 inside setupColorKey (createRgbaTexture) after the program, VAO, and VBO are built. gl.createTexture() returns null under GL object/memory pressure or a lost context; not caused by colorKey() params.

Common situations: High render concurrency, software GL with low texture limits, GPU memory pressure, or context loss during a long render.

Related errors

• Failed to create color correction texture
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array
• Failed to create WebGL buffer

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