search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
2.03k stars 301 forks source link

Performance issue for cursor events on 3d polygon geometry. #32

Closed knackstedt closed 1 year ago

knackstedt commented 3 years ago

Describe the bug Cursor movements triggering polygon expansion via .onPolygonHover causes significant delay when animating multiple polygons at the same time.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://globe.gl/example/choropleth-countries/'
  2. Quickly pan cursor over multiple countries in Europe
  3. See 100% CPU spikes in Chrome DevTools; Noticable lag in WebGL renderer.

Expected behavior Smooth transitions and animations when animating polygon geometry.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Additional context Likely an issue with re-generating the mesh for the animation.

vasturiano commented 3 years ago

Thanks for reaching out @knackstedt.

Yes, it is expected that animations on the conic polygons do consume a bit of CPU capacity. The reason is that geometries need to be calculated for all the intermediate positions of the interpolator. These geometries are calculated using three-conic-polygon-geometry and there is some complexity to those objects.

I've optimized what I could in both the geometry lib and in globe.gl, and not certain there's a lot more that can be done other than use it on powerful enough GPU hardware.

knackstedt commented 3 years ago

The system that I'm using for this is very beefy. It's running a Ryzen 9 3900XT and a GeForce RTX 3090. I feel like there shouldn't be any noticeable lag during transitions. I also notice significant lag on the geometry changes on this scene load https://globe.gl/example/countries-population/, which I suspect has the same origin cause.

A Possible remedy would be enforcing this transition to only apply to a single mesh at a time. It might be better suited as an issue with three-globe instead of globe.gl. I'm not sure I fully understand the differences between the two yet. If possible you could use scaling to tween between the mesh geometry sizes.

vasturiano commented 3 years ago

@knackstedt I've done some experimenting and ended up with a solution that has better performance during transitions. It's applied to the latest version and you can see it the example: https://globe.gl/example/countries-population/

Essentially, as you suggested, instead of re-generating geometries at every tick of the tween it's merely applying a scaling factor to the existing geometries.

Let me know if you see an improvement on your side.

knackstedt commented 3 years ago

@vasturiano I can clearly see better performance this way. The fact that you were able to implement a solution so quickly is very impressive :) It looks very smooth and doesn't make my CPU performance hit 100% at any point during the transition.