# Thin Instance Hover Performance

**URL:** <https://forum.babylonjs.com/t/thin-instance-hover-performance/31569>\
**Category:** Questions\
**Created:** [June 21, 2022, 6:36pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569 "2022-06-21T18:36:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![LostVertex](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@LostVertex](https://forum.babylonjs.com/u/LostVertex)\
**Post date:** [June 21, 2022, 6:36pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/1 "2022-06-21T18:36:59Z")

</div>

Hello friends,

I am trying to improve the performance (FPS) of thin instances with mouse hover interaction. Here is a “hover bomb” I’ve created using two pre-existing playgrounds: [https://playground.babylonjs.com/#V1JE4Z#75](https://playground.babylonjs.com/#V1JE4Z#75)

I’m probably just not taking advantage of something in the API. Any pointers would be appreciated!

Thanks.

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [June 21, 2022, 6:54pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/2 "2022-06-21T18:54:39Z")

</div>

Hello,

You can use scene.onPointerMove for example so the picking is only computed when the mouse move, better than before each render ! See : [https://playground.babylonjs.com/#V1JE4Z#77](https://playground.babylonjs.com/#V1JE4Z#77)

---

<div class="post-metadata">

**Author:** ![LostVertex](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@LostVertex](https://forum.babylonjs.com/u/LostVertex)\
**Post date:** [June 21, 2022, 7:00pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/3 "2022-06-21T19:00:44Z")

</div>

Thanks!

I’d just done something similar with `scene.onPointerObservableAdd` (using `BABYLON.PointerEventTypes.POINTERMOVE`).

Although using either that or `scene.onPointerMove` increases FPS while the mouse is not moving, the FPS still drops significantly (60 → 14) when the mouse is moving about.

Any thoughts on improving perf there?

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [June 21, 2022, 7:10pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/4 "2022-06-21T19:10:29Z")

</div>

You can pick only when the mouse button is not down for example : [https://playground.babylonjs.com/#V1JE4Z#79](https://playground.babylonjs.com/#V1JE4Z#79)

Your FPS would still be low when mouse is not down but no one will notice it since there’s no interaction (a camera move for example).

You also probably could gain some more FPS on mouse move by [throttling the event](https://programmingwithmosh.com/javascript/javascript-throttle-and-debounce-patterns/#:~:text=The%20throttle%20pattern%20is%20more,minimum%20wait%20time%20between%20calls.)

---

<div class="post-metadata">

**Author:** ![LostVertex](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@LostVertex](https://forum.babylonjs.com/u/LostVertex)\
**Post date:** [June 21, 2022, 7:31pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/5 "2022-06-21T19:31:53Z")

</div>

Not checking when mouse is down is feasible - thanks!

> You also probably could gain some more FPS on mouse move by throttling the event

Maybe like so?: [https://playground.babylonjs.com/#V1JE4Z#80](https://playground.babylonjs.com/#V1JE4Z#80)

This seems to improve things. I’ve throttled to 100ms (60 FPS is ~ 17ms). Not sure if that’ll feel responsive enough if, say, I attempt to change the color of the hovered instance.

---

<div class="post-metadata">

**Author:** ![tanpopo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tanpopo/32/32025_2.png) [@tanpopo](https://forum.babylonjs.com/u/tanpopo)\
**Post date:** [June 22, 2022, 12:46am UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/6 "2022-06-22T00:46:40Z")

</div>

You can try to use GPU pick.

> [@GPU picking demo](https://forum.babylonjs.com/t/gpu-picking-demo/30507):
>
> I find that Babylon do not have built-in GPU picking solution. And in several topics, people mentioned it but without giving any PG. So, i am pleasure to share these PGs for those who need a guide: Instanced mesh case: Ray picking(64k instances, 0.7 million faces, 25 fps): [https://playground.babylonjs.com/#RC2IAH#62](https://playground.babylonjs.com/#RC2IAH#62) GPU picking(343k instances, 8 million faces, 60 fps): [https://playground.babylonjs.com/#RC2IAH#61](https://playground.babylonjs.com/#RC2IAH#61) Non-Instanced mesh case: Ray picking(27 meshes, 13 million faces, 30 fps): [ht…](https://playground.babylonjs.com/#681PBG#2)

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [June 22, 2022, 9:31am UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/7 "2022-06-22T09:31:29Z")

</div>

@tanpopo woooowww that’s great very well done !! I already had this idea but never took the time to make it 😛 !!

---

<div class="post-metadata">

**Author:** ![LostVertex](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@LostVertex](https://forum.babylonjs.com/u/LostVertex)\
**Post date:** [June 22, 2022, 1:01pm UTC](https://forum.babylonjs.com/t/thin-instance-hover-performance/31569/8 "2022-06-22T13:01:39Z")

</div>

> [@GPU picking demo](https://forum.babylonjs.com/t/gpu-picking-demo/30507/1):
>
> So, i am pleasure to share these PGs for those who need a guide

Thanks, @tanopo! This is great!
