remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

The shrinkwrap() effect's setup function calls gl.createBuffer() to allocate a VBO for the fullscreen quad vertices. If the WebGL2 driver returns null, the effect throws this Error. A null buffer means GPU memory allocation failed despite a successfully created context.

Source

Thrown at packages/effects/src/shrinkwrap.ts:479

		const fs = compileShader(gl, gl.FRAGMENT_SHADER, SHRINKWRAP_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 GPU acceleration is enabled in the render environment.
2. Lower concurrency to reduce the number of live WebGL2 buffers.
3. Ensure proper effect cleanup (cleanup() calls gl.deleteBuffer()) between renders.
4. Use a runner or Lambda configuration with adequate GPU memory.

Example fix

null

// Probe buffer allocation capability
function canCreateGlBuffer(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;
}

null

try {
  shrinkwrap({ amount: 1 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL buffer') {
    console.warn('WebGL2 buffer allocation failed for shrinkwrap');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shrinkwrap() when GPU memory is exhausted or the driver is degraded — common with software rendering backends, high concurrency, or post-context-loss states.

Common situations: SwiftShader-based CI environments; Remotion Lambda with insufficient GPU resources; rendering at large resolutions with multiple effects; leaked buffer objects from improperly cleaned-up instances.

Related errors

• Failed to create WebGL buffer
• Failed to create WebGL buffer
• Failed to create shadows and highlights vertex buffer
• Failed to create WebGL program
• Failed to create WebGL texture

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