Challenges
Physical sky shader optimization
While the physical sky shader can create spectacular results, it is also quite demanding on the gpu. In order to optimize the performance, whenever the sky gets to an inert state, instead of rendering it with the shader in every frame, I create a snapshot of it with a cube camera and use it as a texture on a skybox. This way the sky is still fully dynamic, but 99% of the time it doesn't depend on the performance heavy shader.
Custom fog shader
The default Three.js fog only supports a flat color. In my case it wasn't sufficient because I wanted the meshes to fade to the color of the sky. In order to achieve this I patched the default shaders with a custom fog logic, that uses the cube texture of the sky rendered with a cube camera.
Dual GPU laptops
One of the biggest challenges I found impossible to completely overcome was the case when in dual GPU laptops the WebGL context gets only access to the integrated, less powerful GPU. In some cases this is sufficent, but most of the times this renders the demo completely unusable. The WebGL context has a property named powerPreference, which hints to the user agent what configuration of GPU is suitable for it, but unfortunately in WebGL 2.0 it is either not supported by the browsers or just gets ignored by the system. The only thing I could do is detecting bad performance during runtime and notifying the user about the possible causes.
Infinite procedural terrain generation with instanced meshes
I created a fairly complex procedural terrain generation system, but the demo only uses a fraction of it. The full system is capable of generating an infinte but consistent terrain, placing objects with density, feather settings using simplex noise as a base. It can handle manually positioned elements gracefully, giving them priority over generated ones. For repeating objects, such as trees and rocks it uses geometry instancing, that gives a huge performance boost.
Complex Animations
In the first, scrolling part of the site syncronizing the 3d animations (camera movements, sky, dof, other special effects), css animations, svg animations and sounds presented a pretty big challenge, that was overcome with a robust state based animation system, that is also able to seamlessly hand over the control to the freeflight mode, where the values are determined by user interaction.
Thank you for taking an interest in my work!
