[Bug?]: the hexPolygonResolution doesnt update after init

[BangNguyen1992]

Describe the bug I want to change the hexPolygonResolution of the hexPolygon layer when the user zoom in/out. However, after the 1st init, the hexPolygonResolution doesn't update accordingly to the input value. I have tried with function as well, but still still not work.

Example:

hexPolygonResolution={() => zoomIn ? 4 : 3 } -> but it doesn't change when zoomIn value changed

To Reproduce

• try to change the hexPolygonResolution value dynamically like the example above

Expected behavior

• The hexPolygonResolution should be changed accordingly

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

Desktop (please complete the following information):

• OS: MacOS
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: 114.0.5735.248

Additional context

• If it is not a bug, are there other ways to achieve this? Like force re-render, or update hex polygon?

[vasturiano]

@BangNguyen1992 thanks for reaching out.

This was indeed a bug that was just fixed in this underlying module: https://github.com/vasturiano/three-globe/commit/dfa2f8d77d44f11004b47c3b900a0cefa0a44d9b

If you update your dependency tree to include at least v2.27.5 of three-globe, you shouldn't experience the issue anymore.

[BangNguyen1992]

Hello @vasturiano, thank you for the quick update, it works for me now.

However, when I change the hexPolygonResolution value, the app is freezing for about 1~2 sec. Do you have any suggestions on how to prevent that?

Thank you

[vasturiano]

@BangNguyen1992 are you using high values for the resolution? That would explain the CPU burst. The higher the value the more strain it puts on the Hex processor and more ThreeJS objects get generated.

[BangNguyen1992]

Hello @vasturiano, I am not sure if changing from 3 to 4 is considered high.

What I want is to have a hex polygon layer but when the user zoom in, I want them to see the hexagon as a rounded shape. Therefore, my idea is to increase the hexPolygonResolution from 3 to 4 when the user zooms in enough and change it back to 3 when they zoom out.

[BangNguyen1992]

Hello @vasturiano, I understand that increasing the hexPolygonResolution CPU burst, thus, making the app freeze.

Is there any way to make the generating new Theejs objects without blocking the transition/animation of the current process? It's fine if the generation takes a longer time.

Example:

• I have a globe that rotates around the y-axis
• I use a hex polygon layer to represent the countries around the world
• After changing the hexPolygonResolution, the globe is still able to rotate smoothly, and the hex processor gradually updates and re-renders with the new hexPolygonResolution

Is it possible to achieve that scenario?

Thank you for this amazing library

[vasturiano]

@BangNguyen1992 the bulk of the CPU load is caused by the hex coordinate generation by h3-js. I can only imagine what you describe being possible if that operation is offloaded off the main thread using web workers. Unfortunately this is not currently supported in this module, it would be a non-trivial change to add this type of asynchronous functionality.

[BangNguyen1992]

Thank you @vasturiano, I think I have approached it in the wrong way, which makes the issue become more complicated than it should be. 😅

I am closing the issue now since the bug had been fixed.