Im working with PixiJS 5.2.1 - WebGL 2 creating a hexgrid tile editor.
The grid is composed of smaller segments of 'hexagon shaped' grids of hexagons.
Essentially, my current testing environment is made up of 36 individual hexagon grids that make up the larger grid.
Each sub grid is composed of ~200 hexagons.
Each hexagon is a interactive button.
Here i ran into some performance issues, when moving the mouse over the grid.
When im not interacting with the scene, i have a stable 60 fps, but i dip down to ~20 fps when i move the mouse.
I have taken steps to improve the hit detection, by adding two layers of containers with circle hitareas.
First the 36 grids got their own circles, then each och the ~200 hexagons inside get their own circle, before the hex shape is hit tested.
So my worst case is:
36 circle tests with 3 hits.
~600 circle tests with 3 hits
3 hexagon tests with 1 hit
When i reduce the number of subgrids to 19 the performance is greatly improved, now, with the same worst case i dip only to ~52 fps at most.
To me this is very strange, it should only be 17 more checks when going from 19 subgrids to 36, but it looks like more is going on.
Is there any behavior in pixi related to interactive buttons that i may have missed that would cause this?