remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown by createPixelateState when gl.createVertexArray() returns null after the program was linked. This is the first per-frame-state allocation after program setup; a null VAO means the GL context cannot allocate another vertex array object. The guard prevents bindVertexArray from receiving null.

Source

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

	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		const log = gl.getProgramInfoLog(program);
		gl.deleteProgram(program);
		throw new Error(`Pixelate program link failed: ${log ?? '(no log)'}`);
	}

	return program;
};

const createPixelateState = (gl: WebGL2RenderingContext): PixelateState => {
	const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
	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');

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Verify `gl.isContextLost()` is false before mounting pixelate; remount on restore.
2. Limit the number of WebGL2 effects active in one composition.
3. Increase Lambda function memory.
4. Reproduce on stable desktop Chrome to isolate environment issues.
5. Free other GPU resources before applying pixelate.

Example fix

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

// after — probe VAO allocation up front
function glCanCreateVao(gl: WebGL2RenderingContext): boolean {
  if (gl.isContextLost()) return false;
  const v = gl.createVertexArray();
  const ok = v !== null;
  if (v) gl.deleteVertexArray(v);
  return ok;
}

function glCanCreateVao(gl: WebGL2RenderingContext): boolean {
  if (gl.isContextLost()) return false;
  const v = gl.createVertexArray();
  if (v) gl.deleteVertexArray(v);
  return v !== null;
}

try {
  pixelate();
} catch (err) {
  if (/Failed to create WebGL vertex array/.test((err as Error).message)) {
    // environment lacks VAO capacity; remount after context restore
  }
  throw err;
}

When it happens

Trigger: pixelate() setup: shaders compiled, program linked, then gl.createVertexArray() in createPixelateState returns null.

Common situations: Context lost between program link and VAO creation; VAO pool exhausted by many effects; SwiftShader on a memory-constrained Lambda function; integrated GPU with low VAO cap.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL buffer
• 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/00cdda1cf32d7e1c. Report an issue: GitHub.