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

Lower render concurrency to reduce the number of live WebGL2 contexts and their GL object allocations

remotion-dev/remotion · error · Error

Failed to create WebGL resources

Error message

Failed to create WebGL resources

What it means

Thrown by createTvSignalOffState when any of gl.createVertexArray(), gl.createBuffer(), or gl.createTexture() returns null during the tv-signal-off effect setup. The library bundles all three checks into one guard and fails fast, because rendering requires all three resources to be valid.

Source

Thrown at packages/effects/src/tv-signal-off.ts:187

		gl.deleteProgram(program);
		throw new Error(info);
	}

	return program;
};

const createTvSignalOffState = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): TvSignalOffState => {
	const program = createProgram(gl, vertexSource, fragmentSource);
	const vao = gl.createVertexArray();
	const vbo = gl.createBuffer();
	const texture = gl.createTexture();

	if (!vao || !vbo || !texture) {
		throw new Error('Failed to create WebGL resources');
	}

	gl.bindVertexArray(vao);
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(
		gl.ARRAY_BUFFER,
		new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),
		gl.STATIC_DRAW,
	);

	const aPos = gl.getAttribLocation(program, 'aPos');
	const aUv = gl.getAttribLocation(program, 'aUv');
	gl.enableVertexAttribArray(aPos);
	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
	gl.enableVertexAttribArray(aUv);
	gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);

	gl.bindTexture(gl.TEXTURE_2D, texture);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Lower render concurrency to reduce the number of live WebGL2 contexts and their GL object allocations
Handle webglcontextlost on the canvas and retry the full render job rather than the individual effect
Verify the rendering environment supports WebGL2 with adequate resource limits (check with a getParameter benchmark)
Restart the render process / browser instance if it has been running long enough to accumulate leaked GL objects

Defensive patterns

Strategy: try-catch

Try / catch

try {
  await renderMedia({composition, codec: 'h264'});
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL resources') {
    // One of VAO, VBO, or texture allocation failed — context is lost or exhausted.
    // Retry with lower concurrency or a fresh browser instance.
    await renderMedia({composition, codec: 'h264', concurrency: 2});
  } else {
    throw err;
  }
}

Prevention

Reduce render concurrency to lower the number of simultaneous GL contexts and their object allocations
Register webglcontextlost listeners on render canvases to detect degradation proactively
Periodically restart long-lived render browser instances to reclaim leaked GL objects

When it happens

Trigger: After the shader program is built, createTvSignalOffState calls createVertexArray, createBuffer, and createTexture in sequence. If any returns null — indicating a lost context or exhausted GPU object pool — the combined null check at line 186 fires.

Common situations: Context loss after GPU driver reset; server-side rendering with many parallel WebGL2 contexts; long-running render processes where the GL context degrades over time; environments using mesa/software rendering with low object limits.

Related errors

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