HOME

TheInfoList



OR:

WebGL (Short for Web Graphics Library) is a
JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
API for rendering interactive 2D and 3D graphics within any compatible
web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...
without the use of plug-ins. WebGL is fully integrated with other web standards, 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 The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...
elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and
shader In computer graphics, a shader is a computer program that calculates the appropriate levels of light, darkness, and color during the rendering of a 3D scene - a process known as '' shading''. Shaders have evolved to perform a variety of spec ...
code that is written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++, and is executed on a computer's
graphics processing unit A graphics processing unit (GPU) is a specialized electronic circuit designed to manipulate and alter memory to accelerate the creation of images in a frame buffer intended for output to a display device. GPUs are used in embedded systems, mo ...
(GPU). WebGL is designed and maintained by the
non-profit A nonprofit organization (NPO) or non-profit organisation, also known as a non-business entity, not-for-profit organization, or nonprofit institution, is a legal entity organized and operated for a collective, public or social benefit, in co ...
Khronos Group. On February 9, 2022 Khronos Group announced WebGL 2.0 support for all major browsers.


Design

WebGL 1.0 is based on
OpenGL ES 2.0 OpenGL for Embedded Systems (OpenGL ES or GLES) 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-acc ...
and provides an API for 3D graphics. It uses the HTML5 canvas element and is accessed using
Document Object Model The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a docum ...
(DOM) interfaces. WebGL 2.0 is based on OpenGL ES 3.0 and made guaranteed availability of many optional extensions of WebGL 1.0 and exposes new APIs. Automatic memory management is provided implicitly by
JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
. Like OpenGL ES 2.0, WebGL does not have the
fixed-function Fixed-function is a term canonically used to contrast 3D graphics APIs and earlier GPUs designed prior to the advent of shader-based 3D graphics APIs and GPU architectures. History Historically fixed-function APIs consisted of a set of functi ...
APIs introduced in OpenGL 1.0 and
deprecated In several fields, especially computing, deprecation is the discouragement of use of some terminology, feature, design, or practice, typically because it has been superseded or is no longer considered efficient or safe, without completely removing ...
in OpenGL 3.0. This functionality, if so required, has to be implemented by the end-developer by providing shader code and configuring data bindings in JavaScript. Shaders in WebGL are expressed directly in GLSL and passed to the WebGL API as textual strings. The WebGL implementation compiles these shader instructions to GPU code. This code is executed for each and every 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 Mozilla (stylized as moz://a) is a free software community founded in 1998 by members of Netscape. The Mozilla community uses, develops, spreads and supports Mozilla products, thereby promoting exclusively free software and open standards, w ...
. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla and Opera had made their own separate implementations. In early 2009, the
non-profit A nonprofit organization (NPO) or non-profit organisation, also known as a non-business entity, not-for-profit organization, or nonprofit institution, is a legal entity organized and operated for a collective, public or social benefit, in co ...
technology consortium Khronos Group started the WebGL Working Group, with initial participation from
Apple An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple trees are cultivated worldwide and are the most widely grown species in the genus '' Malus''. The tree originated in Central Asia, where its wild ances ...
,
Google Google LLC () is an American Multinational corporation, multinational technology company focusing on Search Engine, search engine technology, online advertising, cloud computing, software, computer software, quantum computing, e-commerce, ar ...
, Mozilla,
Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libre ...
, and others. Version 1.0 of the WebGL specification was released March 2011. As of March 2012, the chair of the working group is Ken Russell. Early applications of WebGL include Zygote Body. In November 2012
Autodesk Autodesk, Inc. is an American multinational software corporation that makes software products and services for the architecture, engineering, construction, manufacturing, media, education, and entertainment industries. Autodesk is headquartered ...
announced that they ported most of their applications to the cloud running on local WebGL clients. These applications included Fusion 360 and AutoCAD 360. Development of the WebGL 2 specification started in 2013 with final in January 2017. This specification is based on OpenGL ES 3.0. First implementations are in Firefox 51, Chrome 56 and Opera 43.


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 OpenGL for Embedded Systems (OpenGL ES or GLES) 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-ac ...
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. ″ oogle''Chrome uses ANGLE for all graphics rendering on Windows, including the accelerated Canvas2D implementation and the Native Client sandbox environment.″''


Software

# WebGL is widely supported by modern browsers. However its availability is dependent on other factors like the GPU supporting it. The official WebGL website offers a simple test page. More detailed information (like what renderer the browser uses, and what extensions are available) is provided at third-party websites.


Desktop browsers

*
Google Chrome Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macO ...
– 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. By default on Windows, Chrome uses the
ANGLE In Euclidean geometry, an angle is the figure formed by two rays, called the '' sides'' of the angle, sharing a common endpoint, called the '' vertex'' of the angle. Angles formed by two rays lie in the plane that contains the rays. Angles ...
(Almost Native Graphics Layer Engine) renderer to translate OpenGL ES to
Direct X Microsoft DirectX is a collection of application programming interfaces (APIs) for handling tasks related to multimedia, especially game programming and video, on Microsoft platforms. Originally, the names of these APIs all began with "Direct", ...
9.0c or 11.0, which have better driver support. On Linux and Mac OS X the default renderer is OpenGL however. It is also possible to force OpenGL as the renderer on Windows. Since September 2013, Chrome also has a newer Direct3D 11 renderer, which however requires a newer graphics card. 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. Since 2013 Firefox also uses
DirectX Microsoft DirectX is a collection of application programming interfaces (APIs) for handling tasks related to multimedia, especially game programming and video, on Microsoft platforms. Originally, the names of these APIs all began with "Direc ...
on the Windows platform via
ANGLE In Euclidean geometry, an angle is the figure formed by two rays, called the '' sides'' of the angle, sharing a common endpoint, called the '' vertex'' of the angle. Angles formed by two rays lie in the plane that contains the rays. Angles ...
. 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. Safari version 12 (available in MacOS Mojave) has available support for WebGL 2.0, currently as an "Experimental" feature. *
Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libre ...
– WebGL 1.0 has been implemented in Opera 11 and 12, although was disabled by default in 2014. Opera 43+ supports WebGL 2.0. *
Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...
– WebGL 1.0 is partially supported in Internet Explorer 11. It initially failed the majority of official WebGL conformance tests, but Microsoft later released several updates. The latest 0.94 WebGL engine currently passes ~97% of Khronos tests. WebGL support can also be manually added to earlier versions of Internet Explorer using third-party plugins such as IEWebGL. * 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. Version 10240+ supports WebGL 1.0 as prefixed. Latest Chromium-based Edge supports WebGL 2.0.


Mobile browsers

* BlackBerry 10 – WebGL 1.0 is available for BlackBerry devices since OS version 10.00 * BlackBerry PlayBook – WebGL 1.0 is available via WebWorks and browser in PlayBook OS 2.00 * Android Browser – Basically unsupported, but the
Sony Ericsson Xperia Xperia () is the brand name of smartphones and tablets from Sony. The name Xperia is derived from the word "experience", and was first used in the Xperia X1 tagline of "I Xperia the best". Sony Mobile was previously known globally as Sony ...
range of Android smartphones have had WebGL capabilities following a firmware upgrade. 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). *
Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...
– Prefixed WebGL 1.0 is available on
Windows Phone Windows Phone (WP) is a discontinued family of mobile operating systems developed by Microsoft for smartphones as the replacement successor to Windows Mobile and Zune. Windows Phone featured a new user interface derived from the Metro design lan ...
8.x (11+) *
Firefox for mobile Firefox for Android is a web browser developed by Mozilla for Android smartphones and tablet computers. As with its desktop version, it uses the Gecko layout engine, and supports features such as synchronization with Firefox Sync, blocking web ...
– WebGL 1.0 is available for Android and MeeGo devices since Firefox 4. * Firefox OS *
Google Chrome Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macO ...
– WebGL 1.0 is available for Android devices since Google Chrome 25 and enabled by default since version 30. *
Maemo Maemo is a software platform originally developed by Nokia, now developed by the community, for smartphones and Internet tablets. The platform comprises both the Maemo operating system and SDK. Maemo played a key role in Nokia's strategy to c ...
– In Nokia N900, WebGL 1.0 is available in the stock microB browser from the PR1.2 firmware update onwards. *
MeeGo MeeGo is a discontinued Linux distribution hosted by the Linux Foundation, using source code from the operating systems Moblin (produced by Intel) and Maemo (produced by Nokia). Primarily targeted at mobile devices and information appliances ...
– WebGL 1.0 is unsupported in the stock browser "Web." However, it is available through Firefox. * Microsoft Edge – Prefixed WebGL 1.0 is available on Windows 10 Mobile. *
Opera Mobile Opera Mobile is a mobile web browser for smartphones, tablets and PDAs developed by Opera. History The first devices to run a mobile edition of Opera were the Psion Series 5, Psion Series 5mx, Psion Series 7, and then Psion netBook. They ...
– Opera Mobile 12 supports WebGL 1.0 (on Android only). * Sailfish OS – WebGL 1.0 is supported in the default Sailfish browser. *
Tizen Tizen () is a Linux-based mobile operating system backed by the Linux Foundation, mainly developed and used primarily by Samsung Electronics. The project was originally conceived as an HTML5-based platform for mobile devices to succeed MeeGo ...
– WebGL 1.0 is supported * iOS – WebGL 1.0 is available for mobile Safari, in iOS 8.


