remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

Thrown by dot-grid's setup() when gl.createBuffer() returns null. A null buffer signals a lost or exhausted WebGL2 context. Reached immediately after the VAO is bound, while allocating the fullscreen-quad vertex buffer.

Source

Thrown at packages/effects/src/dot-grid.ts:234

		const fs = compileShader(gl, gl.FRAGMENT_SHADER, DOT_GRID_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. Verify the effect lifecycle runs cleanup (gl.deleteBuffer in dot-grid cleanup).
  2. Cut down the number of WebGL2 effects mounted at once.
  3. Reload to release leaked resources.
  4. Use SwiftShader with adequate memory for headless runs.
  5. Update GPU drivers.
Defensive patterns

Strategy: try-catch

Validate before calling

const supportsWebGL2 = () => {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
};

Try / catch

try {
  state = dotGrid().setup(canvas);
} catch (err) {
  if (err instanceof Error && /WebGL buffer/i.test(err.message)) {
    console.error('Buffer allocation failed:', err.message);
  } else {
    throw err;
  }
}

Prevention

When it happens

Trigger: Lost WebGL2 context, exhausted buffer object limit, or GPU memory pressure during dotGrid().setup().

Common situations: Buffer leaks from effects whose cleanup never ran; many simultaneous effects; GPU driver crash; headless rendering under memory pressure.

Related errors


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