# Seeking clarification on entity, camera, and scene updating

**URL:** <https://community.cesium.com/t/seeking-clarification-on-entity-camera-and-scene-updating/8186>\
**Category:** CesiumJS\
**Created:** [April 11, 2019, 7:14pm UTC](https://community.cesium.com/t/seeking-clarification-on-entity-camera-and-scene-updating/8186 "2019-04-11T19:14:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Becker](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/richard_becker/32/1987_2.png) [@Richard\_Becker](https://community.cesium.com/u/Richard_Becker)\
**Post date:** [April 11, 2019, 7:14pm UTC](https://community.cesium.com/t/seeking-clarification-on-entity-camera-and-scene-updating/8186/1 "2019-04-11T19:14:17Z")

</div>

1. A concise explanation of the problem you're experiencing.

I have an entity I would like to update in realtime from a websocket. In order to simulate this I created an entity and update its position in the onTick event handler. I want a camera to track this entity and I use the position and rotation of the entity to make calls to lookAtTransform. When I do this it seems the camera and entity updates are out of sync somehow even though they are both computed in the same handler. If I pause the handler (just return from the function). I see the camera match up with the entity how I would expect. I want to know why this is and the exact update order that occurs during scene rendering. Currently it seems that camera updates happen first then the entity updates and then rendering occurs. I suspect this because if I put my entity update logic inside of postUpdate and my camera logic in preUpdate, the two stay in sync as I would expect. The sandcastle demo below shows the working method with the original method commented out at the bottom.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer('cesiumContainer', {  
&nbsp;&nbsp;&nbsp;&nbsp;infoBox: false, //Disable InfoBox widget  
&nbsp;&nbsp;&nbsp;&nbsp;selectionIndicator: false, //Disable selection indicator  
&nbsp;&nbsp;&nbsp;&nbsp;shouldAnimate: true, // Enable animations  
&nbsp;&nbsp;&nbsp;&nbsp;terrainProvider: Cesium.createWorldTerrain()  
});

//Enable lighting based on sun/moon positions  
viewer.scene.globe.enableLighting = true;

//Enable depth testing so things behind the terrain disappear.  
viewer.scene.globe.depthTestAgainstTerrain = true;

//Set the random number seed for consistent results.  
Cesium.Math.setRandomNumberSeed(3);

//set labels for sun  
var sunPositionProperty = new Cesium.CallbackProperty(function(time, result){  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Simon1994PlanetaryPositions.computeSunPositionInEarthInertialFrame(time, result);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return Cesium.PositionProperty.convertToReferenceFrame(  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cesium.ReferenceFrame.INERTIAL,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cesium.ReferenceFrame.FIXED,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result);  
}, false);

var sunEntity = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;position : sunPositionProperty,  
&nbsp;&nbsp;&nbsp;&nbsp;label : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text : 'Sun'  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});

var lineP1 = Cesium.Cartesian3.fromDegrees(-75, 35);  
var lineP2 = Cesium.Cartesian3.fromDegrees(-175, 35);  
var line\_positions = [lineP1, lineP2];

function line\_callback(time, result){  
&nbsp;&nbsp;&nbsp;&nbsp;var sun\_pos = {};  
&nbsp;&nbsp;&nbsp;&nbsp;var curr\_pos = {};  
&nbsp;&nbsp;&nbsp;&nbsp;entity.position.getValue(time, lineP1);  
&nbsp;&nbsp;&nbsp;&nbsp;sunPositionProperty.getValue(time, sun\_pos);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Cartesian3.subtract(sun\_pos, lineP1, curr\_pos);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Cartesian3.normalize(curr\_pos, curr\_pos);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Cartesian3.multiplyByScalar(curr\_pos, 30, curr\_pos);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Cartesian3.add(curr\_pos, lineP1, lineP2);  
&nbsp;&nbsp;&nbsp;&nbsp;return line\_positions;  
}

var lineEntity = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;polyline : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positions : new Cesium.CallbackProperty(line\_callback, false),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 5,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.YELLOW),  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});

