Chapter 854: WebGL Compatibility Check (Manual)

Core Idea

Some devices/browsers still don't support WebGL 2; the WebGL capabilities module lets you check availability up front and show a friendly fallback message instead of failing silently or crashing.

Key Concepts

• WebGL.isWebGL2Available(): returns whether the current browser/device supports WebGL 2, checked before initializing any rendering.
• WebGL.getWebGL2ErrorMessage(): returns a ready-made DOM element with a user-facing explanation, to display when WebGL 2 isn't available.

Code Examples

import WebGL from "three/addons/capabilities/WebGL.js";

if (WebGL.isWebGL2Available()) {
  animate();
} else {
  const warning = WebGL.getWebGL2ErrorMessage();
  document.getElementById("container").appendChild(warning);
}

• What it demonstrates: gating app startup on a WebGL 2 support check, showing a built-in error message when unsupported.

Key Takeaways

1. Check WebGL.isWebGL2Available() before starting your app to avoid failing on unsupported browsers/devices.
2. WebGL.getWebGL2ErrorMessage() gives you a ready-to-insert fallback message instead of writing your own.

Connects To

• WebGLRenderer: the renderer whose initialization this check should precede.