|Original author(s)||Mozilla Foundation|
|Developer(s)||Khronos WebGL Working Group|
|Initial release||March 3, 2011|
2.0 / January 17, 2017
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.
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.
Almost Native Graphics Layer EngineEdit
Almost Native Graphics Layer Engine (ANGLE) is an open source graphic engine which implements WebGL 1.0 (2.0 which closely conforms to ES 3.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. ″[Google] Chrome uses ANGLE for all graphics rendering on Windows, including the accelerated Canvas2D implementation and the Native Client sandbox environment.″
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 (like what renderer the browser uses, and what extensions are available) is provided at third-party websites.
- 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 (Almost Native Graphics Layer Engine) 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 (available in MacOS Mojave) 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 (context name: "experimental-webgl") 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.
- 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 (verified on Galaxy SII (4.1.2) and Galaxy Note 8.0 (4.2)). Supported in Google Chrome that replaced Android browser in many phones (but is not a new standard Android Browser).
- Internet Explorer – Prefixed WebGL 1.0 is available on Windows Phone 8.x (11+)
- 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 (on Android only).
- 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 ecosystemEdit
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.
Like for any other graphics API, creating content for WebGL scenes requires 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.
Environment based toolsEdit
Additionally, Mozilla Foundation, in its Firefox browser, has 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.
- "Khronos Releases Final WebGL 1.0 Specification". Retrieved 2015-05-18.
- Tavares, Gregg (2012-02-09). "WebGL Fundamentals". HTML5 Rocks.
- Parisi, Tony (2012-08-15). "WebGL: Up and Running". O'Reilly Media, Incorporated. Archived from the original on 2013-02-01. Retrieved 2012-07-13.
- "WebGL – OpenGL ES 2.0 for the Web". Khronos.org. Retrieved 2011-05-14.
- "WebGL Specification". Khronos.org. Retrieved 2011-05-14.
- "WebGL 2.0 Specification". Khronos.org. Retrieved 2017-02-27.
- "Canvas 3D: GL power, web-style". Blog.vlad1.com. Archived from the original on 2011-07-17. Retrieved 2011-05-14.
- "Taking the canvas to another dimension". My.opera.com. 2007-11-26. Archived from the original on 2007-11-17. Retrieved 2011-05-14.
- "Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet". Khronos.org. 2009-08-04. Archived from the original on 2012-04-12. Retrieved 2011-05-14.
- "Google Body – Google Labs". Bodybrowser.googlelabs.com. Archived from the original on 2011-05-13. Retrieved 2011-05-14.
- Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". Well.blogs.nytimes.com. Retrieved 2011-05-14.
- "AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1". 3dcadworld.com. Retrieved 2013-08-21.
- "WebGL 2 Specification". khronos.org. 2013-09-26. Retrieved 2013-10-28.
- "WebGL 2.0 Specification".
- "WebGL - Web APIs". MDN.
- "ANGLE - Almost Native Graphics Layer Engine". 2019. Retrieved June 21, 2019.
- "WebGL test page". webgl.org.
- "WebGL Report". webglreport.com.
- "WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks". browserleaks.com.
- Mah, Paul (February 8, 2011). "Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch". FierceCIO. Retrieved 2012-03-20.
- "WebGL in Chrome Stable! - Learning WebGL". learningwebgl.com. Archived from the original on 2015-05-28. Retrieved 2014-08-07.
- "(WebGL) How to Enable Native OpenGL in your Browser (Windows)". geeks3d.com.
- "Chromium Blog: Introducing the ANGLE Project". Chromium Blog.
- "WebGL around the net, 17 Oct 2013 - Learning WebGL". learningwebgl.com. Archived from the original on 8 August 2014. Retrieved 5 August 2014.
- "At last! Chrome D3D11 day has come!". tojicode.com.
- "Mozilla Firefox 4 Release Notes". Mozilla.com. 2011-03-22. Retrieved 2012-03-20.
- "New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more". Fairerplatform.com. 2011-05-03. Archived from the original on 2012-03-19. Retrieved 2012-03-20.
- "Enable WebGL in Safari". Ikriz.nl. 2011-08-23. Retrieved 2012-03-20.
- "Getting a WebGL Implementation". Khronos.org. 2012-01-13. Retrieved 2012-03-20.
- "Implementations/WebKit". Khronos.org. 2011-09-03. Retrieved 2012-03-20.
- "WebGL Now Available in WebKit Nightlies". Webkit.org. Archived from the original on 2012-03-08. Retrieved 2012-03-20.
- "WebGL and Hardware Acceleration". My.opera.com. 2011-02-28. Archived from the original on 2011-03-03. Retrieved 2012-03-20.
- "Introducing Opera 12 alpha". My.opera.com. 2011-10-13. Archived from the original on 2011-10-15. Retrieved 2012-03-20.
- "WebGL (Windows)". microsoft.com. Microsoft.
- "Internet Explorer 11 Preview guide for developers". Microsoft. 2013-07-17. Retrieved 2013-07-24.
- "WebGL". Microsoft. 2013-07-17. Retrieved 2013-07-24.
- "Internet Explorer 11 to support WebGL and MPEG Dash". Engadget. 2013-06-26. Retrieved 2013-06-26.
- "IE11 fails more than half tests in official WebGL conformance test suite". Microsoft Connect.
- "IEWebGL". Iewebgl. Retrieved 2014-08-14.
- "GitHub - Microsoft Edge WebGL Implementation". Microsoft. 2016-06-04. Retrieved 2016-06-10.
- "The status of WebGL 2.0 in Microsoft Edge is Under Considieration". Microsoft Edge Development.
- McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview. Retrieved 2013-04-09.
- Halevy, Ronen. "PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0". BerryReview. Retrieved 2011-11-15.
- "Xperia™ phones first to support WebGL™ – Developer World". blogs.sonyericsson.com. The Sony Ericsson Developer Program. 2011-11-29. Archived from the original on 2011-12-03. Retrieved 2011-12-05.
- "WebGL on Mobile Devices". iChemLabs. 2011-11-12. Retrieved 2011-11-25.
- "Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices". Retrieved 2015-09-16.
- Kersey, Jason. "Chrome Beta for Android Update". Chrome Releases Blog. Retrieved 2013-08-23.
- Voipio, Riku (2010-06-07). "WebGL on N900". Suihkulokki.blogspot.com. Retrieved 2011-05-14.
- "Dev guide: WebGL – Microsoft Edge Development". Microsoft. Retrieved 2016-06-10.
- "Opera Mobile 12". Opera Software. Archived from the original on 1 March 2012. Retrieved 27 February 2012.
- "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
- "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
- Cunningham, Andrew (2014-09-17). "iOS 8, Thoroughly Reviewed". Ars Technica. Retrieved 2014-09-19.
- Parisi, Tony (13 February 2014). Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages. "O'Reilly Media, Inc.". pp. 364–366. ISBN 978-1-4493-6395-6.
- Barrett, Stephen. "Tegra K1 Lands in Acer's Newest Chromebook". anandtech.com.
- "Blog > Away3D Typescript 4.1 Alpha > Away3D". away3d.com.
- Boreskov, Alexey; Shikin, Evgeniy (2014). Computer Graphics: From Pixels to Programmable Graphics Hardware. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
- Anyuru, Andreas (2012). Professional WebGL Programming: Developing 3D Graphics for the Web. John Wiley & Sons. p. 140. ISBN 978-1-119-94058-6.
- Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2nd ed.). "O'Reilly Media, Inc.". p. 624. ISBN 978-1-4493-3588-5.
- "The WebGL potential - TypedArray.org". typedarray.org.
- "Blend4Web Official Site - About". Blend4Web.com. Retrieved 2015-06-22.
- "Live editing WebGL shaders with Firefox Developer Tools". Mozilla Hacks – the Web developer blog.
- "Real-Time Rendering · WebGL Debugging and Profiling Tools". realtimerendering.com.
- Mwalongo, Finian; Krone, Michael; et al. (August 2014). "Visualization of molecular structures using state-of-the-art techniques in WebGL". Proceedings of the 19th International ACM Conference on 3D Web Technologies. International Conference on 3D Web Technology. Vancouver. pp. 133–141. doi:10.1145/2628588.2628597. ISBN 978-1-4503-3015-2. Retrieved 24 January 2017.