remotion-dev/remotion · critical · Error
Failed to create WebGL texture
Error message
Failed to create WebGL texture
What it means
Thrown by setupFlannel when gl.createTexture() returns null after geometry setup. WebGL returns null for texture allocation on context loss or VRAM/object exhaustion. The texture is the source sampler used to feed the flannel shader each frame.
Source
Thrown at packages/effects/src/flannel.ts:260
gl.bindVertexArray(vao);
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),
gl.STATIC_DRAW,
);
const aPos = gl.getAttribLocation(program, 'aPos');
const aUv = gl.getAttribLocation(program, 'aUv');
gl.enableVertexAttribArray(aPos);
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
gl.enableVertexAttribArray(aUv);
gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
gl.bindVertexArray(null);
const texture = gl.createTexture();
if (!texture) {
throw new Error('Failed to create WebGL texture');
}
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.bindTexture(gl.TEXTURE_2D, null);
const colorCanvas = document.createElement('canvas');
colorCanvas.width = 1;
colorCanvas.height = 1;
const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});
if (!colorCtx) {
throw new Error('Failed to acquire 2D context for color parsing');
}
return {View on GitHub (pinned to 78fe4bb3fd)
Solutions
- Decrease output resolution or number of WebGL layers.
- Retry the render with a fresh Chrome.
- Move to a GPU with more available memory.
Defensive patterns
Strategy: retry
Try / catch
let effect;
for (let attempt = 0; attempt < 3; attempt++) {
try {
effect = flannel(params);
break;
} catch (err) {
if (attempt === 2 || !/WebGL|texture/i.test(String(err))) throw err;
await new Promise((r) => setTimeout(r, 200 * (attempt + 1)));
}
} Prevention
- Lower output resolution to reduce per-texture VRAM.
- Limit the number of simultaneous WebGL effects.
- Render on a host with more GPU memory.
When it happens
Trigger: Context lost between geometry and texture creation; VRAM exhausted by large frame textures; many simultaneous effect textures.
Common situations: High-resolution renders stacking multiple WebGL effects; headless Chrome close to its GPU memory cap.
Related errors
- Failed to create WebGL shader
- Failed to create WebGL program
- Failed to create WebGL geometry
- Failed to create WebGL texture
- Failed to create WebGL texture
AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12).
Data as JSON: /api/errors/a1c239a3f7adc878.
Report an issue: GitHub.