remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by vignette's createRgbaTexture when gl.createTexture() returns null. The source texture is required to upload the input frame; a null return signals context loss or GL memory/object exhaustion. This is an environmental failure, not a parameter mistake.

Source

Thrown at packages/effects/src/vignette.ts:321

};

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reload to reset the WebGL2 context and free textures.
2. Reduce concurrent WebGL effects and dispose offscreen ones.
3. Verify hardware-accelerated WebGL2 and update drivers.
4. For server rendering, size the runner to the frame resolution in use.

Example fix

// before
const effect = vignette({amount: 0.6});

// after
const effect = (() => {
  try { return vignette({amount: 0.6}); } catch { return null; }
})();

let effect = null;
try {
  effect = vignette({amount: 0.6});
} catch (err) {
  console.warn('vignette texture alloc failed, skipping effect', err);
}

When it happens

Trigger: setupVignette calls createRgbaTexture after building the program/VAO/VBO; gl.createTexture() returns null on a lost context or exhausted texture budget.

Common situations: Context loss under heavy effect load; GPU memory exhaustion on large-frame pipelines; headless Chrome with constrained resources.

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 vertex array

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