onPointerMove and e.intersectsTriangle events take a lot of time when hover over the huge Ribbon

Questions
1

Hello!
Unfortunately, I can’t share anything from my project. So, I’ll try to explain what is the issue I can’t solve.
I have a Ribbon which I’m creating like this:

groundRibbon = BABYLON.MeshBuilder.CreateRibbon("groundRibbon", { pathArray: paths, sideOrientation: 1, colors: colors }, scene);

It is huge. I have around 9 million points. And it performs pretty well. I have a very powerful machine and FPS >30.
But the FPS drops to 5-7 when I start just moving the mouse over the Ribbon.
I’m attaching the screenshots of the Chrome performance tab so you can see what actually happens.
Looks like e.intersectsTriangle method gets called every time the pointer hovers over different triangles on the ribbon. Becasue of the density of triangles it affects performance like crazy.

I don’t have ANY on hover events attached to my scene or to any JS that I have in the browser.
Is there anything I’m missing? What are those events? Can I disable firing those anyhow?

Thanks

Screenshot 2021-02-04 103822
Screenshot 2021-02-04 1038222669×1282 168 KB

2

This is the pointerMove event triggering. For pointer selection and “mesh under pointer” detection (probably also changes your mouse cursor).

You can disable it per mesh using mesh.isPickable = false , which will remove it from the search loop.

If you do need pointer events on this mesh, you will need to optimize this mesh or maybe separate it into diferent meshes, otherwise you will get the performance hit again.

1 Like
3

Appreciate your time and help here @RaananW.
Yes, you are right, it actually not happening with mesh.isPickable = false. So that’s already a solution :slight_smile:
Unfortunately, I need pointer events on this mesh, but the good thing that isPickable is a dynamic field. So I will enable it when needed.
Thanks!

1 Like