NanoGL Experiences for the Nissan platform

Article 007.

Nissan has revealed in 2016 the “special series” for the brand new Juke and a new version of the Micra. Each car is available in several trim levels and offers specific packs to customise your vehicle. For this occasion, DigitasLBi has come up with an experience that displays the cars in real time 3D directly on the Nissan platform : a simple concept, a clean UI, and an optimal realism. It’s an intelligent way to provide interactive content directly inside the brand platform or on external websites. The customer is closer to the product and can directly interact with it, change is color, turn around, manipulate it.

NanoGL

First of all, a few words about NanoGL. NanoGL is our in house WebGL PBR rendering engine. NanoGL is used for all of our productions and gives us the ability to make amazing experiences compliant with desktop as well as mobile with a ultra high quality, stability and framerate. It provides an Image based lighting for realistic lighting, an HDR pipeline for post processing effects, spherical harmonics for diffuse illumination and a lot of other features to enhance our experiences.

Loading screen

The first challenge for this project was the loading step. The 3d models’ assets weight is quite heavy : nearly 30 Mo. We didn’t want to display a classic loading screen, so the idea was to show the lightest possible interactive loading screen.

As we had to display something quickly, we exported a sequence of dots representing the different curves. The line drawings (GL_LINES) are done using a fragment shader based on several random parameters : size stroke, speed, color, and thickness. To get a better 3D rendering, we modulate the opacity of the lines according to their distance to the camera.

To optimize the asset weight, we only load the right part of the car from a binary file that we mirror on runtime. The overall weight of the loading screen is only 27ko with this solution!

Appearance

Once we have loaded the assets, we reveal the real vehicle. The transition is managed in three steps.

By manipulating the depth test, it’s possible to choose whether a drawing will be executed or not based on the previous rendering and specific conditions. A first rendering pass is done without the colors (colorMask(false, false, false, false)). This drawing call will write in the depth buffer, giving the display indications for the next drawing call.

A texture is used to define the mask shape of the model. This texture is projected according to normals and the positions of each vertex. The mask limits the drawing parts of the model thanks to a discard in the fragment shader freeing the depth buffer allocation. Then the draw call is made when the depth buffer is written by the first rendering.

The car is then rendered and finally the white triangles are rendered based on the mask texture.

A light vertex displacement is made on each of the three renderings.

For a full screen experience, check it out here !

We used several optimization tricks to render the experience at a constant frame rate, even on mobile. All this was possible using our custom in-house WebGL micro framework NanoGL.

We are more than happy to have win a FWA with this interactive brand content.

We hope you enjoyed the reading.