Original author(s) Available in English | Platform Cross-platform | |
 | ||
Developer(s) Khronos WebGL Working Group Initial release March 3, 2011 (2011-03-03) Stable release 2.0 / January 17, 2017 (2017-01-17) | ||
WebGL (Web Graphics Library) is a JavaScript API for rendering 3D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is written in OpenGL Shading Language (GLSL), a language similar to C or C++, and is executed on a computer's graphics processing unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group.
Contents
Design
WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics. It uses the HTML5 canvas element and is accessed using Document Object Model (DOM) interfaces.
WebGL 2.0 is based on OpenGL ES 3.0 and made guaranteed availability of many optional extensions of WebGL 1.0 and exposes new APIs.
Automatic memory management is provided as part of the JavaScript language.
Like OpenGL ES 2.0, WebGL does not have the fixed-function APIs introduced in OpenGL 1.0 and deprecated in OpenGL 3.0. This functionality can instead be provided by the user by providing shader code and configuring data bindings in JavaScript.
Shaders in WebGL are expressed directly in GLSL and passed to the WebGL API as text strings. The WebGL implementation compiles these shader instructions to GPU code. This code is executed for each vertex sent through the API and for each pixel rasterized to the screen.
History
WebGL evolved out of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla and Opera had made their own separate implementations.
In early 2009, the non-profit technology consortium Khronos Group started the WebGL Working Group, with initial participation from Apple, Google, Mozilla, Opera, and others. Version 1.0 of the WebGL specification was released March 2011. As of March 2012, the chair of the working group is Ken Russell.
Early applications of WebGL include Zygote Body. In November 2012 Autodesk announced that they ported most of their applications to the cloud running on local WebGL clients. These applications included Fusion 360 and AutoCAD 360.
Development of the WebGL 2 specification started in 2013 with final in January 2017. This specification is based on OpenGL ES 3.0. First implementations are in Firefox 51, Chrome 56 and Opera 43.
Support
WebGL is widely supported in modern browsers. However its availability is dependent on other factors like the GPU supporting it. The official WebGL website offers a simple test page. More detailed information (like what renderer the browser uses, and what extensions are available) is provided at third-party websites.
Desktop browsers
Mobile browsers
Content creation and ecosystem
The WebGL API may be too tedious to use directly without some utility libraries, which for example set up typical view transformation shaders (e.g. for view frustum). Loading scene graphs and 3D objects in the popular industry formats is also not directly provided for. JavaScript libraries have been built (or sometimes ported to WebGL) to provide the additional functionality. A non-exhaustive list of libraries that provide many high-level features includes A-Frame (VR), BabylonJS, PlayCanvas, three.js, OSG.JS and CopperLicht. There also has been a rapid emergence of game engines for WebGL, including Unreal Engine 4 and Unity 5. The Stage3D/Flash-based Away3D high-level library also has a port to WebGL via TypeScript. A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js. It is sometimes used in conjunction with a WebGL specific extension called glUtils.js.
There are also some 2D libraries built on top of WebGL like Cocos2d-x or Pixi.js, which were implemented this way for performance reasons, in a move that parallels what happened with the Starling Framework over Stage3D in the Flash world. The WebGL-based 2D libraries fall back to HTML5 canvas when WebGL is not available.
Removing the rendering bottleneck by giving almost direct access to the GPU also exposed performance limitations in the JavaScript implementations. Some were addressed by asm.js. (Similarly, the introduction of Stage3D exposed performance problems within ActionScript, which were addressed by projects like CrossBridge.)
Creating content for WebGL scenes often means using a regular 3D content creation tool and exporting the scene to a format that is readable by the viewer or helper library. Desktop 3D authoring software such as Blender, Autodesk Maya or SimLab Composer can be used for this purpose. Particularly, Blend4Web allows a WebGL scene to be authored entirely in Blender and exported to a browser with a single click, even as a standalone web page. There are also some WebGL-specific software such as CopperCube and the online WebGL-based editor Clara.io. Online platforms such as Sketchfab and Clara.io allow users to directly upload their 3D models and display them using a hosted WebGL viewer.
Additionally, Mozilla Firefox implemented built-in WebGL tools starting with version 27 that allow editing vertex and fragment shaders. A number of other debugging and profiling tools have also emerged.
X3D also made a project called X3DOM to make X3D and VRML content running on WebGL. The 3D model will in XML tag <X3D> in HTML5 and interactive script will use JavaScript and DOM. BS Content Studio and InstantReality X3D exporter can exported X3D in HTML and running by WebGL.