remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

The shine() effect's setup function calls gl.createTexture() to allocate the source texture that will receive the input frame each render. If the WebGL2 driver returns null, the effect throws this Error. Texture allocation failure typically indicates VRAM exhaustion or a context that lost its resources after creation.

Source

Thrown at packages/effects/src/shine.ts:287

		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_MIN_FILTER, gl.LINEAR);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
		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 {
			gl,
			program,
			vao,
			vbo,
			texture,
			uSource: gl.getUniformLocation(program, 'uSource'),
			uResolution: gl.getUniformLocation(program, 'uResolution'),
			uBandNormal: gl.getUniformLocation(program, 'uBandNormal'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce output resolution or render in segments to lower per-frame texture memory.
2. Lower concurrency so fewer effect textures are live simultaneously.
3. Ensure GPU hardware acceleration is active in the render environment.
4. Run on a host with adequate VRAM for the target resolution.

Example fix

null

// Probe texture allocation capability
function canCreateTexture(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const tex = gl.createTexture();
  const ok = tex !== null;
  if (tex) gl.deleteTexture(tex);
  return ok;
}

null

try {
  shine({ progress: 0.5 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL texture') {
    console.warn('WebGL2 texture allocation failed — try reducing resolution');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shine() when the GPU cannot allocate a texture — VRAM exhaustion from large frame sizes, too many simultaneous textures across effect instances, or a software renderer with hard texture limits. Especially common when rendering at 4K or higher with multiple WebGL2 effects.

Common situations: High-resolution renders (4K, 8K) that exceed software renderer texture caps; many concurrent effects each holding their own texture; SwiftShader or llvmpipe backends with limited texture memory; a context-loss event invalidating resources.

Related errors

• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL texture
• Failed to create WebGL texture

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