WebGL
WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, 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 ES Shading Language, a language similar to C or C++, and is executed on a computer's graphics processing unit.
WebGL is designed and maintained by the non-profit Khronos Group.
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 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 implicitly by JavaScript.
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, if so required, has to be implemented by the end-developer 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 textual strings. The WebGL implementation compiles these shader instructions to GPU code. This code is executed for each and every 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.
Implementations
Almost Native Graphics Layer Engine
Almost Native Graphics Layer Engine is an open source graphic engine which implements WebGL 1.0 and OpenGL ES 2.0 and 3.0 standards. It is a default backend for both Google Chrome and Mozilla Firefox on Windows platforms and works by translating WebGL and OpenGL calls to available platform-specific APIs. ANGLE currently provides access to OpenGL ES 2.0 and 3.0 to desktop OpenGL, OpenGL ES, Direct3D 9, and Direct3D 11 APIs. ″ Chrome uses ANGLE for all graphics rendering on Windows, including the accelerated Canvas2D implementation and the Native Client sandbox environment.″Software
WebGL is widely supported by 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 is provided at third-party websites.Desktop browsers
- Google Chrome – WebGL 1.0 has been enabled on all platforms that have a capable graphics card with updated drivers since version 9, released in February 2011. By default on Windows, Chrome uses the ANGLE renderer to translate OpenGL ES to Direct X 9.0c or 11.0, which have better driver support. On Linux and Mac OS X the default renderer is OpenGL however. It is also possible to force OpenGL as the renderer on Windows. Since September 2013, Chrome also has a newer Direct3D 11 renderer, which however requires a newer graphics card. Chrome 56+ supports WebGL 2.0.
- Mozilla Firefox – WebGL 1.0 has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0. Since 2013 Firefox also uses DirectX on the Windows platform via ANGLE. Firefox 51+ supports WebGL 2.0.
- Safari – Safari 6.0 and newer versions installed on OS X Mountain Lion, Mac OS X Lion and Safari 5.1 on Mac OS X Snow Leopard implemented support for WebGL 1.0, which was disabled by default before Safari 8.0. Safari version 12 has available support for WebGL 2.0, currently as an "Experimental" feature.
- Opera – WebGL 1.0 has been implemented in Opera 11 and 12, although was disabled by default in 2014. Opera 43+ supports WebGL 2.0.
- Internet Explorer – WebGL 1.0 is partially supported in Internet Explorer 11. It initially failed the majority of official WebGL conformance tests, but Microsoft later released several updates. The latest 0.94 WebGL engine currently passes ~97% of Khronos tests. WebGL support can also be manually added to earlier versions of Internet Explorer using third-party plugins such as IEWebGL.
- Microsoft Edge – The initial stable release supports WebGL version 0.95 with an open source GLSL to HLSL transpiler. Version 10240+ supports WebGL 1.0 as prefixed. WebGL 2.0 is planned with medium priority in future releases.
Mobile browsers
- BlackBerry 10 – WebGL 1.0 is available for BlackBerry devices since OS version 10.00
- BlackBerry PlayBook – WebGL 1.0 is available via WebWorks and browser in PlayBook OS 2.00
- Android Browser – Basically unsupported, but the Sony Ericsson Xperia range of Android smartphones have had WebGL capabilities following a firmware upgrade. Samsung smartphones also have WebGL enabled and Galaxy Note 8.0 ). Supported in Google Chrome that replaced Android browser in many phones.
- Internet Explorer – Prefixed WebGL 1.0 is available on Windows Phone 8.x
- Firefox for mobile – WebGL 1.0 is available for Android and MeeGo devices since Firefox 4.
- Firefox OS
- Google Chrome – WebGL 1.0 is available for Android devices since Google Chrome 25 and enabled by default since version 30.
- Maemo – In Nokia N900, WebGL 1.0 is available in the stock microB browser from the PR1.2 firmware update onwards.
- MeeGo – WebGL 1.0 is unsupported in the stock browser "Web." However, it is available through Firefox.
- Microsoft Edge – Prefixed WebGL 1.0 is available on Windows 10 Mobile.
- Opera Mobile – Opera Mobile 12 supports WebGL 1.0.
- Sailfish OS – WebGL 1.0 is supported in the default Sailfish browser.
- Tizen – WebGL 1.0 is supported
- iOS – WebGL 1.0 is available for mobile Safari, in iOS 8.
Tools and ecosystem
Utilities
The low-level nature of the WebGL API, which provides little on its own to produce desirable 3D graphics quickly, contributed to creation of libraries which are typically used to build things up in 3D graphics. Basic tasks such as loading scene graphs and 3D objects in the popular industry formats is also abstracted by the libraries to provide additional functionality. A non-exhaustive list of libraries that provide many high-level features includes A-Frame, , PlayCanvas, three.js, OSG.JS and CopperLicht. X3D also made a project called X3DOM to make X3D and VRML content running on WebGL. The 3D model will in XML tag
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.Game engines
There also has been a rapid emergence of game engines for WebGL, both 2D and 3D, including Unreal Engine 4 and Unity. 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 and WebAssembly