remotion-dev/remotion · error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

When initializing the Tear effect's geometry, gl.createBuffer() returned null, so no vertex buffer object could be allocated for the tear mesh. The WebGL2 spec permits null here when the context is lost or resources are exhausted; the library throws immediately to avoid a null dereference later during rendering.

Solutions

1. Check gl.isContextLost() and recreate the canvas/context, then retry the effect
2. Reduce concurrent WebGL usage (other tabs, effects, compositions) to free GPU memory
3. Restart the browser/render process to reset GPU allocations
4. Test the context with a trivial gl.createBuffer() call to confirm the environment supports allocations

Example fix

// before
const vbo = gl.createBuffer();
if (!vbo) throw new Error('Failed to create WebGL buffer');
// after
const vbo = gl.createBuffer();
if (!vbo) {
  if (gl.isContextLost()) { recreateContext(); }
  throw new Error('WebGL buffer allocation failed — context lost or out of GPU memory');
}

const gl = canvas.getContext('webgl2');
if (!gl) throw new Error('WebGL2 unavailable');
if (gl.isContextLost()) throw new Error('Context lost before render');
const probe = gl.createBuffer();
if (!probe) throw new Error('GPU buffer allocation unavailable');
gl.deleteBuffer(probe);

function canAllocateBuffers(gl: WebGL2RenderingContext): boolean {
  const buf = gl.createBuffer();
  if (buf) { gl.deleteBuffer(buf); return true; }
  return false;
}

try {
  renderWithTear(...);
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL buffer') {
    if (gl.isContextLost()) { recreateContext(); }
    // free other GPU resources, then retry the render
  } else throw err;
}

When it happens

Trigger: gl.createBuffer() returning null in createTearState — the WebGL2 context became lost (GPU reset/driver crash) between shader setup and buffer allocation, or the context is out of buffer objects/memory.

Common situations: Long-running renders where the GPU resets mid-session; many concurrent WebGL canvases exhausting browser GPU memory; headless/CI software GL with strict resource limits; driver bugs failing allocations.

Related errors

• Failed to create LUT vertex buffer
• Failed to create WebGL buffer
• Failed to create WebGL texture
• Failed to create exposure vertex buffer
• Failed to create LUT source texture

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/6ece539f817b9c9e. Report an issue: GitHub.

Appendix: source

Thrown at packages/effects/src/tear.ts:242

	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((MESH_ROWS + 1) * 4);
	for (let row = 0; row <= MESH_ROWS; row++) {
		data.set([0, row / MESH_ROWS, 1, row / MESH_ROWS], row * 4);
	}

	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');
	gl.enableVertexAttribArray(aPos);
	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 8, 0);

	gl.bindVertexArray(null);

	const texture = gl.createTexture();
	if (!texture) {
		throw new Error('Failed to create WebGL texture');
	}

	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

View on GitHub (pinned to b2f4e34732)