remotion-dev/remotion · critical · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

During thermal vision effect `setup`, `gl.createBuffer()` returned `null` while allocating the vertex buffer for the fullscreen quad. The GL context cannot allocate a buffer object, usually due to context loss or resource exhaustion. The VAO has been created and bound when this fires.

Solutions

1. Reduce concurrent webgl2 effect instances.
2. Restart the session for a fresh context.
3. Ensure adequate GPU memory (close other GPU-heavy apps).
4. Handle `webglcontextlost` events and reinitialize effect state.

try {
  thermalVision({...params});
} catch (e) {
  if (/Failed to create WebGL buffer/.test((e as Error).message)) {
    renderFallbackFrame();
  } else throw e;
}

When it happens

Trigger: Context lost after VAO creation; GPU buffer memory exhausted; degraded/destroyed GL context.

Common situations: Many concurrent webgl2 effects; memory-constrained mobile devices; long-running sessions; headless CI with limited GL memory.

Related errors

• Failed to create WebGL buffer
• Failed to create WebGL program
• Failed to create WebGL shader
• Failed to create WebGL texture
• Failed to create WebGL vertex array

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

Appendix: source

Thrown at packages/effects/src/thermal-vision.ts:252

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

	const program = createProgram(gl, THERMAL_VISION_VS, THERMAL_VISION_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 colorCanvas = document.createElement('canvas');
	colorCanvas.width = 1;
	colorCanvas.height = 1;
	const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});

View on GitHub (pinned to 78fe4bb3fd)