CZML interpolation

CesiumJS
1

Hello,
I want to use a czml file to simulate a journey. When I define the viewer by :

const viewer = new Cesium.Viewer(“cesiumContainer”, { shouldAnimate: true, });

I get the correct result, but when I want to add the water mask, so a terrain the vehicle dives.

Where is my mistake?

/* var options = { fullscreenButton: true,
sceneModePicker: false,
shouldAnimate: true,
terrainProvider: Cesium.createWorldTerrain({ requestWaterMask: true,
requestVertexNormals: true }),
};
const viewer = new Cesium.Viewer(“cesiumContainer”, options);
viewer.scene.globe.depthTestAgainstTerrain = true;
*/
Thanks

2

Hi there,

Can you elaborate more on the issue? I see the sandcastle, but I’m not sure I understand the expected result.

3

HI Gabby-Getz
I’m sorry, I think the code I sent is wrong. Here is my code:
const czml =[{
“id”: “document”,
“name”: “OceanoVox_0”,
“version”: “1.0”,
“clock”: {
“currentTime”: “2022-07-19T14:34:58.000Z”,
“interval”: “2022-07-18T06:34:44.000Z/2022-08-16T21:39:49.000Z”,
“multiplier”: 1
}
}, {
“name”: “OceanoVox_0”,
“id”: “v1”,
“availability”: “2022-07-19T14:34:58.000Z/2022-08-16T21:39:49.000Z”,
“model”: {
“gltf”: “…/SampleData/models/CesiumAir/Cesium_Air.glb”,
“scale”: 5.0,
“heightReference”: “Cesium.HeightReference.CLAMP_TO_GROUND”
},
// “clampToGround”: true,
“show”: [{
“boolean”: true
}],
“position”: {
“cartographicDegrees”: [
“2022-07-19T14:34:58.000Z”, -23.4516, 66.2113, 100,
“2022-07-19T18:34:59.000Z”, -24.5343, 66.0678,100,
“2022-07-19T19:35:00.000Z”, -24.7856, 66.0116, 100,
“2022-07-19T21:35:07.000Z”, -25.3791, 65.9415, 100,
“2022-07-19T22:35:09.000Z”, -25.6425, 65.9128, 100,
“2022-07-20T01:35:05.000Z”, -26.4321, 65.8438, 100,
“2022-07-20T03:35:03.000Z”, -26.8433, 65.7891,100,
“2022-07-20T04:35:54.000Z”, -27.076, 65.7511, 100,
“2022-07-20T05:36:07.000Z”, -27.3155, 65.7178,100,
“2022-07-20T06:35:04.000Z”, -27.5348, 65.6838, 100,
“2022-07-20T08:35:35.000Z”, -27.9558, 65.6418, 100,
“2022-07-20T11:35:07.000Z”, -28.6628, 65.5985,100,
“2022-07-20T12:36:01.000Z”, -28.8986, 65.5838, 100,
“2022-07-20T13:35:35.000Z”, -29.104, 65.56350,100],
“epoch”: “2022-07-19T14:34:58.000Z”,
“interpolationAlgorithm”: “LAGRANGE”,
“interpolationDegree”: 1
},
“orientation”: {
“velocityReference”: “#position”
},

}];

const viewer = new Cesium.Viewer(“cesiumContainer”, {
shouldAnimate: true,
});

/*
var options = {
fullscreenButton: true,
sceneModePicker: false,
shouldAnimate: true,
terrainProvider : Cesium.createWorldTerrain({
requestWaterMask : true,
requestVertexNormals : true
}),
};
const viewer = new Cesium.Viewer(“cesiumContainer”, options);
viewer.scene.globe.depthTestAgainstTerrain = true;
*/

const dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);

dataSourcePromise
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById(
“v1”
);
})
.catch(function (error) {
window.alert(error);
});
This code work fine, but when I replace :

const viewer = new Cesium.Viewer(“cesiumContainer”, { shouldAnimate: true, });

by the code in comments to see water mask, the plane is sinking.

4

With the Viewer, by default, the globe uses an Ellipsoid terrain provider, which looks like no terrain. When you use Cesium.createWorldTerrain, with or without the watermask option, it will load different terrain than the default Viewer. Perhaps that is causing the behavior? Maybe try confirming the positions in your CZML, trying a different HeightReference property, or exploring options for visualizing underground/undersea.