remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown during Gridlines setup when gl.createTexture() returns null. This texture is the source sampler the effect uploads each frame into. A null return again points to context loss or texture-budget exhaustion.

Source

Thrown at packages/effects/src/gridlines.ts:467

		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');
		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.bindVertexArray(null);

		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_WRAP_S, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
		gl.bindTexture(gl.TEXTURE_2D, null);

		const colorCanvas = document.createElement('canvas');
		colorCanvas.width = 1;
		colorCanvas.height = 1;
		const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});
		if (!colorCtx) {
			throw new Error('Failed to acquire 2D context for color parsing');
		}

		return {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Handle webglcontextlost; recreate on restore.
2. Ensure cleanup() deletes textures (Gridlines cleanup frees the texture).
3. Reduce concurrent compositions/effects; lower frame resolution.
4. Restart browser/GPU; update drivers if persistent.

Example fix

// before: many effects live, textures never freed -> null
comps.forEach(c => c.effects.gridlines.setup(canvas));

// after: free on teardown
useEffect(() => {
  const s = gridlines.setup(canvas);
  return () => gridlines.cleanup(s);
}, []);

if (gl.isContextLost()) {
  throw new Error('WebGL2 context lost; cannot create texture');
}

null

try {
  gridlines.setup(canvas);
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL texture') {
    // context loss / texture budget exhausted
  }
  throw e;
}

When it happens

Trigger: Called once per setup (gridlines.ts:465) after the buffer/VAO are configured. Happens under a lost context, when the GPU's texture budget is exceeded, or when too many concurrent WebGL effects are alive.

Common situations: Large/source frames combined with many live textures; leaked textures; GPU reset; software renderer with a low texture cap.

Related errors

• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array

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