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 effect when gl.createBuffer() returns null. The effect needs a vertex buffer for the fullscreen-quad attributes; null means the GL implementation would not allocate another buffer object — object-budget exhaustion or context loss.

Source

Thrown at packages/effects/src/halftone.ts:441

		const fs = compileShader(gl, gl.FRAGMENT_SHADER, HALFTONE_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. Check gl.isContextLost(); restart the render if true.
  2. Lower the count of WebGL2 effects or share effect state.
  3. Render on a machine with more GPU headroom / a newer driver.
  4. Restart Chrome/Studio to clear leaked GL objects.
Defensive patterns

Strategy: try-catch

Validate before calling

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 / catch

try {
  // ...use halftone()
} catch (e) {
  if (e instanceof Error && /Failed to create WebGL buffer/.test(e.message)) {
    // buffer budget exhausted or context lost; restart render
  } else throw e;
}

Prevention

When it happens

Trigger: Halftone setup() running after the VAO succeeded but with the buffer pool already exhausted; or under context-loss conditions.

Common situations: Long render jobs with many WebGL2 effects; integrated GPUs under load; post-crash context.

Related errors


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