Hey everyone,
I’ve soft-launched my game, and I’m experiencing some performance issues. Most of my players use Chromebooks (low-end PCs), but even on my MacBook Pro M3, I notice significant CPU spikes and FPS drops from 120 to ~40-50, with very high volatility.
The game supports up to 10 players per match, and I’ve implemented object pooling for particles, static objects, etc. Here are some optimizations I’ve already applied:
autoClear: false
autoClearDepthAndStencil: false
skipFrustumClipping: true
skipPointerMovePicking: true
pointerMovePredicate: js/undefined
pointerDownPredicate: js/undefined
pointerUpPredicate: js/undefined
constantlyUpdateMeshUnderPointer: false
Additionally:
• I’ve frozen the world matrix for all static objects (mainly map objects):
• I’ve also frozen the materials for all static map objects.
I’m looking for guidance on further optimizing my game. You can check it out and use Babylon.js’s inspector via the DEBUG option (click the green button in the top-right corner):
Any advice or feedback would be greatly appreciated!
Link to game in dev mode: https://wizardmasters.io/?dev
Some stats:
1 Like
Hey there! and good luck on your endeavor
In case you missed it, we have this great ressource to start with:
Optimizing Your Scene | Babylon.js Documentation
1 Like
Thanks! I followed the patterns here, but I probably need more and might be missing a couple of important things. I didn’t use scene.freezeActiveMeshes() because it breaks animations and requires a lot of effort to unfreeze/freeze materials, animated models, etc. Not sure how important this is though.
1 Like
In that scene I have 2000 meshes but most of them are set enabled to false, like %90 [125 active meshes available] of them (static map objects like walls, floors etc) and I’m merging meshes in order to reduce draw call. Most of the static objects have static physics body, I guess it won’t cause an issue? Most of the time is spent on mesh selection according to Inspector. It’s still odd because most of the meshes are disabled.
that sounds like great to me honestly. The best thing to do now is to run a profile
I did a quick one and this is REALLY GOOD mate!
Overall you spend 5ms on my computer per frame. Hard to beat 
A typical frame looks like this:
You can see who are doing what but man, with 5ms per frame there is not a lot you can update
This is honestly a very good job!
3 Likes
Thank you for checking it out! I think your computer is very powerful, which is why you’re not experiencing any issues.
From the profiling image, I can see you have 5ms per frame in idle mode, but we need to check the performance when the character runs, jumps, casts spells, etc.
Also, I’m testing the game in battery-saving mode on my Mac to simulate a low-end PC, where I often experience FPS drops.
Many Chromebook users are complaining about lag, so I need to apply more optimizations.
You guys have any inputs? @sebavan @Evgeni_Popov
The JS side is already very good, as @Deltakosh said, I’m not sure there’s much room for improvement here!
As for the GPU side, I did a capture with Spector, and here are my observations:
- a procedural noise texture (256x256) is generated for each frame: do you need to regenerate a new one for each frame? If not, you can set its refresh rate property to 0 to generate it only once.
- you’re using a glow layer, but it seems that no objects are added to it? Or at least, in the two captures I made, no objects were drawn to this layer. If you don’t need it, you should remove it, as blur passes are still performed over the empty texture. If you do need it, perhaps you can reduce its size? The default ratio is 0.5 (property
mainTextureRatio in the effect layer options), you can try a smaller value to use smaller textures.
- The stencil is activated. If you don’t need it (I think only the highlight layer needs it in Babylon), you should disable it, to save a little GPU / perf memory.
- You’re using PBR materials. I don’t know if you really need the materials to be PBR, but if not, you should use standard materials, as they are lighter for the GPU.
- You use a lot of particle systems. This could be a (the?) weak point on older/less powerful computers, as they are alpha blended and consume more bandwidth than opaque geometries. I don’t know what’s behind the graphics quality parameter, but if you don’t already, you could reduce the number of particles / remove some particle systems by lowering the parameter.
- Since you use a lot of particle systems, if you don’t already, try using GPU particle systems to save CPU time.
Note that you have a bug in your shockwave post-process, you’re not setting the noise texture correctly (perhaps you forgot to add noiseTexture to the list of samplers when you created the post-process?), which means that the texture that is passed on is wrong (in my tests, it was the GUI texture that was passed on as the noise texture).
What does “lag” mean to these users? It could be a lag when they shoot or see other players moving, which means the problem is more network-related than graphics-related.
All in all, you’ve got a great game!
2 Likes
a procedural noise texture (256x256) is generated for each frame…
I did not know that I was generating for each frame 
you’re using a glow layer, but it seems that no objects are added to it?
I’m using it only for one mesh, probably I can disable it!
You’re using PBR materials…
I think it’s coming from the glb import, will try to fix this.
You use a lot of particle systems…
Yeah, I know it’s a lot - but game needs lots of different particles, but I think there should be room for improvements, reducing capacity etc.
try using GPU particle systems…
Will try that but did not have time, there are some differences between CPU and GPU particle I need to cover that cases.
Note that you have a bug in your shockwave post-process…
Had no idea, will check that out!
What does “lag” mean to these users?
They mean the FPS is low and can’t play smoothly.
Thank you so much for the detailed response, it means a lot! I really appreciate it!
I’ll try to fix the issues, and post an update asap!
1 Like
Yes, unfortuntaely, on low spec machine, avg 20fps but lag spikes down to 8. When switching to Nvidia GPU avg up to 30fps but still lag spikes.
I disabled a bunch of features via Inspector like particles, postprocesses and skeletons. Also, reflection, refraction and opacity channels. Disposing all materials. No changes.
Probably poly count?
What’s the CPU timing in the Statistics tab where you disable everything? Is it below 16.6ms?
1 Like
I’m using Babylon.js in ClojureScript, which uses immutable data structures as its core data structures. I thought it might be causing the CPU issue by triggering garbage collection too often, but I didn’t notice much in the profiling. Maybe I missed something. Its language extension is .cljs
I think it is the poly count (see below; esp scene 2). I wonder if instances wouldn’t be better because you don’t see the entire level all the time. Also LODs might help: there were some high density areas in the wireframe.
Test scene 1: the start screen where it says “click to connect” (there don’t seem to be other players around). Inspector open.
Before:
Frame: 37
Inter: 20
GPU: 28
After:
(-) Particles
(-) Postprocesses
(-) Render targets
Frame: 21
Inter: 6
GPU: 22
(-) Anims
(-) Physics
(-) Collisions
(-) Fog
(-) Lens
(-) Lights
Frame: 16
Inter: 10
GPU: 22
(-) Proc Tex
(-) Probes
(-) Textures
Frame: 15
Inter: 8
GPU: 20
(-) Shadows
(-) Skeletons
(-) Sprites
Frame: 14
Inter: 9
GPU: 20
Scene 2: Start screen where it says “Click to join”. I can see the player character now. N.B. It is a different screen (was “click to connect”)
Before:
Frame: 12
Inter: 16
GPU: 23
After:
(-) Disabling level meshes
Frame: 11
Inter: 5
GPU: 10
1 Like
@Joe_Kerr Poly count is 200k, is it too much? I honestly don’t know if it’s a lot or okay. Here is the inspector data you can click the green ‘Debug’ button in the game.
Thanks for the reports!
The GPU is quite high even when there’s nothing rendered anymore, it looks strange…
It does not seem too high to me, but I don’t have any experience with low perf devices, so who knows… I don’t know if it’s possible, but it would help a lot if a performance snapshot could be recorded with Chrome on such devices.
yes exactly, let’s get a profile on the low end machines to see what is slowing the rendering down
You mean like so?
Trace-20241207T185424.zip (1.7 MB)
Let me know if you need different views.
Beware though: I am having trouble re-creating scenes. This time there were people running around and I was at a different position than last time.
@Joe_Kerr @Evgeni_Popov I just updated the site with optimizations mentioned above can you check this again please? Also clear the cache to get the newest version.
It’s hard to compare because it’s not the same level, but it’s still very fast on my computer…
1 Like
Looking better: seeing 20-50fps; avg ~30fps while running around and shooting. The lag spikes are gone (that is the important bit).
But, as @Evgeni_Popov, pointed out. This is a completely different level and therefore not suitable for a comparison. 
If you want to test performance, you need a dedicated scene that is always the same when you load it (ideally with zero user input; everyhing automated).
One other thing to keep in mind: Do you want to target low spec machines at all? Who is your target audience? What is their likely setup? You might as well conclude that the costs (time for performance optimisation) exceed the benefits (e.g. if only 1% of users experience lag spikes…).
2 Likes
