What is it?
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:
- 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
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.
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.
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.
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.
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.