WebGL 2.0: The Future of Browser Based 3D
WebGL 2.0: The Future of Browser Based 3D
WebGL is a JS API that renders graphics intense, interactive 3D computer animations and 2D graphics within a compatible web browser without using any plug-ins or third party render software. WebGL example usage is included in this article. WebGL, nowadays is an integral component of the modern browser. It allows accelerated usage of physics effects and image processing features of the GPU to manipulate vectors in the HTML5 Canvas component of a webpage. Elements of WebGL can be mixed with other parts of the HTML webpage to create immersive backgrounds and highly responsive, real-time graphics that captivate the visitor’s attention. WebGL Software Development programs comprise of a control code written in JS and Shader code that is executed on a client’s GPU. Currently, WebGL is designed and maintained by the Khronos Group; an American non-profit member-funded industry consortium based in Beaverton, Oregon.
In fact, initial concept evolved as a spin-off from the Canvas 3D experiments started by Vladimir Vukicevic at the Mozilla Corporation. However, the official WebGL Working Group was initiated by the Khronos Group in 2009 with participation from browser giants like Google, Apple, Opera and Mozilla. Since 2012 the chair of the working group is Ken Russell.
Structure and Usage:
Structurally, the WebGL 1.0 (introduced in March 2011) was based on the OpenGL ES 2.0 and uses the DOM interfaces to access the HTML Canvas element. WebGL expresses Shaders directly in GLSL and does not have fixed-function APIs (discontinued since OpenGL 3.0). However, this functionality can be provided manually in the JS.
The WebGL API is most effectively used in conjunction with some utility libraries that handle different graphics functions. Loading scene graphs and most popular 3D objects are not included in the standard libraries. However, they can be added to implement market standard functionalities.
Support from Game Engines:
As well as a support from game engines such as Unreal Engine4 and Unity 5. The Stage3D/ Flash-based Away3D high-level library also has a port to WebGL via TypeScript. Another honorable mention is Sylvester.js, a light library that provides vector and math utilities for shaders used in conjunction with WebGL specific extension glUtils.js.
WebGL also has some 2D libraries like Cocos2d-x or Pixi.js, which were implemented this way for performance reasons. The WebGL based 2D libraries fall back to HTML5 canvas when WebGL is not available.
Using WebGL removes the rendering bottleneck by giving almost direct access to the GPU Performance limitations in the JS implementations. Creating content for WebGL scenes means using a regular 3D content creation tool and exported to a browser readable format using Autodesk Maya or Blender etc. Mozilla Firefox also offers built-in WebGL tools (since its version 27), that allow editing vertex and fragment shaders.
A Steadily Increasing List of High Level Frameworks for WebGL Includes:
Application:
The earliest adaptations of WebGL can be traced back to the Zygote Body( formerly Google Body) a web application by Zygote Media Group that renders a manipulate-able 3D anatomical model of the human body. And can be attributed to Autodesk porting their web applications (such as Fusion 360 and Auto-CAD 360) to the cloud.
Development on the WebGL 2.0 specification started in 2013. This version is based on the OpenGL ES 3.0 and an editor’s draft states it as near completion.
WebGL is an innovative new web technology that brings hardware-accelerated 3D graphics to the browser without installing additional plug-ins. Read More about WebGL and check out some WebGL Software Development Examples.
great