I am working on a project where I need to render complex 3D models in real time using Babylon.js. While I have made significant progress; I am facing challenges with performance; especially when handling detailed meshes.
The models I am working with have a high polygon count. They are essential for the visual fidelity required in the application, but they are causing noticeable frame rate drops.
I have implemented Level of Detail (LOD) and used mesh simplification techniques, but the improvements are still not sufficient for a smooth experience across different devices.
Additionally, I have experimented with different material optimizations, such as using simpler shaders and reducing texture resolution, yet performance is still suboptimal.
The project needs to run on a range of devices, including mid-range mobile devices; so I am particularly concerned about ensuring it’s optimized well for lower end hardware.
Are there specific best practices in Babylon.js for handling and optimizing complex meshes that I might have overlooked? Any tips on balancing visual quality with performance?
What advanced optimization techniques could be applicable in this scenario? For instance; would using Web Workers for parallel processing or GPU instancing be beneficial in my case?
Hi and welcome to the Community,
I believe you’ve come to the right place to ask for this…however, since it’s friday and the Team is partly in NA, you will eventually need a bit of patience to get the most accurate answers.
I’m no performance specialist, essentially a designer, so all I can say about this might be just kind of ‘high-level’. The other thing is that without a PG (playground) and without a sample of a model and the context, it will be hard to provide with accurate feedback on where you should start with the optimization process.
High level, what I can say is that if your model is (as you say) very detailed and high-poly + you’re targeting a wide range of devices from low-end to high-end, probably you should consider using already a different source, detecting the device and OS.
I may be ‘old-school’ for this but my moto is that an inappropriate source even when undergoing a number of transform operations will still remain an ‘inappropriate source’ flavored with some pre- or post-.
Again, not sure anyone will be able to answer this without knowing a bit more about your project.
So far, you’ve been writing about the size of your meshes/poly count. And you mentionned you’ve used LOD. I don’t think that’s enough to determine whether this technique will really help towards your objective.
Again, not a performance specialist (so you should wait for the others to reply). But as far as I know and aside from the scene optimizer and of course the ‘Performance Viewer’ from ’ The Inspector’, I wouldn’t know of any other tool that’s specific to BJS.
Usually, the common tools for measuring performance in WebGL/WebGPU would apply. At least, as far as I know.
Again, welcome to our Community and if by any chance you could set-up this PG, I’m sure it will help you get faster and more accurate replies.
Meanwhile, have a great day
