There was multiple challenges in this project. A first is that we had to create a series of 9 different scenes in WebGL. That number requires a specific organisation of its own, but on top of that, each scene lasted several minutes, and was populated with a very high number of polygons.
We therefore had to be very mindful of optimisation.
In order to have such photorealistic environments, we had to make extensive use of light maps baking, which write all lighting information inside textures, and makes sure that the GPU has less work to do when loading the experience. We also removed as many polygons as we could, while making sure that the environment remained as beautiful as possible.
Another important aspect was water. Each scene shows a body of water, whether it is a small pond or a large ocean. And none of the existing water solution would stand up to being seen for such a long duration. So we mixed 2 solutions, one from the webgl library threejs, and another from shadertoy, and we took pieces of each algorithm to get the best of both worlds.