Create a toroid using CZML

CesiumJS
1

I'm using Cesium to create some animations using simple shapes, mostly ellipsoids. One thing I'd like to be able to do is generate a toroid/doughnut shape using czml. Toroids don't seem to be directly supported so I though I could use the polyline volume feature to achieve the same effect, however this isn't supported in CZML. Does anybody have any suggestions for how to generate and animate toroids?

2

I honestly thought we had polylineVolume available in CZML, but it looks like you’re right, we don’t. I wrote up an issue to add it: https://github.com/AnalyticalGraphicsInc/cesium/issues/2636 Adding support to CZML may actually be pretty easy, if I have a chance to look into it soon, I’ll let you know; but no promises.

For now, you could probably get away with specifying polylines in CZML and then converting those lines into polyline volumes after load on the client (before anything gets drawn). This could get a little tricky depends on your requirements, but I don’t see why it wouldn’t work. We do something similar to style GeoJSON in this example (by adding heights to a polygon). Of course if you need to send down shape information, there’s no analog in polyline for it, so you would have to implement a custom CZML property.

Before the end of the year, I’m hoping to do a pass on CZML to make sure we have parity with the Entity API as well as start looking into what “CZML 2” might look like based on everything we’ve learned in the last few years.

3

If I specify the polylines in CZML, would I be able to have the extruded shape change with time as well as the polyline? The shape would always be a circle, but it’s possible for the radius to change with time.

4

I tried doing it using entities, based off the sandbox tutorial. With this I can create a polyline volume and have it move around, but I can't figure out how to animate the extruded shape. Does anybody know how to do this?

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.globe.enableLighting = true;

function computeCircle(radius) {
    var positions = ;
    for (var i = 0; i < 360; i=i+30) {
        var radians = Cesium.Math.toRadians(i);
        positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
    }
    return positions;
}

var start = Cesium.JulianDate.fromDate(new Date(Date.now()));
var stop = Cesium.JulianDate.addSeconds(start, 14400, new Cesium.JulianDate());
var stop2 = Cesium.JulianDate.addSeconds(start, 28000, new Cesium.JulianDate());

var point1 = new Cesium.SampledPositionProperty();
point1.addSample(start, Cesium.Cartesian3.fromDegrees(-85, 32, 1000));
point1.addSample(stop, Cesium.Cartesian3.fromDegrees(-84, 33, 1000));
point1.addSample(stop2, Cesium.Cartesian3.fromDegrees(-83, 32, 1000));

var point2 = new Cesium.SampledPositionProperty();
point2.addSample(start, Cesium.Cartesian3.fromDegrees(-85, 36, 5000));
point2.addSample(stop, Cesium.Cartesian3.fromDegrees(-84, 35, 4000));
point2.addSample(stop2, Cesium.Cartesian3.fromDegrees(-83, 34, 2000));

var point3 = new Cesium.SampledPositionProperty();
point3.addSample(start, Cesium.Cartesian3.fromDegrees(-89, 36, 10000));
point3.addSample(stop, Cesium.Cartesian3.fromDegrees(-88, 37, 10000));
point3.addSample(stop2, Cesium.Cartesian3.fromDegrees(-87, 36, 8000));

var shape1 = new Cesium.SampledProperty(Cesium.Cartesian2);
shape1.addSample(start, computeCircle(60000) );
shape1.addSample(stop, computeCircle(6000) );
shape1.addSample(stop2, computeCircle(600) );

var entity = viewer.entities.add({
    polylineVolume : {
        positions : new Cesium.PositionPropertyArray([point1, point2, point3]),
    shape : computeCircle(60000)
    
    //material : Cesium.Color.RED
    }
});

//entity.polylineVolume.shape = shape1;
//entity.polylineVolume.shape = new Cesium.ShapeProperty(shape1);

var color = new Cesium.SampledProperty(Cesium.Color);
color.addSample(start, Cesium.Color.RED);
color.addSample(stop2, Cesium.Color.GREEN);
entity.polylineVolume.material = new Cesium.ColorMaterialProperty(color);

viewer.zoomTo(entity);
viewer.clock.multiplier = 1;

5

Sorry to bring this back up, but does anybody have any ideas on how to animate the extruded shape of a polyline volume? I'd appreciate any suggestions.