WebGL explained

WebGL
WebGL
Logo Size:x64px
Author:Mozilla Foundation
Developer:Khronos WebGL Working Group
Latest Release Version:2.0
Platform:Cross-platform
Genre:API

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.[1] 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.[2]

WebGL programs consist of control code written in JavaScript, and shader code written in OpenGL ES Shading Language (GLSL ES, sometimes referred to as ESSL), 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. On February 9, 2022, Khronos Group announced WebGL 2.0 support from all major browsers.[3]

Design

WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics. It uses the HTML5 canvas element and is accessed using Document Object Model (DOM) interfaces.

WebGL 2.0 is based on OpenGL ES 3.0. It guarantees the 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 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[4] and Opera[5] 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.

An early application of WebGL was Zygote Body.[6] [7] 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.[8]

Development of the WebGL 2 specification started in 2013 and finished in January 2017.[9] The specification is based on OpenGL ES 3.0.[10] First implementations are in Firefox 51, Chrome 56 and Opera 43.[11]

Implementations

Almost Native Graphics Layer Engine

See 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) 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.″[12]

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.[13] More detailed information (like what renderer the browser uses, and what extensions are available) can be found at third-party websites.[14] [15]

Desktop browsers

Mobile browsers

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,[51] such as Unreal Engine 4 and Unity.[52] The Stage3D/Flash-based Away3D high-level library also has a port to WebGL via TypeScript.[20] [53] A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js.[54] [55] It is sometimes used in conjunction with a WebGL specific extension called glUtils.js.[54] [56]

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.[57] 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).

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.[58] 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.[59] A number of other debugging and profiling tools have also emerged.[60]

See also

External links

