This question comes up a lot in different variations - "My scene renders very slow, how can I improve FPS?".

There are a few reasons for that to happen. It usually involves either a high quality/complex or a large number of:

  1. meshes
  2. materials / textures
  3. features (shadows, post processing, etc').

What does Babylon.js offer?

Babylon.js has an internal scene optimizer that is wonderfully documented at this tutorial about the scene optimizer class.
In general, it asks for a target FPS and tries to solve known problems that causes slow scene rendering. The basic way of using it is:

BABYLON.SceneOptimizer.OptimizeAsync(scene, DEGRADATION_LEVEL,  
function() {  
   // On success
}, function() {
   // FPS target not reached
}),

where DEGRADATION_LEVEL can be one of the three:

BABYLON.SceneOptimizerOptions.LowDegradationAllowed()  
BABYLON.SceneOptimizerOptions.ModerateDegradationAllowed()  
BABYLON.SceneOptimizerOptions.HighDegradationAllowed()  

I recommend reading the tutorial to see how it works and what are the advanced ways of using and configuring it.

But there are certain things you can do on your own, especially if you don't like those "magic solutions" that you don't fully control. I will cover what can be done with JavaScript/TypeScript code and NOT what you can do within your 3D Modeling software.

Follow this post series:

  • Part 1 - Meshes
  • Part 2 - Materials (Coming soon...)
  • Part 3 - Features (Coming soon...)

Connect with me on Twitter or LinkedIn to continue the discussion.

I'm an IT consultant, full stack developer, husband, and father. On my spare time I am contributing to Babylon.js WebGL game engine and other open source projects.

Berlin, Germany