2. Instancing
The particles and waves representing the sea are both instanced using a tile system. As the camera moves, the tiles move accordingly, allowing to draw only whats currently visible in the camera frustum.
4/9
The particles and waves representing the sea are both instanced using a tile system. As the camera moves, the tiles move accordingly, allowing to draw only whats currently visible in the camera frustum.
4/9
Comments
Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution.
5/9
6/9
To get the best performances across all devices, I had once again to come up with creative ideas.
I wrote a helper that constantly watches the FPS over a given period of time and use it to set the quality of the scene, from 1 (poor) to 10 (excellent).
7/9
8/9
I hope you liked this little technical breakdown. Let me know if you have any questions.
Also, I'm available for freelance work so hit me up if you've got any #webgl or front-end needs!
https://museedelaplaisance.com/
9/9