News

Learn to load a WebGL 360-degree experience

The Stinkdigital design team describes the loading principles behind rendering Lacoste’s 360 experience

Lacoste360people

The Stinkdigital design team describes the loading principles behind rendering Lacoste’s 360 experience

Lacoste360people

1. Loading optimisation

For this project, Stinkdigital developed a custom cascading loading method to ensure a seamless experience. First the UI elements are loaded and then the feathers will appear during the loading animation, before finally each model picture loads up. At this point, the user is free to enter the experience while the frames that are used in the character animations are loaded. For devices with more limited performance, only one frame is used for each character.

2. 3D environment

The 3D environment is generated using WebGL (khronos.org/webgl) during the loading and rendered into a renderer <canvas> element. Each model within the scene itself is positioned so they look like they are interacting. The feathers are randomly added to the sphere and in order to add depth to the snow globe, the feathers and models are dispatched on different layers around the scene.

<!--The renderer canvas element within which the WebGL secene appears-->
<section class="snowball-manager">
<div class="snowball">
<canvas class="renderer" style="width: 2560px; height: 885px;" height="885" width="2560"></canvas>
</div>
</section>

3. Realistic exploration

The aim on this project was to make the user feel like they were inside the snow globe. Each animation was therefore carefully scripted to create smooth zoom animations. A custom-made motion blur effect was added to the WebGL framework to add more realism while users moved through the experience or shook their mobile phones.

4. Sprite sheet workaround

A custom sprite engine was built to ensure assets were as light as possible. The first sprite sheet holds only the first frames of each character. Secondary sprite sheets containing all the frames of the animation are loaded next. A WebGL snippet was also added to allow the generation of interframes on the go where necessary to fill the same frame rate with additional frames.

5. The feather engine

As the feathers are central to the experience, an engine that responds to the smartphone’s gyroscope was created. According to the strength of the motion, the feathers move differently. Shaking the phone will propel the feathers around the scene randomly.

<script>
//Global Vars showing flags initialising vouchers
var Vars = {
…
vouchers : {
feather : true,
crocodile : true
}
}
</script>
×