Hey guys,
I’ve been working on this scene for a while. Here it is: https://oguzeroglu.github.io/ROYGBIV/demo/villeneuvedascq2/application.html
This scene works at 60 FPS for both mobile and desktop devices (I’ve tested with my MacBook Air, Samsung and iPhone). Here are some optimization techniques I’ve used to make that happen:
-
Textures are packed & compressed to KTX format. Here’s the packed texture for this scene:
-
I’ve written a Quake style shadow baker (light maps). This technique casts a ray from given surface to light position to check if there are any blocking objects. Then writes results to a texture. All the shadow textures are then packed & compressed again. Here’s the shadow texture for this scene:
Note that this does not happen in real time and is a pre-computed process. I’m not using Three.js Raycaster. I’ve written another one optimized for my engine. I think I also posted the library here which finds nearby objects in constant time. I’m using that library for efficiency: http://github.com/oguzeroglu/nearby. I also do this in WebWorkers to keep the page responsive since this process takes couple of hours. -
All rooms are merged -> Each room is a single mesh. I also defined some areas, and which objects should be rendered/should not be rendered in given area.
-
Lights are baked as well. I directly modify the color attribute of meshes. So there’s no light calculations happening in real time.
-
For the color of lambs (a little detail you may notice), I’m using emissive maps & emissive colors.
Feel free to hit me up with feedback & questions. Big love for this community <3