WebGL

Design
Original author(s) Mozilla Foundation
Developer(s) Khronos WebGL Working Group
Initial release March 3, 2011 (2011-03-03)[1]
Stable release
1.0.2 / March 1, 2013 (2013-03-01)
Platform Cross-platform
Available in English
Type API
Website www.khronos.org/webgl/

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.[2] WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.[3] WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group.[4]

Design

WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics.[5] It uses the HTML5 canvas element and is accessed using Document Object Model interfaces. Automatic memory management is provided as part of the JavaScript language.[4]

Like OpenGL ES 2.0, WebGL does not have the fixed-function APIs introduced in OpenGL 1.0 and deprecated in OpenGL 3.0. This functionality can instead be provided by the user in the JavaScript code space.

Shaders in WebGL are expressed directly in GLSL.

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[6] and Opera[7] 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][8] Version 1.0 of the WebGL specification was released March 2011.[1] As of March 2012, the chair of the working group is Ken Russell.

Early applications of WebGL include Zygote Body.[9][10] 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.[11]

Development of the WebGL 2 specification started in 2013.[12] This specification is based on OpenGL ES 3.0.

Support

WebGL is widely supported in modern browsers. However its availability is dependent on other factors like the GPU supporting 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) is provided at third-party websites.[14][15]

Desktop browsers

Mobile browsers

Content creation and ecosystem

The WebGL API may be too tedious to use directly without some utility libraries, which for example set up typical view transformation shaders (e.g. for view frustum). Loading scene graphs and 3D objects in the popular industry formats is also not directly provided for. JavaScript libraries have been built (or sometimes ported to WebGL) to provide the additional functionality. A non-exhaustive list of libraries that provide many high-level features includes A-Frame (VR), BabylonJS, three.js, O3D, OSG.JS, CopperLicht and GLGE. There also has been a rapid emergence of game engines for WebGL,[49] including Unreal Engine 4 and Unity 5.[50] The Stage3D/Flash-based Away3D high-level library also has a port to WebGL via TypeScript.[20][51] A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js.[52][53] It is sometimes used in conjunction with a WebGL specific extension called glUtils.js.[52][54] Although not very common, some 3D libraries, like the one used by LAI4D, can work with HTML5 canvas when WebGL is not supported.[55]

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.[56]

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. (Similarly, the introduction of Stage3D exposed performance problems within ActionScript, which were addressed by projects like CrossBridge.)[56]

Creating content for WebGL scenes often means 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.[57] 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.

Additionally, Mozilla Firefox implemented built-in WebGL tools starting with version 27 that allow editing vertex and fragment shaders.[58] A number of other debugging and profiling tools have also emerged.[59]

X3D also made a project called X3DOM to make X3D and VRML content running on WebGL. The 3D model will in XML tag <X3D> in HTML5 and interactive script will use JavaScript and DOM. BS Content Studio and InstantReality X3D exporter can exported X3D in HTML and running by WebGL.


Notable uses

WebGL has not only been used in 3D web design and gaming, but also by some researchers for scientific purposes. For example, in a book named "Cellular Automata" the authors have used this technology to simulate Debris flow for the article "Visualization of molecular structures using state-of-the-art techniques in WebGL" tried to simulate molecules with it. More basic examples like simulation of the solar system have been made by many developers.

Experience Curiosity: taking a selfie

NASA developed an interactive web application called Experience Curiosity to celebrate the 3rd anniversary of the Curiosity rover landing on Mars.[60] This Blend4Web-based app[61] makes it possible to operate the rover, control its cameras and the robotic arm, and reproduces some of the prominent events of the Mars Science Laboratory mission.[62][63] The application was presented at the beginning of the WebGL section at SIGGRAPH 2015.[64]

Similar technologies for 3D in a browser

Java OpenGL is fairly similar layer to WebGL in the Java world, whereas Stage3D is the equivalent layer in Adobe Flash Player 11 and later. Google Native Client also supports OpenGL ES 2.0.[65]

See also

