WebGL

WebGL (Web Graphics Library) is a JavaScript API that lets web pages render interactive 2D and 3D graphics through the device's GPU without plugins. It draws into a <canvas> element and is based on OpenGL ES, using small GPU programs called shaders written in GLSL.

Why it matters

WebGL powers 3D product viewers, maps, data visualizations, browser games and effects. Writing raw WebGL is verbose, so most developers use libraries such as Three.js or Babylon.js. A successor, WebGPU, exposes more modern GPU features but is a separate API.

For site owners, WebGL content adds download size and GPU load, and can fail on old devices, blocked hardware acceleration or virtual machines.

Example

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
if (!gl) {
  showFallbackImage();
} else {
  gl.clearColor(0.1, 0.1, 0.2, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

The code requests a context, checks that the GPU path is available and falls back gracefully if it is not.

Common mistakes

• Not handling context loss, which happens when the GPU resets or tabs are backgrounded.
• Not checking support and showing a blank canvas instead of a fallback.
• Rendering at full device pixel ratio on large screens, draining battery.
• Forgetting to free textures and buffers, causing memory leaks.

Related

• Canvas element
• GPU
• WebAssembly
• JavaScript

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.