LIGHTWEIGHT WEBGL PACKS A HEAVY PUNCH

FIRST, A QUICK RENDERING 101 TUTORIAL

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.

A single object can have different levels of complexity. Overall, it comes down to how photorealistic you want the object to be. The more photorealistic, the more vertices its wireframe will have, and the longer it will take to be processed.

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.

INTRODUCING A NEW CONTENDER

The same rules apply at MediaLab. When we create an animation, 360° 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. Its name is: WebGL, or Web Graphics Library if we’re being formal.

NOW, WHAT EXACTLY IS WEBGL?

WebGL is an API that works with OpenGL standards to allow for real-time rendering using Canvas elements within a web browser by harnessing the power of the GPU (graphics processing unit) inside your device.

In human words, that means that we no longer have to pre-render the individual frames of an object or scene and, instead of playing like a previously recorded movie, the imagery is generated instantaneously with the use of computer code – akin to the real-time rendering of a big-budget video game.

ADDED BONUS: This is all done without the use of plug-ins!

Have you ever gotten one of those annoying messages saying “download the latest version of *insert plug-in* to view this content”? That’s a plug-in for your browser, and it discourages users from viewing and sharing your content.

Any customer that tries to see your content will have to download the plug-in that it uses (which is why most developers avoid them). This development is a true revelation for the 3D rendering industry.

HOW DOES WEBGL BENEFIT OUR CLIENTS?

For example, if a client wanted to showcase a 360° Spinner view of a top-selling chair on their website, we would be tasked with rendering every single angle of it and delivering all the resulting images to the client.

On top of that, if the same chair came in more than one color or style, which is often the situation, the same process would have to be done for every variation. We would have to render the black leather model with adjustable arms and aluminum base, then the red cloth model with fixed arms and chrome base, etc.

However, this is no longer the case… We only need to build the model’s base assets once and WebGL will take it from there – creating every angle, color, material and feature combination possible!

This means faster turnaround times on requests and more cost-effective imagery for our clients.

Instead of a folder full of images with variations of the same product, now we will be able to deliver WebGL links directly from the model file and our clients can then embed that into their HTML5 code.

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!

Lastly, WebGL also supports interactive content. Hotspots can be created within the 3D space to include images, animations, and videos that will pop up for viewers with just the click of a mouse.

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 ACROSS INDUSTRIES

Although its use outside of the gaming industry is fairly new, these are a few of the companies that are already benefiting from using WebGL.

Google Maps’ terrain view is a popular example. The high levels of interactivity within it are remarkable, to say the least.

Microsoft’s Xbox Design Lab lets the user customize all the different parts of their remote with the specific colors and finishes they want. The customer can freely jump from one feature to the next while seeing how his choices come together.

Bugaboo Strollers also offer an awesome product configuration space for their customers. They went beyond just letting the user design their own stroller. The page also allows the user to look at the product with zoom, as well as spin it to see it from different sides.

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.