remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Zigzag creates two GL textures — a LINEAR-filtered source sampler and a NEAREST-filtered palette sampler — via a shared createTexture helper; if the context returns null it throws 'Failed to create WebGL texture'. The effect samples both the video frame and the 1-D color palette, so it cannot draw without them. Null allocation means a lost/limited context, not a parameter error.

Source

Thrown at packages/effects/src/zigzag.ts:404

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Confirm a healthy WebGL2 context (non-null getContext('webgl2'), isContextLost() false) before applying zigzag().
2. Render with Remotion's bundled Chromium with the software GPU enabled; avoid --disable-gpu.
3. Reduce concurrently-active WebGL effects to free texture-object slots.
4. Handle webglcontextlost by re-mounting the composition so setup reinitializes.
5. Update GPU drivers / move to a host with a conformant WebGL2 implementation.

const gl = document.createElement('canvas').getContext('webgl2');
const webglOk = gl != null && gl.createTexture() != null && !gl.isContextLost();

const canAllocateTexture = (): boolean => {
  const gl = document.createElement('canvas').getContext('webgl2');
  return gl != null && !gl.isContextLost() && gl.createTexture() != null;
};

try {
  return <VideoEffects effects={[zigzag({colors: ['#ff0000', '#00ff00']})]} />;
} catch (err) {
  if (err instanceof Error && err.message === 'Failed to create WebGL texture') {
    return <Video />;
  }
  throw err;
}

When it happens

Trigger: setupZigzag calls createTexture(gl, gl.LINEAR) or createTexture(gl, gl.NEAREST) and gl.createTexture() returns null on the first frame.

Common situations: Headless/CI renderer with degraded WebGL2; context lost; too many textures alive across concurrent effects; software backend capping texture allocation.

Related errors

• Failed to create white balance texture
• Failed to create white balance vertex array
• Failed to create white balance vertex buffer
• Failed to create WebGL resources
• Failed to create WebGL vertex array

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