remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by createRgbaTexture() in the chromatic aberration runtime when gl.createTexture() returns null. This texture receives each incoming frame (texImage2D) that the chromatic aberration shader samples; a null allocation — lost context or exhausted GPU texture memory — means there is nothing to sample, so setup aborts.

Source

Thrown at packages/effects/src/chromatic-aberration/chromatic-aberration-runtime.ts:80

};

const createProgram = (
	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): WebGLProgram => {
	const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
	const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
	const program = linkProgram(gl, vs, fs);
	gl.deleteShader(vs);
	gl.deleteShader(fs);
	return program;
};

const createRgbaTexture = (gl: WebGL2RenderingContext): WebGLTexture => {
	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_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.bindTexture(gl.TEXTURE_2D, null);
	return texture;
};

export const setupChromaticAberration = (
	target: HTMLCanvasElement,
): ChromaticAberrationState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Free WebGL resources from other effects before initializing chromatic aberration.
2. Reduce composition resolution and concurrency to cut texture memory.
3. Enable real GPU acceleration; avoid --disable-gpu.
4. Handle context loss/restore and recreate the effect.
5. Use a GPU/higher-memory instance for server rendering.

function probeWebGL2(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
  const t = gl.createTexture();
  const ok = !!t;
  if (t) gl.deleteTexture(t);
  return ok && !gl.isContextLost();
  } catch {
  return false;
  }
}
if (!probeWebGL2()) skipOrFallback();

try {
  return <ChromaticAberration {...props} />;
} catch (err) {
  if (/Failed to create WebGL texture/.test(String(err))) return <FallbackFrame />;
  throw err;
}

When it happens

Trigger: setupChromaticAberration() calls createRgbaTexture() which calls gl.createTexture() at chromatic-aberration-runtime.ts:78; it returns null and the guard at :79 throws.

Common situations: GPU texture memory exhausted by many/large compositions, integrated GPU with limited VRAM, software raster under load, or a lost context reached after program creation.

Related errors

• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL shader
• Shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program

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