remotion-dev/remotion · critical · Error
Failed to create WebGL program
Error message
Failed to create WebGL program
What it means
Thrown by linkProgram() inside the waves effect when gl.createProgram() returns null. WebGL's createProgram returns null on context loss, context destruction, or resource exhaustion. The program object is needed to hold the linked vertex+fragment shader pair for the waves effect.
Source
Thrown at packages/effects/src/waves.ts:388
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(`Waves shader compile failed: ${log ?? '(no log)'}`);
}
return shader;
};
const linkProgram = (
gl: WebGL2RenderingContext,
vs: WebGLShader,
fs: WebGLShader,
): WebGLProgram => {
const program = gl.createProgram();
if (!program) {
throw new Error('Failed to create WebGL program');
}
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
const log = gl.getProgramInfoLog(program);
gl.deleteProgram(program);
throw new Error(`Waves program link failed: ${log ?? '(no log)'}`);
}
return program;
};
const createProgram = (
gl: WebGL2RenderingContext,
vertexSource: string,
fragmentSource: string,View on GitHub (pinned to 78fe4bb3fd)
Solutions
- Handle 'webglcontextlost'/'webglcontextrestored' and recreate the effect on a new canvas.
- Reduce concurrent effects and ensure cleanup of old states.
- Update GPU drivers or switch render environments.
- Recycle render worker processes in long-running server-side rendering.
Defensive patterns
Strategy: try-catch
Try / catch
const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
return;
}
try {
const state = setupWaves(canvas);
} catch (e) {
if ((e as Error).message === 'Failed to create WebGL program') {
console.warn('Waves program allocation failed:', (e as Error).message);
}
} Prevention
- Handle context loss/restoration events.
- Clean up old waves effect states before creating new ones.
- Recycle render worker processes in long-running sessions.
When it happens
Trigger: Called transitively from setupWaves() at packages/effects/src/waves.ts:446 via createProgram → linkProgram. Fires when the GL context cannot allocate a program object. Since both shaders compiled successfully before this point, this indicates context loss or resource exhaustion occurring between shader compilation and program creation.
Common situations: WebGL context loss mid-setup; many concurrent effect instances exhausting program object slots; GPU process instability; constrained rendering environment.
Related errors
- Failed to create WebGL program
- Failed to create WebGL program
- Failed to create WebGL shader
- Failed to create WebGL texture
- Failed to create WebGL vertex array
AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12).
Data as JSON: /api/errors/cd37d9ffe8bfb314.
Report an issue: GitHub.