Tools and ecosystem


Utilities

The low-level nature of the WebGL API, which provides little on its own to produce desirable 3D graphics quickly, contributed to creation of libraries which are typically used to build things up in 3D graphics (e.g. view transformations for
shader In computer graphics, a shader is a computer program that calculates the appropriate levels of light, darkness, and color during the rendering of a 3D scene - a process known as '' shading''. Shaders have evolved to perform a variety of spec ...
s, view frustum etc.). Basic tasks such as loading scene graphs and 3D objects in the popular industry formats is also
abstracted Abstraction in its main sense is a conceptual process wherein general rules and concepts are derived from the usage and classification of specific examples, literal ("real" or "concrete") signifiers, first principles, or other methods. "An abstr ...
by the libraries (some of which were ported to JavaScript from other languages) to provide additional functionality. A non-exhaustive list of libraries that provide many high-level features includes
A-Frame (VR) A-Frame is an open-source web framework for building virtual reality (VR) experiences. It is maintained by developers from Supermedium (Diego Marcos, Kevin Ngo) and Google (Don McCurdy). A-Frame is an entity component system framework for Three.j ...

BabylonJS
PlayCanvas ''PlayCanvas'' is an open-source 3D game engine/interactive 3D application engine alongside a proprietary cloud-hosted creation platform that allows for simultaneous editing from multiple computers via a browser-based interface. It runs in modern ...
, three.js,
OSG.JS OSG.JS is a WebGL framework based on OpenSceneGraph concepts. It allows an individual to use an “OpenSceneGraph-like” toolbox to interact with WebGL via JavaScript, and provides facilities for exporting various assets to the osgjs format. Th ...
and CopperLicht. X3D also made a project called X3DOM to make X3D and VRML content running on WebGL. The 3D model will in XML tag 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.


