How to darken entity color on hover

Is there an easier way to darken the color of a KML polygon/polyline on hover? All the methods I've seen are either very slow and laggy, and/or require a set hover color.

Hi there,

This code example will do what you need: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases

Look at the ‘Pick Entity’ code.

Hope that helps,

  • Rachel

That kind of works, but the hovering is quite slow, taking the polygon at least 1-2 seconds to change color, and unless I store the previous color of the polygon being hovered, then I can't set the polygon back to the original color. This is why a hover color property would be convenient.

Hi there,

It shouldn’t take that long for your polygon color to change. Can I see your code?

Best,

  • Rachel

Sorry for the late response

Here is a sandcastle demo

In that example, it takes about 4 seconds for one polygon to change color, and this is obviously not ideal. That’s why I suggest some sort of property that you could set, especially because then it would automatically go back to the previous color

Hi there,

Setting a new static color value causes the geometry to be recreated/rebatched, which is what’s causing the slow performance. This is definitely something that can be improves. A workaround is to use a dynamic property from the start so that the system expects it to change and will better avoid rebatching.

For an example of how to set a dynamic material, see this code example:

Hope that helps,

  • Rachel

Those examples are all time variant, and trying to do it with a ColorMaterialProperty didn’t seem to help at all

Hi Cody,

The idea is that Cesium treats time invariant and time variant properties differently. By setting your material to be dynamic (even if its doesn’t change until hover), Cesium can make the change more efficiently.

Best,

  • Rachel

Would you be able to give a short example? I am having trouble figuring out how to accomplish this.

I think I have a basic example going, but it is still pretty slow, and there isn’t really a way to set the color back to what it was before the hover, unless I statically define the color somewhere

Hi Cody,

This example should be helpful: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Tiles%20Feature%20Picking.html&label=Showcases

Best,

  • Rachel

That is a good example, and using that I got more responsive hover, but for some reason highlighting KML polygons is much slower than highlighting the 3D tiles, and the colors of all the polygons flicker when one entity is hovered