Processing CZML without Cesium Viewer Widget

CesiumJS
1

I must be missing something; would someone mind taking a look at my issue below?

I’m not using the Cesium Viewer Widget but I am attempting to load and process a CZML file on-demand.

The CZML file is loaded and my DynamicObjectCollection is processed properly. However, I cannot seem to get the CZML to be ‘loaded’ into the scene. Perhaps I am not using the Clock properly or my render/tick method is not properly taking into account the updated Clock start/stopTime? I do not receive any errors and the CZML is processed correctly. I update the clock and set the start/stop/currentTime accordingly and even request the animationControlle to play. I must be missing something. Thanks!

Initialization Snippet

var objects = new Cesium.DynamicObjectCollection();

var visualizers = Cesium.VisualizerCollection.createCzmlStandardCollection(scene, objects);
// initialize clock
var currentTime = new Cesium.JulianDate();
var clock = new Cesium.Clock({
startTime : currentTime.addDays(-0.5),
stopTime : currentTime.addDays(0.5),
currentTime : currentTime,
clockStep : Cesium.ClockStep.SYSTEM_CLOCK_DEPENDENT,
multiplier: 1
});
var animationController = new Cesium.AnimationController(clock);

CZML Processing Function

function processScenario(file) {

Cesium.loadJson(file).then(function(czml) {
Cesium.when(
Cesium.processCzml(czml, objects, file)).then(function(czml) {
// console.log(objects); GOOD!
var availability = objects.computeAvailability();
clock.startTime(availability.startTime);
clock.stopTime(availability.stopTime);
clock.clockRange = Cesium.ClockRange.LOOP;
clock.currentTime(availability.startTime);
animationController.play();
visualizers.update();
scene.render(); //
});
});
}

Tick

2

Hi Chris,

A few things I notice are wrong:

  • visualizers.update(currentTime); must be called before the call to scene.render(), not after.

  • The result of processCzml is not a promise, so the code that wraps it in when and uses then is unnecessary.

  • clock.startTime, stopTime, currentTime are properties, not functions, so they should be assigned to, not called.

  • The properties on availability are called start and stop, not startTime and stopTime.

  • You don’t need to render the scene explicitly after loading czml, the render loop will handle that for you once the data is populated.

Here’s working versions of the code section you posted:

var objects = new Cesium.DynamicObjectCollection();

var visualizers = Cesium.VisualizerCollection.createCzmlStandardCollection(scene, objects);

// initialize clock

var currentTime = new Cesium.JulianDate();

var clock = new Cesium.Clock({

startTime : currentTime.addDays(-0.5),

stopTime : currentTime.addDays(0.5),

currentTime : currentTime,

clockStep : Cesium.ClockStep.SYSTEM_CLOCK_DEPENDENT,

multiplier: 1

});

var animationController = new Cesium.AnimationController(clock);

function processScenario(file) {

Cesium.loadJson(file).then(function(czml) {

Cesium.processCzml(czml, objects, file);

var availability = objects.computeAvailability();

clock.startTime = availability.start;

clock.stopTime = availability.stop;

clock.clockRange = Cesium.ClockRange.LOOP;

clock.currentTime = availability.start;

animationController.play();

}, function (e) {

console.error(e);

});

}

function tick() {

var currentTime = animationController.update();

scene.initializeFrame();

animate();

visualizers.update(currentTime);

scene.render();

Cesium.requestAnimationFrame(tick);

}

tick();

I tested this out in Sandcastle and was able to load and display the simple.czml file. Let me know if this works for you too.

3

Also we should have a Sandcastle demo that shows this:

http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=Client%20CZML.html

–Ed.

4

Thanks for the suggestions, Scott and Ed; my scenario is now working.

5

I am also trying to learn to use my own render loop and ran into a few starting issues.
First, I am using the default viewer and setting useDefaultRenderLoop to false.

I dont see, initializeFrame or render in the reference documents and is wondering if that is still the way to create a tick loop ?

What I have so far is a simple loop that

function tick()
{
console.log(“TICK”);

//calculates some angles and call to camera.lookAtTransform(transform, this.cameraPositionC); at the end.
console.log(“TICK…”);

Cesium.requestAnimationFrame(tick);

console.log(“tock…”);

}

``

but I only get to see the first tick message in the console and no errors. “TICK…” never shows.

What is the latest documentation for doing custom render loop

6

I found out that in my commented out code, the code part that made the loop not run was : Cesium.Cartesian3.UNIT_Z.clone(camera.constrainedAxis);

Now I have a loop that runs using

                var cam = new CameraController({}, viewer.scene.globe.terrainProvider);
                function tick() {
                    viewer.scene["initializeFrame"]()
                    var currentTime = viewer.clock.tick();
                    cam.update(viewer.scene, vehicle.position.getValue(currentTime));
                    viewer.scene["render"]();                      
                    Cesium.requestAnimationFrame(tick);
                }
                Cesium.requestAnimationFrame(tick);

``

Should I do a PR for getting initializeFrame and render methods public ?