Zephyrnet Logo

WebGL: The new standard for 3D graphics on the Web

Date:

Soumil Srivastava

WebGL (Marrin, 2011) is an extension of the HTML5 canvas element, which is now widely used for developing web applications requiring 3D visualization. It is a 3D graphics API, written in a low-level language and is based on OpenGL ES 2.0.

Credits: https://www.acatec.de

To avoid complex low-level programming, several WebGL based frameworks have been developed, providing ease of development. Some of the important frameworks worth mentioning are:

 Three.js: Three.js is a JavaScript-based library, which creates 3D contents on the web browser with a very low level of complexity. It is lightweight in nature and can perform rendering with the help of HTML5 canvas, SVG and WebGL (Mrdoob,2013).

 Scene.js: Scene.js is a WebGL based library, which uses JavaScript for 3D visualization on web browsers. It differs from Three.js as it is intended towards the fast rendering of a large number of individually pickable objects. This feature makes this library useful for engineering and data visualization applications (Kay, 2013).

1. Designing for a modern 3D world: A UX design guide for VR

2. Scripting Javascript Promise In Spark AR For Beginners

3. Build your first HoloLens 2 Application with Unity and MRTK 2.3.0

4. Virtual Reality: Do We Live In Our Brain’s Simulation Of The World?

 GLGE: GLGE is a JavaScript-based library, which abstracts the low-level instructions from the developer and wraps them into meaningful instructions. It is also intended to provide ease of development of 3D content (Brunt, 2013).

An American-Serbian software engineer named Vladimir Vukicevic did the foundation work and led the creation of WebGL

  • In 2007, Vladimir started working on an OpenGL prototype for Canvas element of the HTML document.
  • In March 2011, Kronos Group created WebGL.

it is supported by major browsers such as Google Chrome, Mozilla Firefox, Safari and Opera, there are browsers such as Internet Explorer 11 which do not support WebGL completely. Moreover, WebGL is a low-level API as it is designed to interact directly with the graphic card. Hence, devices with low graphic card memory may pose significant performance issues. Additionally, to avoid complex low-level programming, use of pre-defined WebGL libraries such as Three.js, Scene.js and GLGE is mandatory¹.

Both are popular choices in the market; let us discuss some of the major difference:

  1. WebGL is based on OpenGL ES which lacks the many features that regular OpenGL is having like it supports only vertex and fragment shaders. OpenGL has features that are not in WebGL like geometry shaders, tessellation shaders, and compute shaders.
  2. WebGL is mainly used for browsers. OpenGL do need native drivers and is mainly oriented to install the software.
  3. WebGL is used for web applications and OpenGL is used for many video games.
  4. WebGL is easier to learn and develop applications. OpenGL can be learned easily, if once you are familiar with WebGL.
  5. In WebGL, it can fake 3D texture with the help of using 2D texture. In OpenGL, it is not required to do as it has a lot of features like geometry and shaders.
  6. In WebGL, it is forced to learn to use shaders and buffers from the start. In OpenGL, it is not like that.
  7. WebGL has less learning curve as it has fewer features. OpenGL has a bigger learning curve as it is having a lot of features including WebGL has.
  8. WebGL is based on OpenGL ES 2 which is not plain OpenGL. OpenGL ES is the subset of OpenGL. OpenGL ES has fewer capabilities and is very simpler to a user. OpenGL has a lot capabilities and difficult to use.

WebGL is widely supported by modern browsers:
Desktop browsers:

  • 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. By default on Windows, Chrome uses the ANGLE (Almost Native Graphics Layer Engine) renderer to translate OpenGL ES to Direct X 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.
  • Mozilla 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 on the Windows platform via ANGLE.
  • 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 — 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 — WebGL 1.0 is partially supported in Internet Explorer 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 IE WebGL.
  • Microsoft Edge — 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. WebGL 2.0 is planned with medium priority in future releases.
  • 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 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 Android browser in many phones (but is not a new standard Android Browser).
  • Internet Explorer — Prefixed WebGL 1.0 is available on Windows Phone 8.x (11+)
  • Firefox for mobile — WebGL 1.0 is available for Android and MeeGo devices since Firefox 4.
  • Google Chrome — WebGL 1.0 is available for Android devices since Google Chrome 25 and enabled by default since version 30.
  • Maemo — In Nokia N900, WebGL 1.0 is available in the stock microB browser from the PR1.2 firmware update onwards.
  • MeeGo — 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 12 supports WebGL 1.0 (on Android only).
  • Sailfish OS — WebGL 1.0 is supported in the default Sailfish browser.
  • Tizen — WebGL 1.0 is supported.
  • iOS — WebGL 1.0 is available for mobile Safari, in iOS 8.

Rendering is the process of generating an image from a model using computer programs. In graphics, a virtual scene is described using information like geometry, viewpoint, texture, lighting, and shading, which is passed through a rendering program. The output of this rendering program will be a digital image.
There are two types of rendering −

  • Software Rendering − All the rendering calculations are done with the help of CPU.
  • Hardware Rendering − All the graphics computations are done by the GPU (Graphical processing unit).

Rendering can be done locally or remotely. If the image to be rendered is way too complex, then rendering is done remotely on a dedicated server having enough of hardware resources required to render complex scenes. It is also called as server-based rendering. Rendering can also be done locally by the CPU. It is called as client-based rendering.

WebGL follows a client-based rendering approach to render 3D scenes. All the processing required to obtain an image is performed locally using the client’s graphics hardware.

There is no need to set a different environment for WebGL. The browsers supporting WebGL have their own in-built setup for WebGL.

Experience WebGL samples yourself: https://webglsamples.org/

Source: https://arvrjourney.com/webgl-the-new-standard-for-3d-graphics-on-the-web-2d8e206e7ef0?source=rss—-d01820283d6d—4

spot_img

Latest Intelligence

spot_img