remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by vignette's compileShader when gl.createShader() returns null. A null shader means WebGL refused to allocate the shader object, which indicates context loss or the GL implementation's object limit. Vignette cannot compile its internal shaders without it.

Solutions

1. Reload to reset the WebGL2 context.
2. Reduce the number of WebGL effects applied at once.
3. Verify hardware-accelerated WebGL2 and update drivers.
4. Ensure offscreen effects are disposed so shader objects are freed.

Example fix

// before
const effect = vignette({amount: 0.6}); // compileShader may throw

// after
const effect = (() => {
  try { return vignette({amount: 0.6}); } catch { return null; }
})();

let effect = null;
try {
  effect = vignette({amount: 0.6});
} catch (err) {
  console.warn('vignette shader alloc failed, skipping effect', err);
}

When it happens

Trigger: createProgram calls compileShader for the internal VERTEX_SHADER/FRAGMENT_SHADER; gl.createShader(type) returns null because the context is lost (isContextLost()) or too many shader objects are live.

Common situations: Context loss under many concurrent vignette/other WebGL effects; GPU/driver refusing further shader objects; headless Chrome on a constrained runner.

Related errors

• Failed to create WebGL buffer
• Failed to create WebGL program
• Failed to create WebGL shader
• Failed to create WebGL shader
• Failed to create WebGL shader

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

Appendix: source

Thrown at packages/effects/src/vignette.ts:269

		fragColor = vec4(texColor.rgb * (1.0 - mask), outputAlpha);
		return;
	}

	float overlayAlpha = mask * uColor.a;
	vec3 outputRgb = uColor.rgb * overlayAlpha + texColor.rgb * (1.0 - overlayAlpha);
	float outputAlpha = overlayAlpha + alpha * (1.0 - overlayAlpha);
	fragColor = vec4(outputRgb, outputAlpha);
}
`;

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

	return shader;
};

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

View on GitHub (pinned to 78fe4bb3fd)