polyline flickers when rubberbanding

CesiumJS
1

Hello,

As part of a large project I need to implement rubberbanding. However, in my implementation it works but flickers a lot when rubberbanding. Also, I noticed that it is slow. As far as I understand DynamicProperty cannot be used because it is strictly for annimations where values are predefined and are provided as a time history.

I thought that the correct way to do it is to use Entity API like the following example (see below).

Can somebody shed the light on this?

Thank you very much,

Greg

//I intentionally made it rubber-band on mouse move event for simplicity

viewer = new Cesium.Viewer('cesiumContainer');
redLine = viewer.entities.add({
      name : 'Red line on the surface',
      polyline : {
          positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                          -125, 35]),
          width : 5,
          material : Cesium.Color.RED
      }
});

function onMouseMove(evt)
{
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(evt.endPosition, ellipsoid);
    var positions = redLine.polyline.positions;
    var positions1 = Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]);
    positions1[0] = positions._value[0];
    positions1[1] = positions._value[1];
            
    positions1[0]=cartesian;
    redLine.polyline.positions = positions1;
}

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(onMouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

2

Hello,

The flickering is happening because the Polyline is being drawn asynchronously. I think using a CallbackProperty might work in your case. You define a function that is called every frame to get the new update value. Passing in false for isConstant will tell Cesium to draw the polyline synchronously, and that will get rid of the flickering.

Here’s an example that uses a CallbackProperty for the polyline positions:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var lon = -120;
var lat = 35;
function getPositions(){
lon += 0.05;
return Cesium.Cartesian3.fromDegreesArray([lon, 35, -125, 35]);
}

var redLine = viewer.entities.add({
polyline : {
positions : new Cesium.CallbackProperty(getPositions, false),
width : 5,
material : Cesium.Color.RED
}
});

``

Best,

Hannah

3

Thank you very much Hannah!

Your suggestion worked to remove the flicker. The only question I have now is how do I properly remove the callback? I set the positions property to CallbackProperty... on left mouse down, it is invoked as the user is dragging the mouse, but removing it on mouse up by setting the property back to array of values doesn't seem to work: the callback is still being called.

Thank you,

Greg

4

Hmm… This works for me:

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function() {
redLine.polyline.positions = Cesium.Cartesian3.fromDegreesArray([-120, 35, -125, 35]);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

``

-Hannah