Flickering/Flashing of entities when streaming CZML and the viewer is tracking an entity

CesiumJS
1

I am streaming CZML on a websocket and also creating entitys in javascript code at the same time. When I do this and I track an entity with the viewer, there is flickering

or an artifact forming of the entities on the screen. This only happens when the camera is tracking the entity.

Here is the code for loading the streamed CZML:

                var czmlDataSource = new Cesium.CzmlDataSource();
                viewer.dataSources.add(czmlDataSource);
                // Set up websocket for czml streaming
                var czws = new WebSocket("ws://" + location.host + "/czmlFeed");
                czws.onmessage = czmlPacket => {
                    try {
                        var czml = JSON.parse(czmlPacket.data);
                        czmlDataSource.process(czml);
                    } catch(err) {
                        console.log(err);
                    }
                };

``

Here is an example of the CZML packet being streamed in:

[
{
“id”:“document”,
“version”:“1.0”,
“clock”:{
“multiplier”:1,
“range”:“UNBOUNDED”,
“step”:“SYSTEM_CLOCK”,
“interval”:“0001-01-01T00:00:00Z/9999-12-31T23:59:59.999Z”,
“currentTime”:“2016-11-15T00:15:53.63100000000122Z”
}
},
{
“availability”:“0001-01-01T00:00:00Z/9999-12-31T23:59:59.999Z”,
“id”:“LineToTarget”,
“polyline”:{
“width”:3,
“positions”:{
“cartographicDegrees”:[
-118.2437,34.0522,20000,-122.4194,37.7749,100
]
},
“material”:{
“solidColor”:{
“color”:{
“rgba”:[
255,0,0,255
]
}
}
}
}
}]

``

Here is the code snippet for creating an another entity not using CZML and updating it’s position:

                    var entityCurrentPosition;
                    var entityCurrentOrientation;
                    entityStateUpdaters[entityName] = es => {
                        entityCurrentPosition = new Cesium.Cartesian3(es.positionECEF.x, es.positionECEF.y, es.positionECEF.z);
                        entityCurrentOrientation = Cesium.Quaternion.fromHeadingPitchRoll(-es.orientationEuler.psi, -es.orientationEuler.theta, es.orientationEuler.phi + Cesium.Math.PI);
                    };
                    viewer.entities.add({
                        id: entityName,
                        position: new Cesium.CallbackProperty(() => entityCurrentPosition, false),
                        orientation: new Cesium.CallbackProperty(() => entityCurrentOrientation, false),
                        model: {
                            uri: availableModels[ms.options[ms.selectedIndex].value],
                            scale: 1.0
                        }
                    });

               // Set up websocket for entity data
                var ws = new WebSocket("ws://" + location.host + "/liveEntities");

                // called when entity data is received from server
                ws.onmessage = entities => {
                    JSON.parse(entities.data).forEach(e => {
                        entityStateUpdaters[entityName](e);
                    });
                };

``

Any ideas?

Thanks,

Bobby

2

Hi Bobby,

Hmm, I haven’t seen a problem like this before. It happens when you’re tracking one entity and creating another? Are the entities all polylines? Would there be an easy way to reproduce the behavior in a Sandcastle example?

Thanks,

Hannah

3

Hi Hannah,

The entity that is being streamed in as CZML is a polyline. The other entity created in the javascript code is a 3D GLTF model entity. So when the camera tracks the 3D model entity and a CZML packet gets rendered it flickers. This only happens when the CZML packet is rendered.

I will see if I can get an example of this in Sandcastle.

Thanks,

Bobby

4

I am able to recreate the problem in Sandcastle.

Here is the code I used in Sandcastle:

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

var czmlDataSource = new Cesium.CzmlDataSource();

viewer.dataSources.add(czmlDataSource);

var czmlString = '[\

{\

“id”:“document”,\

“version”:“1.0”,\

“clock”:{\

"multiplier":1,\

"range":"UNBOUNDED",\

"step":"SYSTEM_CLOCK",\

"interval":"0001-01-01T00:00:00Z/9999-12-31T23:59:59.999Z",\

"currentTime":"2016-11-15T00:15:53.63100000000122Z"\

}\

},\

{\

“availability”:“0001-01-01T00:00:00Z/9999-12-31T23:59:59.999Z”,\

“id”:“LineToTarget”,\

“polyline”:{\

"width":3,\

"positions":{\

  "cartographicDegrees":[\

    -118.2437,34.0522,20000,-122.4194,37.7749,100\

  ]\

},\

"material":{\

  "solidColor":{\

    "color":{\

      "rgba":[\

        255,0,0,255\

      ]\

    }\

  }\

}\

}\

}]’;

var czml = JSON.parse(czmlString);

czmlDataSource.process(czml);

var position = Cesium.Cartesian3.fromDegrees(-118.2437,34.0522,20000);

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 url = ‘…/…/SampleData/models/CesiumAir/Cesium_Air.glb’;

var entity = viewer.entities.add({

    name : url,

    position : new Cesium.CallbackProperty(function() {return position;}, false),

    orientation : orientation,

    model : {

        uri : url,

        minimumPixelSize : 128,

        maximumScale : 20000

    }

});

var i = 0;

viewer.trackedEntity = entity;

setInterval (function () {

position = Cesium.Cartesian3.fromDegrees(-118.2437+i,34.0522,20000);

i += 0.0001;

}, 200);

setInterval(function () {

czmlDataSource.process(czml);

}, 100);

``

5

Thanks for putting together than example. I see what you’re saying now, that is a really strange interaction.
Is there a reason you’re not adding the model with the CZML as well? That might fix the problem.

-Hannah

6

I have a different interface where the server streams out position and orientation for an entity that is represented as a 3d model. Preferably, I want to keep this interface. I store certain information on the client and have my own custom interface for this part of my app.

I am surprised this problem is happening because it does not show up when the entity is not tracked.

Is there some other way?

Thanks.

7

Sorry, I’m not sure what would be causing this problem, but I’ve filed a bug report here for us to look into it: https://github.com/AnalyticalGraphicsInc/cesium/issues/4647

-Hannah