What is WebGL?

The Javascript API for rendering interactive 2d and 3d graphics

Pj Jones

What is WebGL and why do I need it on my website?

Have you ever been browsing the internet and come across websites that feature some really cool and interactive 3D graphics? Well, what you experienced was WebGL – a 3D rendering technology that can be used to create amazing 3D and 2D graphics within your browser in real time.

With computers featuring newer and faster GPUs (Graphics Processing Units) every year, it makes sense that software technology keeps up with the hardware so that users can have as immersive and interesting experiences as possible. Read on to learn more about what WebGL is, and how it can be integrated on your website to create a better experience for your visitors.

What is WebGL?

While we all know that video games and movies are getting better and better graphics every day, the same is happening to websites on the internet. Web Graphics Library, or WebGL is a JavaScript based API that allows internet browsers to render high quality 3D and 2D graphics, without needing a plug-in like Adobe Flash Player.
In the past, web browsers were only able to render graphics using the CPU. Today, adopted hardware acceleration support has enabled browsers to access a computer’s GPU to render increasingly complex graphics. This is where WebGL comes into action.

How does WebGL work?

WebGL runs on JavaScript and is based on OpenGL – the API that makes all the graphics on your smartphone or tablet work smoothly. While WebGL can be quite tough to master, experts (such as ourselves) make use of some nifty JavaScript libraries such as three.js, that make WebGL much more versatile.

Let’s look at what exactly you need to render complex, dynamic, and engaging 3D graphics for the users on your website.

The first thing you need is a lot of mathematical data: x,y,z coordinates of each object in your 3D experience, calculations that determine how these interact and what the result is, as well as equations that deal with real-time data and how to interpret it. This is all 3D math and on their own, neither browsers nor computers are equipped at using and interpreting it.

The second thing you need is an algorithm that can “describe” your “3D world” and all the objects within it, in abstract (including their interactions).
The final piece of the jigsaw is a tool that can take both the 3D math, and the abstract descriptions and use them to actually render this data into visual representation. Additionally, you also need a tool that can allow for hardware acceleration, and tap into the device’s hardware to help render highly complex graphics.
What a JavaScript library like three.js does is that it combines all of these building blocks together and allows web developers, VFX artists, and 3D designers to work together to create engaging in-browser 3D (and 2D) experiences for a website’s users.

Which browsers support WebGL?

WebGL can be used to render 3D and 2D graphics on any compatible browser without the need for additional plug-ins, making for a much smoother and cleaner user experience. Almost all commonly used web browsers support WebGL including Firefox, Google Chrome, Opera, Safari, Internet Explorer and Microsoft Edge. However, as WebGL uses hardware acceleration to render complex graphics, WebGL will only work if a user’s computer has the necessary hardware.

What exactly can WebGL do?

WebGL can render all kinds of immersive, highly engaging, and dynamic 3D and 2D graphics for your website. Depending on what kind of website you have, WebGL can help perform a variety of functions. Check out the examples below to learn more about what WebGL can help achieve:

1. Google Maps

If you’ve ever used the 3D mode on the browser version of Google Maps, then you have experienced WebGL in action. The transparent 3D buildings you see on the site are rendered using WebGL – as is Street View, 3D map rotation and shadows relevant to time of the day.

2. Just a Reflector

Another great example of WebGL in action is Just a Reflector a highly interactive music video that provides an immersive experience for the user.

3. The Biodigital Human

WebGL can also be used for educational purposes as used here by BioDigital systems for a complete 3D human model that can be studied visually all the way down to the skeleton and blood system!

4. This Prior Holdings Website

Prior Holdings, a Japanese hospitality business company, has made amazing use of WebGL to create this absorbing and beautifully designed online portfolio for their business. Not only does this offer potential customers unique insight into the way they run their business, but as a hospitality business, offers them an advantage as they can impress customers even before they’ve begun interacting.

5. This logo

Of course, your website might not need complex and immersive 3D graphics at all – but even so, WebGL can help make it a much better experience for your customers. A good example is this really simple 2D logo, which adds a ton of oomph to the website!

In conclusion

In today’s day and age, your website is as important (if not more) as your actual company premises. It is vital that your visitors and potential customers are impressed and reluctant to leave. Whether your business needs require that you have an incredibly immersive experience for your site visitors, or you just need to add that extra bit of flair to your site, WebGL can do the trick for you.

With hardware becoming increasingly advanced and complex, it is inevitable that one day Virtual Reality and Augmented Reality will be standard components of an immersive online experience. The tool that will help us get there? WebGL of course. If you want to stay ahead of the curve and want your site to be as innovative an experience as possible, reach out today! Our WebGL specialists will help design unique content that best fit your website’s needs.

What can we help you with?