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

Reduce concurrency / parallel browser contexts.

remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

A plain Error thrown by createTexture in the Lines effect when gl.createTexture() returns null. The Lines effect uses two textures (a LINEAR source texture and a NEAREST palette texture); if either allocation returns null, setup aborts.

Source

Thrown at packages/effects/src/lines.ts:362

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Reduce concurrency / parallel browser contexts.
Ensure prior effects are cleaning up their GL resources (the Lines effect tears down on cleanup).
Render on a host with more GPU memory or a more capable GL backend.

Defensive patterns

Strategy: try-catch

Validate before calling

function canAllocateTexture(): boolean {
  const c = document.createElement('canvas');
  const gl = c.getContext('webgl2');
  if (!gl) return false;
  return !!gl.createTexture();
}

Try / catch

try {
  lines(...);
} catch (err) {
  if (err instanceof Error && /WebGL texture/.test(err.message)) {
    // reduce concurrency / free textures, then retry
  } else throw err;
}

Prevention

Dispose of finished effects/contexts so textures are reclaimed.
Lower render concurrency to stay within GPU texture limits.
Use a render host with sufficient GPU memory.

When it happens

Trigger: WebGL2 context is alive but cannot allocate another texture object — GPU memory exhaustion, a lost context, or an excessive number of live textures across the page. Triggered from setupLines via createTexture(gl, gl.LINEAR) and createTexture(gl, gl.NEAREST).

Common situations: Many concurrent renders, large source frames being uploaded repeatedly, or a GPU memory leak that saturates texture capacity. Headless software GL with a small texture budget.

Related errors

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