Everything you need to know about WebGL

[Rss Bot 1]

3D technologies can be used in-browser to create beautiful and highly engaging interactive user experiences. WebGL is a JavaScript API for real-time rendering of 3D and 2D graphics within a browser. It’s based on OpenGL ES – the software API used on embedded systems such as smartphones and tablets.

Traditionally, web browsers used the CPU to render content, but in recent years browsers have adopted support for hardware acceleration, which means web developers can now tap into a device’s GPU to allow for rendering of complex graphics.

• Get started with WebGL using three.js

It’s a tough language to grasp, but luckily there are a number of JavaScript libraries that make WebGL more accessible, such as Babylon.js and three.js. Such technology is merging skill sets between traditional web developers, game developers and VFX artists, where all these disciplines work together to develop interactive experiences on the web. 

Having an understanding of basic VFX principles is crucial – lighting, cameras, animation and 3D geometry all come into play – and it’s vital to have a grasp of JavaScript frameworks and HTML.

• Illustration: Kym Winters

Export 3D for the web

A particular problem associated with exporting 3D assets into a WebGL environment is the weight of the files. When dealing with heavy assets like 3D models, extra care has to be taken during asset creation to ensure the models are loaded efficiently.

There are many factors that can increase a 3D model’s size, but there are three good rules to follow to help reduce weight in a browser:

1. Good topology

Topology refers to the mesh flow of a 3D model – the cleaner the mesh the more efficient the model, meaning fewer polygons used and a reduction in the overall weight of the asset.

2. Normal mapping

This is an excellent approach in creating detailed raised textures on a 3D asset while maintaining a low poly count. The detail these maps create is fake but can be incredibly effective. Typically a higher resolution model is created with a detailed mesh, from this a normal map can be exported and wrapped around a lower poly model to create the illusion of a detailed object.

3. File formats 

When WebGL was initially released, developers created custom exporters to deliver 3D assets into a WebGL engine. There was no standard or pipeline in place, which caused inconsistent results and errors. More recently the file format glTF has been created by The Khronos Group to develop an open, royalty-free interoperable format for sharing 3D graphics, and has been dubbed the ‘JPEG for 3D.’ 

GlTF was created to answer the need for a common graphics file format for 3D, in much the same way as JPEG is the standardisation for photographs. GlTF can retain complex information associated with 3D files such as scene data, materials, geometry, animation, skins, GLSL shaders, and texture files. 

GLTF is still a very new file format and time will tell if the big 3D packages adopt it. However, Khronos Group has released several glTF exporters for popular tools such as Unity and Blender.

Practical use cases for WebGL

As with any new medium, there was a burst of creativity when WebGL was first released that resulted in a variety of weird and wonderful experiences as developers and artists experimented with the technology. Only more recently have practical applications started to emerge as the adoption rate has increased.

Big brands have adopted WebGL to render graphics more efficiently – for example, the PS4 UI is powered by WebGL

In the past, education institutions created Flash applications to use as interactive learning tools. While at the time these were great for engaging students and teaching complex subjects in a digestible format they are now dated, unscalable, and unsupported in modern browsers. WebGL replaces Flash and, in this case, is being used to create intuitive learning tools that can cope with complex graphics and interactions.

Big brands have also adopted WebGL to render graphics more efficiently. For example, the PS4 UI is powered by WebGL, enabling its menus and elements to run smoothly with minimal lag. When a user logs into their PS4, they’re running WebGL code. 

The architecture sector is also investing heavily in making 3D visualisations more accessible, going even further to incorporate WebVR to immerse clients when showcasing properties. And within ecommerce, especially with high-value items, WebGL is being used to render 3D models in intricate detail. It gives users a layer of interactive customisation tools that enable them to update their product visualisation in real time. This approach makes products become even more realistic and tangible to potential customers.

Exploring Virtual Reality

WebGL is the springboard that started the exploration of additional 3D technologies such as WebVR and WebAR. Google, Mozilla, and Microsoft are all helping define how VR and AR will be part of the future browsing experience.

The beauty of bringing VR to the web is the level of accessibility that comes along with it. Allowing easy access of VR content through a URL – and the ability to create and distribute content without the need to go through an app store – gives brands, educators, and retailers a level of reach never quite felt before. This is still a new world, but it’s quickly gaining in popularity and demand.

Being strong pioneers of VR in the browser, in late 2015 Mozilla made the technology even more accessible with the introduction of A-Frame: a VR framework for three.js that supports the Vive, Rift, Daydream, Gear VR, Google Cardboard and desktop experiences.

Mozilla made the technology even more accessible with the introduction of A-Frame

A-Frame provides an interface for VR on the web, enabling developers to create true VR experiences with relative ease. It handles setting up the left and right camera needed for virtual reality and supplies default behaviour, including making use of a mobile device’s gyroscope to allow for free rotational movement around a scene using a headset. A-Frame also introduced a headset icon to enable the VR experience for compatible mobile devices. 

A-Frame has paved the way for the browser specifications of what is today known as WebVR. However, experiencing VR in the browser can be somewhat unpredictable due to the range of devices it can be experienced on. There are still issues when viewing content on smartphones thanks to older generation phones struggling to render scenes and causing a drop in frame rates. It also requires a good internet connection due to the weight of the experiences. All of these factors can easily break the immersion of a VR experience. 

It’s still early days for the medium but with VR becoming more mainstream, it’s inspiring to see how the web is already adapting to offer a more accessible version of this type of content and watch developers exercise their creativity in this space.

Augmented Reality

WebAR is the next logical step for browsers, blending digital content with the real world to create an augmented reality. Though it’s still very much in its infancy and experimental stage, Google has made great progress in this field and released several tools and demos.

WebARonARKit and WebARonARCore are both experimental apps for iOS and Android, enabling developers to create AR experiences using web technologies. Three.js released three.ar.js, making it easier to create AR experiences by adding helper classes on top of three.js. Because this technology is in such early stages, it does mean these experiences are only viewable in experimental browsers.

With the adoption of VR, AR and eventually mixed reality, it’s inevitable for browsers to follow suit by offering an immersive online experience. The uptake of 3D web technologies is faster than it has ever been. With a big drive behind WebAR, it’s exciting to see how the landscape develops and adds another dimension to browsing.

Web design event Generate London returns on 19-21 September 2018, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now.

This article originally appeared in net magazine. Buy issue 305 or subscribe. 

Read more:

• The VR web is here
• 5 ways to create more immersive VR experiences
• Create liquid effects with WebGL

View the full article