remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by the drop-shadow runtime's createRgbaTexture helper when gl.createTexture() returns null. A null texture signals a lost or resource-exhausted WebGL2 context. The drop-shadow runtime allocates three RGBA textures (source, shadowA, shadowB), so the first allocation that fails throws.

Source

Thrown at packages/effects/src/drop-shadow/drop-shadow-runtime.ts:110

};

const createProgram = (
	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 createRgbaTexture = (gl: WebGL2RenderingContext): 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, 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 texture;
};

const getBlurUniforms = (
	gl: WebGL2RenderingContext,
	program: WebGLProgram,
): DropShadowState['horizontal'] => ({
	uRadius: gl.getUniformLocation(program, 'uRadius'),
	uTexelSize: gl.getUniformLocation(program, 'uTexelSize'),
	uSource: gl.getUniformLocation(program, 'uSource'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm cleanupDropShadow runs so gl.deleteTexture reclaims all three textures on unmount.
2. Reduce the number of simultaneous drop-shadow effects or lower composition resolution.
3. Reload to free leaked textures.
4. For headless/CI, use SwiftShader with sufficient memory and limit concurrency.
5. Update GPU drivers.

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

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

When it happens

Trigger: Lost WebGL2 context, exceeded texture object limit, or GPU memory exhaustion. Reached inside setupDropShadow() during the triple-texture allocation phase.

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

Related errors

• Failed to create WebGL texture
• Failed to create WebGL framebuffer
• 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/0f33117bcb958ec6. Report an issue: GitHub.