Circle drawing latency

Hi,

I am trying to control the size of a circle depending on the cursor position. It correctly follows the mouse movements. However there is a variable latency that is not very convenient.

I have also tried to use Entity instead of Primitive, but the result is worst. I have heard about CallbackProperties, but I didn't succeed to set up this function.

Is there any remedy for this issue?

The source code below is a sandcastle demonstration of the issue.

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProviderViewModels : ,
    infoBox : true,
    selectionIndicator : false,
    animation : false
});
  
var scene = viewer.scene;
var camera = viewer.camera;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var primitive;
var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);

viewer.entities.add({
    position : center,
    point : {
        pixelSize : 10,
        color : Cesium.Color.YELLOW
    }
});

handler.setInputAction(
function (movement) {
    
  var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);

    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        cartographic.height= 100000; //meters
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var altitude = cartographic.height;
        cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude);

        var cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
        var cartographic2 = Cesium.Cartographic.fromCartesian(center);
        var altitude1 = cartographic1.height;
        var altitude2 = cartographic2.height;
        var diffAltitude = Math.abs(altitude1 - altitude2);
        var currentDistance = new Cesium.Cartesian3();
        var totalDistanceInMeters = 0;
        var currentCartesian = new Cesium.Cartesian3();
        var currentCartographic;
        var previousCartesian = new Cesium.Cartesian3();

        var mesure = [cartesian, center];
        var surfacePositions = Cesium.PolylinePipeline.generateArc({
            positions : mesure
        });
        var surfacePositionsLength = surfacePositions.length;

        for (var i = 0; i < surfacePositionsLength; i += 3) {
            currentCartesian = Cesium.Cartesian3.fromElements(surfacePositions[i],surfacePositions[i+1],surfacePositions[i+2]);
            currentCartographic = Cesium.Cartographic.fromCartesian(currentCartesian);

            if (altitude1>=altitude2){
                currentCartographic.height = currentCartographic.height + ((diffAltitude/((surfacePositionsLength/3)-1))*(((surfacePositionsLength-3)-i)/3)) + altitude2;
            }
            if (altitude1<altitude2){
                currentCartographic.height = currentCartographic.height + ((diffAltitude/((surfacePositions.length/3)-1))*(i/3)) + altitude1;
            }

            currentCartesian = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(currentCartographic.longitude), Cesium.Math.toDegrees(currentCartographic.latitude), currentCartographic.height);

            if (i>0){
                currentDistance.x = Math.abs(currentCartesian.x - previousCartesian.x);
                currentDistance.y = Math.abs(currentCartesian.y - previousCartesian.y);
                currentDistance.z = Math.abs(currentCartesian.z - previousCartesian.z);
                totalDistanceInMeters += Cesium.Cartesian3.magnitude(currentDistance);
            }
            previousCartesian = currentCartesian;

            if(primitive instanceof Cesium.Primitive){
                viewer.scene.primitives.remove(primitive);
            }

            var circleGeometry = new Cesium.CircleGeometry({
                center : center,
                radius : totalDistanceInMeters,
                granularity : 1 * Cesium.Math.RADIANS_PER_DEGREE
            });
            var redCircleInstance = new Cesium.GeometryInstance({
                geometry : circleGeometry,
                attributes : {
                    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE.withAlpha(0.3))
                }
            });
            var appear = new Cesium.PerInstanceColorAppearance({
                closed: true
            });
            primitive = new Cesium.Primitive({
                geometryInstances: redCircleInstance,
                appearance: appear,
                allowPicking: false
            });
            viewer.scene.primitives.add(primitive);
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Thank you four your time.

Regards,

Gaëtan

Hello Gaetan,

The flickering is happening because the geometry is being drawn asynchronously. You can force it to draw synchronously by adding asynchronous: false to your primitive:

primitive = new Cesium.Primitive({

geometryInstances: redCircleInstance,

appearance: appear,

allowPicking: false,

asynchronous: false

});

``

Best,

Hannah

Thank you Hannah, you're my hero!