remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

Thrown in setup() of the halftone-linear-gradient effect when gl.createBuffer() returns null. The library needs a vertex buffer to upload the fullscreen-quad attributes; a null buffer means WebGL2 refused to allocate another GL object, which happens under object-budget exhaustion or context loss.

Source

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

		);
		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. Confirm gl.isContextLost(); if true, restart the render or Studio — the context cannot recover in place.
2. Lower the count of WebGL2 effects in the affected composition or share effect state across frames.
3. Move rendering to a machine with more GPU headroom or a newer driver.
4. Restart Chrome/Studio to clear leaked GL objects from a prior session.

// Probe whether the GL context can still allocate a buffer before committing to the effect.
function canCreateBuffer(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const buf = gl.createBuffer();
  const ok = buf !== null;
  if (buf) gl.deleteBuffer(buf);
  return ok;
}

try {
  // ...use halftoneLinearGradient()
} catch (e) {
  if (e instanceof Error && /Failed to create WebGL buffer/.test(e.message)) {
    // treat as context loss / resource exhaustion; restart or reduce load
  } else throw e;
}

When it happens

Trigger: Same shape as the VAO failure: too many concurrent WebGL2 effect states, or a context that has been lost. Specifically this fires after the VAO succeeds but before attributes are uploaded, so the buffer pool is the first object type that hit the cap.

Common situations: Heavy compositions stacking many WebGL2 effects on integrated GPUs; rendering after the GPU process crashed but the Remotion worker kept the same context; long-running Studio sessions leaking GL objects.

Related errors

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

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