WebGL: Difference between revisions
m Reverted edits by 2409:4088:9108:5A98:249F:8701:603E:DF45 (talk) to last version by RekishiEJ |
→History: Off topic, and old information. |
||
(24 intermediate revisions by 18 users not shown) | |||
Line 9: | Line 9: | ||
| caption = Screenshot from a WebGL-based |
| caption = Screenshot from a WebGL-based |
||
application running in [[Google Chrome]] |
application running in [[Google Chrome]] |
||
| collapsible = |
| collapsible = |
||
| author = [[Mozilla Foundation]] |
| author = [[Mozilla Foundation]] |
||
| developer = [[Khronos Group|Khronos WebGL Working Group]] |
| developer = [[Khronos Group|Khronos WebGL Working Group]] |
||
Line 22: | Line 22: | ||
| platform = [[Cross-platform]] |
| platform = [[Cross-platform]] |
||
| size = |
| size = |
||
| language = English |
|||
| language count = <!-- DO NOT include this parameter unless you know what it does --> |
|||
| language footnote = |
|||
| genre = [[Application programming interface|API]] |
| genre = [[Application programming interface|API]] |
||
| license = |
| license = |
||
| alexa = |
|||
| website = {{URL|https://www.khronos.org/webgl/}} |
| website = {{URL|https://www.khronos.org/webgl/}} |
||
| standard = |
| standard = |
||
Line 34: | Line 30: | ||
{{HTML}} |
{{HTML}} |
||
'''WebGL''' ( |
'''WebGL''' (short for '''Web Graphics Library''') is a [[JavaScript]] [[Application programming interface|API]] for rendering interactive 2D and 3D graphics within any compatible [[web browser]] without the use of [[plug-in (computing)|plug-ins]].<ref name=":0">{{cite web |title=WebGL Fundamentals |url=http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ |publisher=HTML5 Rocks}}</ref> WebGL is fully integrated with other [[Web API|web standards]], allowing [[graphics processing unit|GPU]]-accelerated usage of physics, image processing, and effects in the [[HTML]] [[Canvas element|canvas]]. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.<ref>{{cite web|url=http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|title=WebGL: Up and Running|last=Parisi|first=Tony|date=2012-08-15|publisher=O'Reilly Media, Incorporated|access-date=2012-07-13|archive-url=https://archive.today/20130201234333/http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|archive-date=2013-02-01|url-status=dead}}</ref> |
||
WebGL programs consist of control code written in JavaScript and [[shader]] code |
WebGL programs consist of control code written in JavaScript, and [[shader]] code written in [[OpenGL Shading Language|OpenGL ES Shading Language]] (GLSL ES), a language similar to [[C (programming language)|C]] or [[C++]]. WebGL code is executed on a computer's GPU. |
||
On February 9, 2022 Khronos Group announced WebGL 2.0 support |
WebGL is designed and maintained by the [[Non-profit organization|non-profit]] [[Khronos Group]].<ref name="WebGLWebsite" /> On February 9, 2022, Khronos Group announced WebGL 2.0 support from all major browsers.<ref name=":3">{{Cite web|date=2022-02-09|title=WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers|url=https://www.khronos.org/blog/webgl-2-achieves-pervasive-support-from-all-major-web-browsers|access-date=2022-02-13|website=The Khronos Group|language=en}}</ref> |
||
== Design == |
== Design == |
||
WebGL 1.0 is based on [[OpenGL ES#OpenGL ES 2.0|OpenGL ES 2.0]] and provides an [[API]] for 3D graphics.<ref name=WebGLSpecification/> It uses the [[HTML5]] [[canvas element]] and is accessed using [[Document Object Model]] (DOM) interfaces. |
WebGL 1.0 is based on [[OpenGL ES#OpenGL ES 2.0|OpenGL ES 2.0]] and provides an [[API]] for 3D graphics.<ref name=WebGLSpecification/> It uses the [[HTML5]] [[canvas element]] and is accessed using [[Document Object Model]] (DOM) interfaces. |
||
WebGL 2.0 is based on [[OpenGL ES#OpenGL ES 3.0|OpenGL ES 3.0]] |
WebGL 2.0 is based on [[OpenGL ES#OpenGL ES 3.0|OpenGL ES 3.0]]. It guarantees the availability of many optional extensions of WebGL 1.0, and exposes new APIs.<ref name=WebGL2Specification/> [[Garbage collection (computer science)|Automatic memory management]] is provided implicitly by [[JavaScript]].<ref name="WebGLWebsite" /> |
||
Like OpenGL ES 2.0, WebGL |
Like OpenGL ES 2.0, WebGL lacks the [[fixed-function]] APIs introduced in OpenGL 1.0 and [[deprecation|deprecated]] in OpenGL 3.0. This functionality, if required, has to be implemented by the developer using shader code and JavaScript. |
||
Shaders in WebGL are |
Shaders in WebGL are written in GLSL and passed to the WebGL API as text strings. The WebGL implementation compiles these strings to GPU code. This code is executed for each vertex sent through the API and for each pixel [[rasterized]] to the screen. |
||
== History == |
== History == |
||
WebGL evolved out of the Canvas 3D experiments started by [[Vladimir Vukićević]] at [[Mozilla Foundation|Mozilla]]. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla<ref>{{cite web|url=http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/|archive-url=https://web.archive.org/web/20110717224855/http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/|archive-date=2011-07-17 |title=Canvas 3D: GL power, web-style |publisher=Blog.vlad1.com |access-date=2011-05-14}}</ref> and Opera<ref>{{cite web|url=http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension |title=Taking the canvas to another dimension |publisher=My.opera.com |date=2007-11-26 |access-date=2011-05-14|archive-url=https://web.archive.org/web/20071117170113/http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension|archive-date=2007-11-17}}</ref> had made their own separate implementations. |
WebGL evolved out of the Canvas 3D experiments started by [[Vladimir Vukićević]] at [[Mozilla Foundation|Mozilla]]. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla<ref>{{cite web|url=http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/|archive-url=https://web.archive.org/web/20110717224855/http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/|archive-date=2011-07-17 |title=Canvas 3D: GL power, web-style |publisher=Blog.vlad1.com |access-date=2011-05-14}}</ref> and Opera<ref>{{cite web|url=http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension |title=Taking the canvas to another dimension |publisher=My.opera.com |date=2007-11-26 |access-date=2011-05-14|archive-url=https://web.archive.org/web/20071117170113/http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension|archive-date=2007-11-17}}</ref> had made their own separate implementations. |
||
In early 2009, the [[non-profit organization|non-profit]] technology [[consortium]] [[Khronos Group]] started the WebGL Working Group, with initial participation from [[Apple Inc.|Apple]], [[Google]], Mozilla, [[Opera Software|Opera]], and others.<ref name=WebGLWebsite/><ref name=WebGLAnnouncement/> Version 1.0 of the WebGL specification was released March 2011.<ref name=WebGLFinal/> |
In early 2009, the [[non-profit organization|non-profit]] technology [[consortium]] [[Khronos Group]] started the WebGL Working Group, with initial participation from [[Apple Inc.|Apple]], [[Google]], Mozilla, [[Opera Software|Opera]], and others.<ref name=WebGLWebsite/><ref name=WebGLAnnouncement/> Version 1.0 of the WebGL specification was released March 2011.<ref name=WebGLFinal/> |
||
An early application of WebGL was [[Zygote Body]].<ref>{{cite web |url=http://bodybrowser.googlelabs.com |title=Google Body – Google Labs |publisher=Bodybrowser.googlelabs.com |access-date=2011-05-14 |archive-url=https://web.archive.org/web/20110513162725/http://bodybrowser.googlelabs.com/ |archive-date=2011-05-13 |url-status=dead }}</ref><ref>{{cite web|last=Bhanoo |first=Sindya N. |url=http://well.blogs.nytimes.com/2010/12/23/new-from-google-the-body-browser/ |title=New From Google: The Body Browser |publisher=Well.blogs.nytimes.com |date=2010-12-23 |access-date=2011-05-14}}</ref> 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.<ref>{{cite web|url=http://www.3dcadworld.com/autodesk-fusion-360-the-future-of-cad-part-1/ |title=AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1 |publisher=3dcadworld.com |access-date=2013-08-21}}</ref> |
|||
Development of the WebGL 2 specification started in 2013 |
Development of the WebGL 2 specification started in 2013 and finished in January 2017.<ref>{{cite web|url=http://www.khronos.org/registry/webgl/specs/latest/2.0/ |title=WebGL 2 Specification |publisher=khronos.org |date=2013-09-26 |access-date=2013-10-28}}</ref> The specification is based on OpenGL ES 3.0.<ref>{{cite web|url=https://www.khronos.org/registry/webgl/specs/latest/2.0/|title=WebGL 2.0 Specification}}</ref> |
||
First implementations are in Firefox 51, Chrome 56 and Opera 43.<ref>{{cite web|url=https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API|title=WebGL - Web APIs|publisher=[[MDN Web Docs|MDN]]}}</ref> |
First implementations are in Firefox 51, Chrome 56 and Opera 43.<ref>{{cite web|url=https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API|title=WebGL - Web APIs|publisher=[[MDN Web Docs|MDN]]}}</ref> |
||
Line 62: | Line 58: | ||
=== Almost Native Graphics Layer Engine === |
=== Almost Native Graphics Layer Engine === |
||
{{Main|ANGLE (software)}} |
{{Main|ANGLE (software)}} |
||
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.<ref |
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.<ref name=":0:chromium"/> ″[Google] ''Chrome uses ANGLE for all graphics rendering on Windows, including the accelerated Canvas2D implementation and the Native Client sandbox environment.″''<ref name=":0:chromium">{{cite web|year=2019|access-date=June 21, 2019|url=https://chromium.googlesource.com/angle/angle/+/master/README.md|title=ANGLE - Almost Native Graphics Layer Engine}}</ref> |
||
{{anchor|Support}} |
{{anchor|Support}} |
||
Line 68: | Line 64: | ||
== Software == |
== Software == |
||
WebGL is widely supported by modern browsers. However, its availability depends on other factors, too, like whether the GPU supports it. The official WebGL website offers a simple test page.<ref>{{cite web|url=http://get.webgl.org/|title=WebGL test page|work=webgl.org}}</ref> More detailed information (like what renderer the browser uses, and what extensions are available) can be found at third-party websites.<ref>{{cite web|url=http://webglreport.com/|title=WebGL Report|work=webglreport.com}}</ref><ref>{{cite web|url=http://www.browserleaks.com/webgl|title=WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks|work=browserleaks.com}}</ref> |
|||
=== Desktop browsers<ref name=":0" /> === |
=== Desktop browsers<ref name=":0" /> === |
||
* [[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.<ref>{{cite web |last=Mah |first=Paul |url=http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 |title=Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch |publisher=FierceCIO |date=February 8, 2011 |access-date=2012-03-20 |archive-date=2011-10-25 |archive-url=https://web.archive.org/web/20111025103023/http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 |url-status=dead }}</ref><ref>{{cite web|url=http://learningwebgl.com/blog/?p=3103|title=WebGL in Chrome Stable! - Learning WebGL|work=learningwebgl.com|access-date=2014-08-07|archive-url=https://web.archive.org/web/20150528155734/http://learningwebgl.com/blog/?p=3103|archive-date=2015-05-28|url-status=dead}}</ref> By default on Windows, Chrome uses the [[ANGLE (software)|ANGLE]] (Almost Native Graphics Layer Engine) renderer to translate OpenGL ES to [[Direct X]] 9.0c or 11.0, which have better driver support.<ref name="geek3d">{{cite web|url=http://www.geeks3d.com/20130611/webgl-how-to-enable-native-opengl-in-your-browser-windows/|title=(WebGL) How to Enable Native OpenGL in your Browser (Windows)|work=geeks3d.com}}</ref> |
* [[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.<ref>{{cite web |last=Mah |first=Paul |url=http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 |title=Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch |publisher=FierceCIO |date=February 8, 2011 |access-date=2012-03-20 |archive-date=2011-10-25 |archive-url=https://web.archive.org/web/20111025103023/http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 |url-status=dead }}</ref><ref>{{cite web|url=http://learningwebgl.com/blog/?p=3103|title=WebGL in Chrome Stable! - Learning WebGL|work=learningwebgl.com|access-date=2014-08-07|archive-url=https://web.archive.org/web/20150528155734/http://learningwebgl.com/blog/?p=3103|archive-date=2015-05-28|url-status=dead}}</ref> By default on Windows, Chrome uses the [[ANGLE (software)|ANGLE]] (Almost Native Graphics Layer Engine) renderer to translate OpenGL ES to [[Direct X]] 9.0c or 11.0, which have better driver support.<ref name="geek3d">{{cite web|url=http://www.geeks3d.com/20130611/webgl-how-to-enable-native-opengl-in-your-browser-windows/|title=(WebGL) How to Enable Native OpenGL in your Browser (Windows)|work=geeks3d.com}}</ref> However, on Linux and Mac OS X, the default renderer is OpenGL.<ref>{{cite web|url=https://blog.chromium.org/2010/03/introducing-angle-project.html|title=Chromium Blog: Introducing the ANGLE Project|work=Chromium Blog}}</ref> It is also possible to force OpenGL as the renderer on Windows.<ref name="geek3d"/> Since September 2013, Chrome also has a newer [[Direct3D]] 11 renderer, which requires a newer graphics card.<ref name="L5956">{{cite web|url=http://learningwebgl.com/blog/?p=5956|title=WebGL around the net, 17 Oct 2013 - Learning WebGL|work=learningwebgl.com|access-date=5 August 2014|archive-url=https://web.archive.org/web/20140808045751/http://learningwebgl.com/blog/?p=5956|archive-date=8 August 2014|url-status=dead}}</ref><ref>{{cite web|url=http://blog.tojicode.com/2013/09/at-last-chrome-d3d11-day-has-come.html|title=At last! Chrome D3D11 day has come!|work=tojicode.com}}</ref> Chrome 56+ supports WebGL 2.0. |
||
* [[Firefox]] – WebGL 1.0 has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0.<ref>{{cite web|url=http://www.mozilla.com/en-US/firefox/4.0/releasenotes/ |title=Mozilla Firefox 4 Release Notes |publisher=Mozilla.com |date=2011-03-22 |access-date=2012-03-20}}</ref> Since 2013 Firefox also uses [[DirectX]] on the Windows platform via [[ANGLE (software)|ANGLE]].<ref name="geek3d"/> Firefox 51+ supports WebGL 2.0. |
* [[Firefox]] – WebGL 1.0 has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0.<ref>{{cite web|url=http://www.mozilla.com/en-US/firefox/4.0/releasenotes/ |title=Mozilla Firefox 4 Release Notes |publisher=Mozilla.com |date=2011-03-22 |access-date=2012-03-20}}</ref> Since 2013 Firefox also uses [[DirectX]] on the Windows platform via [[ANGLE (software)|ANGLE]].<ref name="geek3d"/> Firefox 51+ supports WebGL 2.0. |
||
* [[Safari (web browser)|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.<ref>{{cite web |url=http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/ |title=New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more |publisher=Fairerplatform.com |date=2011-05-03 |access-date=2012-03-20 |archive-url=https://web.archive.org/web/20120319172926/http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/ |archive-date=2012-03-19 |url-status=dead }}</ref><ref>{{cite web |url=http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari |title=Enable WebGL in Safari |publisher=Ikriz.nl |date=2011-08-23 |access-date=2012-03-20 |archive-date=2012-03-04 |archive-url=https://web.archive.org/web/20120304215012/http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari |url-status=dead }}</ref><ref>{{cite web|url=http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation |title=Getting a WebGL Implementation |publisher=Khronos.org |date=2012-01-13 |access-date=2012-03-20}}</ref><ref>{{cite web|url=http://www.khronos.org/webgl/wiki/Implementations/WebKit |title=Implementations/WebKit |publisher=Khronos.org |date=2011-09-03 |access-date=2012-03-20}}</ref><ref>{{cite web |url=http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ |title=WebGL Now Available in WebKit Nightlies |publisher=Webkit.org |access-date=2012-03-20 |archive-url=https://web.archive.org/web/20120308195003/http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ |archive-date=2012-03-08 |url-status=dead }}</ref> Safari version 12 (available in MacOS Mojave) has available support for WebGL 2.0 |
* [[Safari (web browser)|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.<ref>{{cite web |url=http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/ |title=New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more |publisher=Fairerplatform.com |date=2011-05-03 |access-date=2012-03-20 |archive-url=https://web.archive.org/web/20120319172926/http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/ |archive-date=2012-03-19 |url-status=dead }}</ref><ref>{{cite web |url=http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari |title=Enable WebGL in Safari |publisher=Ikriz.nl |date=2011-08-23 |access-date=2012-03-20 |archive-date=2012-03-04 |archive-url=https://web.archive.org/web/20120304215012/http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari |url-status=dead }}</ref><ref>{{cite web|url=http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation |title=Getting a WebGL Implementation |publisher=Khronos.org |date=2012-01-13 |access-date=2012-03-20}}</ref><ref>{{cite web|url=http://www.khronos.org/webgl/wiki/Implementations/WebKit |title=Implementations/WebKit |publisher=Khronos.org |date=2011-09-03 |access-date=2012-03-20}}</ref><ref>{{cite web |url=http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ |title=WebGL Now Available in WebKit Nightlies |publisher=Webkit.org |access-date=2012-03-20 |archive-url=https://web.archive.org/web/20120308195003/http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ |archive-date=2012-03-08 |url-status=dead }}</ref> Safari version 12 (available in MacOS Mojave) has available support for WebGL 2.0 as an "Experimental" feature. Safari 15 enables WebGL 2.0 for all users.<ref>{{Cite web |last=modeless |date=2021-09-24 |title=Safari 15 is released. WebGL 2 is now supported in every major browser and platform! |url=http://www.reddit.com/r/webgl/comments/puplza/safari_15_is_released_webgl_2_is_now_supported_in/ |access-date=2023-10-18 |website=r/webgl}}</ref> |
||
* [[Opera (web browser)|Opera]] – WebGL 1.0 has been implemented in Opera 11 and 12, |
* [[Opera (web browser)|Opera]] – WebGL 1.0 has been implemented in Opera 11 and 12, but was disabled by default in 2014.<ref>{{cite web|url=http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2 |title=WebGL and Hardware Acceleration |publisher=My.opera.com |date=2011-02-28 |access-date=2012-03-20|archive-url=https://web.archive.org/web/20110303150523/http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2|archive-date=2011-03-03}}</ref><ref>{{cite web|url=http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha |title=Introducing Opera 12 alpha |publisher=My.opera.com |date=2011-10-13 |access-date=2012-03-20|archive-url=https://web.archive.org/web/20111015055222/http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha|archive-date=2011-10-15}}</ref> Opera 43+ supports WebGL 2.0. |
||
* [[Internet Explorer]] – WebGL 1.0 is partially supported in [[Internet Explorer 11]].<ref>{{cite web|url=http://msdn.microsoft.com/en-US/library/ie/bg182648%28v=vs.85%29|title=WebGL (Windows)|publisher=Microsoft|work=microsoft.com}}</ref><ref>{{cite web|url=http://msdn.microsoft.com/library/ie/bg182636.aspx|title=Internet Explorer 11 Preview guide for developers|publisher=Microsoft|date=2013-07-17|access-date=2013-07-24}}</ref><ref>{{cite web|url=http://msdn.microsoft.com/library/ie/bg182648.aspx|title=WebGL|publisher=Microsoft|date=2013-07-17|access-date=2013-07-24}}</ref><ref>{{cite web|url=https://www.engadget.com/2013/06/26/internet-explorer-11-to-support-webgl-and-mpeg-dash/ |title=Internet Explorer 11 to support WebGL and MPEG Dash |publisher=Engadget |date=2013-06-26 |access-date=2013-06-26}}</ref> |
* [[Internet Explorer]] – WebGL 1.0 is partially supported in [[Internet Explorer 11]].<ref>{{cite web|url=http://msdn.microsoft.com/en-US/library/ie/bg182648%28v=vs.85%29|title=WebGL (Windows)|publisher=Microsoft|work=microsoft.com}}</ref><ref>{{cite web|url=http://msdn.microsoft.com/library/ie/bg182636.aspx|title=Internet Explorer 11 Preview guide for developers|publisher=Microsoft|date=2013-07-17|access-date=2013-07-24}}</ref><ref>{{cite web|url=http://msdn.microsoft.com/library/ie/bg182648.aspx|title=WebGL|publisher=Microsoft|date=2013-07-17|access-date=2013-07-24}}</ref><ref>{{cite web|url=https://www.engadget.com/2013/06/26/internet-explorer-11-to-support-webgl-and-mpeg-dash/ |title=Internet Explorer 11 to support WebGL and MPEG Dash |publisher=Engadget |date=2013-06-26 |access-date=2013-06-26}}</ref> Internet Explorer initially failed most of the official WebGL conformance tests, but Microsoft later released several updates. The latest 0.94 WebGL engine currently passes ~97% of Khronos tests.<ref>{{cite web|url=https://connect.microsoft.com/IE/feedback/details/795172|title=IE11 fails more than half tests in official WebGL conformance test suite|publisher=Microsoft Connect}}</ref> WebGL support can also be manually added to earlier versions of Internet Explorer using third-party plugins such as IEWebGL.<ref>{{cite web|url=https://github.com/iewebgl/iewebgl |title=IEWebGL|publisher=Iewebgl |access-date=2014-08-14}}</ref> |
||
* [[Microsoft Edge]] – For Microsoft Edge Legacy, the initial stable release supports WebGL version 0.95 (context name: "experimental-webgl") with an open source GLSL to [[HLSL]] [[transpiler]].<ref>{{cite web|url=https://github.com/microsoftedge/webgl|title=GitHub - Microsoft Edge WebGL Implementation |publisher=Microsoft |date=2016-06-04 |access-date=2016-06-10}}</ref> Version 10240+ supports WebGL 1.0 as prefixed. Latest Chromium-based Edge supports WebGL 2.0. |
* [[Microsoft Edge]] – For Microsoft Edge Legacy, the initial stable release supports WebGL version 0.95 (context name: "experimental-webgl") with an open source GLSL to [[HLSL]] [[transpiler]].<ref>{{cite web|url=https://github.com/microsoftedge/webgl|title=GitHub - Microsoft Edge WebGL Implementation |publisher=Microsoft |date=2016-06-04 |access-date=2016-06-10}}</ref> Version 10240+ supports WebGL 1.0 as prefixed. Latest Chromium-based Edge supports WebGL 2.0. |
||
=== Mobile browsers === |
=== Mobile browsers === |
||
* Android Browser – WebGL 1.0 is supported on Android as of Chrome 25.<ref>{{cite web |title=WebGL: 2D and 3D graphics for the web - Web APIs - MDN |url=https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#browser_compatibility |access-date=2023-06-28}}</ref> WebGL 2.0 is supported on Android as of Chrome 114.<ref name="WebGL 2.0 - Can I use">{{cite web |title=WebGL 2.0 - Can I use... |url=https://caniuse.com/webgl2 |access-date=2023-06-28}}</ref> Chrome is used for the Android system webview as of Android 5.<ref name="WebGL 2.0 - Can I use"/> |
|||
* [[BlackBerry 10]] – WebGL 1.0 is available for BlackBerry devices since OS version 10.00<ref>{{cite web|last=McDonough|first=Larry|title=WebGL: 3D Gaming on the Web Arrives|url=http://devblog.blackberry.com/2013/04/webgl-3d-gaming/|work=BerryReview|access-date=2013-04-09|archive-date=2013-04-13|archive-url=https://web.archive.org/web/20130413092901/http://devblog.blackberry.com/2013/04/webgl-3d-gaming/|url-status=dead}}</ref> |
* [[BlackBerry 10]] – WebGL 1.0 is available for BlackBerry devices since OS version 10.00<ref>{{cite web|last=McDonough|first=Larry|title=WebGL: 3D Gaming on the Web Arrives|url=http://devblog.blackberry.com/2013/04/webgl-3d-gaming/|work=BerryReview|access-date=2013-04-09|archive-date=2013-04-13|archive-url=https://web.archive.org/web/20130413092901/http://devblog.blackberry.com/2013/04/webgl-3d-gaming/|url-status=dead}}</ref> |
||
* [[BlackBerry PlayBook]] – WebGL 1.0 is available via WebWorks and browser in PlayBook OS 2.00<ref>{{cite web|last=Halevy|first=Ronen|title=PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0|url=http://www.berryreview.com/2011/10/18/playbook-os-2-0-developer-beta-includes-webgl-flash-11-air-3-0/|work=BerryReview|access-date=2011-11-15}}</ref> |
* [[BlackBerry PlayBook]] – WebGL 1.0 is available via WebWorks and browser in PlayBook OS 2.00<ref>{{cite web|last=Halevy|first=Ronen|title=PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0|url=http://www.berryreview.com/2011/10/18/playbook-os-2-0-developer-beta-includes-webgl-flash-11-air-3-0/|work=BerryReview|access-date=2011-11-15}}</ref> |
||
⚫ | |||
* Android Browser – Basically unsupported<!-- New Webviews since Android 4.4 based on Chromium. That Chromium supports WebGL 1.0, not sure about the Webviews-->, but the [[Sony Ericsson Xperia]] range of Android smartphones have had WebGL capabilities following a firmware upgrade.<ref>{{cite web |url= http://blogs.sonyericsson.com/wp/2011/11/29/xperia-phones-first-to-support-webgl |archive-url= https://web.archive.org/web/20111203100604/http://blogs.sonyericsson.com/wp/2011/11/29/xperia-phones-first-to-support-webgl |archive-date= 2011-12-03 |title=Xperia™ phones first to support WebGL™ – Developer World |work=blogs.sonyericsson.com |date=2011-11-29 |access-date=2011-12-05 |publisher=The Sony Ericsson Developer Program}}</ref> 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 the Android browser in many phones (but is not a new standard Android Browser). |
|||
⚫ | |||
* [[Firefox for mobile]] – WebGL 1.0 is available for Android and MeeGo devices since Firefox 4.<ref>{{cite web |url=http://www.ichemlabs.com/1375 |title=WebGL on Mobile Devices |publisher=iChemLabs |date=2011-11-12 |access-date=2011-11-25 |archive-date=2013-01-27 |archive-url=https://web.archive.org/web/20130127155009/http://www.ichemlabs.com/1375 |url-status=dead }}</ref><ref name="mobilehtml5.org">{{cite web|url=http://mobilehtml5.org/|title=Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices|access-date=2015-09-16}}</ref> |
* [[Firefox for mobile]] – WebGL 1.0 is available for Android and MeeGo devices since Firefox 4.<ref>{{cite web |url=http://www.ichemlabs.com/1375 |title=WebGL on Mobile Devices |publisher=iChemLabs |date=2011-11-12 |access-date=2011-11-25 |archive-date=2013-01-27 |archive-url=https://web.archive.org/web/20130127155009/http://www.ichemlabs.com/1375 |url-status=dead }}</ref><ref name="mobilehtml5.org">{{cite web|url=http://mobilehtml5.org/|title=Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices|access-date=2015-09-16}}</ref> |
||
* [[Firefox OS]]<ref name="mobilehtml5.org"/> |
* [[Firefox OS]]<ref name="mobilehtml5.org" /> |
||
* [[Google Chrome]] – WebGL 1.0 is available for Android devices since Google Chrome 25 and enabled by default since version 30.<ref>{{cite web|last=Kersey|first=Jason|title=Chrome Beta for Android Update|url=http://googlechromereleases.blogspot.com/2013/08/chrome-beta-for-android-update_22.html|work=Chrome Releases Blog|access-date=2013-08-23}}</ref> |
* [[Google Chrome]] – WebGL 1.0 is available for Android devices since Google Chrome 25 and enabled by default since version 30.<ref>{{cite web|last=Kersey|first=Jason|title=Chrome Beta for Android Update|url=http://googlechromereleases.blogspot.com/2013/08/chrome-beta-for-android-update_22.html|work=Chrome Releases Blog|access-date=2013-08-23}}</ref> |
||
* [[Maemo]] – In [[Nokia N900]], WebGL 1.0 is available in the stock microB browser from the PR1.2 firmware update onwards.<ref>{{cite web|last=Voipio |first=Riku |url=http://suihkulokki.blogspot.com/2010/06/webgl-on-n900.html |title=WebGL on N900 |publisher=Suihkulokki.blogspot.com |date=2010-06-07 |access-date=2011-05-14}}</ref> |
* [[Maemo]] – In [[Nokia N900]], WebGL 1.0 is available in the stock microB browser from the PR1.2 firmware update onwards.<ref>{{cite web|last=Voipio |first=Riku |url=http://suihkulokki.blogspot.com/2010/06/webgl-on-n900.html |title=WebGL on N900 |publisher=Suihkulokki.blogspot.com |date=2010-06-07 |access-date=2011-05-14}}</ref> |
||
* [[MeeGo]] – WebGL 1.0 is unsupported in the stock browser "Web." However, it is available through [[Firefox]].<ref name="mobilehtml5.org"/> |
* [[MeeGo]] – WebGL 1.0 is unsupported in the stock browser "Web." However, it is available through [[Firefox]].<ref name="mobilehtml5.org" /> |
||
* [[Microsoft Edge]] – Prefixed WebGL 1.0 is available on Windows 10 Mobile.<ref>{{cite web |url=https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/graphics/WebGL/ |
* [[Microsoft Edge]] – Prefixed WebGL 1.0 is available on Windows 10 Mobile.<ref>{{cite web |url=https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/graphics/WebGL/ |
||
|title=Dev guide: WebGL – Microsoft Edge Development |access-date=2016-06-10 |publisher=Microsoft}}</ref> |
|title=Dev guide: WebGL – Microsoft Edge Development |access-date=2016-06-10 |publisher=Microsoft}}</ref> |
||
* [[Opera Mobile]] – Opera Mobile 12 supports WebGL 1.0 (on Android only).<ref>{{cite web|title=Opera Mobile 12|url=http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12|publisher=Opera Software|access-date=27 February 2012|archive-url=https://web.archive.org/web/20120301005014/http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12|archive-date=1 March 2012}}</ref> |
* [[Opera Mobile]] – Opera Mobile 12 supports WebGL 1.0 (on Android only).<ref>{{cite web|title=Opera Mobile 12|url=http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12|publisher=Opera Software|access-date=27 February 2012|archive-url=https://web.archive.org/web/20120301005014/http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12|archive-date=1 March 2012}}</ref> |
||
⚫ | * [[Safari (web browser)|Safari]] on [[iOS]] – WebGL 1.0 is available for mobile Safari in [[iOS 8]].<ref>{{cite web |last=Cunningham |first=Andrew |date=2014-09-17 |title=iOS 8, Thoroughly Reviewed |url=https://arstechnica.com/apple/2014/09/ios-8-thoroughly-reviewed/7/ |access-date=2014-09-19 |publisher=Ars Technica}}</ref> WebGL 2.0 is available for mobile Safari in iOS 15.<ref name="WebGL 2.0 - Can I use"/> |
||
* [[Sailfish OS]] – WebGL 1.0 is supported in the default Sailfish browser.<ref>{{cite web|url=https://html5test.com/compare/browser/sailfish.html|title=HTML5test – How well does your browser support HTML5?|access-date=2015-09-16}}</ref> |
* [[Sailfish OS]] – WebGL 1.0 is supported in the default Sailfish browser.<ref>{{cite web|url=https://html5test.com/compare/browser/sailfish.html|title=HTML5test – How well does your browser support HTML5?|access-date=2015-09-16}}</ref> |
||
* [[Tizen]] – WebGL 1.0 is supported<ref>{{cite web|url=https://html5test.com/compare/browser/tizen-2.3.html|title=HTML5test – How well does your browser support HTML5?|access-date=2015-09-16}}</ref> |
* [[Tizen]] – WebGL 1.0 is supported<ref>{{cite web|url=https://html5test.com/compare/browser/tizen-2.3.html|title=HTML5test – How well does your browser support HTML5?|access-date=2015-09-16}}</ref> |
||
⚫ | |||
== Tools and ecosystem == |
== Tools and ecosystem == |
||
=== Utilities === |
=== Utilities === |
||
The low-level nature of the WebGL API, which provides little on its own to |
The low-level nature of the WebGL API, which provides little on its own to quickly create desirable 3D graphics, motivated the creation of higher-level libraries that [[Abstraction (computer science)|abstract]] common operations (e.g. loading [[scene graph]]s and 3D objects in certain formats; applying [[matrix transformation|linear transformations]] to [[shader]]s or [[view frustum]]s). Some such libraries were [[Porting|ported]] to JavaScript from other languages. Examples of libraries that provide high-level features include [[A-Frame (VR)]], [http://www.babylonjs.com/ BabylonJS], [[PlayCanvas]], [[three.js]], [[OSG.JS]], [[Google]]’s model-viewer and [[CopperLicht]]. Web3D also made a project called X3DOM to make [[X3D]] and [[VRML]] content run on WebGL. |
||
=== Games === |
=== Games === |
||
There |
There has been an emergence of 2D and 3D [[game engine]]s for WebGL,<ref name="Parisi2014">{{cite book |last=Parisi |first=Tony |title=Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages |url=https://books.google.com/books?id=UvrYAgAAQBAJ&pg=PA364-366 |date=13 February 2014 |publisher="O'Reilly Media, Inc." |isbn=978-1-4493-6395-6 |pages=364–366}}</ref> such as [[Unreal Engine]] 4 and [[Unity (game engine)|Unity]].<ref>{{cite web |url=http://www.anandtech.com/show/8354/tegra-k1-lands-in-acers-newest-chromebook |title=Tegra K1 Lands in Acer's Newest Chromebook |last=Barrett |first=Stephen |work=anandtech.com}}</ref> The [[Stage3D]]/Flash-based [[Away3D]] high-level library also has a port to WebGL via [[TypeScript]].<ref name="L5956"/><ref>{{cite web |url=http://away3d.com/comments/away3d_typescript_4.1_alpha |title=Blog > Away3D Typescript 4.1 Alpha > Away3D |work=away3d.com |access-date=2014-08-05 |archive-date=2014-08-08 |archive-url=https://web.archive.org/web/20140808063141/http://away3d.com/comments/away3d_typescript_4.1_alpha |url-status=dead}}</ref> A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js.<ref name="BoreskovShikin2013">{{cite book |last1=Boreskov |first1=Alexey |last2=Shikin |first2=Evgeniy |title=Computer Graphics: From Pixels to Programmable Graphics Hardware |url=https://books.google.com/books?id=VUPBAQAAQBAJ&pg=PA370 |year=2014 |publisher=CRC Press |isbn=978-1-4398-6730-3 |page=370}}</ref><ref name="Anyuru2012">{{cite book |last=Anyuru |first=Andreas |title=Professional WebGL Programming: Developing 3D Graphics for the Web |url=https://books.google.com/books?id=F75bsvlmqQsC&pg=PA140 |year=2012 |publisher=John Wiley & Sons |isbn=978-1-119-94059-3 |page=140}}</ref> It is sometimes used in conjunction with a WebGL specific extension called glUtils.js.<ref name="BoreskovShikin2013"/><ref name="FultonFulton2013">{{cite book |last1=Fulton |first1=Steve |last2=Fulton |first2=Jeff |title=HTML5 Canvas |url=https://books.google.com/books?id=zLUyKvtdCQwC&pg=PA624 |year=2013 |publisher="O'Reilly Media, Inc." |isbn=978-1-4493-3588-5 |page=624 |edition=2nd}}</ref> |
||
There are also some 2D libraries built |
There are also some 2D libraries built atop 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.<ref name="pot">{{cite web|url=http://typedarray.org/the-webgl-potential/|title=The WebGL potential - TypedArray.org|work=typedarray.org}}</ref> Removing the rendering bottleneck by giving almost direct access to the GPU has exposed performance limitations in the JavaScript implementations. Some were addressed by [[asm.js]] and [[WebAssembly]] (similarly, the introduction of Stage3D exposed performance problems within [[ActionScript]], which were addressed by projects like [[CrossBridge]]).<ref name="pot" /> |
||
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]] (similarly, the introduction of Stage3D exposed performance problems within [[ActionScript]], which were addressed by projects like [[CrossBridge]]).<ref name="pot"/> |
|||
=== Content creation === |
=== Content creation === |
||
As with any other graphics API, creating content for WebGL scenes requires using a [[3D computer graphics software|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 (software)|Blender]], [[Autodesk Maya]] or [[SimLab Composer]] can be used for this purpose. In particular, [[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.<ref name="blend4web_about">{{cite web|url=https://www.blend4web.com/en/about/ | title=Blend4Web Official Site - About |publisher=Blend4Web.com |access-date=2015-06-22}}</ref> 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 |
=== Environment-based tools === |
||
Starting from [[Firefox]] Version 27, [[Mozilla]] has given [[Firefox]] built-in WebGL tools that allow the editing of vertices and fragment shaders.<ref>{{cite web|url=https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/|title=Live editing WebGL shaders with Firefox Developer Tools|work=Mozilla Hacks – the Web developer blog}}</ref> A number of other debugging and [[Profiling (computer programming)|profiling]] tools have also emerged.<ref>{{cite web|url=http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/|title=Real-Time Rendering · WebGL Debugging and Profiling Tools|work=realtimerendering.com}}</ref> |
|||
== See also == |
== See also == |
||
* [[List of WebGL frameworks]] |
* [[List of WebGL frameworks]] |
||
* [[Experience Curiosity]] – WebGL simulation of the Mars rover ''Curiosity'' |
* [[Experience Curiosity]] – WebGL simulation of the Mars rover ''Curiosity'' |
||
* [[glTF]] – originally known as WebGL Transmissions Format or WebGL TF |
|||
* [[ |
* [[WebXR]] |
||
* [[Java OpenGL]] – OpenGL library for the Java programming language |
* [[Java OpenGL]] – OpenGL library for the Java programming language |
||
* [[WebGPU]] |
* [[WebGPU]] |
Revision as of 23:09, 7 May 2024
Original author(s) | Mozilla Foundation |
---|---|
Developer(s) | Khronos WebGL Working Group |
Initial release | March 3, 2011[1] |
Stable release | 2.0
/ January 17, 2017 |
Platform | Cross-platform |
Type | API |
Website | www |
HTML |
---|
Comparisons |
WebGL (short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.[2] WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.[3]
WebGL programs consist of control code written in JavaScript, and shader code written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++. WebGL code is executed on a computer's GPU.
WebGL is designed and maintained by the non-profit Khronos Group.[4] On February 9, 2022, Khronos Group announced WebGL 2.0 support from all major browsers.[5]
Design
WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics.[6] 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. It guarantees the availability of many optional extensions of WebGL 1.0, and exposes new APIs.[7] Automatic memory management is provided implicitly by JavaScript.[4]
Like OpenGL ES 2.0, WebGL lacks the fixed-function APIs introduced in OpenGL 1.0 and deprecated in OpenGL 3.0. This functionality, if required, has to be implemented by the developer using shader code and JavaScript.
Shaders in WebGL are written in GLSL and passed to the WebGL API as text strings. The WebGL implementation compiles these strings 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[8] and Opera[9] 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.[4][10] Version 1.0 of the WebGL specification was released March 2011.[1]
An early application of WebGL was Zygote Body.[11][12] 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.[13]
Development of the WebGL 2 specification started in 2013 and finished in January 2017.[14] The specification is based on OpenGL ES 3.0.[15] First implementations are in Firefox 51, Chrome 56 and Opera 43.[16]
Implementations
Almost Native Graphics Layer Engine
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.[17] ″[Google] Chrome uses ANGLE for all graphics rendering on Windows, including the accelerated Canvas2D implementation and the Native Client sandbox environment.″[17]
Software
WebGL is widely supported by modern browsers. However, its availability depends on other factors, too, like whether the GPU supports it. The official WebGL website offers a simple test page.[18] More detailed information (like what renderer the browser uses, and what extensions are available) can be found at third-party websites.[19][20]
Desktop browsers[2]
- 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.[21][22] 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.[23] However, on Linux and Mac OS X, the default renderer is OpenGL.[24] It is also possible to force OpenGL as the renderer on Windows.[23] Since September 2013, Chrome also has a newer Direct3D 11 renderer, which requires a newer graphics card.[25][26] Chrome 56+ supports WebGL 2.0.
- Firefox – WebGL 1.0 has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0.[27] Since 2013 Firefox also uses DirectX on the Windows platform via ANGLE.[23] 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.[28][29][30][31][32] Safari version 12 (available in MacOS Mojave) has available support for WebGL 2.0 as an "Experimental" feature. Safari 15 enables WebGL 2.0 for all users.[33]
- Opera – WebGL 1.0 has been implemented in Opera 11 and 12, but was disabled by default in 2014.[34][35] Opera 43+ supports WebGL 2.0.
- Internet Explorer – WebGL 1.0 is partially supported in Internet Explorer 11.[36][37][38][39] Internet Explorer initially failed most of the official WebGL conformance tests, but Microsoft later released several updates. The latest 0.94 WebGL engine currently passes ~97% of Khronos tests.[40] WebGL support can also be manually added to earlier versions of Internet Explorer using third-party plugins such as IEWebGL.[41]
- Microsoft Edge – For Microsoft Edge Legacy, the initial stable release supports WebGL version 0.95 (context name: "experimental-webgl") with an open source GLSL to HLSL transpiler.[42] Version 10240+ supports WebGL 1.0 as prefixed. Latest Chromium-based Edge supports WebGL 2.0.
Mobile browsers
- Android Browser – WebGL 1.0 is supported on Android as of Chrome 25.[43] WebGL 2.0 is supported on Android as of Chrome 114.[44] Chrome is used for the Android system webview as of Android 5.[44]
- BlackBerry 10 – WebGL 1.0 is available for BlackBerry devices since OS version 10.00[45]
- BlackBerry PlayBook – WebGL 1.0 is available via WebWorks and browser in PlayBook OS 2.00[46]
- 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.[47][48]
- Firefox OS[48]
- Google Chrome – WebGL 1.0 is available for Android devices since Google Chrome 25 and enabled by default since version 30.[49]
- Maemo – In Nokia N900, WebGL 1.0 is available in the stock microB browser from the PR1.2 firmware update onwards.[50]
- MeeGo – WebGL 1.0 is unsupported in the stock browser "Web." However, it is available through Firefox.[48]
- Microsoft Edge – Prefixed WebGL 1.0 is available on Windows 10 Mobile.[51]
- Opera Mobile – Opera Mobile 12 supports WebGL 1.0 (on Android only).[52]
- Safari on iOS – WebGL 1.0 is available for mobile Safari in iOS 8.[53] WebGL 2.0 is available for mobile Safari in iOS 15.[44]
- Sailfish OS – WebGL 1.0 is supported in the default Sailfish browser.[54]
- Tizen – WebGL 1.0 is supported[55]
Tools and ecosystem
Utilities
The low-level nature of the WebGL API, which provides little on its own to quickly create desirable 3D graphics, motivated the creation of higher-level libraries that abstract common operations (e.g. loading scene graphs and 3D objects in certain formats; applying linear transformations to shaders or view frustums). Some such libraries were ported to JavaScript from other languages. Examples of libraries that provide high-level features include A-Frame (VR), BabylonJS, PlayCanvas, three.js, OSG.JS, Google’s model-viewer and CopperLicht. Web3D also made a project called X3DOM to make X3D and VRML content run on WebGL.
Games
There has been an emergence of 2D and 3D game engines for WebGL,[56] such as Unreal Engine 4 and Unity.[57] The Stage3D/Flash-based Away3D high-level library also has a port to WebGL via TypeScript.[25][58] A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js.[59][60] It is sometimes used in conjunction with a WebGL specific extension called glUtils.js.[59][61]
There are also some 2D libraries built atop 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.[62] Removing the rendering bottleneck by giving almost direct access to the GPU has exposed performance limitations in the JavaScript implementations. Some were addressed by asm.js and WebAssembly (similarly, the introduction of Stage3D exposed performance problems within ActionScript, which were addressed by projects like CrossBridge).[62]
Content creation
As with any other graphics API, creating content for WebGL scenes requires using a 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. In particular, 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.[63] 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 tools
Starting from Firefox Version 27, Mozilla has given Firefox built-in WebGL tools that allow the editing of vertices and fragment shaders.[64] A number of other debugging and profiling tools have also emerged.[65]
See also
- List of WebGL frameworks
- Experience Curiosity – WebGL simulation of the Mars rover Curiosity
- glTF – originally known as WebGL Transmissions Format or WebGL TF
- WebXR
- Java OpenGL – OpenGL library for the Java programming language
- WebGPU
References
- ^ a b "Khronos Releases Final WebGL 1.0 Specification". 3 March 2011. Retrieved 2015-05-18.
- ^ a b "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.
- ^ a b c "WebGL – OpenGL ES 2.0 for the Web". Khronos.org. Retrieved 2011-05-14.
- ^ "WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers". The Khronos Group. 2022-02-09. Retrieved 2022-02-13.
- ^ "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-19. 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.
- ^ a b "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. Archived from the original on 2011-10-25. Retrieved 2012-03-20.
- ^ "WebGL in Chrome Stable! - Learning WebGL". learningwebgl.com. Archived from the original on 2015-05-28. Retrieved 2014-08-07.
- ^ a b c "(WebGL) How to Enable Native OpenGL in your Browser (Windows)". geeks3d.com.
- ^ "Chromium Blog: Introducing the ANGLE Project". Chromium Blog.
- ^ a b "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. Archived from the original on 2012-03-04. 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.
- ^ modeless (2021-09-24). "Safari 15 is released. WebGL 2 is now supported in every major browser and platform!". r/webgl. Retrieved 2023-10-18.
- ^ "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.
- ^ "WebGL: 2D and 3D graphics for the web - Web APIs - MDN". Retrieved 2023-06-28.
- ^ a b c "WebGL 2.0 - Can I use..." Retrieved 2023-06-28.
- ^ McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview. Archived from the original on 2013-04-13. Retrieved 2013-04-09.
- ^ Halevy, Ronen. "PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0". BerryReview. Retrieved 2011-11-15.
- ^ "WebGL on Mobile Devices". iChemLabs. 2011-11-12. Archived from the original on 2013-01-27. Retrieved 2011-11-25.
- ^ a b c "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.
- ^ Cunningham, Andrew (2014-09-17). "iOS 8, Thoroughly Reviewed". Ars Technica. Retrieved 2014-09-19.
- ^ "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
- ^ "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
- ^ 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. Archived from the original on 2014-08-08. Retrieved 2014-08-05.
- ^ a b 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-94059-3.
- ^ Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2nd ed.). "O'Reilly Media, Inc.". p. 624. ISBN 978-1-4493-3588-5.
- ^ a b "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.
External links
- Official website
- WebGL Archived 2010-06-26 at the Wayback Machine at the Mozilla Developer Network