remotion-dev/remotion · error · Error
Failed to create WebGL shader
Error message
Failed to create WebGL shader
What it means
Thrown by wave-runtime's compileShader when gl.createShader() returns null. A null shader object means WebGL refused the allocation on context loss or GL object-limit exhaustion. The wave warp cannot compile its internal shaders without it.
Source
Thrown at packages/effects/src/wave/wave-runtime.ts:29
textureSource: WebGLTexture;
uniforms: {
uSource: WebGLUniformLocation | null;
uResolution: WebGLUniformLocation | null;
uAmplitude: WebGLUniformLocation | null;
uWavelength: WebGLUniformLocation | null;
uPhase: WebGLUniformLocation | null;
uDirection: WebGLUniformLocation | null;
};
};
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(`Shader compile failed: ${log ?? '(no log)'}`);
}
return shader;
};
const linkProgram = (
gl: WebGL2RenderingContext,
vs: WebGLShader,
fs: WebGLShader,
): WebGLProgram => {View on GitHub (pinned to 78fe4bb3fd)
Solutions
- Reload to reset the WebGL2 context.
- Reduce the number of WebGL effects applied at once.
- Verify hardware-accelerated WebGL2 and update drivers.
- Dispose offscreen effects so shader objects are freed.
Example fix
// before
const effect = wave({amplitude: 60, wavelength: 240}); // compileShader may throw
// after
const effect = (() => {
try { return wave({amplitude: 60, wavelength: 240}); } catch { return null; }
})(); Defensive patterns
Strategy: try-catch
Try / catch
let effect = null;
try {
effect = wave({amplitude: 60, wavelength: 240});
} catch (err) {
console.warn('wave shader alloc failed, skipping effect', err);
} Prevention
- Reduce concurrent WebGL effects to stay under driver shader-object limits.
- Handle context loss/restore and rebuild effects afterwards.
- Free offscreen effects so shader objects are released.
- Use hardware-accelerated WebGL2.
When it happens
Trigger: wave setup calls createProgram, which calls compileShader for the internal VERTEX_SHADER/FRAGMENT_SHADER; gl.createShader(type) returns null because the context is lost or too many shader objects are live.
Common situations: Context loss under many concurrent wave/other WebGL effects; GPU/driver object caps; headless Chrome on a constrained runner.
Related errors
- Failed to create WebGL shader
- Failed to create WebGL shader
- Failed to create WebGL shader
- Shader compile failed: ${log ?? '(no log)'}
- Failed to create WebGL program
AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12).
Data as JSON: /api/errors/7d241dbafa48978b.
Report an issue: GitHub.