Using PolylineVolumeGeometry to load a large number of pipelines seems to have performance issues

CesiumJS
1

I am using cesium’s PolylineVolumeGeometry to load the tap water pipeline. Because of the huge number, I used GeometryInstance. I loaded more than 30,000 pipes, and I found a strange phenomenon. When all the pipes appear in the camera, the fps is about 60 frames, but when the camera gradually approaches these pipes (some of the pipes are not in the camera ), The fps starts to drop, and the final fps is small and 10, the webpage becomes very stuttered.
In theory, rendering more pipelines requires greater overhead. But it seems the other way around.
Below is the test code and related screenshots.
Who helped me see what happened, thanks.

var viewer = new Cesium.Viewer(‘cesiumContainer’,{scene3DOnly :true});
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.globe.depthTestAgainstTerrain = true;

var instanceArray = ;
var i = 0;
while(i < 30000) {
var la = 41.0 + i*0.001;
var volume = new Cesium.PolylineVolumeGeometry({
vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
polylinePositions: Cesium.Cartesian3.fromDegreesArray([
-72.0, 40.0,
-72.0, la
]),
shapePositions: [new Cesium.Cartesian2(-5000, -2000),
new Cesium.Cartesian2(2000, -6000),
new Cesium.Cartesian2(5000, -2000),
new Cesium.Cartesian2(5000, 5000),
new Cesium.Cartesian2(-5000, 5000)]
});

instanceArray.push(new Cesium.GeometryInstance({
  geometry : volume,
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom())
  }
}));
i++;

}
viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instanceArray,
appearance: new Cesium.PerInstanceColorAppearance({translucent: false}),
vertexCacheOptimize: true,
interleave : true,
cull:false,
allowPicking: false,
compressVertices: false
}));

image
image1129×618 363 KB

image
image1128×615 463 KB

2

This problem seems to be caused by a large number of models overlapping each other.

3

That does sound strange. I’m having trouble running that code example - can you use a code block or put it on Sandcastle and click “Share” and paste the link here?

4

Hi,Omar. Below is the code:

var viewer = new Cesium.Viewer('cesiumContainer', {
    scene3DOnly: true
});
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.globe.depthTestAgainstTerrain = true;

var instanceArray = [];
var i = 0;
while (i < 30000) {
    var volume = new Cesium.PolylineVolumeGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
        polylinePositions: Cesium.Cartesian3.fromDegreesArray([
            1.0, 0.0,
            1.0 + i * 0.005, 0
        ]),
        shapePositions: [new Cesium.Cartesian2(-5000, -2000),
            new Cesium.Cartesian2(2000, -6000),
            new Cesium.Cartesian2(5000, -2000),
            new Cesium.Cartesian2(5000, 5000),
            new Cesium.Cartesian2(-5000, 5000)
        ]
    });

    instanceArray.push(new Cesium.GeometryInstance({
        geometry: volume,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom())
        }
    }));
    i++;
}
viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: instanceArray,
    appearance: new Cesium.PerInstanceColorAppearance({
        translucent: false
    }),
    vertexCacheOptimize: true,
    interleave: true,
    cull: false,
    allowPicking: false,
    compressVertices: false
}));

You may need to wait a few seconds,the pipeline only appears in the scene.

Here is my new discovery,
When changing

 ...
polylinePositions: Cesium.Cartesian3.fromDegreesArray([
    1.0, 0.0,
    1.0 + i * 0.005, 0
]),
...

in the above code to

 ...
polylinePositions: Cesium.Cartesian3.fromDegreesArray([
    1.0 + (i - 1) * 0.005, 0.0,
    1.0 + i * 0.005, 0
]),
...

The purpose of this is to avoid overlapping between pipelines,I found that this way there will be no severe stuttering.
sandcastle link:
sandcastle test link