Jump to content

WebGL

From Wikipedia, the free encyclopedia
WebGL
Original author(s)Mozilla Foundation
Developer(s)Khronos WebGL Working Group
Initial releaseMarch 3, 2011;13 years ago(2011-03-03)[1]
Stable release
2.0 / January 17, 2017;7 years ago(2017-01-17)
PlatformCross-platform
TypeAPI
Websitewww.khronos.org/webgl/
HTML
Comparisons

WebGL(short forWeb Graphics Library) is aJavaScriptAPIfor rendering interactive 2D and 3D graphics within any compatibleweb browserwithout the use ofplug-ins.[2]WebGL is fully integrated with otherweb standards,allowingGPU-accelerated usage of physics, image processing, and effects in theHTMLcanvas.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, andshadercode written inOpenGL ES Shading Language(GLSL ES), a language similar toCorC++.WebGL code is executed on a computer's GPU.

WebGL is designed and maintained by thenon-profitKhronos Group.[4]On February 9, 2022, Khronos Group announced WebGL 2.0 support from all major browsers.[5]

Design[edit]

WebGL 1.0 is based onOpenGL ES 2.0and provides anAPIfor 3D graphics.[6]It uses theHTML5canvas elementand is accessed usingDocument Object Model(DOM) interfaces.

WebGL 2.0 is based onOpenGL ES 3.0.It guarantees the availability of many optional extensions of WebGL 1.0, and exposes new APIs.[7]Automatic memory managementis provided implicitly byJavaScript.[4]

Like OpenGL ES 2.0, WebGL lacks thefixed-functionAPIs introduced in OpenGL 1.0 anddeprecatedin 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 pixelrasterizedto the screen.

History[edit]

WebGL evolved out of the Canvas 3D experiments started byVladimir VukićevićatMozilla.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, thenon-profittechnologyconsortiumKhronos Groupstarted the WebGL Working Group, with initial participation fromApple,Google,Mozilla,Opera,and others.[4][10]Version 1.0 of the WebGL specification was released March 2011.[1]

An early application of WebGL wasZygote Body.[11][12]In November 2012Autodeskannounced 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[edit]

Almost Native Graphics Layer Engine[edit]

Main article: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) andOpenGL ES2.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,Direct3D9, 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[edit]

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][edit]

  • 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 theANGLE(Almost Native Graphics Layer Engine) renderer to translate OpenGL ES toDirect X9.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 newerDirect3D11 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 usesDirectXon the Windows platform viaANGLE.[23]Firefox 51+ supports WebGL 2.0.
  • Safari– Safari 6.0 and newer versions installed onOS X Mountain Lion,Mac OS X Lionand Safari 5.1 onMac OS X Snow Leopardimplemented 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 inInternet 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 toHLSLtranspiler.[42]Version 10240+ supports WebGL 1.0 as prefixed. Latest Chromium-based Edge supports WebGL 2.0.

Mobile browsers[edit]

  • 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 onWindows Phone8.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– InNokia 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 throughFirefox.[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]
  • SafarioniOS– WebGL 1.0 is available for mobile Safari iniOS 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[edit]

Utilities[edit]

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 thatabstractcommon operations (e.g. loadingscene graphsand 3D objects in certain formats; applyinglinear transformationstoshadersorview frustums). Some such libraries wereportedto JavaScript from other languages. Examples of libraries that provide high-level features includeA-Frame (VR),BabylonJS,PlayCanvas,three.js,OSG.JS,Google’s model-viewer andCopperLicht.Web3D also made a project called X3DOM to makeX3DandVRMLcontent run on WebGL.

Games[edit]

