remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

The paper() effect builds a fullscreen-quad vertex buffer object (VBO) during WebGL2 setup. gl.createBuffer() returns null when the GL context is lost, already destroyed, or the driver refuses further allocations. This guard converts that silent null into an explicit setup failure so the renderer does not continue against a dead context.

Source

Thrown at packages/effects/src/paper.ts:803

	const fs = compileShader(gl, gl.FRAGMENT_SHADER, PAPER_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 sourceTexture = createSourceTexture(gl);
	const noiseTexture = createNoiseTexture(gl);
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm the render environment has a working WebGL2 context (for headless Chrome pass GPU flags such as --use-gl=angle / --enable-unsafe-swiftshader instead of disabling WebGL).
2. Register 'webglcontextlost' / 'webglcontextrestored' listeners on the canvas and re-run setupPaper() on restore.
3. Cut down the number of simultaneous GPU-heavy effects in the composition so the driver stays under its object budget.
4. Update GPU drivers; fall back to SwiftShader software rendering in CI.

// Context-loss aware render wrapper for a GPU effect.
const canvas = document.createElement('canvas');
canvas.addEventListener('webglcontextlost', (e) => {
  e.preventDefault(); // allow restoration
  pendingRestore = true;
});
canvas.addEventListener('webglcontextrestored', () => {
  pendingRestore = false;
  initEffect(); // re-run setupPaper()
});

function renderFrame() {
  try {
    drawWithPaper(state); // uses the VBO from setupPaper
  } catch (err) {
    if (isContextLostError(err)) initEffect(); // rebuild GL objects
    else throw err;
  }
}

When it happens

Trigger: Reached inside setupPaper() after the WebGL2 context is acquired, the paper shaders compile and link, and gl.createVertexArray() succeeds. The very next allocation (gl.createBuffer() for the quad vertices) returns null. Happens during any render or Studio preview frame that instantiates the paper effect under context-loss or GPU pressure.

Common situations: Headless Chrome rendering under memory pressure; long-running Studio sessions where the OS evicted the GL context; machines with buggy/outdated GPU drivers; compositions stacking many GPU effects so the driver hits object limits; tab backgrounded then resumed.

Related errors

• Failed to create WebGL texture
• 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/f3f8836589ecbe38. Report an issue: GitHub.