WebGL

Last updated
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)
Platform Cross-platform
Type API
Website www.khronos.org/webgl/

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]

Contents

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

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, [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

Related Research Articles

<span class="mw-page-title-main">Firefox</span> Free and open-source web browser by Mozilla

Mozilla Firefox, or simply Firefox, is a free and open source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and anticipated web standards. Firefox is available for Windows 10 and later versions of Windows, macOS, and Linux. Its unofficial ports are available for various Unix and Unix-like operating systems, including FreeBSD, OpenBSD, NetBSD, and other platforms. It is also available for Android and iOS. However, as with all other iOS web browsers, the iOS version uses the WebKit layout engine instead of Gecko due to platform requirements. An optimized version is also available on the Amazon Fire TV as one of the two main browsers available with Amazon's Silk Browser.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

<span class="mw-page-title-main">Browser wars</span> Competition between web browsing applications for share of worldwide usage

A browser war is a competition for dominance in the usage share of web browsers. The "first browser war" (1995–2001) consisted of Internet Explorer and Netscape Navigator, and the "second browser war" (2004-2017) between Internet Explorer, Firefox, and Google Chrome.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

<span class="mw-page-title-main">OpenGL ES</span> Subset of the OpenGL API for embedded systems

OpenGL for Embedded Systems is a subset of the OpenGL computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics such as those used by video games, typically hardware-accelerated using a graphics processing unit (GPU). It is designed for embedded systems like smartphones, tablet computers, video game consoles and PDAs. OpenGL ES is the "most widely deployed 3D graphics API in history".

Netscape Plugin Application Programming Interface (NPAPI) is a deprecated application programming interface (API) for web browser plugins, initially developed for Netscape Navigator 2.0 in 1995 and subsequently adopted by other browsers.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

<span class="mw-page-title-main">Microsoft Silverlight</span> Application framework for writing and running rich Internet applications

Microsoft Silverlight is a discontinued application framework designed for writing and running rich internet applications, similar to Adobe's runtime, Adobe Flash. While early versions of Silverlight focused on streaming media, later versions supported multimedia, graphics, and animation, and gave support to developers for CLI languages and development tools. Silverlight was one of the two application development platforms for Windows Phone, but web pages using Silverlight did not run on the Windows Phone or Windows Mobile versions of Internet Explorer, as there was no Silverlight plugin for Internet Explorer on those platforms.

Web3D, also called 3D Web, is a group of technologies to display and navigate websites using 3D computer graphics.

<span class="mw-page-title-main">Skia Graphics Engine</span> Open source graphics library written in C++

The Skia Graphics Engine or Skia is an open-source 2D graphics library written in C++. Skia abstracts away platform-specific graphics APIs. Skia Inc. originally developed the library; Google acquired it in 2005, and then released the software as open source licensed under the New BSD free software license in 2008.

HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, it is designed to partially replace the object element and the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. As of 2020, HTML video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.

Web SQL Database is a deprecated web browser API specification for storing data in databases that can be queried using SQL variant. The technology was only ever implemented in Blink-based browsers like Google Chrome and the new Microsoft Edge, and WebKit-based browsers like Safari. As of February 2024, WebSQL is being phased out in favor of WebStorage and IndexedDB and OPFS, but still available in some contexts under restrictive conditions.

<span class="mw-page-title-main">Vladimir Vukićević</span>

Vladimir Vukićević, is a Serbian-born American software engineer who has worked on many open source projects. He is known mostly for his work on open-source graphics libraries, including those used in the Mozilla project, and for being the creator of WebGL.

HTML audio is a subject of the HTML specification, incorporating audio input, playback, and synthesis, as well as speech to text, all in the browser.

ANGLE is an open source, cross-platform graphics engine abstraction layer developed by Google. ANGLE translates OpenGL ES 2/3 calls to DirectX 9, 11, OpenGL or Vulkan API calls. It is a portable version of OpenGL but with limitations of OpenGL ES standard.

Encrypted Media Extensions (EME) is a W3C specification for providing a communication channel between web browsers and the Content Decryption Module (CDM) software which implements digital rights management (DRM). This allows the use of HTML video to play back DRM-wrapped content such as streaming video services without the use of heavy third-party media plugins like Adobe Flash or Microsoft Silverlight. The use of a third-party key management system may be required, depending on whether the publisher chooses to scramble the keys.

Media Source Extensions (MSE) is a W3C specification that allows JavaScript to send byte streams to media codecs within web browsers that support HTML video and audio. Among other possible uses, this allows the implementation of client-side prefetching and buffering code for streaming media entirely in JavaScript. It is compatible with, but should not be confused with, the Encrypted Media Extensions (EME) specification, and neither requires the use of the other, although many EME implementations are only capable of decrypting media data provided via MSE.

WebXR Device API is a Web application programming interface (API) that describes support for accessing augmented reality and virtual reality devices, such as the HTC Vive, Oculus Rift, Meta Quest, Google Cardboard, HoloLens, Apple Vision Pro, Magic Leap or Open Source Virtual Reality (OSVR), in a web browser. The WebXR Device API and related APIs are standards defined by W3C groups, the Immersive Web Community Group and Immersive Web Working Group. While the Community Group works on the proposals in the incubation period, the Working Group defines the final web specifications to be implemented by the browsers.

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of web app that can be installed on a device as a standalone application. PWAs are installed using the offline cache of the device's web browser.

<span class="mw-page-title-main">WebGPU</span> Web standard and API

WebGPU is a JavaScript API provided by a web browser that enables webpage scripts to efficiently utilize a device's graphics processing unit (GPU). This is achieved with the underlying Vulkan, Metal, or Direct3D 12 system APIs. On relevant devices, WebGPU is intended to supersede the older WebGL standard.

References

  1. 1 2 "Khronos Releases Final WebGL 1.0 Specification". 3 March 2011. Retrieved 2015-05-18.
  2. 1 2 "WebGL Fundamentals". HTML5 Rocks.
  3. ↑ 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.
  4. 1 2 3 "WebGL – OpenGL ES 2.0 for the Web". Khronos.org. Retrieved 2011-05-14.
  5. ↑ "WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers". The Khronos Group. 2022-02-09. Retrieved 2022-02-13.
  6. ↑ "WebGL Specification". Khronos.org. Retrieved 2011-05-14.
  7. ↑ "WebGL 2.0 Specification". Khronos.org. Retrieved 2017-02-27.
  8. ↑ "Canvas 3D: GL power, web-style". Blog.vlad1.com. Archived from the original on 2011-07-17. Retrieved 2011-05-14.
  9. ↑ "Taking the canvas to another dimension". My.opera.com. 2007-11-26. Archived from the original on 2007-11-17. Retrieved 2011-05-14.
  10. ↑ "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.
  11. ↑ "Google Body – Google Labs". Bodybrowser.googlelabs.com. Archived from the original on 2011-05-13. Retrieved 2011-05-14.
  12. ↑ Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". Well.blogs.nytimes.com. Retrieved 2011-05-14.
  13. ↑ "AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1". 3dcadworld.com. 29 November 2012. Retrieved 2013-08-21.
  14. ↑ "WebGL 2 Specification". khronos.org. 2013-09-26. Retrieved 2013-10-28.
  15. ↑ "WebGL 2.0 Specification".
  16. ↑ "WebGL - Web APIs". MDN. 28 September 2024.
  17. 1 2 "ANGLE - Almost Native Graphics Layer Engine". 2019. Retrieved June 21, 2019.
  18. ↑ "WebGL test page". webgl.org.
  19. ↑ "WebGL Report". webglreport.com.
  20. ↑ "WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks". browserleaks.com.
  21. ↑ 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.
  22. ↑ "WebGL in Chrome Stable! - Learning WebGL". learningwebgl.com. Archived from the original on 2015-05-28. Retrieved 2014-08-07.
  23. 1 2 3 "(WebGL) How to Enable Native OpenGL in your Browser (Windows)". geeks3d.com. 11 June 2013.
  24. ↑ "Chromium Blog: Introducing the ANGLE Project". Chromium Blog.
  25. 1 2 "WebGL around the net, 17 Oct 2013 - Learning WebGL". learningwebgl.com. Archived from the original on 8 August 2014. Retrieved 5 August 2014.
  26. ↑ "At last! Chrome D3D11 day has come!". tojicode.com.
  27. ↑ "Mozilla Firefox 4 Release Notes". Mozilla.com. 2011-03-22. Retrieved 2012-03-20.
  28. ↑ "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.
  29. ↑ "Enable WebGL in Safari". Ikriz.nl. 2011-08-23. Archived from the original on 2012-03-04. Retrieved 2012-03-20.
  30. ↑ "Getting a WebGL Implementation". Khronos.org. 2012-01-13. Retrieved 2012-03-20.
  31. ↑ "Implementations/WebKit". Khronos.org. 2011-09-03. Retrieved 2012-03-20.
  32. ↑ "WebGL Now Available in WebKit Nightlies". Webkit.org. Archived from the original on 2012-03-08. Retrieved 2012-03-20.
  33. ↑ 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.
  34. ↑ "WebGL and Hardware Acceleration". My.opera.com. 2011-02-28. Archived from the original on 2011-03-03. Retrieved 2012-03-20.
  35. ↑ "Introducing Opera 12 alpha". My.opera.com. 2011-10-13. Archived from the original on 2011-10-15. Retrieved 2012-03-20.
  36. ↑ "WebGL (Windows)". microsoft.com. Microsoft.
  37. ↑ "Internet Explorer 11 Preview guide for developers". Microsoft. 2013-07-17. Retrieved 2013-07-24.
  38. ↑ "WebGL". Microsoft. 2013-07-17. Retrieved 2013-07-24.
  39. ↑ "Internet Explorer 11 to support WebGL and MPEG Dash". Engadget. 2013-06-26. Retrieved 2013-06-26.
  40. ↑ "IE11 fails more than half tests in official WebGL conformance test suite". Microsoft Connect.
  41. ↑ "IEWebGL". Iewebgl. Retrieved 2014-08-14.
  42. ↑ "GitHub - Microsoft Edge WebGL Implementation". Microsoft. 2016-06-04. Retrieved 2016-06-10.
  43. ↑ "WebGL: 2D and 3D graphics for the web - Web APIs - MDN" . Retrieved 2023-06-28.
  44. 1 2 3 "WebGL 2.0 - Can I use..." Retrieved 2023-06-28.
  45. ↑ McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview. Archived from the original on 2013-04-13. Retrieved 2013-04-09.
  46. ↑ Halevy, Ronen. "PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0". BerryReview. Retrieved 2011-11-15.
  47. ↑ "WebGL on Mobile Devices". iChemLabs. 2011-11-12. Archived from the original on 2013-01-27. Retrieved 2011-11-25.
  48. 1 2 3 "Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices" . Retrieved 2015-09-16.
  49. ↑ Kersey, Jason. "Chrome Beta for Android Update". Chrome Releases Blog. Retrieved 2013-08-23.
  50. ↑ Voipio, Riku (2010-06-07). "WebGL on N900". Suihkulokki.blogspot.com. Retrieved 2011-05-14.
  51. ↑ "Dev guide: WebGL – Microsoft Edge Development". Microsoft. Archived from the original on 2016-10-08. Retrieved 2016-06-10.
  52. ↑ "Opera Mobile 12". Opera Software. Archived from the original on 1 March 2012. Retrieved 27 February 2012.
  53. ↑ Cunningham, Andrew (2014-09-17). "iOS 8, Thoroughly Reviewed". Ars Technica. Retrieved 2014-09-19.
  54. ↑ "HTML5test – How well does your browser support HTML5?" . Retrieved 2015-09-16.
  55. ↑ "HTML5test – How well does your browser support HTML5?" . Retrieved 2015-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. ISBN   978-1-4493-6395-6.
  57. ↑ Barrett, Stephen. "Tegra K1 Lands in Acer's Newest Chromebook". anandtech.com.
  58. ↑ "Blog > Away3D Typescript 4.1 Alpha > Away3D". away3d.com. Archived from the original on 2014-08-08. Retrieved 2014-08-05.
  59. 1 2 Boreskov, Alexey; Shikin, Evgeniy (2014). Computer Graphics: From Pixels to Programmable Graphics Hardware. CRC Press. p. 370. ISBN   978-1-4398-6730-3.
  60. ↑ Anyuru, Andreas (2012). Professional WebGL Programming: Developing 3D Graphics for the Web. John Wiley & Sons. p. 140. ISBN   978-1-119-94059-3.
  61. ↑ Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2nd ed.). "O'Reilly Media, Inc.". p. 624. ISBN   978-1-4493-3588-5.
  62. 1 2 "The WebGL potential - TypedArray.org". typedarray.org.
  63. ↑ "Blend4Web Official Site - About". Blend4Web.com. Retrieved 2015-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.com. 19 November 2013.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.