remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by dot-grid's setup() when gl.createTexture() returns null. A null texture indicates a lost or resource-exhausted WebGL2 context. Reached after the VAO/VBO are built, while allocating the source texture that will receive each frame's image.

Source

Thrown at packages/effects/src/dot-grid.ts:251

		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);

		return {
			gl,
			program,
			vao,
			vbo,
			texture,
			uSource: gl.getUniformLocation(program, 'uSource'),
			uResolution: gl.getUniformLocation(program, 'uResolution'),
			uDotSize: gl.getUniformLocation(program, 'uDotSize'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm cleanup runs so gl.deleteTexture reclaims the texture on unmount.
2. Lower the number of simultaneous WebGL2 effects or reduce composition resolution.
3. Reload the page to free leaked textures.
4. For headless/CI, use SwiftShader with sufficient memory and avoid excessive concurrency.
5. Update GPU drivers.

const supportsWebGL2 = () => {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
};

try {
  state = dotGrid().setup(canvas);
} catch (err) {
  if (err instanceof Error && /WebGL texture/i.test(err.message)) {
    console.error('Texture allocation failed:', err.message);
    // fall back to a non-WebGL layer
  } else {
    throw err;
  }
}

When it happens

Trigger: Lost WebGL2 context, exceeded texture object limit, or GPU memory exhaustion. Triggered in dotGrid().setup() during texture allocation.

Common situations: Texture leaks from effects whose cleanup was skipped; rendering very large frames on low-memory GPUs; many effects mounted at once; headless rendering under memory pressure; GPU reset.

Related errors

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

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