WebGL Docs

WebGL: 3D in Your Browser

Web Graphics Library (WebGL) enables hardware-accelerated 3D rendering in web browsers without plugins.

Canvas-Based

WebGL uses HTML5 canvas elements to render interactive 2D/3D graphics directly in the browser.

Shader Support

Write custom shaders using GLSL to control rendering pipelines with low-level precision.

Open Standard

Open standard across all major browsers, empowering developers to create rich interactive content.

Try WebGL

Example: A rotating 3D cube with lighting and wireframe overlay

Basic Setup

<canvas id="glcanvas" width="640" height="480" class="border-none"></canvas>
<script>
  const canvas = document.getElementById('glcanvas');
  const gl = canvas.getContext('webgl');
  
  if (!gl) {
    alert('WebGL not supported!');
    throw new Error('WebGL not supported');
  }

  // Basic GLSL fragment shader example
  const fsSource = `#version 300 es
precision highp float;
out vec4 outColor;
void main() {
  outColor = vec4(1.0, 0.5, 0.2, 1.0); // Orange color
}
`;