remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

Thrown by createPixelateState when gl.createBuffer() returns null after the VAO was created and bound. The null-check aborts before bindBuffer/bufferData would silently no-op on a missing buffer. Cause is GL buffer-object allocation failure, typically context loss or memory pressure.

Source

Thrown at packages/effects/src/pixelate.ts:143

	const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
	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()` and remount on restore.
2. Reduce concurrent WebGL2 effects and free unused source assets.
3. Increase Lambda function memory.
4. Render at a lower resolution to reduce per-frame buffer traffic.
5. Reproduce locally to rule out the user machine.

Example fix

// before
import {pixelate} from '@remotion/effects';
const effect = pixelate();

// after — probe buffer allocation
function glCanCreateBuffer(gl: WebGL2RenderingContext): boolean {
  if (gl.isContextLost()) return false;
  const b = gl.createBuffer();
  const ok = b !== null;
  if (b) gl.deleteBuffer(b);
  return ok;
}

function glCanCreateBuffer(gl: WebGL2RenderingContext): boolean {
  if (gl.isContextLost()) return false;
  const b = gl.createBuffer();
  if (b) gl.deleteBuffer(b);
  return b !== null;
}

try {
  pixelate();
} catch (err) {
  if (/Failed to create WebGL buffer/.test((err as Error).message)) {
    // reduce GPU load and retry
  }
  throw err;
}

When it happens

Trigger: pixelate setup: VAO succeeded, then gl.createBuffer() in createPixelateState returns null.

Common situations: GPU memory pressure from large source textures; context loss mid-setup; SwiftShader under load on Lambda; many effects holding buffers simultaneously.

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/4b5f1810b3933340. Report an issue: GitHub.