Read time 3 min
After the HWO qualifications, our focus shifted to the 3D visualisation that was to be used in the finals. For the 3D visualisation we used the Three.js WebGL library. Our design goal was to go with a darker, Tron-like scenery with higher focus on the track and cars. This decision was advantageous to us because as darkness covered most of the scenery, we didn’t have to go into extensive lengths of adding additional scenery and geometry. Additionally, this made it easier to bring the focus of the viewer to where the action was occurring—the track and cars. However, adding many different light sources and high-polygon car models brought its own challenges to the performance.
For rendering the ground and the track, we used a single plane geometry with two different textures consisting of a diffuse, bump, and specular map for each. We used the 2D visualizer to render the shape and lines of the track onto two different canvases. They were then used in the fragment shader to both blend the textures together and adding color to the concrete which formed the race track lines and curbs. We rendered static light maps for the track and each car, which we then moved along the 3D models with uniforms. Additionally, we formed a height map using the 2D visualizer, which we then used in the vertex shader to add small height differences between the track and the rest of the ground.
Lens flares were added for each lamp and front and rear lights of each car. The brightnesses of the lighting and lens flares were configurable per camera so that the optimal settings could be obtained for each angle and position. The turbo effects consisting of blue light emitted from the exhaust pipes were made solely with lens flares.
We used real light sources very scarcely and relied mostly on pre-computed light maps and the lens flares for lighting. We weren’t using deferred rendering, so each additional light was quite expensive in terms of performance.
To make the visuals more lifelike, we added some particle effects for drifting, crashing and bumping. Each car had six different particle pools, with a total particle count of 3000 per car. For example, each wheel of a car had its own smoke emitting particle pool. This brought significantly more feel to the race as you could get a better grasp of the speed at which the cars were racing. The sparks that were emitted when cars bumped into each other brought an extra sense of detail to the visuals. They also gave the viewer an indication that the cars had, in fact, hit each other. While these effects were visually appealing, we wanted to keep them subtle; they could easily be spotted but wouldn’t be too in-your-face.
In the next part, we’ll focus on the car models themselves.
Other parts of Hello World Open – A Story in the Visuals series
“Hello World Open – A Story in the Visuals” is the story of the game that was built for the Coding World Championships. The series consists of five parts and it was written by members of the HWO technical team: Harri Salokorpi, Niklas von Hertzen, Teijo Laine and Tuomas Hakkarainen. The text was proofread by Eero Säynätkari.
Sign up for our newsletter
Get the latest from us in tech, business, design – and why not life.