CZML Cylinder color change on mouse hover

CesiumJS
1

Hello,
I need the cylinders (which are loaded through the czml data source) to change color on hover.
I have implemented the MouseMove callback:

HoverHandler(movement) {
  var pickedFeature = viewer.scene.pick(movement.endPosition);
  
  if (highlighted.feature != pickedFeature) {
    // Return original color if mouse moved away
    highlighted.feature.id.cylinder.material = Cesium.Color.RED;
    highlighted.feature = undefined;
    
    if(Cesium.defined(pickedFeature)){
      // Color picked cylinder in blue
      pickedFeature.id.cylinder.material = Cesium.Color.STEELBLUE;
      highlighted.feature = pickedFeature;
    }
    viewer.scene.requestRender();
  }
}

The color change is very slow on hover in, takes ~1s to change the color to steel blue.
On the hover out, the cylinder disappears for about a second and then appears again with the correct red color.
No other modifications are being applied to cylinders in the runtime.

“Normal” tilesets, loaded from Cesium Ion are being colored in milliseconds with a similar approach.

Is there any way to make colorification faster?

Thanks

2

@peo

Thank you for this question. I looked through your code and your approach seems solid. I am unsure why you are experiencing poor runtime performance. It is possible that updating the material property is an inefficient process.

One potential workaround worth trying would be to add both the red and blue entities to your viewer and toggle their show properties based upon the mouse movement. This might yield better performance than updating the material of the object.

I am curious to hear your overall thoughts! Looking forward to your response.

-Sam

3

Hmm, I’m suspicious of the code, in particular the equality checker ( != vs. !== ), but mostly the logic behind whatever you’ve got in ‘highlighted’, it’s a bit odd to set a new color of its id object, then immediatly set the feature to undefined, surely this will be picked up by the change detector and so triggering more rendering and API calls? I really think you need to show us some code around ‘highlighted’, is it a plain object, or class, or what?

The absolute best would be to give us a Sandcastle example of the complete code (even if that means replacing the czml with just a few cylindar entities drawn manually)

Cheers,

Alex