The MoviePass Quest
The campaign brief was quite simple. We wanted to offer a true experience for the user, tell him a story, immerse him in the center of this universe. Valerian’s universe is composed of two key elements : time travel and space travel. The story-telling is wrapped around these two elements: the goal is simple, find fragments of MoviePass through space and time. The adventure starts with the mission’s briefing. The user is, like Valerian, a space-time agent. The search process is simple, the user need to explore three planets, use a scanner to locate a MoviePass fragment and travel through time to find it. If you haven’t test the adventure yet, you can try it here. We had to work on several technical elements to achieve what we wanted visually : a rich and realistic universe.
The planets
The experience takes place in a four planets system, a main large planet and three small satellite ones. The camera angles and movements were approached in a cinematographic way to stage a rich and dense universe.
Atmospheric scattering
The light diffusion phenomenon in the atmosphere plays an important role in the rendering of a planet. Before going further, here is a definition of the scattering :
"Scattering is a general physical process where some forms of radiation, such as light, sound, or moving particles, are forced to deviate from a straight trajectory by one or more paths due to localized non-uniformities in the medium through which they pass. In conventional use, this also includes deviation of reflected radiation from the angle predicted by the law of reflection. Reflections that undergo scattering are often called diffuse reflections and unscattered reflections are called specular (mirror-like) reflections."
The solution to make the atmosphere is inspired by Sean O’Neil’s article featured in GPU Gems 2. It consists into 2 separate processes. Rendering the surface of the planet itself, and the visible halo around it.
In the GPU Gems article, a spherical mesh, back-face rendered, is used for the halo. Most of the scattering calculation is performed per vertex to reduce the GPU load.
This method helps make the atmosphere both from space and from the surface of the planet, but has two drawbacks :
- the scattering calculation is made on a lot of unnecessary vertex (right in front or hidden by the planet)
- the chaotic distribution of triangles around the edges of the sphere produces artifacts if the mesh is not sufficiently detailed
Our method replaces the spherical mesh with a conical disc. The disc is distorted by the vertex shader to fit the shape of the planet and provide an orthogonal surface to the camera. The vertex density remains stable whatever the viewpoint is.
This method helps make the atmosphere both from space and from the surface of the planet, but has two drawbacks :
- the scattering calculation is made on a lot of unnecessary vertex (right in front or hidden by the planet)
- the chaotic distribution of triangles around the edges of the sphere produces artifacts if the mesh is not sufficiently detailed
Our method replaces the spherical mesh with a conical disc. The disc is distorted by the vertex shader to fit the shape of the planet and provide an orthogonal surface to the camera. The vertex density remains stable whatever the viewpoint is.
The asteroids
Particles
It is essential to limit the number of draw calls, and to optimize the render process of each asteroid.
The main asteroid belt contains 8200 asteroids.
In our case, each asteroid is a vertex (drawn in GL_POINT) described by:
- an initial angle: the random starting position on its orbit
- a size
- dispersion: Set the orbit of the asteroid relative to a medium orbit
- an uvOffset
Each asteroid then needs to be lighted in a realistic way. A normal texture (world space) is used to simulate the surface of asteroid. For more variety, a sprite-sheet with 4 asteroids has been created.
Scattering
The scattering has an important place in the asteroids’ rendering. It simulates the gas and the dust particles to make a volumetric fog effect. The method used is inspired by the atmospheric scattering. Instead of a sphere, a torus, back-face rendered, is used.
For each vertex (A), we calculate the intersection point (B) with the closest torus surface, in the camera direction. The scattering is calculated and summed on multi samples between this two points, taking into account the position of the point in the torus. The nearer this point is from the center (where the gas density is highest), the higher the scattering.
On one hand, it’s important to calculate the projected shadow of the planets in the asteroid belt. On the other hand, lighting inconsistencies may occur when the camera, the planet and the sun are aligned. We don’t use shadow mapping because it’s too GPU expensive. The occluders are all spherical, so the occlusion can be directly calculated by the shader, with the position and the ray of each planet.
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 have made a special desktop version with full manual control of the planet system and mobile VR. (on desktop, use left button to rotate, central button with alt to move)
We hope you enjoyed the reading.
