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.

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

• Checkerboard program link failed
• Checkerboard shader compile failed
• Failed to create WebGL buffer
• Failed to create WebGL program
• Failed to create WebGL shader

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

Appendix: 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)