Games

There also has been a rapid emergence of
game engine A game engine is a software framework primarily designed for the development of video games and generally includes relevant libraries and support programs. The "engine" terminology is similar to the term " software engine" used in the softwar ...
s for WebGL, both 2D and 3D, including Unreal Engine 4 and Unity. The Stage3D/Flash-based Away3D high-level library also has a port to WebGL via TypeScript. A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js. It is sometimes used in conjunction with a WebGL specific extension called glUtils.js. 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 Starling is an open source game framework used to create 2D games that run both on mobile and desktop platforms. It recreates the traditional Flash display list architecture on top of accelerated graphics hardware. Several commercial games have ...
over Stage3D in the Flash world. The WebGL-based 2D libraries fall back to HTML5 canvas when WebGL is not available. 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 asm.js is a subset of JavaScript designed to allow computer software written in languages such as C to be run as web applications while maintaining performance characteristics considerably better than standard JavaScript, which is the typical l ...
and WebAssembly (similarly, the introduction of Stage3D exposed performance problems within
ActionScript ActionScript is an object-oriented programming language originally developed by Macromedia Inc. (later acquired by Adobe). It is influenced by HyperTalk, the scripting language for HyperCard. It is now an implementation of ECMAScript (meani ...
, which were addressed by projects like CrossBridge).


Content creation

Like for any other graphics API, creating content for WebGL scenes requires 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 A blender (sometimes called a mixer or liquidiser in British English) is a kitchen and laboratory appliance used to mix, crush, purée or emulsify food and other substances. A stationary blender consists of a blender container with a rotating me ...
, 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. There are also some WebGL-specific software such as CopperCube and the online WebGL-based editor
Clara.io Clara.io is web-based freemium 3D computer graphics software developed by Exocortex, a Canadian software company. The free or "Basic" component of their freemium offering, however, places severe restrictions, such as on saving models and importing ...
. 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

Additionally, Mozilla Foundation, in its Firefox browser, has implemented built-in WebGL tools starting with version 27 that allow editing vertex and fragment shaders. A number of other debugging and profiling tools have also emerged.


See also

*
List of WebGL frameworks Frameworks are available to create WebGL content quickly and easily without building from the ground up. Note: The following list mixes WebGL libraries with game engine A game engine is a software framework primarily designed for the develop ...
*
Experience Curiosity Experience Curiosity is an interactive web application developed by NASA's Jet Propulsion Laboratory to celebrate the third anniversary of the ''Curiosity'' rover landing on Mars. This 3D serious game makes it possible to operate the rover, control ...
– WebGL simulation of the Mars rover ''Curiosity'' *
WebVR 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, Oculus Quest, Google Cardboard, HoloLens, Magic Leap or Ope ...
* Java OpenGL – OpenGL library for the Java programming language * WebGPU


References


External links

*
WebGL
at the Mozilla Developer Network {{Authority control 3D graphics APIs Cross-platform software Graphics libraries Graphics standards OpenGL Web development