{"record":{"id":"cfbdc9766edd87b3","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-shader-cfbdc9","errorCode":null,"errorMessage":"Failed to create WebGL shader","messagePattern":"Failed to create WebGL shader","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/roughen-edges.ts","lineNumber":301,"sourceCode":"\tvec2 offset = direction * scalar * uBorder / uResolution;\n\tvec4 roughened = texture(\n\t\tuSource,\n\t\tclamp(vUv + offset, vec2(0.0), vec2(1.0))\n\t);\n\tfloat blend = clamp(proximity * uAmount, 0.0, 1.0);\n\n\tfragColor = mix(source, roughened, blend);\n}\n`;\n\nconst compileShader = (\n\tgl: WebGL2RenderingContext,\n\ttype: number,\n\tsource: string,\n): WebGLShader => {\n\tconst shader = gl.createShader(type);\n\tif (!shader) {\n\t\tthrow new Error('Failed to create WebGL shader');\n\t}\n\n\tgl.shaderSource(shader, source);\n\tgl.compileShader(shader);\n\tif (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n\t\tconst log = gl.getShaderInfoLog(shader);\n\t\tgl.deleteShader(shader);\n\t\tthrow new Error(\n\t\t\t`Roughen edges shader compile failed: ${log ?? '(no log)'}`,\n\t\t);\n\t}\n\n\treturn shader;\n};\n\nconst linkProgram = (\n\tgl: WebGL2RenderingContext,\n\tvs: WebGLShader,","sourceCodeStart":283,"sourceCodeEnd":319,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/roughen-edges.ts#L283-L319","documentation":"Internal error from the `roughenEdges()` effect's WebGL2 setup: `gl.createShader()` returned `null`. The WebGL2 context was created, but the driver refused to allocate a shader object. Environment-level failure (context loss, GPU resource exhaustion, unstable software GL), not a param error. The vertex/fragment shader sources (`ROUGHEN_EDGES_VS` / `ROUGHEN_EDGES_FS`) are static literals, so no user input reaches this path.","triggerScenarios":"Mounting `roughenEdges()` on a context that was just lost; running many effects until the driver's shader-object limit is hit; CI on a software GL backend under memory pressure.","commonSituations":"Long Studio sessions leaking contexts; render farms on SwiftShader/llvmpipe; systems resuming from sleep with a stale GPU context.","solutions":["Reload the page or restart the render for a fresh context.","Reduce the number of concurrently active effects.","Update GPU drivers or switch to hardware acceleration.","Handle `webglcontextlost` to tear down and rebuild the effect."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":"const supportsWebGL2 = (): boolean => {\n  try {\n    const c = document.createElement('canvas');\n    return !!c.getContext('webgl2');\n  } catch {\n    return false;\n  }\n};\n\nif (!supportsWebGL2()) {\n  // fall back to a non-effect composition\n}","typeGuard":null,"tryCatchPattern":"try {\n  roughenEdges()({...});\n} catch (err) {\n  if (err instanceof Error && /Failed to create WebGL shader/.test(err.message)) {\n    // surface a 'GPU context unavailable' message and offer a reload\n  } else {\n    throw err;\n  }\n}","preventionTips":["Feature-detect WebGL2 before mounting effects.","Limit concurrent effect count to avoid exhausting shader objects.","Handle `webglcontextlost` on the canvas and re-create the effect on restore.","Use hardware-accelerated CI runners."],"tags":["webgl2","roughen-edges-effect","effects","gpu","environment","resource-allocation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}