Rendering large polygon entities

CesiumJS
1

I am experiencing a 2 to 5 second delay whenever I add a new polygon entity to the viewer. Is this expected? Is there any way I can optimize this? This appears to freeze up the main thread as the clock in my visualizer stops advancing.

I’ve tried using primitives instead, and while this frees up the main thread and allows the clock to advance, the amount of time it takes for the polygons to appear on the screen seems comparable.

This is the size of the polygons for reference:

polygon entities
polygon entities1652×1445 161 KB

2

Hi @nb12, welcome to the community!

A 2-5 second delay is more than I would expect. The size of the polygons (in meters) shouldn’t matter much, but the number of points might. How many points are in the polygon definition?

Can you share part of your code as a Sandcastle example that demonstrates the issue?

3

Hi, thank you for your response. Here is a sample snippet:

const viewer = new Cesium.Viewer("cesiumContainer");

var startTime = Cesium.JulianDate.fromDate(new Date()); // polygon valid start time
var endTime = Cesium.JulianDate.fromDate(new Date());
Cesium.JulianDate.addSeconds(startTime, 30, endTime); // polygon valid end time

var polygonBounds = [
    Cesium.Cartesian3.fromDegrees(-123.0, 54.0),
    Cesium.Cartesian3.fromDegrees(-114.0, 54.0),
    Cesium.Cartesian3.fromDegrees(-114.0, 52.0),
    Cesium.Cartesian3.fromDegrees(-123.0, 52.0),
    Cesium.Cartesian3.fromDegrees(-123.0, 54.0),
];

var opacity = 0.6;
var showPolygon = true; // user toggle

var polygonEntity = viewer.entities.add({
    polygon: {
        hierarchy: polygonBounds,
        material: Cesium.Color.YELLOW.withAlpha(opacity),
        show: new Cesium.CallbackProperty( function () {return showPolygon; }, false),
        outline: true,
        outlineColor: Cesium.Color.BLACK.withAlpha(opacity),
        outlineWidth: 4,
        height: 1,
    },
    availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start: startTime,
        stop: endTime
    })])
});

I see that this sample block renders almost instantly in Sandcastle… I have a very similar block inside a czml server-sent event listener. There is always the same number of points (5). The availability startTime field is typically in the past in my implementation, and the endTime is some time in the future.