We often hear about WebGL experiences on desktop. These experiences are particularly demanding in terms of performance, that much is true. As a result of that, they are often built to be compatible with platforms whose capabilities are on par with their requirements. Sometimes to their detriment. If WebGL projects are always designed with a ‘desktop first’ mentality in mind, how do we make sure those same experiences are possible on mobile?


PlayCanvas, the online editor we mentioned in 'How To Create Great WebGL Experiences', has resolved that issue. Or, rather, it took a first step in the WebGL no man’s land that is the mobile platform. The PlayCanvas team designed an experience (worthy of a brand) that shows what is possible on mobile today. This seems like a risky wager, and yet …


BMW i8 Configurator, ‘mobile first’

This project is a next-generation configurator which showcases BMW’s i8 through a well-thought-out use of WebGL. Built using the PlayCanvas engine, this experience is intended to be compatible with any support, and especially with mobile. It even runs within mobile social media, such as Facebook and Twitter.



^{A rather successful wager}


The project was indeed developed with the aim of being compatible with both low and high-end smartphone models, whose performances might vary significantly. And, with the exception of older models such as the iPhone 4S and its long loading times, one could say this was a rather successful wager.

This remarkable achievement was made possible thanks to the very nature of the PlayCanvas editor, which allows the creation of optimized experiences with lighter elements, and therefore shorter loading times.

With this project, the team proves that there is a way to create mobile experiences with an online editor: an easy and efficient way. Using WebGL for 3D graphics and HTML/CSS for the user interface makes this editor very user-friendly.

And finally, this experience was built over the course of … a few hours! PlayCanvas allows multiple users to work simultaneously on a single project, which enhances productivity.


^{60 000 views over 24 hours}


A very positive engagement rate

But let’s look at the impact of such an experience, because this is what truly matters: WebGL isn’t just for show. It is a powerful communication tool, especially when used in conjunction with a platform that encompasses 40% of browser usage.




The fact that smartphones are still not taken into account when creating WebGL experiences is staggering. Even more so in light of the recorded feedback:

-  60 000 views over 24 hours;
-  Engagement time of 3.3 minutes on average;
-  Twitter engagement rate of 10% (whereas 0.03% is the industry standard);
-  Mobile and tablets make up for more than 20% of traffic.


^{A platform of choice for WebGL experiences?}


This project highlights the advantages of using WebGL when creating browser experiences for sectors such as the automotive industry. Better yet, it proves that mobile is a market to be conquered. In the years to come, thanks to an ever-evolving technology, mobile devices are sure to become a platform of choice for WebGL experiences. Being able to customize a 3D car on your mobile will soon be more a reality than a technical miracle. And according to PlayCanvas, it’s already the case. Just as we saw the development of WebVR on mobile, could this be the beginning of a new era for WebGL?