remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

The shrinkwrap() effect's compileShader helper calls gl.createShader() during setup. If the WebGL2 context returns null, the effect throws this generic Error. This indicates the context was created but cannot allocate a shader object — severe GPU resource starvation or a context in a lost/degraded state.

Source

Thrown at packages/effects/src/shrinkwrap.ts:403

	);
	float shadow = clamp((creaseShadow * 0.1 + edge * 0.06) * uAmount, 0.0, 0.25);

	rgb *= 1.0 - shadow;
	rgb += (1.0 - rgb) * min(highlight, 1.0);
	rgb += vec3(max(highlight - 1.0, 0.0)) * 0.35;

	fragColor = vec4(clamp(rgb, 0.0, 1.0) * alpha, alpha);
}
`;

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

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,
	fs: WebGLShader,
): WebGLProgram => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure hardware-accelerated WebGL2 is available in the render environment.
2. Reduce the number of concurrent WebGL2-backed effects.
3. Check for and handle 'webglcontextlost' events on the canvas.
4. Update GPU drivers or switch to a host with proper WebGL2 support.

Example fix

null

// Check if the WebGL2 context can allocate a shader object
function canCreateShader(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const shader = gl.createShader(gl.VERTEX_SHADER);
  const ok = shader !== null;
  if (shader) gl.deleteShader(shader);
  return ok;
}

null

try {
  shrinkwrap({ amount: 1 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL shader') {
    console.warn('WebGL2 shader allocation failed for shrinkwrap');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shrinkwrap() in an environment where WebGL2 exists but shader object allocation fails: headless Chrome with software rendering, GPU memory exhaustion, or a context that lost its resources between getContext and createShader.

Common situations: CI runners using SwiftShader under memory pressure; Remotion Lambda with missing GPU libraries; too many concurrent WebGL2 effects exhausting the driver object pool; transient context loss during setup.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL shader
• Failed to create WebGL shader
• Failed to create shadows and highlights vertex array
• Failed to create shadows and highlights vertex buffer

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