remotion-dev/remotion · critical · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

Thrown during Gridlines setup when gl.createBuffer() returns null. The buffer holds the fullscreen-quad vertex data. A null return means the context cannot allocate another buffer object — context loss or resource exhaustion.

Source

Thrown at packages/effects/src/gridlines.ts:450

		const fs = compileShader(gl, gl.FRAGMENT_SHADER, GRIDLINES_FS);
		const program = linkProgram(gl, vs, fs);
		gl.deleteShader(vs);
		gl.deleteShader(fs);

		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 texture = gl.createTexture();
		if (!texture) {
			throw new Error('Failed to create WebGL texture');
		}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Handle context loss and rebuild state on restore.
2. Ensure cleanup() deletes buffers (the Gridlines cleanup deletes vbo).
3. Limit concurrent WebGL2 effects/compositions.
4. Restart browser/GPU; update drivers if persistent.

Example fix

// before: setup per render, no teardown
const state = gridlines.setup(canvas); // buffers leak

// after: setup once, cleanup on unmount
useEffect(() => {
  const state = gridlines.setup(canvas);
  return () => gridlines.cleanup(state);
}, []);

if (gl.isContextLost()) {
  throw new Error('WebGL2 context lost; cannot create buffer');
}

null

try {
  gridlines.setup(canvas);
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL buffer') {
    // context loss / buffer budget exhausted
  }
  throw e;
}

When it happens

Trigger: Called once per setup right after binding the VAO (gridlines.ts:448). Lost WebGL2 context or leaked buffers exhausting the driver's object budget.

Common situations: Leaked buffer objects from repeated setup without cleanup; many concurrent WebGL effects; GPU reset; constrained software renderer.

Related errors

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

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