I created a simple scene that includes terrain and some trees. The terrain is Planegeometry, the trees are instance meshes of size 1000, there’re 13 types of trees. I only put about 200 trees in the camera range, the others I positioned them very far away, out of the camera range. As you can see in the video, each frame took somewhere about 40-70 ms. If I don’t add trees, it only took 10-20 ms for each frame. So whar if I want to render a more complicated scene, like a woods, it will be slower. How do I improve the performance?
I created a simple scene that includes terrain and some trees. The terrain is Planegeometry, the trees are instance meshes of size 1000, there’re 13 types of trees. I only put about 200 trees in the camera range, the others I positioned them very far away, out of the camera range. As you can see in the video, each frame took somewhere about 40-70 ms. If I don’t add trees, it only took 10-20 ms for each frame. So whar if I want to render a more complicated scene, like a woods, it will be slower. How do I improve the performance?
1 Like
If you are properly using instancing, I suspect the number of draw calls should not be the issue in your application. So there is potentially a bottleneck in the fragment shader. With what type of material do you render the trees and how complex is their geometry (e.g. face count)?
Besides, trees that are far away don’t need to be detailed as the ones in your focus area close to the character. So using some sort of level of detail mechanism would surely help for such a use case.
1 Like
Display far trees as pointMaterial, or instances of squares with texture of tree and fixed rotation to player by Y axe - need change vertex shader. And also can use imposter.
I’m not sure how to calculate “face count”, the vetices of a tree geometry is around 3000 (length of position attributes). And the material is MeshStandardMaterial. So I guess I will have to use low poly object for far away objects and terrain, it sounds really complicated if I need to implement it by myself.
Mind if I ask another question? Is there any existing algorithm, packages or code that can reduce the vertices in a geometry, make it less detailed?
I tried to replace all Material to pointMaterial, it didn’t have any significant impact. Is pointMaterial cheaper?
PointsMaterial is not intended for meshes. If you need a lit material, give MeshLambertMaterial a try. Otherwise MeshBasicMaterial will be even more performant but unlit (probably not what you want).
Side note: MeshStandardMaterial is a PBR material and no good choice if you want to render flat shaded trees with NPR-style. MeshLambertMaterial and even MeshPhongMaterial are better in this context.
I don’t want to discourage you, but complex scenes are a very complex affair. I wanted to load my mars on my site at the weekend, so I could have demonstrated what’s possible with 3js, but unfortunately that doesn’t work because it’s a shared server. Because of the complex scenes and the huge amounts of data, I need my own server because I need to configure it specifically (cross-origin isolation) and unfortunately that costs up to 50 euros a month 
You need quadtrees for the terrain, which saves a lot of resources. Using the same vertex density for the terrain in the distance as in the close range is a waste of resources. You would then have the vertices saved in the distance available for more trees in the close-up area.
I would load new trees that should be loaded by movement with workers to relieve the main thread.
I would have each species of tree in different levels of detail in the database. For close, medium and long range.
I have dealt with the subject in great detail because I really wanted a true-to-scale Mars with real landscape. I wanted to be able to fly to the surface from any distance and move around freely on Mars. It took me over a year to do this.
I recommend that you familiarize yourself with quadtrees and workers, because unfortunately complex scenes can only be realized with a corresponding amount of effort.
Professionally, nothing has ever challenged me as much as my own project with complex scenes.
Your project seems cool, looking forward to experience it.
If it really that time consuming like you said, over a year, I might just use a very simple scene instead. Afterall a complex scene isn’t my primary focus. However I just found this channel on YT 3D World Generation: #3 (Quadtree & LOD) - YouTube. It could be exactly what I need, I’ll spend some time on it and see how far I can get.
Simon dev has very good tutorials. I’ve gone through all parts of it. I analyzed his code in great detail to understand everything.
I learned a lot from simon dev’s tutorials. Part 10 of his procedural world series was the basis with which I started my project. Admittedly, this is not a trivial matter. One should already have a good understanding of vectors and matrices and know some mathematics as well as spatial imagination.