remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

Thrown by setupLinearGradient() when gl.createBuffer() returns null while building the vertex buffer for the fullscreen quad. The library cannot upload the quad's vertex/UV data without a buffer, so it aborts setup.

Source

Thrown at packages/effects/src/linear-gradient.ts:238

		throw createWebGL2ContextError('linear gradient effect');
	}

	const program = createProgram(gl);

	const vao = gl.createVertexArray();
	if (!vao) {
		throw new Error('Failed to create WebGL vertex array');
	}

	gl.bindVertexArray(vao);

	const data = new Float32Array([
		-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,
	]);

	const vbo = gl.createBuffer();
	if (!vbo) {
		throw new Error('Failed to create WebGL buffer');
	}

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, data, 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.bindVertexArray(null);

	const colorCanvas = document.createElement('canvas');
	colorCanvas.width = 1;
	colorCanvas.height = 1;
	const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Recover by restarting Chrome / the render worker and retrying once.
2. Reduce concurrency to cut the number of simultaneous GL allocations.
3. Force a software GL backend (`--gl=angle --angle-backend=swiftshader`).
4. If reproducing in Studio, reload the page / restart dev server to release leaked objects.
5. Update Chrome and GPU drivers on the host for persistent failures.

function canAllocateBuffer(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const b = gl.createBuffer();
  const ok = b !== null;
  if (b) gl.deleteBuffer(b);
  return ok;
}

try {
  renderWithLinearGradient();
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL buffer') {
    await restartRendererWorker();
    renderWithLinearGradient();
  } else throw err;
}

When it happens

Trigger: Same family as the other GL null-allocations: the WebGL2 context exists but refuses a new buffer object. Typical of a context in a failing state, GPU memory exhaustion, or too many live GL objects across concurrent renders.

Common situations: Concurrent Lambda/local renders saturating driver object limits; a crashed Chrome GPU process leaving the context half-dead; integrated GPUs under memory pressure; very long Studio sessions leaking buffers.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array
• Failed to create WebGL shader
• Failed to create WebGL program

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