//Compute the entity position property.  
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 10000000);  
var heading = Cesium.Math.toRadians(135);  
var pitch = 0;  
var roll = 0;  
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);  
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

var entity = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;name : '../../../../Apps/SampleData/models/CesiumAir/Cesium\_Air.glb',  
&nbsp;&nbsp;&nbsp;&nbsp;position : position,  
&nbsp;&nbsp;&nbsp;&nbsp;orientation : orientation,  
&nbsp;&nbsp;&nbsp;&nbsp;model : {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri : '../../../../Apps/SampleData/models/CesiumAir/Cesium\_Air.glb',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimumPixelSize : 128,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maximumScale : 20000  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});

var VIEW\_TYPE = 0;  
[//viewer.trackedEntity](https://viewer.trackedEntity) = entity;  
[//viewer.scene.screenSpaceCameraController.enableInputs](https://viewer.scene.screenSpaceCameraController.enableInputs) = false;

viewer.scene.sun.glowFactor = 25;  
// disable the default event handlers  
viewer.scene.screenSpaceCameraController.enableRotate = false;  
viewer.scene.screenSpaceCameraController.enableTranslate = false;  
viewer.scene.screenSpaceCameraController.enableZoom = false;  
viewer.scene.screenSpaceCameraController.enableTilt = false;  
viewer.scene.screenSpaceCameraController.enableLook = false;

var startMousePosition;  
var mousePosition;  
var flags = {  
&nbsp;&nbsp;&nbsp;&nbsp;looking : false,  
&nbsp;&nbsp;&nbsp;&nbsp;zooming: false  
};

var canvas = viewer.canvas;  
var handler = new Cesium.ScreenSpaceEventHandler(canvas);  
var cameraRot = new Cesium.Cartesian2(0,0);  
var cameraZoom = -100;  
handler.setInputAction(function(movement) {  
&nbsp;&nbsp;&nbsp;&nbsp;flags.looking = true;  
&nbsp;&nbsp;&nbsp;&nbsp;mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);  
}, Cesium.ScreenSpaceEventType.LEFT\_DOWN);

handler.setInputAction(function(movement) {  
&nbsp;&nbsp;&nbsp;&nbsp;mousePosition = movement.endPosition;  
&nbsp;&nbsp;&nbsp;&nbsp;var width = canvas.clientWidth;  
&nbsp;&nbsp;&nbsp;&nbsp;var height = canvas.clientHeight;

&nbsp;&nbsp;&nbsp;&nbsp;// Coordinate (0.0, 0.0) will be where the mouse was clicked.  
&nbsp;&nbsp;&nbsp;&nbsp;if(flags.looking == true) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = (mousePosition.x - movement.startPosition.x) / width;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = (mousePosition.y - movement.startPosition.y) / height;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lookFactor = Math.abs(cameraZoom)\*0.15;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraRot.x += x\* lookFactor;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraRot.y += y\* lookFactor;  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;  
}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);

handler.setInputAction(function(position) {  
&nbsp;&nbsp;&nbsp;&nbsp;flags.looking = false;  
}, Cesium.ScreenSpaceEventType.LEFT\_UP);

handler.setInputAction(function(movement) {  
&nbsp;&nbsp;&nbsp;&nbsp;cameraZoom += movement;  
&nbsp;&nbsp;&nbsp;&nbsp;if(cameraZoom \> 0 && cameraZoom + movement == 0)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraZoom = -1;  
&nbsp;&nbsp;&nbsp;&nbsp;if(cameraZoom \< 0 && cameraZoom + movement == 0)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraZoom = 1;  
}, Cesium.ScreenSpaceEventType.WHEEL);

var paused = false;  
Sandcastle.addToolbarButton('Pause', function() {  
&nbsp;&nbsp;&nbsp;&nbsp;paused = !paused;  
});

viewer.scene.postUpdate.addEventListener(function(scene)  
{  
&nbsp;&nbsp;&nbsp;&nbsp;if(paused)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;var entPos = new Cesium.Cartesian3(0,0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.position.getValue(viewer.clock.currentTime, entPos);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Cartesian3.add(entPos, new Cesium.Cartesian3(1050,0,0), entPos);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.position.setValue(entPos);  
&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)("entity pos: "+entPos);  
&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;let modelMat = new Cesium.Matrix4();  
&nbsp;&nbsp;&nbsp;&nbsp;let dir = new Cesium.Cartesian3(0,0,cameraZoom);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.computeModelMatrix(viewer.clock.currentTime, modelMat);  
});

viewer.scene.preUpdate.addEventListener(function(scene)  
{

&nbsp;&nbsp;&nbsp;&nbsp;let modelMat = new Cesium.Matrix4();  
&nbsp;&nbsp;&nbsp;&nbsp;let dir = new Cesium.Cartesian3(0,0,cameraZoom);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.computeModelMatrix(viewer.clock.currentTime, modelMat);

&nbsp;&nbsp;&nbsp;&nbsp;var calcPos = new Cesium.Cartesian3(0,0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Matrix4.getTranslation(modelMat, calcPos);  
&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)("camera pos: "+calcPos);  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.lookAtTransform(modelMat, dir);  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.rotateLeft(cameraRot.x );  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.rotateDown(cameraRot.y);  
});

/\* This doesn't work...why??  
viewer.clock.onTick.addEventListener(function(clock) {  
&nbsp;&nbsp;&nbsp;&nbsp;if(paused)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;var entPos = new Cesium.Cartesian3(0,0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.position.getValue(viewer.clock.currentTime, entPos);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Cartesian3.add(entPos, new Cesium.Cartesian3(1050,0,0), entPos);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.position.setValue(entPos);  
&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)("entity pos: "+entPos);  
&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;let modelMat = new Cesium.Matrix4();  
&nbsp;&nbsp;&nbsp;&nbsp;let dir = new Cesium.Cartesian3(0,0,cameraZoom);  
&nbsp;&nbsp;&nbsp;&nbsp;entity.computeModelMatrix(viewer.clock.currentTime, modelMat);

&nbsp;&nbsp;&nbsp;&nbsp;var calcPos = new Cesium.Cartesian3(0,0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;Cesium.Matrix4.getTranslation(modelMat, calcPos);  
&nbsp;&nbsp;&nbsp;&nbsp;[//console.log](https://console.log)("camera pos: "+calcPos);  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.lookAtTransform(modelMat, dir);  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.rotateLeft(cameraRot.x );  
&nbsp;&nbsp;&nbsp;&nbsp;viewer.camera.rotateDown(cameraRot.y);  
});  
\*/

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need this to work both for czml and realtime updates for an application that must be able to handle streamed realtime data and also historical playback for after-action review.

4. The Cesium version you're using, your operating system and browser. Latest, MacOSX, Chrome

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [April 18, 2019, 5:13pm UTC](https://community.cesium.com/t/seeking-clarification-on-entity-camera-and-scene-updating/8186/2 "2019-04-18T17:13:40Z")

</div>

Hey Richard,

Sorry for the slow response. A lot of us were out at FOSS4G (where I ran into Syrus from Prominent Edge!)

You are correct about the order of updates being the issue here. You can find Cesium’s render loop here:

[https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/CesiumWidget/CesiumWidget.js#L690-L698](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/CesiumWidget/CesiumWidget.js#L690-L698)

initializeFrame will update the camera: [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Scene.js#L3115-L3131](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Scene.js#L3115-L3131)

Then the onTick handler will run, then all primitives (and entities) will be updated. So I think what we’re seeing here is you set the camera’s position to the entity, but the camera doesn’t reflect this position until the next frame, when the entity would have moved, so they’re always out of sync.

Let me know if that helps!

---

<div class="post-metadata">

**Author:** ![Richard\_Becker](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/richard_becker/32/1987_2.png) [@Richard\_Becker](https://community.cesium.com/u/Richard_Becker)\
**Post date:** [April 25, 2019, 5:02pm UTC](https://community.cesium.com/t/seeking-clarification-on-entity-camera-and-scene-updating/8186/3 "2019-04-25T17:02:37Z")

</div>

Hey thanks for the information Omar!

Sorry for not responding to this earlier as well. Glad you got to meet Syrus too haha!