References

  1. 1 2 "Khronos Releases Final WebGL 1.0 Specification". Retrieved 2015-05-18.
  2. Gregg Tavares (2012-02-09). "WebGL Fundamentals". HTML5 Rocks.
  3. Tony Parisi (2012-08-15). "WebGL: Up and Running". O'Reilly Media, Incorporated.
  4. 1 2 3 "WebGL – OpenGL ES 2.0 for the Web". Khronos.org. Retrieved 2011-05-14.
  5. "WebGL Specification". Khronos.org. Retrieved 2011-05-14.
  6. "Canvas 3D: GL power, web-style". Blog.vlad1.com. Archived from the original on 2011-07-17. Retrieved 2011-05-14.
  7. "Taking the canvas to another dimension". My.opera.com. 2007-11-26. Archived from the original on 2007-11-17. Retrieved 2011-05-14.
  8. "Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet". Khronos.org. 2009-08-04. Retrieved 2011-05-14.
  9. "Google Body – Google Labs". Bodybrowser.googlelabs.com. Retrieved 2011-05-14.
  10. Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". Well.blogs.nytimes.com. Retrieved 2011-05-14.
  11. "AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1". 3dcadworld.com. Retrieved 2013-08-21.
  12. "WebGL 2 Specification". khronos.org. 2013-09-26. Retrieved 2013-10-28.
  13. "WebGL test page". webgl.org.
  14. "WebGL Report". webglreport.com.
  15. "WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks". browserleaks.com.
  16. Paul Mah (February 8, 2011). "Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch". FierceCIO. Retrieved 2012-03-20.
  17. "WebGL in Chrome Stable! - Learning WebGL". learningwebgl.com.
  18. 1 2 3 "(WebGL) How to Enable Native OpenGL in your Browser (Windows)". geeks3d.com.
  19. "Chromium Blog: Introducing the ANGLE Project". Chromium Blog.
  20. 1 2 "WebGL around the net, 17 Oct 2013 - Learning WebGL". learningwebgl.com.
  21. "At last! Chrome D3D11 day has come!". tojicode.com.
  22. "Mozilla Firefox 4 Release Notes". Mozilla.com. 2011-03-22. Retrieved 2012-03-20.
  23. "New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more". Fairerplatform.com. 2011-05-03. Retrieved 2012-03-20.
  24. "Enable WebGL in Safari". Ikriz.nl. 2011-08-23. Retrieved 2012-03-20.
  25. "Getting a WebGL Implementation". Khronos.org. 2012-01-13. Retrieved 2012-03-20.
  26. "Implementations/WebKit". Khronos.org. 2011-09-03. Retrieved 2012-03-20.
  27. "WebGL Now Available in WebKit Nightlies". Webkit.org. Retrieved 2012-03-20.
  28. "WebGL and Hardware Acceleration". My.opera.com. 2011-02-28. Archived from the original on 2011-03-03. Retrieved 2012-03-20.
  29. "Introducing Opera 12 alpha". My.opera.com. 2011-10-13. Archived from the original on 2011-10-15. Retrieved 2012-03-20.
  30. "WebGL (Windows)". microsoft.com. Microsoft.
  31. "Internet Explorer 11 Preview guide for developers". Microsoft. 2013-07-17. Retrieved 2013-07-24.
  32. "WebGL". Microsoft. 2013-07-17. Retrieved 2013-07-24.
  33. "Internet Explorer 11 to support WebGL and MPEG Dash". Engadget. 2013-06-26. Retrieved 2013-06-26.
  34. https://connect.microsoft.com/IE/feedback/details/795172 IE11 fails more than half tests in official WebGL conformance test suite
  35. "IEWebGL". Iewebgl. Retrieved 2014-08-14.
  36. "GitHub - Microsoft Edge WebGL Implementation". Microsoft. 2016-06-04. Retrieved 2016-06-10.
  37. McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview. Retrieved 2013-04-09.
  38. Halevy, Ronen. "PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0". BerryReview. Retrieved 2011-11-15.
  39. "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.
  40. iclkevin (2011-11-12). "WebGL on Mobile Devices". iChemLabs. Retrieved 2011-11-25.
  41. 1 2 3 "Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices". Retrieved 2015-09-16.
  42. Kersey, Jason. "Chrome Beta for Android Update". Chrome Releases Blog. Google. Retrieved 2013-08-23.
  43. suihkulokki (2010-06-07). "WebGL on N900". Suihkulokki.blogspot.com. Retrieved 2011-05-14.
  44. "Dev guide: WebGL – Microsoft Edge Development". Microsoft. Retrieved 2016-06-10.
  45. "Opera Mobile 12". Opera Software. Archived from the original on 1 March 2012. Retrieved 27 February 2012.
  46. "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
  47. "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
  48. Cunningham, Andrew (2014-09-17). "iOS 8, Thoroughly Reviewed". Ars Technica. Retrieved 2014-09-19.
  49. Tony Parisi (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.
  50. Stephen Barrett. "Tegra K1 Lands in Acer's Newest Chromebook". anandtech.com.
  51. "Blog > Away3D Typescript 4.1 Alpha > Away3D". away3d.com.
  52. 1 2 Alexey Boreskov; Evgeniy Shikin (2014). Computer Graphics: From Pixels to Programmable Graphics Hardware. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
  53. Andreas Anyuru (2012). Professional WebGL Programming: Developing 3D Graphics for the Web. John Wiley & Sons. p. 140. ISBN 978-1-119-94058-6.
  54. Steve Fulton; Jeff Fulton (2013). HTML5 Canvas (2nd ed.). "O'Reilly Media, Inc.". p. 624. ISBN 978-1-4493-3588-5.
  55. "LAI4D Reference manual". Laboratory of Artificial Intelligence for Design.
  56. 1 2 "The WebGL potential - TypedArray.org". typedarray.org.
  57. "Blend4Web Official Site - About". Blend4Web.com. Retrieved 2015-06-22.
  58. "Live editing WebGL shaders with Firefox Developer Tools". Mozilla Hacks – the Web developer blog.
  59. "Real-Time Rendering · WebGL Debugging and Profiling Tools". realtimerendering.com.
  60. "New Online Exploring Tools Bring NASA's Journey to Mars to New Generation". NASA. Retrieved 2015-08-07.
  61. "Experience Curiosity". NASA's Eyes. Retrieved 2015-08-07.
  62. "Prenez le controle de Curiosity avec Blend4Web". Greg G.d.Bénicourt. Retrieved 2015-09-16.
  63. "Internet 3D: Take the Curiosity Rover for a Spin Right on the NASA Website". Technology.Org. Retrieved 2015-08-12.
  64. "Khronos Events - 2015 SIGGRAPH". Khronos. Retrieved 2015-08-13.
  65. Remi Arnaud (2011). "3D in a Web Browser". In Eric Lengyel. Game Engine Gems 2. CRC Press. pp. 199–228. ISBN 978-1-56881-437-7.

External links

This article is issued from Wikipedia - version of the 12/2/2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.