Polyline volume with Callback Properties creates disfigured shape
- Dominant language
- JavaScript
- Stars
- 15.7k
- Forks
- 3.9k
- Avg merge
- 4d 6h
- Merged PRs (30d)
- 34
Description
Setting up a polyline volume with the positions and shape properties set to callback properties causes the volume to become disfigured. When I switch to using a static variable instead of the callback property the shape looks like it was intended to, in this case a triangular prism. Here are two bits of code you can plug into the sandcastle to take a look at what I'm talking about.
Without callback property (Works as intended)
---------------------------------------------------------------
var viewer = new Cesium.Viewer('cesiumContainer');
var shape = [];
shape.push(new Cesium.Cartesian2(0,0));
shape.push(new Cesium.Cartesian2(-30,-18));
shape.push(new Cesium.Cartesian2(30,-18));
var polylinePos = [];
polylinePos.push(new Cesium.Cartesian3(-2464387.2699629106, -4781768.957526949, 3415187.6152766007));
polylinePos.push(new Cesium.Cartesian3(-2464386.0410873345, -4781766.231500047, 3415192.2873785086));
polylinePos.push(new Cesium.Cartesian3(-2464384.974105165, -4781763.478022626, 3415196.881609544));
polylinePos.push(new Cesium.Cartesian3(-2464383.674528509, -4781760.956392176, 3415201.3201015787));
polylinePos.push(new Cesium.Cartesian3(-2464382.213054812, -4781758.462205194, 3415205.8364595124));
polylinePos.push(new Cesium.Cartesian3(-2464380.7363797217, -4781755.938521874, 3415210.4047271665));
polylinePos.push(new Cesium.Cartesian3(-2464379.19890381, -4781753.296863412, 3415215.180640723));
polylinePos.push(new Cesium.Cartesian3(-2464378.0156161455, -4781750.659294037, 3415219.6969912923));
polylinePos.push(new Cesium.Cartesian3(-2464376.8323265836, -4781748.021721327, 3415224.21333946));
polylinePos.push(new Cesium.Cartesian3(-2464375.4643401965, -4781745.36735203, 3415228.885421247));
polylinePos.push(new Cesium.Cartesian3(-2464373.9572566673, -4781742.784664825, 3415233.5575004644));
var polylineVolume =
viewer.entities.add({
polylineVolume: {
show: true,
positions: polylinePos,
shape: shape,
material: new Cesium.ColorMaterialProperty((Cesium.Color.YELLOW.withAlpha(0.3))),
outline: true
}
});

---------------------------------------------------------------
With Callback Property (volume becomes disfigured)
---------------------------------------------------------------
var viewer = new Cesium.Viewer('cesiumContainer');
var shape = [];
shape.push(new Cesium.Cartesian2(0,0));
shape.push(new Cesium.Cartesian2(-30,-18));
shape.push(new Cesium.Cartesian2(30,-18));
var polylinePos = [];
polylinePos.push(new Cesium.Cartesian3(-2464387.2699629106, -4781768.957526949, 3415187.6152766007));
polylinePos.push(new Cesium.Cartesian3(-2464386.0410873345, -4781766.231500047, 3415192.2873785086));
polylinePos.push(new Cesium.Cartesian3(-2464384.974105165, -4781763.478022626, 3415196.881609544));
polylinePos.push(new Cesium.Cartesian3(-2464383.674528509, -4781760.956392176, 3415201.3201015787));
polylinePos.push(new Cesium.Cartesian3(-2464382.213054812, -4781758.462205194, 3415205.8364595124));
polylinePos.push(new Cesium.Cartesian3(-2464380.7363797217, -4781755.938521874, 3415210.4047271665));
polylinePos.push(new Cesium.Cartesian3(-2464379.19890381, -4781753.296863412, 3415215.180640723));
polylinePos.push(new Cesium.Cartesian3(-2464378.0156161455, -4781750.659294037, 3415219.6969912923));
polylinePos.push(new Cesium.Cartesian3(-2464376.8323265836, -4781748.021721327, 3415224.21333946));
polylinePos.push(new Cesium.Cartesian3(-2464375.4643401965, -4781745.36735203, 3415228.885421247));
polylinePos.push(new Cesium.Cartesian3(-2464373.9572566673, -4781742.784664825, 3415233.5575004644));
var polylineVolume =
viewer.entities.add({
polylineVolume: {
show: true,
positions: new Cesium.CallbackProperty(function(time, result) {
return polylinePos;
}, false),
shape: new Cesium.CallbackProperty(function(time, result) {
return shape;
}, false),
material: new Cesium.ColorMaterialProperty((Cesium.Color.YELLOW.withAlpha(0.3))),
outline: true
}
});

Contributor guide
Research direction
Reproduce the issue in Cesium Sandcastle using the two provided polyline volume examples, then trace how CallbackProperty values are handled for positions and shape. Compare the callback-generated volume with the static version; done means both produce the intended triangular prism without disfigurement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100