remotion-dev/remotion · error · Error

Failed to create WebGL buffer

Error message

Failed to create WebGL buffer

What it means

The shine() 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 even though the context was successfully created.

Source

Thrown at packages/effects/src/shine.ts:270

		const fs = compileShader(gl, gl.FRAGMENT_SHADER, SHINE_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. Reduce concurrency so fewer WebGL2 contexts and buffers are live at once.
3. Ensure proper effect cleanup to release GPU buffers between renders.
4. Use a runner or Lambda configuration with adequate GPU resources.

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 {
  shine({ progress: 0.5 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL buffer') {
    console.warn('WebGL2 buffer allocation failed');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shine() when GPU memory is exhausted or the driver is in a degraded state. Common in headless renderers using software GL, or when many WebGL2 effects are live simultaneously.

Common situations: SwiftShader-based CI environments with limited allocation capacity; Remotion Lambda with insufficient Chrome/GPU layer; rendering at very large resolutions that stress the software rasterizer; leaked buffer objects from improperly cleaned-up effect 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/76ced66035b2033c. Report an issue: GitHub.