4000 meshes in scene and mouse selection indicated with mesh/material color

[thoomaash]

Hello,

I am using babylonjs to implement a 3D visualizations inside my app. The app allows a user to define a scene in a 2D view. The scene is static in the 3D view - meshes cannot be moved, edited etc. A user can interact with objects using mouse - selection by click, hover on mouse move, double click to open in another view. In my opinion the most natural way to present that something is happening when user moves mouse is to change meshes’ colors.

Everything works well (50-60 fps) when there isn't much meshes – 300-400. Unfortunately, performance drops down when the scene becomes more complex – about 4k meshes.

I’ve already tried improving performance by using:

• mesh instances (cause a lot of them have the same texture and vertex data) - unfortunately I haven't found a way to color a mesh instance on mouse selection. I found a method set/updateVerticesData but VertexData.ColorKind cannot be updated when mesh instances are used (an error occurs when I try to set argument makeItUnique to true)
• mesh clones - it works like I expected because clones do not share material, but the performance problem still exists
• solid particle system - when I started implementing and saw the results I was amazed and thought that I found a solution. But then I realized that I cannot use particles as parents for other meshes. Am I right?

I’ve prepared a playground showing my problem. On the left-hand side of the scene (3 boxes) is my real use case. It shows how I use mesh parent system. On the right-hand side there are rendered boxes that represent objects in my scene.

https://playground.babylonjs.com/indexStable.html#U0KFSU#5

I am afraid that I am bound to CPU due to having a lot of transparent textures and a lot of meshes. When I was profiling my scene a lot of CPU time was spent on recognizing which meshes are active (I freezed activemeshes on the scene by calling scene.freezeActiveMeshes()). Now i get around 12/13 FPS (measured with Chrome DevTool/Rendering and FPS meter feature), CPU usage (in windows task manager) is around 35%, GPU usage (in windows task manager) 19%.

Is there anything else I can do to have at least 25-30 FPS and still react to mouse operations?

Thank you in advance for any suggestions ?

[JohnK]

Hi @thoomaash and welcome to the forum. I am on a mobile currently and so am not sure how helpful my suggestions will be as PG is taking to long to load. I am not sure how you are using the parent child relationship. If you are moving or rotating the parent and expecting the child to move relatively then I dont think SPS will help. On the other hand you could relate a particle to a mesh using the particle id and the mesh id. That way on picking a particle or mesh you can make changes to the linked mesh or particle.

 

[Guest]

Some random ideas:

- mesh instances (cause a lot of them have the same texture and vertex data): This is the best option. You can still use a dummy mesh replacing the hovered instance (turn the instance off, move the dummy mesh, make it as you want and restore the instance when mouse leave)

- SPS is also really great. Can you tell us more why you need parenting? As JonhK said, there are also ideas here to explore

[thoomaash]

Thank you Deltakosh and JohnK for ideas.

21 minutes ago, JohnK said:

If you are moving or rotating the parent and expecting the child to move relatively then I dont think SPS will help

Yes, it is exactly how I use it. 

8 minutes ago, Deltakosh said:

SPS is also really great. Can you tell us more why you need parenting?

On my scene are objects that can be nested. User can freely assemble various objects, some of them have spaces to which you can put more objects - a lot of objects have modular structure. The simplest example is a cabinet, to which we put shelves, arrange items on the shelves. At the moment of cabinet rotation i want everything inside to be rotated as well.

19 minutes ago, Deltakosh said:

You can still use a dummy mesh replacing the hovered instance (turn the instance off, move the dummy mesh, make it as you want and restore the instance when mouse leave)

Probably this is a great idea. I will have to test if switching dummy mesh with instance is fast enough to avoid blinking.

[thoomaash]

Now i get about 25 FPS (10 more) with instances and huge improvement on draw calls (4000 -> 350 draw calls).  Camera movement looks much better now.

There is one more problem in my scene which result from my app logic.

Objects on scene that has the same texture and mesh can have initially different colors. Pure performance still exists because i can only group for instances objects by color.

Is there anything i can make for performance improvements in this specific case ? For example: can i set color on mesh instance or this can be only achieved on mesh clone ?

[JohnK]

2 hours ago, thoomaash said:

For example: can i set color on mesh instance or this can be only achieved on mesh clone ?

Only clones can have a different color to the original.

[thoomaash]

41 minutes ago, JohnK said:

Only clones can have a different color to the original.

Ok, thank you for help. In that case, i have nothing else but a mesh cloning solution. 

 

[JohnK]

You can set a particle to be a parent to other particles https://doc.babylonjs.com/how_to/solid_particle_system#particle-parenting . Don't know if this helps as I am not clear on your data structure. Must find time to view your PG on a PC.