Wall Dragging Latency

[semsi...@gmail.com]

Hi,

I am trying to control the position of a wall by dragging two attached pins, i.e. billboards. Billboards follow the mouse movements just fine. However the Wall follows the mouse movements with a variable latency. The latency increases with faster mouse movements.

Is there any remedy for this issue?

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

Thank you four your time.

Regards,

Cihan

___________________________________________________________
var viewer = new Cesium.Viewer('cesiumContainer');

var pinBuilder = new Cesium.PinBuilder();

var wall = viewer.entities.add({
wall : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-107.0, 43.0, 100000.0,
-97.0, 43.0, 100000.0]),
material : Cesium.Color.GREEN.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.WHITE
}
});

var pin1 = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-107.0, 43.0, 100000.0),
billboard: {
image: new Cesium.ConstantProperty(pinBuilder.fromText("1",Cesium.Color.DARKGREEN, 48)),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
});

var pin2 = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-97.0, 43.0, 100000.0),
billboard: {
image: new Cesium.ConstantProperty(pinBuilder.fromText("2",Cesium.Color.DARKGREEN, 48)),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
});

var dragging = null;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(click) {
var pickedObject = viewer.scene.pick(click.position);
if (pickedObject) pickedObject = pickedObject.id;
if (pickedObject != undefined && Cesium.defined(pickedObject)) {
dragging = pickedObject;
viewer.scene.screenSpaceCameraController.enableRotate = false;
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function() {
if (dragging) {
dragging = false;
viewer.scene.screenSpaceCameraController.enableRotate = true;
}
}, Cesium.ScreenSpaceEventType.LEFT_UP);

handler.setInputAction(function(movement) {
var ray = viewer.camera.getPickRay(movement.endPosition);
var position = viewer.scene.globe.pick(ray, viewer.scene);
if (!Cesium.defined(position) || !dragging) return;

var positionCartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
var latitude = Cesium.Math.toDegrees(positionCartographic.latitude);
var longitude = Cesium.Math.toDegrees(positionCartographic.longitude);

dragging.position = Cesium.Cartesian3.fromDegrees(longitude,latitude,100000);
wall.wall.positions = [pin1.position.getValue(0),pin2.position.getValue(0)];
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

viewer.zoomTo(viewer.entities);
______________________________________________________________________

[Hannah Pinkos]

Hello Cihan,

The wall is lagging because the geometry is being computed in a web worker. This is because the entity collection thinks the wall is going to be static since it has all static properties.  To get around this, we can use a CallbackProperty for the positions argument to let the entity collection know it is going to be changing so it computes the geometry asynchronously.  I created a new function called getWallPositions, and I set the wall positions argument to a new CallbackProperty that calls that function.  I've pasted the entire code below:

var viewer = new Cesium.Viewer('cesiumContainer');

var pinBuilder = new Cesium.PinBuilder();

var pin1 = viewer.entities.add({

    position: Cesium.Cartesian3.fromDegrees(-107.0, 43.0, 100000.0),

    billboard: {

        image: new Cesium.ConstantProperty(pinBuilder.fromText("1",Cesium.Color.DARKGREEN, 48)),

        verticalOrigin: Cesium.VerticalOrigin.BOTTOM

    }

});

var pin2 = viewer.entities.add({

    position: Cesium.Cartesian3.fromDegrees(-97.0, 43.0, 100000.0),

    billboard: {

        image: new Cesium.ConstantProperty(pinBuilder.fromText("2",Cesium.Color.DARKGREEN, 48)),

        verticalOrigin: Cesium.VerticalOrigin.BOTTOM

    }

});

function getWallPositions() {

    return [pin1.position.getValue(0), pin2.position.getValue(0)];

}

var wall = viewer.entities.add({

    wall : {

        positions : new Cesium.CallbackProperty(getWallPositions, false),

        material : Cesium.Color.GREEN.withAlpha(0.5),

        outline : true,

        outlineColor : Cesium.Color.WHITE

    }

});

var dragging = null;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(click) {

    var pickedObject = viewer.scene.pick(click.position);

    if (pickedObject) pickedObject = pickedObject.id;

    if (pickedObject != undefined && Cesium.defined(pickedObject)) {

        dragging = pickedObject;

        viewer.scene.screenSpaceCameraController.enableRotate = false;

    }

}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function() {

    if (dragging) {

        dragging = false;

        viewer.scene.screenSpaceCameraController.enableRotate = true;

    }

}, Cesium.ScreenSpaceEventType.LEFT_UP);

handler.setInputAction(function(movement) {

    var ray = viewer.camera.getPickRay(movement.endPosition);

    var position = viewer.scene.globe.pick(ray, viewer.scene);

    if (!Cesium.defined(position) || !dragging) return;

    

    var positionCartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);

    var latitude = Cesium.Math.toDegrees(positionCartographic.latitude);

    var longitude = Cesium.Math.toDegrees(positionCartographic.longitude);

    dragging.position = Cesium.Cartesian3.fromDegrees(longitude,latitude,100000);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Best,

-Hannah

[semsi...@gmail.com]

Thank you Hannah. Works perfectly.

Regards,

Cihan