October 13th, 2017

WebGL – The story of Graphics and 3D on the Internet.

The add-ons that run technology

There is hardly any technology that can be enjoyed as a standalone experience. Televisions require a set top box or wifi, Smartphones need sim cards with high speed internet connectivity and your high end digital camera requires the proper lens to be admirably aesthetic. The lesser these add ons, the more comfortable we feel. Similarly, the latest buzz in the tech world, Virtual Reality too needs certain requisites to unleash its true potential. Most of the Virtual Reality Experiences are in the form of applications. This means you will have to search and download them into your device before experiencing it. Now, this is a very tedious process. 

WebGL, The story of Graphics, 3D on the Internet

We already know how much storage capacity various applications eat and it is also less charming to open individual applications one by one to experience VR. This is where WebVR arrives as a game changer. WebVR displays 3D models directly into your browser and this allows you to watch virtual reality content without any download! The goal of this open standard platform is to provide VR experiences for everyone, no matter what device they have.

A glance at the history

In 2014, Vladimir Vukićević, the present Director of Engineering for Mozilla, was the first to conceive WebVR and he was also helped by Brandon Jones, Boris Simus and others from the Mozilla team. Later in 2014, Mozilla launched MozVR.com, a Virtual Reality website that displayed various VR demos along with a VR navigation interface. Very soon, various experimental builds of Google Chrome also started using WebVR that supported virtual reality systems like Google Cardboard, Oculus Rift, HTC Vive and Project Tango. Also in 2014, Google launched ‘Chrome experiments for Virtual Reality’, a VR mobile site that showed VR demos for Google Cardboard. ‘A- Frame’, an open source web framework was released in 2015 by Mozilla that enabled the building of VR experiences and websites. On the first of March 2016, the Mozilla Virtual Reality team and Google Chrome announced the release of version 1.0 of WebVR API proposal. The codes were then restructured which bought several improvements to WebVR. 1.1 is the latest tagged version which was last edited on April 5, 2017.

WebGL – The API that made it all possible

Vladimir Vukićević was the creative brain behind another game changing Application Program Interface called the Web Graphics Library (WebGL). This javascript API facilitated the rendering of 3D graphics in any compatible browser without needing any additional plug-ins. WebGL grew in popularity as it became compatible even with mobile platforms including iOS. What made WebGL stand out was its ability to perform tasks which were difficult to carry out using other platforms. One of the best testimonials for this is its ability to render complex lighting and reflective material effects. Its canvas element ensured that it could easily be pooled with other internet technologies. Their mini program ‘shaders’ is also useful to create complex visual effects. Today, you can see the use of WebGL all around you. To point out a simple example, what do you see in medical MRI scans and engineering survey data. The arrangement of complex data in three dimensional spaces, isn’t it? If health specialists and engineering supervisors have to club together these data for efficient data visualization, WebGL is what they would seek for. This would help them clearly determine the progress and possible outcomes of various engineering projects and also the health status and conditions of a community. Let us check out how WebGL made a difference to the internet viewing.

The easiest and best tested 3D API – People who deal with 3D applications will know the template and code that has to be setup just so that you can begin to do anything. It is so mind-numbing that even the renowned game programmer John Carmack has complained about it. Here is where WebGL arrives as the superhero savior. With WebGL in place, you absolutely don’t have to worry about makefiles, includes, windows and GLX/GLU etc. Instead, the browser does all that for you. Just get a ‘Canvas’ and content and you are ready to go. The main challenges ahead while programming hardware accelerated graphics are driver issues and incompatibilities. But WebGL has a comprehensive conformance suite that has thousands of tests to make sure WebGL would operate as it should. Any user can perform these tests and report any issues to the browser vendor. Sometimes, it so happens that a driver update or change in WebGL results in regressive performance. To solve these problems, WebGL also provides a performance regression test suite. It is only one of the very few 3D APIs to provide such a feature.

Interactiveness – Interactiveness is the modern style of communication. People today, crave for a feel of involvement in whatever they watch and this is exactly what WebGL provides. When the internet gets three dimensional, the users are inside the world of content and hence it creates a strong impact in them. So, a user visiting your website can easily explore your product or service from every possible angle. They can even make simulations of their own and determine how the product will operate in different scenarios and conditions. So, remaining in their own rooms, users can examine the product to the tiniest of details. This improves the overall likeability of your product and your chance to convince a customer!

Performance – WebGL is a program that is actually written with performance in mind and thus it is extremely fast and makes use of hardware acceleration. It is also based on OpenGL, a tried and tested interface for generating 3D applications. Since it is an open specification it is also not controlled by a single vendor. Since the Javascript is single threaded and CPU bound, while drawing reflective materials and complex lighting, the load can be shifted to the GPU in your device.

Range of Applications

Online Advertising – The use of WebGL is spread across a wide variety of domains. One of its major impact caters to online advertising as they can create ads so visually rich that it will entice the viewers. How many times have we closed or skipped a boring advertisement online? Instead, what if we get an ad with improved interactivity and rich 3D graphics. In 2014, Goo Technologies introduced a new ad creation tool called Goo Create and they were the first ones to create a WebGL powered online ad which allowed the users to move through a three dimensional scene. The ad was created for a casino named BlingCity and it appeared on the front page of Sweden’s largest newspaper – Aftonbladet. The users could move through the 3D scene that is implanted along the complete perimeter of Aftonbladet front page.

Bling City

E Learning – WebGL can easily be implemented into Storyline courses and this will significantly benefit courses dealing with specific object or devices. WebGL can be implemented in the form of exploration exercises, first person walkabouts and multimedia rooms which will allow the user to interact in a three dimensional environment. Von Waldkirch, a creative agency, designed an online museum for the Department of Islamic Art History of the University of Zurich using WebGL and it is one of the earliest examples in this regard.

Web Games – This is another prominent area influenced by WebGL. Instead of downloading and running games on their devices, gamers can now simply browse into a website and experience the power of three-dimensional gaming. One such example is the CycleBlob game based on the light cycles scene from the movie TRON. The game requires the skill set of the ordinary snake game but on a much more complex 3D surface!

Others – There are plenty more examples of amazing WebGL works. ‘Just a Reflector’ an interactive video created by Google Data Arts Team and Unit 9, Ultranoir Nouvelle Vague website and Fractal Lab by Tom Beddard are some of the other examples.





Related Blog Posts

Like to discuss a project?



Srushti VIZ Logo Srushti IMX Logo Srushti VFX Logo

© 2017 Srushti. All Rights Reserved.