I’m working on a project involving a large GLTF city model in React Three Fiber, and I’m looking for the best way to optimize rendering. My goal is to render only the parts of the city that are visible and close to the camera. Specifically, I want my model to render fully only the sections that are within the camera’s view and close enough to the camera, reducing the load for distant or out-of-view sections.
I saw a video by @Anderson_Mancini about Three.js Regression: video. It seems very relevant, but I also want to implement something similar to Silent Hill’s effect, but without fog. I’m considering using a blur effect or something similar, where as the camera gets closer to a district, the location gets more detailed. The city view is from the sky.
Model Details:
A very large city model in GLB format with multiple buildings, structures, forests, and a sea.
Questions:
What are the best practices for implementing frustum culling or similar techniques in R3F for large models?
How can I dynamically load and unload sections of the model based on the camera’s position and distance to improve performance?
Are there any examples or libraries that facilitate this kind of partial rendering or level of detail (LOD) management in R3F?
Any tips or references to relevant examples would be highly appreciated. Thank you!
Hey Bro! Thanks for mentioning me here. So. If your city will be seen from above, Frustrum culling is not very helpful. You need to go with LOD. See an example here: https://interactive-map-nyc-neotix.vercel.app/. This is using LOD and Custom Shaders to achieve the best performance. React three fiber has a component for it: React Three Fiber Documentation
Thanks bro! These buildings were created in Blender and then exported as chunks or neighborhoods, which enabled me to use LOD and make different versions of each chunk. The last LOD level is a NON-MESHED state, where I simply remove all the meshes, to save draw calls.
This entire model has only 7MB . So it is totally possible to reduce the size of your model using the correct techniques. These are the techniques that I use: https://www.youtube.com/watch?v=vfWnsyWqhT4.
But let me tell you that just using this tool will not do the trick. You need to reduce and optimize the model manually to get the best performance. And also, creating the chunks and the LOD is something you need to do it manually.
If your project involves a real city, you can also use MapBox threejs integration with React three fiber. Here is an example that I did using it: https://dubai-dream.vercel.app/.
. So it is totally possible to reduce the size of your model using the correct techniques. These are the techniques that I use: 