remotion-dev/remotion · critical · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

While setting up the noiseDisplacement effect's WebGL2 pipeline, compileShader called gl.createShader() which returned null. The WebGL2 context exists (an earlier check would have thrown createWebGL2ContextError) but cannot allocate shader objects — typically due to context loss, GPU resource exhaustion, or an inadequate rendering environment.

Source

Thrown at packages/effects/src/noise-displacement.ts:405

			float weight = passWeight * DISC_W[b];
			color += sampleSource(samplePixel + DISC[b] * blurRadius) * weight;
			totalWeight += weight;
		}
	}

	fragColor = color / totalWeight;
}
`;

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create WebGL shader');
	}

	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		const log = gl.getShaderInfoLog(shader);
		gl.deleteShader(shader);
		throw new Error(
			`Noise displacement shader compile failed: ${log ?? '(no log)'}`,
		);
	}

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure the render environment supports WebGL2 — for headless Chrome pass --enable-webgl and appropriate --use-gl flags.
2. Reduce the number of concurrent WebGL-based effects.
3. Update GPU drivers or use SwiftShader software rendering.
4. Handle WebGL context loss and retry the render.

// Check WebGL2 shader allocation capability before using the effect
const testCanvas = document.createElement('canvas');
const testGl = testCanvas.getContext('webgl2');
if (testGl) {
  const testShader = testGl.createShader(testGl.VERTEX_SHADER);
  if (!testShader) {
    console.warn('WebGL2 shader allocation failed — noiseDisplacement may not work');
  }
  testGl.deleteShader(testShader);
}

// Wrap effect usage in try-catch with a non-WebGL fallback
try {
  // apply noiseDisplacement effect
} catch (e) {
  if (e instanceof Error && e.message.includes('WebGL shader')) {
    console.warn('WebGL unavailable, skipping noiseDisplacement effect');
    // fall back to rendering without the effect
  } else {
    throw e;
  }
}

When it happens

Trigger: During setupNoiseDisplacement, gl.createShader(type) returns null for either the vertex (NOISE_DISPLACEMENT_VS) or fragment (NOISE_DISPLACEMENT_FS) shader. This occurs after the context is acquired but before shader source is uploaded.

Common situations: CI/headless rendering without proper GPU flags; too many concurrent WebGL contexts; context loss from browser crashes; VMs/Docker without GPU passthrough; corrupted GPU drivers.

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/0d7bf76c32ec15e6. Report an issue: GitHub.