What causes "WebGL2 not supported" in MiniMax-AI/skills?

Use a WebGL2-capable browser and enable hardware acceleration.

MiniMax-AI/skills · error · Error

WebGL2 not supported

Error message

WebGL2 not supported

What it means

`throw new Error('WebGL2 not supported')` in the shadow-techniques SDF demo. `canvas.getContext('webgl2')` returned null, so the script writes a fallback `<p>` and throws before compiling the `#version 300 es` shaders (which require a WebGL2 context). Without the throw, subsequent `gl.createShader` calls would throw a null-reference TypeError with a less obvious cause.

Source

Thrown at skills/shader-dev/techniques/shadow-techniques.md:390

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Soft Shadows - SDF Raymarching</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const gl = canvas.getContext('webgl2');

        if (!gl) {
            document.body.innerHTML = '<p style="color:#fff;">WebGL2 not supported</p>';
            throw new Error('WebGL2 not supported');
        }

        // Vertex shader: fullscreen quad
        const vsSource = `#version 300 es
            in vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

        // Fragment shader: SDF soft shadows
        const fsSource = `#version 300 es
            precision highp float;

            uniform float iTime;
            uniform vec2 iResolution;
            uniform vec4 iMouse;

View on GitHub (pinned to 60aaae52bb)

Solutions

Use a WebGL2-capable browser and enable hardware acceleration.
Update GPU drivers or switch devices if the driver is blocklisted.
Wrap in a capability check that renders a static fallback instead of throwing.

Example fix

// before
const gl = canvas.getContext('webgl2');
if (!gl) { document.body.innerHTML = '<p>WebGL2 not supported</p>'; throw new Error('WebGL2 not supported'); }

// after
const gl = canvas.getContext('webgl2');
if (!gl) { showStaticShadowImage(); return; }
runSdfShadows(gl);

Defensive patterns

Strategy: fallback

Validate before calling

const gl = canvas.getContext('webgl2');
if (!gl) { showStaticShadowImage(); return; }
runSdfShadows(gl);

Type guard

function canRunWebGL2Demo(): boolean {
  try { return !!document.createElement('canvas').getContext('webgl2'); }
  catch { return false; }
}

Try / catch

try {
  const gl = canvas.getContext('webgl2');
  if (!gl) throw new Error('WebGL2 not supported');
  runSdfShadows(gl);
} catch (e) {
  if (e instanceof Error && /WebGL2/i.test(e.message)) showStaticShadowImage();
  else throw e;
}

Prevention

Gate the `#version 300 es` shader pipeline behind a confirmed WebGL2 context.
Offer a static fallback render so unsupported browsers degrade gracefully.
Surface the minimum browser/version requirement in the demo UI.
In headless tests, run under a software GL backend or skip the path.

When it happens

Trigger: Loading the shadow demo in a browser/VM without WebGL2 support, with acceleration disabled, or on a blocklisted GPU driver.

Common situations: Old Safari, headless testing, disabled hardware acceleration, or unsupported mobile GPUs.

Related errors

AI-assisted analysis of MiniMax-AI/skills@60aaae52bb (2026-08-13). Data as JSON: /api/errors/b35b7c0fe2775b19. Report an issue: GitHub.