MiniMax-AI/skills · error · Error

No WebGL2

Error message

No WebGL2

What it means

`throw new Error('No WebGL2')` in the GPU physics simulation demo. `canvas.getContext('webgl2', { antialias: false })` returned null, so the script replaces the body with 'WebGL2 not supported' and throws to stop init before the resize/shader helpers touch the null context. The dual-channel/ping-pong simulation design is fundamentally WebGL2-only (it relies on float textures and `#version 300 es`).

Source

Thrown at skills/shader-dev/techniques/simulation-physics.md:21

### WebGL2 Multi-Pass Rendering Complete Template

Below is a complete standalone HTML template demonstrating how to set up WebGL2 double buffering (ping-pong) for physics simulation:

**IMPORTANT: WebGL2 ping-pong core rule: The texture bound to the write-target framebuffer must never simultaneously serve as input for any iChannel.** Violating this rule causes undefined behavior (typically all-black/all-zero output).

For simulations requiring "current frame" and "previous frame" two time steps (such as the wave equation), use **dual-channel encoding**: R channel stores current height, G channel stores previous frame height. This way only one buffer is read from (iChannel0 = currentBuf), writing to another buffer (nextBuf), avoiding read-write conflicts.

```html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>GPU Physics</title>
<style>body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100vh}</style>
</head>
<body><canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl2', { antialias: false });
if (!gl) { document.body.innerHTML = 'WebGL2 not supported'; throw new Error('No WebGL2'); }

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

function createShader(type, src) {
    const s = gl.createShader(type);
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(s));
        gl.deleteShader(s);
        return null;
    }
    return s;

View on GitHub (pinned to 60aaae52bb)

Solutions

  1. Run in a WebGL2-capable browser with hardware acceleration on.
  2. For automated runs, use a software GL backend or skip the demo.
  3. Render a fallback message via a guard rather than throwing, so the rest of the page stays usable.

Example fix

// before
const gl = canvas.getContext('webgl2', { antialias: false });
if (!gl) { document.body.innerHTML = 'WebGL2 not supported'; throw new Error('No WebGL2'); }

// after
const gl = canvas.getContext('webgl2', { antialias: false });
if (!gl) { document.body.innerHTML = '<p>This demo needs WebGL2.</p>'; return; }
initPhysics(gl);
Defensive patterns

Strategy: fallback

Validate before calling

const gl = canvas.getContext('webgl2', { antialias: false });
if (!gl) { document.body.innerHTML = '<p>This demo needs WebGL2.</p>'; return; }
initPhysics(gl);

Type guard

const supportsWebGL2 = (() => {
  try { return !!document.createElement('canvas').getContext('webgl2', { antialias: false }); }
  catch { return false; }
})();

Try / catch

try {
  const gl = canvas.getContext('webgl2', { antialias: false });
  if (!gl) throw new Error('No WebGL2');
  initPhysics(gl);
} catch (e) {
  if (e instanceof Error && /WebGL2/i.test(e.message)) renderFallback();
  else throw e;
}

Prevention

When it happens

Trigger: No WebGL2 context available — old browser, acceleration disabled, blocklisted driver, or a headless/software-only runtime.

Common situations: Pre-Safari-15 environments, VMs without GPU, CI runners, or users who disabled acceleration.

Related errors

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