WebGL
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics inside a web browser without plug-ins, using the device's graphics processing unit (GPU) for hardware acceleration.[1] It is a cross-platform, royalty-free open standard maintained by the Khronos Group, and its API closely follows OpenGL ES, the embedded-systems profile of OpenGL.[2] WebGL code runs inside the HTML canvas element and uses the GLSL shading language for programmable vertex and fragment shaders.[1][2]
WebGL is the long-standing rendering backend for browser-based virtual reality and augmented reality. The WebXR Device API does not draw anything itself; it produces head pose and per-eye view information, while a WebGL context renders the scene that the headset displays, the two being linked through the XRWebGLLayer interface.[3] The same was true of the earlier WebVR API. Most web VR and AR content reaches WebGL indirectly through higher-level engines such as A-Frame, Three.js and Babylon.js.[4]
History
WebGL grew out of an experiment called Canvas 3D that Mozilla engineer Vladimir Vukićević began in 2006, which added an OpenGL-based 3D drawing context to the HTML canvas element.[5] By the end of 2007 both Mozilla and Opera had built separate prototype implementations.[5] To turn the idea into a vendor-neutral standard, the Khronos Group started a WebGL Working Group in early 2009, first announced at the Game Developers Conference in March 2009, with participation from AMD, Ericsson, Google, Mozilla, NVIDIA and Opera among others.[6]
The Khronos Group released the final WebGL 1.0 specification on 3 March 2011. It defined a JavaScript binding to OpenGL ES 2.0 so that browsers could show hardware-accelerated 3D without a plug-in.[7] At release, working implementations were already present in Mozilla Firefox 4, Google Chrome 9, Opera preview builds and Apple Safari nightly builds.[7]
WebGL 2.0 followed, exposing the OpenGL ES 3.0 feature set and adding capabilities such as 3D textures, uniform buffer objects, transform feedback, multiple render targets and instanced drawing as core features.[1] Khronos announced that the WebGL 2.0 specification was finalized and shipping on 27 February 2017, by which point it was supported in production builds of Chrome and Firefox; Firefox 51, released on 25 January 2017, enabled WebGL 2.0 by default.[8] In the same announcement Khronos said it had begun work on a next-generation web graphics API to expose explicit, low-level GPU control; that effort became WebGPU.[8]
| Version | OpenGL ES base | Final specification | Notes |
|---|---|---|---|
| WebGL 1.0 | OpenGL ES 2.0 | 3 March 2011 | First plug-in-free hardware-accelerated 3D in browsers |
| WebGL 2.0 | OpenGL ES 3.0 | 27 February 2017 | Adds 3D textures, transform feedback, instancing, multiple render targets |
How it works
A WebGL program obtains a rendering context from a canvas element (WebGLRenderingContext for version 1.0 or WebGL2RenderingContext for version 2.0) and issues drawing commands that map onto the underlying OpenGL ES API.[1] Because it follows OpenGL ES 2.0 and later, WebGL has no fixed-function pipeline: the developer supplies shader programs written in GLSL, a vertex shader that positions geometry and a fragment shader that computes pixel colors, which the GPU runs in parallel.[1][2] Browsers commonly translate WebGL calls onto whatever native graphics API the host platform provides, such as OpenGL, Direct3D, Metal or Vulkan, so the same WebGL content runs across desktop and mobile devices.[2]
Use in virtual and augmented reality
In immersive web sessions, the WebXR Device API hands the application an XRWebGLLayer built from a WebGL context. WebXR sets that layer as the session's base layer through updateRenderState(), and the application renders both eye views into the layer's WebGL framebuffer once per frame; for headset rendering the WebGL context must be marked XR-compatible with the device.[3] This makes WebGL the drawing layer beneath browser VR and AR, just as it was for the deprecated WebVR API.[3][4]
The transition from WebVR to WebXR did not change WebGL's role. WebVR, the first browser VR API, was never ratified as a web standard and was superseded in 2018 by the WebXR Device API, which covers both VR and AR; browsers then deprecated and removed WebVR, with Google announcing removal from Chrome around the Chrome 79 timeframe in 2019.[9] WebXR continues to use a WebGL (or, more recently, WebGPU) backend for rendering.[4]
Few web VR or AR developers call WebGL directly; they use engines and libraries that wrap it. Three.js drives WebXR through its WebGLRenderer: setting renderer.xr.enabled = true and supplying a render callback to WebGLRenderer.setAnimationLoop() lets an internal WebXRManager abstract the WebXR Device API, retrieve controllers and render each frame.[10] Babylon.js is a 3D engine built on WebGL (and now WebGPU) with built-in WebXR support, and A-Frame is a declarative HTML framework, originally from Mozilla, that renders WebXR scenes on top of Three.js.[4][11]
Relationship to WebGPU
WebGPU is the successor web graphics API that Khronos's "next generation WebGL" work grew into, now standardized through the W3C. It targets modern GPU programming models and adds capabilities WebGL lacks, including native compute shaders and lower CPU-to-GPU overhead.[8][4] For VR and AR these differences matter because a headset renders two camera views, typically at 90 frames per second on a mobile chip, which strains an API designed around a single render thread.[4] The VR.org analysis describes WebGL as a 2010-era API with limited compute-shader support and heavy JavaScript-to-GPU communication, and notes that WebGPU exposes features such as multi-view rendering useful for stereoscopic output.[4]
As of 2026, WebGPU does not replace WebGL outright; the two run side by side. The same source reports that WebGPU reached Baseline support, enabled by default, across Chrome, Edge, Firefox and Safari 26 in January 2026, and that engines bridge the two: Three.js release r171 (September 2025) lets developers swap WebGLRenderer for WebGPURenderer with a one-line change and falls back to WebGL 2 automatically, while Babylon.js has been WebGPU-first since version 5.0 in 2022.[4] WebGL therefore remains the widely deployed baseline and fallback renderer for web 3D and WebXR content.[4][2]
References
- ↑ 1.0 1.1 1.2 1.3 1.4 "WebGL: 2D and 3D graphics for the web". https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API.
- ↑ 2.0 2.1 2.2 2.3 2.4 "WebGL - Low-Level 3D Graphics API Based on OpenGL ES". https://www.khronos.org/webgl/.
- ↑ 3.0 3.1 3.2 "XRWebGLLayer". https://developer.mozilla.org/en-US/docs/Web/API/XRWebGLLayer.
- ↑ 4.0 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 "WebGPU Just Hit Baseline in Every Major Browser. Three.js Is Already Shipping It and WebXR Is the Real Winner". https://vr.org/articles/webgpu-baseline-2026-three-js-webxr-default.
- ↑ 5.0 5.1 "Vladimir Vukicevic". https://en.wikipedia.org/wiki/Vladimir_Vuki%C4%87evi%C4%87.
- ↑ "Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet". 2009-03. https://www.khronos.org/news/press/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet.
- ↑ 7.0 7.1 "Khronos Releases Final WebGL 1.0 Specification". 2011-03-03. https://www.khronos.org/news/press/khronos-releases-final-webgl-1.0-specification.
- ↑ 8.0 8.1 8.2 "WebGL 2.0 Specification Finalized and Shipping - Work on Next Generation WebGL Underway". 2017-02-27. https://www.khronos.org/news/permalink/webgl-2.0-specification-finalized-and-shipping.
- ↑ "Deprecations and removals in Chrome 77". 2019. https://developer.chrome.com/blog/chrome-77-deps-rems.
- ↑ "WebXRManager". https://threejs.org/docs/#api/en/renderers/webxr/WebXRManager.
- ↑ "Using WebXR With Babylon.js". 2020-10. https://www.smashingmagazine.com/2020/10/using-webxr-with-babylonjs/.