Cloud rendering: A WebGL alternative on the rise

This article first appeared in a slightly modified form on PAGE Online. Click here for the original article.

Do you remember the days in which we stored all our data on a mass collection of CDs, USB sticks and external hard drives? A lot of effort went into organizing, copying files and creating backups. Since then however, the concept of “The Cloud” has drastically changed that paradigm by taking care of all the work for us. Effectively saving time and money.

Today, there is yet another field being transformed by cloud technology: real-time rendering. Compared to the current standard of running computer generated images on the device GPU, cloud streaming (or pixel streaming) describes a technique that provides a powerful remote machine for each user to compute photorealistic, high-quality images online. The final images are streamed to the hardware of the user in real-time, where the user input is sent back to the application in the cloud.

But how advanced is this technology today? Can it replace real-time rendering with WebGL in the browser? Let’s discuss this in the following chapters.

Let’s kick this off with the biggest advantage of Cloud Rendering over WebGL - quality! When it comes to WebGL, there are two factors that currently limit the graphical quality that's achievable. On one hand, the graphics API supported in the browser is limited to a certain set of features. Those high resolution textures and lighting effects typically found in Triple-A games can’t be implemented in the browser in this way. On the other hand, you generally want to make your web application accessible to a wider audience and support performance on a multitude of devices and browsers. Yet the computational power of the user device directly limits the achievable complexity of the scene.

As a creative technology agency, we have been utilising WebGL for interactive web experiences frequently. Since we have a lot of experts in real time graphics and shader programming in house, we managed to invest in and achieve high quality experiences for the products of our clients. A good reference for such projects would be our high-end product configurators for Helmade and Smart. Achieving this photorealistic look in a classical web environment however, requires a lot of research, effort and fine-tuning.

This is where cloud streaming comes in to play. The hosting provider offers powerful hardware in the cloud to render top photorealistic images. This supports all of the latest features from the industry's top game engines Unity and Unreal, while reducing the required time and effort for 3D artists and developers.

Here is a comparison between WebGL and cloud streaming in Unity. The upper example is rendered in WebGL on the graphics card, the lower as a stream in the cloud. Shadows and highlights can be rendered even more realistically in the cloud stream.

The streaming player can be embedded into any website through a websocket connection established between the streaming server and the client browser, exchanging data in both directions. For example, a car configurator would have the user interface enabling customization options in the frontend, meanwhile a streaming view displays the results in a very high quality, better representing the value of the car. This way a seamless user journey can be established, where the average customer might not even know that the beautiful images are rendered somewhere in the cloud instead of their own hardware.

We already learned that the quality of the experience in WebGL depends on the hardware of the user's device, while cloud rendering shifts the bottleneck to the available internet connection. This gets especially interesting when targeting mobile users. These devices normally lack a good GPU that can render nice WebGL images, but have an increasingly fast internet connection through Wifi and cellular. This effect will maximize in the next few years with broader availability of 5G. Hosting providers recommend a minimum download speed of 15 Mbps, upload speed of 5 Mbps and a latency of 70 ms. (Source: link).

As best practice, developers should still try to reduce the noticeability of lag by designing the applications in a certain way. Product configurators using an orbiting camera for example, are not as heavily affected by latency as games with a first person camera. The amount of data streamed can be additionally reduced by restricting the resolution of the render view for larger devices. It can be integrated into a smaller window embedded on the page using a so-called IFrame.

Now we get to the real question, having a seperate high end computer in the cloud for each user simultaneously sounds like it might get really expensive right? It is! Hosting providers charge about 5 cents per minute of streaming, per user. A simple example calculation could be a microsite that’s online for one month with a total of 150.000 users spending 3 minutes on the platform. That would result in 22.500€ worth of hosting costs for the single month.

The current cost certainly limits the amount of potential use cases for cloud streaming. However a short campaign website that has a limited amount of expected users could benefit, as could a personalized microsite for customers in the luxury automotive or property market. When companies expect people to pay a lot of money for their product, it’s in their best interest to represent that item in a highly realistic and engaging way. Making customization and configuration a fun and enchanting experience. Another area where we see good potential for adopting this technology is virtual events, conferences or shows that take place on a single day with a certain amount of attendees.

As covered up until now, cloud rendering has a lot of potential to transform the possibilities of real time rendering in the web context. A recent example of a high quality streamed experience is the online video game for Balenciaga that generated great media buzz. Unfortunately the experience is not online anymore (as suggested in the previous streaming cost section) but a video documenting it can be seen here. Another good example is the Pagani car configurator. Since the hypercars cost a small fortune, it is very important for potential buyers to experience the quality they get for their money upfront.

To conclude, at this point in time the pricing and latency aspects still limit the use cases and the design of the experiences for this solution to become standard. Though increasing machine power, reduced hosting costs and wider availability of 5G in the near future will help establish streaming as a more viable alternative to relying on device GPU. With this outlook in mind, developers, creative agencies and brands alike should invest in cloud rendering solutions today, as it will surely transform the way we consume real time graphics on the web to delight and enchant the customers of tomorrow. An outcome best described by sci-fi writer, futurist and inventor Arthur C. Clarke as: “Any sufficiently advanced technology is indistinguishable from magic.”