What is WebGL? How browsers draw real-time 2D and 3D without plug-ins

When you tilt a 3D map, rotate a product, play a browser game, or zoom through thousands of layers in Figma, the browser may be doing more than displaying prepared images. It can ask the GPU in a computer or phone to calculate the next frame. WebGL is an important doorway between JavaScript and that graphics hardware.

The shortest answer: WebGL is a browser graphics API

WebGL stands for Web Graphics Library. It is a cross-platform, royalty-free open standard that lets a web page use the GPU to draw high-performance 2D and 3D graphics inside an HTML canvas. WebGL 1 exposes capabilities close to OpenGL ES 2.0, while WebGL 2 brings in more of the OpenGL ES 3.0 feature set.

WebGL is not a design application or an engine that produces a 3D world on its own. It is a low-level control surface: create buffers, upload vertices, compile shaders, configure state, and issue draw calls. That gives developers freedom, but it also requires many details to be explicit.

Who made it? There is no single author

The early roots of WebGL lead to the Canvas 3D experiments championed by Mozilla engineer Vladimir Vukićević. Once it became a standard, the Khronos Group’s WebGL Working Group developed it collectively. Participants included Apple, Google, Mozilla, Opera, and a range of GPU and hardware companies.

Khronos released WebGL 1.0 on March 3, 2011, giving browsers hardware-accelerated 3D based on OpenGL ES 2.0 without asking users to install a plug-in. WebGL 2.0 was finalized in 2017, adding modern capabilities such as instanced rendering, multiple render targets, and uniform buffer objects.

A useful answer to “who made WebGL?” is therefore: Mozilla’s experiments provided an early starting point, Vukićević later chaired the working group, and Khronos brought browser and chip companies together to turn the idea into a public cross-platform specification.

How does one pixel travel from JavaScript to the screen?

The page first gets a WebGLRenderingContext from a canvas. JavaScript prepares data such as triangle positions, colors, textures, and camera matrices, then places that data in buffers the GPU can read.

Shaders come next. A vertex shader processes the position of each vertex. A fragment shader determines the final color of each fragment. These small programs are usually written in GLSL, compiled, and executed in parallel on the GPU. JavaScript organizes and updates the state; the GPU turns geometry into screen pixels.

The basic unit the GPU likes to draw is a triangle. A model may look like a shoe, a building, or a character, but the graphics pipeline still receives many triangles. Materials, lighting, and textures change the colors that appear across those surfaces.

What can WebGL make? It is not limited to 3D

The obvious uses are 3D maps, product views, architectural walkthroughs, data visualization, particles, and browser games. WebGL-powered features in the Google Maps JavaScript API can tilt and rotate a vector map and place custom 2D or 3D graphics directly into the map scene. Midnight Run and the 3D Studio on this site also use WebGL as their final browser rendering layer.

WebGL can also be a strong choice for complex 2D. Figma used it for years to render large numbers of layers in a collaborative browser design canvas. That is an important reminder: the reason to choose WebGL is not that the image must look three-dimensional. The reason may be GPU acceleration, custom shaders, or the need to process a large amount of graphics efficiently.

Game engines can export work to run through WebGL in a browser. Educational simulations, medical imaging, online CAD, and scientific visualization use the same class of capability. The common requirement is a picture that must respond in real time after ordinary HTML elements or Canvas 2D become a poor fit.

How is it different from CSS, SVG, and Canvas 2D?

Use HTML and CSS first for text, forms, ordinary layout, and simple animation. SVG works well for icons or charts that should remain sharp when scaled and accessible through the DOM. Canvas 2D is often the most direct way to draw some 2D pixels with JavaScript.

WebGL becomes useful for large object counts, complex transformations, 3D depth, real-time lighting, and custom pixel work. The cost is development difficulty, debugging, device compatibility, and accessibility. Graphics inside a canvas do not automatically become content that search engines or screen readers understand, so important text should stay in HTML.

Where do WebGL, Three.js, and Blender sit?

Blender is the authoring side: modeling, materials, rigging, animation, and GLB export happen there. Three.js is a JavaScript library that organizes browser 3D around scenes, cameras, meshes, materials, and renderers. WebGL is the lower graphics API that actually sends data toward the GPU.

Most sites do not need to build a complete experience in raw WebGL. Three.js already handles shader compilation, matrices, materials, model loading, and many device details. Learning some WebGL is useful not because you should reject libraries, but because a black canvas, a shader error, or a performance problem becomes easier to understand.

How much work is hiding behind this triangle?

The interactive demo above contains one triangle, but it still follows the complete path: get a context, compile two shaders, create a program, upload positions and colors, configure attributes, and call drawArrays. This is the core with error handling removed.

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

const vertex = `
  attribute vec2 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

const fragment = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(0.1, 0.85, 0.95, 1.0);
  }
`;

function compile(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

const program = gl.createProgram();
gl.attachShader(program, compile(gl.VERTEX_SHADER, vertex));
gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
gl.linkProgram(program);
gl.useProgram(program);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
  gl.ARRAY_BUFFER,
  new Float32Array([0, 0.7, -0.65, -0.55, 0.65, -0.55]),
  gl.STATIC_DRAW,
);

const location = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(location);
gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0.02, 0.05, 0.1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Three.js expresses the same intent through Geometry, Material, Mesh, and Renderer, while the library handles most of this setup. Raw WebGL makes it much easier to see what Three.js is saving you from.

What about WebGL 2 and WebGPU?

WebGL 2 is a feature upgrade that retains the familiar OpenGL ES-style state model. WebGPU is a newer web graphics and compute API designed closer to modern Vulkan, Metal, and Direct3D 12, with capabilities such as compute shaders. It is not simply the next WebGL version number; it belongs to a different generation of interface design.

Whether a new project should go directly to WebGPU depends on target browsers, team experience, and library support. WebGL remains mature, broadly available, and backed by a large body of existing work. WebGPU offers a more modern model and additional performance opportunities. Products such as Figma have started adopting WebGPU while retaining a WebGL fallback, which is more realistic than declaring either one obsolete.

When should a site really use WebGL?

First ask whether the image must be recalculated in real time and whether a GPU would materially improve the experience. A gradient, a few icons, or a short transition is usually faster, lighter, and easier to maintain in CSS or SVG. WebGL earns its cost when large amounts of graphics, spatial interaction, custom shaders, or complex data push simpler approaches too far.

A production implementation also needs a fallback, a reasonable device-pixel-ratio limit, no unnecessary continuous rendering, and handling for context loss. WebGL gives a page the power of the GPU, but the site still owns its performance budget, readable content, and accessibility.