WebGL: what is it and what is it used for?

What is it?

Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.

It is integrated completely into all the web standards of the browser allowing Graphics Processing Unit (GPU) accelerated usage of physics and image processing and effects as part of the web page canvas. Its elements can be mixed with other HTML elements and put together with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s GPU.

Developers often use it for games, but it is finally gaining visibility across the web. It is now being used for map visualizations, charting data and presentations.

Some history behind

WebGL emerged of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. He 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 technology consortium Khronos Group started the WebGL Working Group, with initial participation from Apple, Google, Mozilla, Opera, and others. Version 1.0 of the WebGL specification was released March 2011. Early applications of WebGL include Zygote Body. 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. Development of the WebGL 2 specification started in 2013. This specification is based on OpenGL ES 3.0.

What is WebGL Doing?

WebGL has three distinct advantages over writing code that simply manipulates the DOM:

• Tasks. Drawing reflective materials or complex lighting is rather tough. With JavaScript you could offload some of that to the GPU in your device and have that do the heavy lifting.
• Performance. Using hardware acceleration (with GPU being built into your device), WebGL is a great fit for games as well as complex visualizations.
• Shaders. Complex visual effects can be done with small programs – “shaders”. This may be very simple things (such as producing a sepia coloring effect), or more complex simulations (such as water or flames).

How to start?

Here are the essentials steps to create your first WebGL project:
1. Create “canvas” element
2. Obtain drawing context
3. Initialize viewport
4. Create buffers
5. Create matrices
6. Create shaders
7. Initialize shaders
8. Draw primitives

This could sound like a lot of work, so please have a look at some of the engines and frameworks that could be of help.

Engines and Frameworks

PlayCanvas
It is an open source engine which includes a number of options, along with an editor which helps visualize your changes as you make them. Some useful experiences they highlight include brand experiences for viewing high performance cars, as well as playable ads which you can insert into applications.

Turbulenz
It offers a 2D and 3D engine for developers to build, publish, and monetize games on their platform. Founded by former developers at Electronic Arts, this tool is also open source under the MIT License. You could download and build the latest Turbulenz Engine directly from the Github public repository. This includes everything from rendering effects and particles, to physics, animations, audio, inputs, and networking.

BabylonJS
Babylon is a complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio. It is an open source and free framework created by several people at Microsoft. It is updated on nearly a daily basis, and even offers a sandbox to play in and test out your code.

Pixi.js
It is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. It also has a number of added benefits including render auto-detect to fallback to Canvas when necessary, text support via bitmap (sprites) or webfont, as well as an asset loader.

Construct 2
It is a powerful ground breaking HTML5 game creator designed specifically for 2D games. It allows anyone to build games as no coding is required.

Phaser.io
It is also open source and besides, it offers TypeScript support, which is a strongly typed version of JavaScript. It also has some in-depth guides, and a showcase of Phaser made games.

Three.js
Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. It is one of the more popular frameworks including everything you need to get running: renders, scenes, cameras, animations, lights. While this is fantastic for most things, it is lacking a physics engine, which will come in handy when creating a game. Three.js is made available under theMIT license. It even has an editor (beta) that you can play around in. The source code is hosted in a repository on GitHub.

PhiloGL
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development from Sencha Labs people. All lessons from Learning WebGL have been ported into the PhiloGL Framework. This is a great starting point for people wanting to learn PhiloGL and/or WebGL as well. This is also licensed under the MIT License.

Where else is WebGL used?

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 are made many times by developers.

NASA developed an interactive web application called Experience Curiosity to celebrate the 3rd anniversary of the Curiosity rover landing on Mars. This Blend4Web-based app 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. The application was presented at the beginning of the WebGL section at SIGGRAPH 2015.

Hope the information about WebGL was useful for you  Have you ever used it? If yes, how was your experience? Please feel free to share your comments and thoughts in the comments below.