There has been an emergence of 2D and 3Dgame enginesfor WebGL,[56]such asUnreal Engine4 andUnity.[57]TheStage3D/Flash-basedAway3Dhigh-level library also has a port to WebGL viaTypeScript.[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, likeCocos2d-x orPixi.js,which were implemented this way for performance reasons in a move that parallels what happened with theStarling Frameworkover 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 byasm.jsandWebAssembly(similarly, the introduction of Stage3D exposed performance problems withinActionScript,which were addressed by projects likeCrossBridge).[62]

Content creation[edit]

As with any other graphics API, creating content for WebGL scenes requires using a3D content creation tooland exporting the scene to a format that is readable by the viewer or helper library. Desktop 3D authoring software such asBlender,Autodesk MayaorSimLab Composercan be used for this purpose. In particular,Blend4Weballows 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 asCopperCubeand the online WebGL-based editorClara.io.Online platforms such asSketchfaband Clara.io allow users to directly upload their 3D models and display them using a hosted WebGL viewer.

Environment-based tools[edit]

Starting fromFirefoxVersion 27,Mozillahas givenFirefoxbuilt-in WebGL tools that allow the editing of vertices and fragment shaders.[64]A number of other debugging andprofilingtools have also emerged.[65]

See also[edit]

References[edit]

  1. ^ab"Khronos Releases Final WebGL 1.0 Specification".3 March 2011.Retrieved2015-05-18.
  2. ^ab"WebGL Fundamentals".HTML5 Rocks.
  3. ^Parisi, Tony (2012-08-15)."WebGL: Up and Running".O'Reilly Media, Incorporated. Archived fromthe originalon 2013-02-01.Retrieved2012-07-13.
  4. ^abc"WebGL – OpenGL ES 2.0 for the Web".Khronos.org.Retrieved2011-05-14.
  5. ^"WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers".The Khronos Group.2022-02-09.Retrieved2022-02-13.
  6. ^"WebGL Specification".Khronos.org.Retrieved2011-05-14.
  7. ^"WebGL 2.0 Specification".Khronos.org.Retrieved2017-02-27.
  8. ^"Canvas 3D: GL power, web-style".Blog.vlad1. Archived fromthe originalon 2011-07-17.Retrieved2011-05-14.
  9. ^"Taking the canvas to another dimension".My.opera. 2007-11-26. Archived fromthe originalon 2007-11-17.Retrieved2011-05-14.
  10. ^"Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet".Khronos.org. 2009-08-04. Archived fromthe originalon 2012-04-19.Retrieved2011-05-14.
  11. ^"Google Body – Google Labs".Bodybrowser.googlelabs. Archived fromthe originalon 2011-05-13.Retrieved2011-05-14.
  12. ^Bhanoo, Sindya N. (2010-12-23)."New From Google: The Body Browser".Well.blogs.nytimes.Retrieved2011-05-14.
  13. ^"AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1".3dcadworld.Retrieved2013-08-21.
  14. ^"WebGL 2 Specification".khronos.org. 2013-09-26.Retrieved2013-10-28.
  15. ^"WebGL 2.0 Specification".
  16. ^"WebGL - Web APIs".MDN.
  17. ^ab"ANGLE - Almost Native Graphics Layer Engine".2019.RetrievedJune 21,2019.
  18. ^"WebGL test page".webgl.org.
  19. ^"WebGL Report".webglreport.
  20. ^"WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks".browserleaks.
  21. ^Mah, Paul (February 8, 2011)."Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch".FierceCIO. Archived fromthe originalon 2011-10-25.Retrieved2012-03-20.
  22. ^"WebGL in Chrome Stable! - Learning WebGL".learningwebgl.Archived fromthe originalon 2015-05-28.Retrieved2014-08-07.
  23. ^abc"(WebGL) How to Enable Native OpenGL in your Browser (Windows)".geeks3d.
  24. ^"Chromium Blog: Introducing the ANGLE Project".Chromium Blog.
  25. ^ab"WebGL around the net, 17 Oct 2013 - Learning WebGL".learningwebgl.Archived fromthe originalon 8 August 2014.Retrieved5 August2014.
  26. ^"At last! Chrome D3D11 day has come!".tojicode.
  27. ^"Mozilla Firefox 4 Release Notes".Mozilla. 2011-03-22.Retrieved2012-03-20.
  28. ^"New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more".Fairerplatform. 2011-05-03. Archived fromthe originalon 2012-03-19.Retrieved2012-03-20.
  29. ^"Enable WebGL in Safari".Ikriz.nl. 2011-08-23. Archived fromthe originalon 2012-03-04.Retrieved2012-03-20.
  30. ^"Getting a WebGL Implementation".Khronos.org. 2012-01-13.Retrieved2012-03-20.
  31. ^"Implementations/WebKit".Khronos.org. 2011-09-03.Retrieved2012-03-20.
  32. ^"WebGL Now Available in WebKit Nightlies".Webkit.org. Archived fromthe originalon 2012-03-08.Retrieved2012-03-20.
  33. ^modeless (2021-09-24)."Safari 15 is released. WebGL 2 is now supported in every major browser and platform!".r/webgl.Retrieved2023-10-18.
  34. ^"WebGL and Hardware Acceleration".My.opera. 2011-02-28. Archived fromthe originalon 2011-03-03.Retrieved2012-03-20.
  35. ^"Introducing Opera 12 Alpha".My.opera. 2011-10-13. Archived fromthe originalon 2011-10-15.Retrieved2012-03-20.
  36. ^"WebGL (Windows)".microsoft.Microsoft.
  37. ^"Internet Explorer 11 Preview guide for developers".Microsoft. 2013-07-17.Retrieved2013-07-24.
  38. ^"WebGL".Microsoft. 2013-07-17.Retrieved2013-07-24.
  39. ^"Internet Explorer 11 to support WebGL and MPEG Dash".Engadget. 2013-06-26.Retrieved2013-06-26.
  40. ^"IE11 fails more than half tests in official WebGL conformance test suite".Microsoft Connect.
  41. ^"IEWebGL".Iewebgl.Retrieved2014-08-14.
  42. ^"GitHub - Microsoft Edge WebGL Implementation".Microsoft. 2016-06-04.Retrieved2016-06-10.
  43. ^"WebGL: 2D and 3D graphics for the web - Web APIs - MDN".Retrieved2023-06-28.
  44. ^abc"WebGL 2.0 - Can I use..."Retrieved2023-06-28.
  45. ^McDonough, Larry."WebGL: 3D Gaming on the Web Arrives".BerryReview.Archived fromthe originalon 2013-04-13.Retrieved2013-04-09.
  46. ^Halevy, Ronen."PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0".BerryReview.Retrieved2011-11-15.
  47. ^"WebGL on Mobile Devices".iChemLabs. 2011-11-12. Archived fromthe originalon 2013-01-27.Retrieved2011-11-25.
  48. ^abc"Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices".Retrieved2015-09-16.
  49. ^Kersey, Jason."Chrome Beta for Android Update".Chrome Releases Blog.Retrieved2013-08-23.
  50. ^Voipio, Riku (2010-06-07)."WebGL on N900".Suihkulokki.blogspot.Retrieved2011-05-14.
  51. ^"Dev guide: WebGL – Microsoft Edge Development".Microsoft.Retrieved2016-06-10.
  52. ^"Opera Mobile 12".Opera Software. Archived fromthe originalon 1 March 2012.Retrieved27 February2012.
  53. ^Cunningham, Andrew (2014-09-17)."iOS 8, Thoroughly Reviewed".Ars Technica.Retrieved2014-09-19.
  54. ^"HTML5test – How well does your browser support HTML5?".Retrieved2015-09-16.
  55. ^"HTML5test – How well does your browser support HTML5?".Retrieved2015-09-16.
  56. ^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.ISBN978-1-4493-6395-6.
  57. ^Barrett, Stephen."Tegra K1 Lands in Acer's Newest Chromebook".anandtech.
  58. ^"Blog > Away3D Typescript 4.1 Alpha > Away3D".away3d.Archived fromthe originalon 2014-08-08.Retrieved2014-08-05.
  59. ^abBoreskov, Alexey; Shikin, Evgeniy (2014).Computer Graphics: From Pixels to Programmable Graphics Hardware.CRC Press. p. 370.ISBN978-1-4398-6730-3.
  60. ^Anyuru, Andreas (2012).Professional WebGL Programming: Developing 3D Graphics for the Web.John Wiley & Sons. p. 140.ISBN978-1-119-94059-3.
  61. ^Fulton, Steve; Fulton, Jeff (2013).HTML5 Canvas(2nd ed.). "O'Reilly Media, Inc.". p. 624.ISBN978-1-4493-3588-5.
  62. ^ab"The WebGL potential - TypedArray.org".typedarray.org.
  63. ^"Blend4Web Official Site - About".Blend4Web.Retrieved2015-06-22.
  64. ^"Live editing WebGL shaders with Firefox Developer Tools".Mozilla Hacks – the Web developer blog.
  65. ^"Real-Time Rendering · WebGL Debugging and Profiling Tools".realtimerendering.

External links[edit]

Retrieved from "https://en.wikipedia.org/w/index.php?title=WebGL&oldid=1222792987"