remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by createTexture() (checkerboard helper) when gl.createTexture() returns null. The checkerboard effect allocates two textures (source at LINEAR and palette at NEAREST); if either allocation returns null — lost context or GPU texture memory exhausted — setup aborts. Without textures the shader cannot sample the frame or the palette.

Source

Thrown at packages/effects/src/checkerboard.ts:334

	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 createTexture = (
	gl: WebGL2RenderingContext,
	filter: number,
): 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, filter);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
	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;
};

const setupCheckerboard = (target: HTMLCanvasElement): CheckerboardState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce concurrent compositions and free unused GL resources before setup.
2. Lower composition resolution to cut texture footprint.
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;
  // probe a texture allocation
  const t = gl.createTexture();
  const ok = !!t;
  if (t) gl.deleteTexture(t);
  return ok && !gl.isContextLost();
  } catch {
  return false;
  }
}
if (!probeWebGL2()) skipOrFallback();

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

When it happens

Trigger: setupCheckerboard() calls createTexture() at checkerboard.ts:332 (via createTexture(gl, gl.LINEAR) / createTexture(gl, gl.NEAREST) at :401-402); gl.createTexture() returns null and the guard at :333 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 shader
• Checkerboard shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program
• Checkerboard program link failed: ${log ?? '(no log)'}

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