remotion-dev/remotion · error · Error

Failed to create WebGL resources

Error message

Failed to create WebGL resources

What it means

White noise setup allocates three GL objects — vertex array, vertex buffer, and source texture — in one batch and throws 'Failed to create WebGL resources' if any of the three is null. It is a combined guard: the effect needs all three to draw its noise-blended quad, so any single null allocation aborts setup. This is a context/resource failure, not a parameter problem.

Source

Thrown at packages/effects/src/white-noise.ts:162

		gl.deleteProgram(program);
		throw new Error(info);
	}

	return program;
};

const createWhiteNoiseState = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): WhiteNoiseState => {
	const program = createProgram(gl, vertexSource, fragmentSource);
	const vao = gl.createVertexArray();
	const vbo = gl.createBuffer();
	const texture = gl.createTexture();

	if (!vao || !vbo || !texture) {
		throw new Error('Failed to create WebGL resources');
	}

	gl.bindVertexArray(vao);
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(
		gl.ARRAY_BUFFER,
		new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),
		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.bindTexture(gl.TEXTURE_2D, texture);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm a healthy WebGL2 context before applying whiteNoise() (non-null getContext('webgl2'), isContextLost() false).
2. Render with Remotion's bundled Chromium and enabled software GPU; avoid GPU-disabling flags.
3. Reduce simultaneously-active WebGL effects so object allocation does not fail.
4. Handle webglcontextlost by re-mounting the composition to re-run setup.
5. Update GPU drivers / move to a host with a fully conformant WebGL2 implementation.

const gl = document.createElement('canvas').getContext('webgl2');
const webglOk =
  gl != null &&
  !gl.isContextLost() &&
  gl.createVertexArray() != null &&
  gl.createBuffer() != null &&
  gl.createTexture() != null;

const canAllocateWhiteNoiseResources = (): boolean => {
  const gl = document.createElement('canvas').getContext('webgl2');
  return (
    gl != null &&
    !gl.isContextLost() &&
    gl.createVertexArray() != null &&
    gl.createBuffer() != null &&
    gl.createTexture() != null
  );
};

try {
  return <VideoEffects effects={[whiteNoise({amount: 0.4})]} />;
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL resources') {
    return <Video />;
  }
  throw err;
}

When it happens

Trigger: createWhiteNoiseState: after the program is built, gl.createVertexArray(), gl.createBuffer(), or gl.createTexture() returns null, failing the `if (!vao || !vbo || !texture)` check on the first frame.

Common situations: Lost WebGL2 context; concurrent effects exhausting the GL object pool; headless/CI renderer with degraded WebGL2 allocation; long-running session that leaked GL objects.

Related errors

• Failed to create white balance texture
• Failed to create white balance vertex array
• Failed to create white balance vertex 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/12dfa561b403b2e7. Report an issue: GitHub.