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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.