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

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?


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

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.

1 Like