remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Internal error from the `rings()` effect setup: `gl.createTexture()` returned `null` when allocating the source or palette texture. Environment-level allocation failure, not a user-param error. The rings effect creates exactly two textures (source sampler with LINEAR filtering, palette sampler with NEAREST filtering); both run through the same `createTexture` helper.

Source

Thrown at packages/effects/src/rings.ts:333

	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 setupRings = (target: HTMLCanvasElement): RingsState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Restart the render or reload the page to reset GPU allocations.
2. Reduce the number of active effects or the source surface size.
3. Move to a hardware-accelerated GPU with current drivers.
4. Listen for `webglcontextlost` and tear down effects to free textures.

const canAllocateTexture = (): boolean => {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const t = gl.createTexture();
    if (t) gl.deleteTexture(t);
    return !!t;
  } catch {
    return false;
  }
};

try {
  rings()({...});
} catch (err) {
  if (err instanceof Error && /Failed to create WebGL texture/.test(err.message)) {
    // reduce active effects and retry after a short delay or reload
  } else {
    throw err;
  }
}

When it happens

Trigger: Context loss mid-setup; GPU texture-memory exhaustion from many simultaneously mounted effects or very large source surfaces; a software GL backend that artificially caps texture object counts.

Common situations: Heavy Studio sessions; large-frame renders on memory-constrained GPUs; CI on llvmpipe/SwiftShader.

Related errors

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

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