Lightweight WebGL Packs a Heavy Punch  
Imagery that Floats like a Butterfly and Stings in 3D

31 Aug 2017
lightweight webgl

Lightweight WebGL Packs a Heavy Punch  
Imagery that Floats like a Butterfly and Stings in 3D


When it comes to creating computer-generated 3D imagery, after an artist has created the prop, character or scene, the image must be processed through a series of high-powered computers to give it its final, photorealistic appearance. The render time varies, depending on the complexity of the image and can take anywhere from 30 minutes to several hours. For animations, each individual frame must be rendered. Considering there are about 30 frames per second, it’s easy to see just how much time and computer horsepower is necessary for a short animation, much less a feature-length film.


The same rules apply at MediaLab. When we create an animation, 360 degree spinner or visualizer, we render each frame individually. The rendered frames are then compiled and viewed in linear order, comparable to a recorded movie. But the game is changing – a new competitor has stepped into the ring. WebGL is an API that allows for real time rendering within a web browser without the use of plug-ins by harnessing the power of the GPU. That means, through a computer code, we no longer have to pre-render the individual frames and instead of playing like a previously recorded movie, the imagery is generated instantaneously – akin to the real time rendering of a big-budget video game. This development is a true revelation for the 3D rendering industry.


For example, if a client wanted to showcase a 360 spinner of a top-selling chair on their website, we would be tasked with rendering every possible combination at every angle: the black leather model with adjustable arms and aluminum base, the red cloth model with fixed arms and chrome base, etc. However, this is no longer the case. We only need to render the model’s base assets once and WebGL will take it from there – creating every color, material and feature combination possible! This means faster turnaround times on requests and more cost-effective imagery for our clients.

Furthermore, when the user wants to rotate the image or toggle between fabric options, the model renders in real time at 60 frames per second – no time waiting for the image to download! Experts will say the tradeoff to using WebGL is the quality of the imagery. But here’s the thing, while it is true that the WebGL models must be light (created with a low polygon count, which can equate to less detail) in order to render so nimbly, advancements in computing hardware and artistic techniques have made it so that the difference to the viewing consumer is typically negligible.

WebGL offers the best of both worlds: it’s light and agile enough to run in real time, but provides the potent details that rival pre-rendered imagery. It’s only a matter of time before WebGL puts the competition on the mat.