{"record":{"id":"e520c6388eae1cef","repo":"sickn33/agentic-awesome-skills","slug":"webgl-context-unavailable","errorCode":null,"errorMessage":"WebGL context unavailable","messagePattern":"WebGL context unavailable","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"skills/liuguang-banlan-ui/assets/starter/shared/spectral-field.js","lineNumber":262,"sourceCode":"      this.available = false;\n      this.error = null;\n      this.motionPreference = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n      this.motionEnabled = !this.motionPreference.matches;\n      this.visible = !document.hidden;\n      this.startTime = performance.now();\n      this.phaseTime = null;\n      this.lastFrame = 0;\n      this.frameHandle = 0;\n      try {\n        this.gl = canvas.getContext(\"webgl\", {\n          alpha: false,\n          antialias: false,\n          depth: false,\n          stencil: false,\n          powerPreference: \"low-power\",\n          preserveDrawingBuffer: true\n        });\n        if (!this.gl) throw new Error(\"WebGL context unavailable\");\n\n        this.program = createProgram(this.gl);\n        this.gl.useProgram(this.program);\n        const buffer = this.gl.createBuffer();\n        if (!buffer) throw new Error(\"WebGL buffer creation failed\");\n        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);\n        this.gl.bufferData(\n          this.gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n          this.gl.STATIC_DRAW\n        );\n        const position = this.gl.getAttribLocation(this.program, \"aPosition\");\n        if (position < 0) throw new Error(\"WebGL position attribute unavailable\");\n        this.gl.enableVertexAttribArray(position);\n        this.gl.vertexAttribPointer(position, 2, this.gl.FLOAT, false, 0, 0);\n\n        this.locations = {\n          resolution: uniform(this.gl, this.program, \"uResolution\"),","sourceCodeStart":244,"sourceCodeEnd":280,"githubUrl":"https://github.com/sickn33/agentic-awesome-skills/blob/58d857988fcfac6986206bca2b2fe223aa437e4b/skills/liuguang-banlan-ui/assets/starter/shared/spectral-field.js#L244-L280","documentation":"The spectral-field renderer's constructor calls canvas.getContext('webgl', {...}) and throws immediately if the context is null: the browser refused to create a WebGL1 context — disabled, blocklisted, or exhausted.","triggerScenarios":"Instantiating the renderer where getContext('webgl') returns null: hardware acceleration disabled in the browser, GPU blocklisted (some Linux/VM setups), too many live WebGL contexts already open, or a headless test environment without GPU support.","commonSituations":"Users with hardware acceleration off; headless Jest/Playwright runs without SwiftShader; VMs and remote desktops; pages that spawn many canvases and leak contexts.","solutions":["Feature-detect WebGL before mounting and fall back to a 2D-canvas/CSS animation","For headless tests, launch Chrome with --enable-unsafe-swiftshader or --use-gl=swiftshader","Reuse one instance/canvas; call WEBGL_lose_context.loseContext() on teardown","Ask desktop users to re-enable hardware acceleration"],"exampleFix":"// before\nconst gl = canvas.getContext('webgl', opts);\nif (!gl) throw new Error('WebGL context unavailable');\n\n// after\nconst gl = canvas.getContext('webgl', opts) || canvas.getContext('experimental-webgl', opts);\nif (!gl) return SpectralField.cssFallback(canvas);","handlingStrategy":"fallback","validationCode":"const probe = document.createElement('canvas');\nconst supported = !!(probe.getContext('webgl') || probe.getContext('experimental-webgl'));\nif (!supported) mountCssFallback(el); else new SpectralField(el);","typeGuard":"function webglSupported(): boolean {\n  try {\n    const c = document.createElement('canvas');\n    return !!(window.WebGLRenderingContext && (c.getContext('webgl') || c.getContext('experimental-webgl')));\n  } catch { return false; }\n}","tryCatchPattern":"try { renderer = new SpectralField(canvas); }\ncatch (e) {\n  if (e.message === 'WebGL context unavailable') { renderer = null; mountCssFallback(canvas); }\n  else throw e;\n}","preventionTips":["Feature-detect WebGL before mounting GL components","Give headless tests SwiftShader flags","Always ship a CSS/canvas2d fallback for decorative effects","Reuse contexts instead of one per instance"],"tags":["webgl","browser","environment","gpu"],"backgroundTag":"webgl-context-unavailable","analyzedSha":"58d857988fcfac6986206bca2b2fe223aa437e4b","analyzedAt":"2026-08-26T11:55:59.350Z","schemaVersion":2},"datasetVersion":"2026-08-26T14:46:13.012Z"}