remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

The shine() effect's compileShader helper calls gl.createShader() and throws this generic Error when the WebGL2 driver returns null. This means the context was created but the driver cannot allocate even a shader object, signaling severe GPU resource starvation or a context in a lost state.

Source

Thrown at packages/effects/src/shine.ts:194

	float dist = dot(px - center, uBandNormal) - uBandT;
	float halo = exp(-(dist * dist) / (uHaloSigma * uHaloSigma)) * uHaloIntensity;
	float core = exp(-(dist * dist) / (uCoreSigma * uCoreSigma)) * uCoreIntensity;
	float intensity = clamp(halo + core, 0.0, 1.0);

	vec3 finalPremult = source.rgb * (1.0 - intensity) + intensity * source.a;
	fragColor = vec4(finalPremult, source.a);
}
`;

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(`Shine 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 shine() or other WebGL2 effect instances.
3. Check the canvas for 'webglcontextlost' events and re-render after restoration.
4. Update or replace the GPU driver / Chrome layer if the issue persists across workloads.

Example fix

// before — fails on a context that cannot allocate shaders
import { shine } from '@remotion/effects';
shine({ progress: 0.5 });

// after — guard for environments without reliable WebGL2
try {
  shine({ progress: 0.5 });
} catch (e) {
  // fall back to a CSS-based or non-WebGL approach
  console.error('WebGL2 unavailable, skipping shine effect', e);
}

// 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 {
  shine({ progress: 0.5 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL shader') {
    // GPU cannot allocate shader objects — fall back
    console.warn('WebGL2 shader allocation failed');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shine() in a setup where the WebGL2 context is degraded — headless Chrome with software rendering, a GPU in a reset/recovery state, or too many live GL contexts exhausting the driver's object budget. Distinct from a compile failure (which produces a different error with the info log).

Common situations: SwiftShader-based CI runners under memory pressure; Remotion Lambda with insufficient GPU libraries; a browser tab that accumulated leaked shader objects; running effects immediately after a context-loss event before the context is restored.

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