remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by compileShader in contour-lines.ts when gl.createShader(type) returns null. This means the WebGL2 context could not allocate a new shader object. The context was already successfully acquired (a separate error covers context creation failure), so a null return typically indicates GPU resource exhaustion, a lost WebGL context, or driver instability.

Source

Thrown at packages/effects/src/contour-lines.ts:353

		);
		return;
	}

	fragColor = vec4(
		premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
		lineAlpha + texColor.a * (1.0 - lineAlpha)
	);
}
`;

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(
			`Contour lines shader compile failed: ${log ?? '(no log)'}`,
		);
	}

	return shader;
};

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

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce the number of simultaneously active WebGL-backend effects in the composition.
2. Ensure the rendering environment (headless Chrome for Remotion Lambda/CLI) has GPU acceleration enabled or a robust software WebGL fallback (SwiftShader).
3. Listen for webglcontextlost events on the canvas and handle context restoration gracefully.
4. Check that the WebGL2 context is not already lost before the effect runs — if isContextLost() returns true, defer or skip the effect.

// Check context health before applying the effect
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  // skip or fall back
}

try {
  contourLines({...})(source, target);
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL shader') {
    // GPU resource issue — reduce active WebGL effects or use a different environment
  }
  throw e;
}

When it happens

Trigger: The contour-lines effect's setupContourLines runs, the WebGL2 context is obtained, but gl.createShader(gl.VERTEX_SHADER) or gl.createShader(gl.FRAGMENT_SHADER) returns null. This occurs during the first render frame that applies contourLines(), or when the effect is re-initialized after a context loss.

Common situations: Rendering many simultaneous WebGL-based effects exceeding GPU object limits; headless rendering environment with a software WebGL implementation that has low resource caps; WebGL context lost event fired mid-setup; running in a VM or CI runner with a limited GPU; browser tab backgrounded and GPU resources reclaimed.

Related errors

• Failed to create WebGL program
• Failed to create WebGL texture
• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Contour lines shader compile failed: ${log ?? '(no log)'}

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