Notes and References

  1. Web site: WebGL Fundamentals . HTML5 Rocks.
  2. Web site: WebGL: Up and Running. Parisi. Tony. 2012-08-15. O'Reilly Media, Incorporated. 2012-07-13. 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. 2013-02-01. dead.
  3. Web site: 2022-02-09. WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers. 2022-02-13. The Khronos Group. en.
  4. Web site: Canvas 3D: GL power, web-style . https://web.archive.org/web/20110717224855/http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/. 2011-07-17 . Blog.vlad1.com . 2011-05-14.
  5. Web site: Taking the canvas to another dimension . My.opera.com . 2007-11-26 . 2011-05-14. https://web.archive.org/web/20071117170113/http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension. 2007-11-17.
  6. Web site: Google Body – Google Labs . Bodybrowser.googlelabs.com . 2011-05-14 . https://web.archive.org/web/20110513162725/http://bodybrowser.googlelabs.com/ . 2011-05-13 . dead .
  7. Web site: Bhanoo . Sindya N. . New From Google: The Body Browser . Well.blogs.nytimes.com . 2010-12-23 . 2011-05-14.
  8. Web site: AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1 . 3dcadworld.com . 2013-08-21.
  9. Web site: WebGL 2 Specification . khronos.org . 2013-09-26 . 2013-10-28.
  10. Web site: WebGL 2.0 Specification.
  11. Web site: WebGL - Web APIs. MDN.
  12. Web site: 2019. June 21, 2019. ANGLE - Almost Native Graphics Layer Engine.
  13. Web site: WebGL test page. webgl.org.
  14. Web site: WebGL Report. webglreport.com.
  15. Web site: WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks. browserleaks.com.
  16. Web site: Mah . Paul . Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch . FierceCIO . February 8, 2011 . 2012-03-20 . 2011-10-25 . https://web.archive.org/web/20111025103023/http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 . dead .
  17. Web site: WebGL in Chrome Stable! - Learning WebGL. learningwebgl.com. 2014-08-07. https://web.archive.org/web/20150528155734/http://learningwebgl.com/blog/?p=3103. 2015-05-28. dead.
  18. Web site: (WebGL) How to Enable Native OpenGL in your Browser (Windows). geeks3d.com.
  19. Web site: Chromium Blog: Introducing the ANGLE Project. Chromium Blog.
  20. Web site: WebGL around the net, 17 Oct 2013 - Learning WebGL. learningwebgl.com. 5 August 2014. https://web.archive.org/web/20140808045751/http://learningwebgl.com/blog/?p=5956. 8 August 2014. dead.
  21. Web site: At last! Chrome D3D11 day has come!. tojicode.com.
  22. Web site: Mozilla Firefox 4 Release Notes . Mozilla.com . 2011-03-22 . 2012-03-20.
  23. Web site: New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more . Fairerplatform.com . 2011-05-03 . 2012-03-20 . 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/ . 2012-03-19 . dead .
  24. Web site: Enable WebGL in Safari . Ikriz.nl . 2011-08-23 . 2012-03-20 . 2012-03-04 . https://web.archive.org/web/20120304215012/http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari . dead .
  25. Web site: Getting a WebGL Implementation . Khronos.org . 2012-01-13 . 2012-03-20.
  26. Web site: Implementations/WebKit . Khronos.org . 2011-09-03 . 2012-03-20.
  27. Web site: WebGL Now Available in WebKit Nightlies . Webkit.org . 2012-03-20 . https://web.archive.org/web/20120308195003/http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ . 2012-03-08 . dead .
  28. Web site: modeless . 2021-09-24 . Safari 15 is released. WebGL 2 is now supported in every major browser and platform! . 2023-10-18 . r/webgl.
  29. Web site: WebGL and Hardware Acceleration . My.opera.com . 2011-02-28 . 2012-03-20. https://web.archive.org/web/20110303150523/http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2. 2011-03-03.
  30. Web site: Introducing Opera 12 alpha . My.opera.com . 2011-10-13 . 2012-03-20. https://web.archive.org/web/20111015055222/http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha. 2011-10-15.
  31. Web site: WebGL (Windows). Microsoft. microsoft.com.
  32. Web site: Internet Explorer 11 Preview guide for developers. Microsoft. 2013-07-17. 2013-07-24.
  33. Web site: WebGL. Microsoft. 2013-07-17. 2013-07-24.
  34. Web site: Internet Explorer 11 to support WebGL and MPEG Dash . Engadget . 2013-06-26 . 2013-06-26.
  35. Web site: IE11 fails more than half tests in official WebGL conformance test suite. Microsoft Connect.
  36. Web site: IEWebGL. Iewebgl . 2014-08-14.
  37. Web site: GitHub - Microsoft Edge WebGL Implementation . Microsoft . 2016-06-04 . 2016-06-10.
  38. Web site: WebGL: 2D and 3D graphics for the web - Web APIs - MDN . 2023-06-28.
  39. Web site: WebGL 2.0 - Can I use... . 2023-06-28.
  40. Web site: McDonough. Larry. WebGL: 3D Gaming on the Web Arrives. BerryReview. 2013-04-09. 2013-04-13. https://web.archive.org/web/20130413092901/http://devblog.blackberry.com/2013/04/webgl-3d-gaming/. dead.
  41. Web site: Halevy. Ronen. PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0. BerryReview. 2011-11-15.
  42. Web site: WebGL on Mobile Devices . iChemLabs . 2011-11-12 . 2011-11-25 . 2013-01-27 . https://web.archive.org/web/20130127155009/http://www.ichemlabs.com/1375 . dead .
  43. Web site: Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices. 2015-09-16.
  44. Web site: Kersey. Jason. Chrome Beta for Android Update. Chrome Releases Blog. 2013-08-23.
  45. Web site: Voipio . Riku . WebGL on N900 . Suihkulokki.blogspot.com . 2010-06-07 . 2011-05-14.
  46. Web site: Dev guide: WebGL – Microsoft Edge Development . 2016-06-10 . Microsoft.
  47. Web site: Opera Mobile 12. Opera Software. 27 February 2012. https://web.archive.org/web/20120301005014/http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12. 1 March 2012.
  48. Web site: Cunningham . Andrew . 2014-09-17 . iOS 8, Thoroughly Reviewed . 2014-09-19 . Ars Technica.
  49. Web site: HTML5test – How well does your browser support HTML5?. 2015-09-16.
  50. Web site: HTML5test – How well does your browser support HTML5?. 2015-09-16.
  51. Book: Parisi, Tony . Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages . 13 February 2014 . "O'Reilly Media, Inc." . 978-1-4493-6395-6 . 364–366.
  52. Web site: Tegra K1 Lands in Acer's Newest Chromebook . Barrett . Stephen . anandtech.com.
  53. Web site: Blog > Away3D Typescript 4.1 Alpha > Away3D . away3d.com . 2014-08-05 . 2014-08-08 . https://web.archive.org/web/20140808063141/http://away3d.com/comments/away3d_typescript_4.1_alpha . dead.
  54. Book: Boreskov . Alexey . Shikin . Evgeniy . Computer Graphics: From Pixels to Programmable Graphics Hardware . 2014 . CRC Press . 978-1-4398-6730-3 . 370.
  55. Book: Anyuru, Andreas . Professional WebGL Programming: Developing 3D Graphics for the Web . 2012 . John Wiley & Sons . 978-1-119-94059-3 . 140.
  56. Book: Fulton . Steve . Fulton . Jeff . HTML5 Canvas . 2013 . "O'Reilly Media, Inc." . 978-1-4493-3588-5 . 624 . 2nd.
  57. Web site: The WebGL potential - TypedArray.org. typedarray.org.
  58. Web site: Blend4Web Official Site - About . Blend4Web.com . 2015-06-22.
  59. Web site: Live editing WebGL shaders with Firefox Developer Tools. Mozilla Hacks – the Web developer blog.
  60. Web site: Real-Time Rendering · WebGL Debugging and Profiling Tools. realtimerendering.com.

This article is licensed under the GNU Free Documentation License. It uses material from the Wikipedia article "WebGL".

Except where otherwise indicated, Everything.Explained.Today is © Copyright 2009-2024, A B Cryer, All Rights Reserved. Cookie policy.