How to Optimize Performance in Complex Babylon.js Scenes?

Questions
, , , ,
1

Hi everyone,

I’m relatively new to Babylon.js and have been thoroughly enjoying exploring its capabilities. However, I’ve hit a bit of a roadblock when it comes to optimizing performance in my more complex scenes. I’m hoping to get some advice from the community on best practices and techniques to ensure smooth performance.

Background:

I’ve created a scene that includes multiple dynamic lights, several complex meshes, and a few post-processing effects. While it looks fantastic, I’ve noticed significant drops in frame rate, especially on less powerful devices. I’m aware that Babylon.js is quite powerful and should be able to handle complex scenes efficiently, so I’m sure there’s something I’m missing or could be doing better.

My Current Setup:

  • Meshes: About 50 complex meshes with high polygon counts.
  • Lighting: 5 dynamic lights, including spotlights and point lights.
  • Post-processing: Using Bloom and Depth of Field effects.
  • Textures: High-resolution textures applied to most meshes.

Questions:

  1. Mesh Optimization: What are the best practices for optimizing high-poly meshes in Babylon.js? Should I be using level of detail (LOD) or something similar?
  2. Lighting: How can I efficiently manage multiple dynamic lights? Are there specific settings or techniques to minimize their performance impact?
  3. Post-processing: Are there ways to optimize post-processing effects, or are there certain effects that are more performance-friendly?
  4. Textures: How should I handle high-resolution textures to avoid performance bottlenecks? Is there a recommended resolution limit or a way to dynamically adjust textures based on device capabilities?
  5. General Tips: Any other general tips or tools within Babylon.js that could help with performance optimization?

What I’ve Tried So Far:

  • Reducing the number of active lights, which helped slightly but not enough.
  • Using simpler textures, which again provided marginal improvement.
  • Disabling post-processing effects temporarily, which improved performance but at the cost of visual quality.

Additional Context:

I’m developing this project as a part of a web-based interactive application, so maintaining visual quality is crucial. At the same time, I need it to run smoothly on a variety of devices, including older smartphones and tablets.

I would greatly appreciate any insights, resources, or examples that the community can provide.
Idioms Thank you in advance for your help!

Best regards,
Emily, UK

2

Difficult :frowning: Can you share your project (with access to the Inspector)? At least some sample screenshots showing the Inspector performance stats.

Also just to get the obvious out of the way: have you read through the perofrmance tips in the docs? Babylon.js docs

3

well this is just not going to happen, not in the way you expect atleast.

Fantastic visuals :

Real time rendering has become very advanced over the years but regardless, what always remains the same is that it still becomes rapidly expensive the more you expect to get out of it visually. No amount of optimization will change that.

Runs well on older devices :

If you want it to run smooth on a potato … forget about multiple real time lights hi poly mesh objects and forget about heavy post processing. You will have to resort to baking most of your textures , reducing their sizes , altlasing and shared materials to reduce draw call and all other related workarounds.

There is no easy win win here. Wecome to real time rendering

2 Likes