flashes between different intervals when using compositeProperty

[Kathy]

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

I met a problem when I use compositeProperty for orientation. The goal is to display vehicles driving according to gpx tracks in Cesium, and gpx has already converted to CZML file. As I met the orientation problem before(the orientation changed to the default value when the vehicle stops), now with Omar's suggestion I make the orientation as a compositeProperty and modify the CZML position into different intervals(moving or stopping), but during different time intervals the vehicle seems suddenly disappears and then flashes back. The scene is like this: A single car drives from 00:00:00 to 00:00:39, then stops until 00:01:25, and then drives to 00:01:40. I uploaded a viedo demo here. Can someone help me to get through this? Is there anything wrong in my code? Thanks in advance!

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

(1)code in App.js:
    var vehicleroute = Cesium.CzmlDataSource.load('./Source/SampleData/CZMLfromSUMO_singleVeh.czml');
    var vehicle;
    var compositeOri = new Cesium.CompositeProperty();
    vehicleroute.then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        vehicle = dataSource.entities.getById('Point');
        vehicle.model = {
            uri: './Source/SampleData/Models/CesiumMilkTruck.gltf',
            minimumPixelSize: 12,
            maximumScale: 1000,
            silhouetteColor: Cesium.Color.WHITE,
        };
        var movingOri = new Cesium.VelocityOrientationProperty(vehicle.position);
        var stopOri = new Cesium.ConstantProperty(movingOri.getValue(Cesium.JulianDate.fromIso8601('2019-05-08T00:00:39Z')));
        compositeOri.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
            iso8601 : '2019-05-08T00:00:00Z/2019-05-08T00:00:39Z',
            data : movingOri
        }));
        compositeOri.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
            iso8601 : '2019-05-08T00:00:40Z/2019-05-08T00:01:25Z',
            data : stopOri
        }));
        compositeOri.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
            iso8601 : '2019-05-08T00:01:26Z/2019-05-08T00:01:40Z',
            data : movingOri
        }));
        vehicle.orientation = compositeOri;
        vehicle.position.setInterpolationOptions({
            interpolationDegree : 3,
            interpolationAlgorithm : Cesium.HermitePolynomialApproximation
            });
    });
(2)position in CZML:

      "position":[
         {
            "interval":"2019-05-08T00:00:00Z/2019-05-08T00:00:39Z",
            "epoch":"2019-05-08T00:00:00Z",
            "cartographicDegrees":[
               0,
               11.433648,
               48.764329,
               10,
               1.0,
               11.433471,
               48.764285,
               10,
               ......
               39.0,
               11.429106,
               48.762382,
               10
            ]
         },
         {
            "interval":"2019-05-08T00:00:40Z/2019-05-08T00:01:25Z",
            "epoch":"2019-05-08T00:00:00Z",
            "cartographicDegrees":[
               11.429103,
               48.762381,
               10
            ]
         },
         {
            "interval":"2019-05-08T00:01:26Z/2019-05-08T00:01:40Z",
            "epoch":"2019-05-08T00:00:00Z",
            "cartographicDegrees":[
               86.0,
               11.429095,
               48.762376,
               10,
               ...
               100.0,
               11.429375,
               48.7625,
               10
            ]
         }
      ],

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

As in 1.

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

Version: 1.57, system: Windows, browser: Firefox.

[Omar Shehata]

I think there's a couple of problems here. The first is that you have an uncaught error in this line: https://github.com/kathy-lee/cesium_traffic_model/blob/f7f858f970b5616c5d211574e27c2f8ae4538afc/Source/App.js#L73

var stopOri = new Cesium.ConstantProperty(movingOri.getValue(timepoint));

timepoint isn't defined, so this block of code after this line doesn't run. It doesn't report an error because it's in a promise. So you need to add something to catch errors in any promise. The easiest way to do this is to add an otherwise block, so it looks like:

vehicleroute.then(function(dataSource) {
// .. code
}).otherwise(function(error) {
console.log(error)
});

Other than that, you do have a gap in your intervals where the position is not defined. I was able to fix this by getting the previous interval to end at 00:40 and have the next one, which keeps it at a constant position, start at 00:39.

Let me know if this solves the issue for you. I was able to debug this by making the vehicle & viewer accessible on the window object by adding:

window.vehicle = vehicle;
window.viewer = viewer;

Then when running the app, you can pause the simulation when the vehicle disappears and run this code in the browser console:

vehicle.position.getValue(viewer.clock.currentTime)

Which verifies that the problem is indeed that the position at this current time is undefined, and that's why it disappears. Hope this helps!

[Kathy]

Hi Omar,

many thanks again for your answer and explanation! I have modified the CZML file like the following, and set the 'timepoint'  with the last moment of the first interval in 'var stopOri = new Cesium.ConstantProperty(movingOri.getValue(timepoint));'.The github repository is at https://github.com/kathy-lee/cesium_traffic_model.

1.position of CZML
"position":[
         {
            "interval":"2019-05-08T00:00:00Z/2019-05-08T00:00:40Z",

            "epoch":"2019-05-08T00:00:00Z",
            "cartographicDegrees":[

               0,
               11.433648,
               48.764329,

               10,
               ......
               39.0,
               11.429106,
               48.762382,

               10,
               40,
               11.429103,
               48.762381,
               10
            ]
         },
         {
            "interval":"2019-05-08T00:00:40Z/2019-05-08T00:01:26Z",

            "epoch":"2019-05-08T00:00:00Z",
            "cartographicDegrees":[
               11.429103,
               48.762381,
               10
            ]
         },
         {
            "interval":"2019-05-08T00:01:26Z/2019-05-08T00:01:40Z",
            "epoch":"2019-05-08T00:00:00Z",
            "cartographicDegrees":[
               86.0,
               11.429095,
               48.762376,
               10,

               ......

               100.0,
               11.429375,
               48.7625,
               10
            ]
         }
      ],

Now the flashes between intervals are gone, but I got another two problems:

1. When the vehicle stops, it didn't flash but turns around 180 degree. I guess the StopOri for stopping Interval was not correctly assigned from 'stopOri.setValue(movingOri.getValue(vehicleInterval.stop));'. Then I checked it in debug mode. It showed 'movingOri.getValue(vehicleInterval.stop)' was undefined, but vehicleInterval.stop did have a valid value of date form. I don't understand why it didn't work.

2. There is an error in Console: 'TypeError: vehicle.position.setInterpolationOptions is not a function'. Is it because that interpolation cannot be used to the position with static intervals?

I cut a demo video here to show the problems. I am looking forward to your help! Thanks a lot!

Best wishes,

Kathy

[Kathy]

Hi,

should I put this as another new question? Because now there is no flash any more, but back to the orientation problem again. I am wondering that this problem may come from the VelocityOrientationProperty, how it calculates the orientation, backwards or forward, how many position points it uses, so it may get problem at the ending position sample, but I am not sure about this. I would like to put my problem in sandcastle, but I don't know how to upload a CZML file onto Sandcastle platform.

 

Thanks again,

Kathy

[Omar Shehata]

Yes I think a new thread may be appropriate here. I think the easiest way to share a Sandcastle of this is to share the Sandcastle link, and upload the CZML file to your forum thread, and I can load it with a local server.