WebGL is a low-level JavaScript API that gives web pages direct access to the graphics processing unit for rendering hardware-accelerated 2D and 3D graphics inside an HTML canvas element. Among Web APIs, it is the established standard for GPU rendering in the browser, specified by the Khronos Group and supported by all major browsers.
WebGL 1.0 is based on OpenGL ES 2.0, and WebGL 2.0 is based on OpenGL ES 3.0. It does not provide scenes, models or cameras; it provides buffers, textures and shader programs, and everything else is built on top by the application or by libraries.
How WebGL renders through the GPU pipeline
A WebGL application obtains a rendering context with canvas.getContext('webgl2') and then feeds data to a programmable pipeline. Geometry is uploaded into buffers, images become textures, and two small programs written in GLSL ES, the vertex shader and the fragment shader, run on the GPU for every vertex and every pixel.
- Upload data: vertex positions, normals and texture coordinates go into GPU buffers.
- Vertex shader: transforms each vertex into clip space, usually with model, view and projection matrices.
- Rasterization: the GPU turns triangles into fragments, candidate pixels.
- Fragment shader: computes the color of each fragment, including lighting and texturing.
- Per-fragment tests: depth, stencil and blending decide what reaches the framebuffer.
WebGL is a state machine: the application binds buffers, textures and programs, sets uniforms and issues draw calls such as drawArrays or drawElements. Each draw call has CPU overhead, so performance depends more on the number of draw calls and state changes than on the raw triangle count.
WebGL 1.0 and WebGL 2.0
WebGL 2.0 is now available in all current major browsers and is the sensible default for new work. It adds features that WebGL 1.0 offered only through optional extensions, or not at all.
| Feature | WebGL 1.0 | WebGL 2.0 |
|---|---|---|
| Base specification | OpenGL ES 2.0 | OpenGL ES 3.0 |
| Shading language | GLSL ES 1.00 | GLSL ES 3.00 |
| Instanced drawing | Extension only | Built in |
| Multiple render targets | Extension only | Built in |
| 3D textures and texture arrays | Not available | Built in |
| Vertex array objects | Extension only | Built in |
| Transform feedback | Not available | Built in |
| Non-power-of-two textures | Restricted mipmapping and wrapping | Fully supported |
Instancing is the single most important upgrade for many applications, because it draws thousands of copies of one mesh, such as trees or map markers, in one draw call instead of thousands.
WebGL compared with other browser graphics APIs
Browsers offer several ways to draw. WebGL sits between the simple, CPU-oriented Canvas API and the modern, explicit WebGPU, and the choice depends on scene complexity and the platforms that must be supported.
| Technology | Model | Typical use |
|---|---|---|
| Canvas API (2D) | Immediate-mode drawing commands | Charts, simple games, image editing |
| SVG | Retained vector document in the DOM | Icons, diagrams, accessible graphics |
| WebGL | Stateful GPU pipeline with shaders | 3D scenes, maps, large data visualization |
| WebGPU | Explicit GPU API with pipelines and compute shaders | Advanced rendering, GPU computation, machine learning |
WebGPU maps more closely to Vulkan, Metal and Direct3D 12, reduces driver overhead and adds general-purpose compute shaders. WebGL remains relevant because of its mature ecosystem and very broad device coverage, and many libraries now support both back ends.
Practical choices when building with WebGL
Few teams write raw WebGL for complete applications. Libraries handle scene graphs, materials and loaders, while raw WebGL is reserved for custom effects or very specialized rendering.
| Situation | Recommended approach | Reason |
|---|---|---|
| Product viewer or 3D scene | General 3D library | Cameras, lighting and model loading included |
| Interactive maps | Dedicated map rendering library | Tiling, projections and labels solved |
| Millions of data points | Instancing or point sprites | Keeps draw calls low |
| Custom visual effect | Raw WebGL fragment shader | Full control with little overhead |
| Heavy GPU computation | WebGPU with WebGL fallback | Compute shaders are not part of WebGL |
Asset preparation matters as much as code. Compressed textures in GPU-native formats reduce memory and upload time, and the glTF format has become the common interchange format for 3D models on the web.
Limitations, security and common pitfalls
WebGL runs untrusted code on shared hardware, so browsers impose strict validation and isolation. Shaders are checked and translated before reaching the driver, and cross-origin images require CORS before they can be used as textures, to prevent reading pixels from other sites.
- Context loss: the browser can revoke the GPU context at any time, so applications must handle the webglcontextlost event and rebuild resources.
- Device fingerprinting: renderer strings and precision differences can identify devices, which is why some browsers limit exposed information.
- Precision differences: mobile GPUs may run mediump at lower precision, causing artifacts that never appear on desktop.
- Accessibility gaps: canvas content is invisible to screen readers unless an alternative description or DOM layer is provided.
- Memory leaks: buffers and textures are not garbage collected promptly and should be deleted explicitly.
Battery and thermal limits also apply. A scene that renders at 60 frames per second continuously keeps the GPU busy, so well-behaved applications render only when something changes instead of running an unconditional animation loop.
In simple terms
Every computer and phone has a graphics chip built for drawing images very fast, the same chip that powers video games. WebGL lets a web page talk to that chip directly, so the page can show rotating 3D products, detailed maps or large animated charts without installing any software.
The page sends shapes and small drawing programs to the chip, and the chip paints millions of pixels many times per second. The result appears inside a rectangle on the page, just like a picture or a video.
A practical example
A furniture retailer wants customers to rotate and inspect sofas in the browser instead of looking at a fixed set of photographs. The team exports each model to glTF, limits it to roughly 100,000 triangles and uses compressed textures so that a model downloads in a few megabytes.
A 3D library built on WebGL 2.0 renders the sofa with physically based materials and an environment map for realistic reflections. Fabric options are swapped by changing a texture rather than reloading the model, and the scene renders only while the user drags or changes a setting.
On mid-range phones the viewer stays smooth at 60 frames per second, the battery drain remains modest and the page falls back to photographs when WebGL is unavailable. The outcome is an interactive product view that works across devices without any plugin.