[REACT] Freeze / Unfreeze Optimization Issues

Hi Community!
Have been having a lot of fun working with and learning Babylon.

The issue:
On my scene, I have a ton of clone meshes to which I apply a standard Material created in Babylon. To achieve better performance I added a freeze/unfreeze loop.

But now when I hover in/out of these clones and change their material, sometimes they disappear and reappear a few frames afterwards…

My code in React is just one call to several regular babylon.js files.
One of which dedicated to optimizations which only receives a reference to the scene.

Here’s a fully functional working PG just to illustrate the structure / steps I’m taking…

I read something about materials needing to be unfrozen but I’m confused and not sure what to look into.

Hoping someone could give me some pointers here.

Hello! Happy you’re having fun!

For this kind of scene, using Thin Instances Thin Instances | Babylon.js Documentation (babylonjs.com) instead of clones is much more performant :smiley: and you can use the same material for all of them so you don’t need to worry about freezing

1 Like

Hi thanks!

I chose clones so it would be easy change material, easily have transparency and objects may have different materials from parent mesh.

Thin Instances are awesome though :slight_smile:

You can change most of the characteristics of a single material with thin instances through :slight_smile: Colors, textures, transparency, all can be changed and still use thin instances

1 Like

I didn’t have such unrestricted view of thin instances but doing so may require a lot of work, never the less, I will take a deeper look it.

However, this issue only appeared after I added the freeze / unfreeze method that pushed FPS to 60 and is working fine, except for some materials which take longer then others to update.

An example:
I hover over A and then B. B refreshes quicker than A which is not rendering.
Happens with object fully in frustrum some are clones, some are original and unique (created with MeshBuilder).

If I comment that code section the issue is no longer present but runs slower.
This playground has more drawcalls then my project and this issues is not present.

I don’t suspect its a performance issue I think it might be something that gets turned off.

So, to reformulate:
What might I be missing in my freezeActiveMeshes() and unfreezeActiveMeshes() loop? Is there something else I should add to the loop?
Or before / after the loop?

Oh, I’m using Babylon version is 5.34 (just in case it matters)…

Yup, the Thin Instances part is more of a general recommendation, because your scenario seems pretty suited for it and it would improve perf further in your app :smiley:

But about the issue with clone, does it only happen in your React app? I’m testing here on a laptop and I didn’t see the spheres disappearing.

I’m also going to bring @Evgeni_Popov here as he probably knows what’s going on

1 Like

Thank you very much!

On the playground it is not ocurring for me neither.

On the React app happens when the freeze / unfreeze loop is in effect.
Objects hovered over are even using the same material.

We merged this PR in 5.43.0:

It could help for your problem, so are you able to test with 5.43.0 or a newer version?


Hi @Evgeni_Popov thanks for stopping by :wink:

I will try to give it a go as soon as possible.
Hoping, some time in the next couple of weeks.

Will come back to give feedback on how it turns out.

Hi there again! :wave:

So I updated the Babylon version and in console it outputs:
“Babylon.js v5.53.0 - WebGL2 - Parallel shader compilation”

The problem still happens…
Re-testing the above PlayGround was able to replicate the issue and noticed that it mostly occurs when you have the console open in the browser…

On my React App closing the console the issues is less frequent, only happenning on a particular type of object… Which I believe may be due to condition checking.

So in the end… …Will be back later with feedback :slight_smile:

I guess it might be really hard without a repro, anything you can share to help ?

1 Like

Case closed!

In the above playground, if you hover madly over any object with the console closed:

no problem at all.

If you open the console (Ctrl+Shift+J) on Chrome, Microsoft Edge and keep on hovering:

This can happen.

On my React app it is the same… using the same browsers…
End users don’t use the console so I don’t consider this an issue.

And then, I also found a bug in my coding on one specific object and case which didn’t help either, so once I fix the bug everything is OK.

Thanks to all!

1 Like