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.

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 framebuffer
• Failed to create WebGL texture
• Failed to create WebGL buffer
• Failed to create WebGL program
• Failed to create WebGL shader

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

Appendix: 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)