Bad rendering order of entities after upgrading CesiumJS

CesiumJS
1

Hello,

I am dealing with another problem after updating CesiumJS to a newer version. I already wrote this week about other problems, now I have this one. I have many point markers in the scene (entity displayed as a billboard, the image is a small SVG icon). All points (markers) are above ground level and also above the dam layer (heigher altitude), so that they can be clicked on and their description read. In the application with Cesium JS 1.108, all points are above the blue dam level and can be clicked on.

Unfortunately, this does not work in version 1.135. Although the points (markers) have a higher altitude than the dam level, they are displayed below the level and cannot be clicked on, or rather, only the dam can be clicked on. There is some problem with the rendering order or something. I did not do anything with the dam or the points that I load from geojson, and both websites have the same code (cesiumJS version is the only difference + something unimportand). For verification and out of interest, if you set the dam without transparency (“Nastavení průhlednosti hladiny Švihova” slider in left control panel), set the slider to max so that the dam is not transparent, the points will automatically appear above the dam and suddenly you can click on them. So it is also related to the transparency of the dam entity. How can I make the points appear above the dam level in 1.135?

1.108:

Zahrádka 3D

1.135:

Zahrádka 3D

2

There has been a change that may have caused a regression, and that might be related to this. (I’d have to read the source code of that application and many more details to confirm this - maybe @mzschwartz5 can say how likely that is…?).

But you might want to try out the version behind Fixes model-billboard depth interactions by mzschwartz5 · Pull Request #13018 · CesiumGS/cesium · GitHub and see whether that could resolve your issue. You should be able to take the state of this pull request from the CI build at https://ci-builds.cesium.com/cesium/billboard-depth-regression-fix for a quick test.

2 Likes
3

here is parts of source ccode for points and for dam entity.

points:

    // add points of interest

    try { // try/catch and global var --> because GeoJson is loaded as promise

      var pointsGeoJson = await Cesium.GeoJsonDataSource.load(interestPointsPath);

      viewer.dataSources.add(pointsGeoJson);

      const pointsEntities = pointsGeoJson.entities.values;

      for (let i = 0; i < pointsEntities.length; i++) {

        let entity = pointsEntities[i];

        // set position (Z coordinate)

        const cartesianCoords = new Cesium.Cartesian3(entity.position._value.x, entity.position._value.y, entity.position._value.z);

        const cartographicCoords = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesianCoords);

        const longitude = Cesium.Math.toDegrees(cartographicCoords.longitude);

        const latitude = Cesium.Math.toDegrees(cartographicCoords.latitude);

        entity.position = Cesium.Cartesian3.fromDegrees(longitude,

          latitude,

          entity.properties.Z_modified + elevationDiff);

        // set info in pop up

        entity.name = "<h2>" + entity.properties.nazev_sluzby + "</h2>"; // show attributes of geojson in pop up

        const type = "<p>typ: " + entity.properties.stav; + "</p>";

        const coords = "<p>GPS souřadnice (WGS 84 – EPSG 4326): <br>" + lat + "N, " + lon + "E </p>";

        const info = "<p>" + entity.properties.popupContent + "</p>";

        entity.description = type + coords + info;

        // set marker

        let markerPath = markersPath + entity.properties.sluzba + ".svg";

        markerPath = markerPath.replace(/[0-9]/g, '');




        let multiply = 1;

        if (mobileDevice) { multiply = 1.75; }

        let scale;

        if (entity.properties.nazev_sluzby == "kostel sv. VĂ­ta") {

          scale = 0.35 * multiply; // marker of church is bigger to be dominant

        } else {

          scale = 0.15 * multiply;

        }

        entity.billboard = {

          image: markerPath,

          sizeInMeters: false, // great feature!!! can relative / absolute size of icon, width and height have to be but not suitable for my app

          //width: 20,

          //height: 20,

          scale: scale// 0 - 1.0 --> smaller img, 1<   --> bigger img

        }


      }

      pointsGeoJson.clustering.enabled = true;

      pointsGeoJson.clustering.pixelRange = 0.03;

      pointsGeoJson.clustering.minimumClusterSize = 6;

    }

    catch (error) {

      console.log(error);

    }

dam entity:

    const zahradkaCentroid = Cesium.Cartesian3.fromDegrees(lon, lat, elevation); // mid point of Zahradka 3D model

    const damColor = new Cesium.Color(0, 0.75, 1, 0.4); // R, G, B, alpha


    function createSvihovDam(centroid, color) {

      return new Cesium.Entity({

        id: "svihovDam",

        name: "<br>v. n. Ĺ vihov",

        description: "<p>Klikli jste na hladinu v. n. Švihov. Pokud jste chtěli kliknout na bodovou značku, která je pod hladinou, vypněte vrstvu přehrady v levém ovládacím panelu.</p><p>Ve výchozím stavu je vrstva přehrady v úrovni při běžném vodním stavu v. n. Švihov (376,8 m n.m.).</p>",

        position: centroid,

        show: true,

        plane: {

          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),

          dimensions: new Cesium.Cartesian2(3600, 2652), // dimensions of plane (X Y)     (3600, 2652) for fitting Zahradka area

          fill: true,

          // material: Cesium.Color.DEEPSKYBLUE.withAlpha(0.2), 

          material: color,

          outline: false,

          // outlineColor: Cesium.Color.BLUE,

        },

      });

    };

    let svihovDam = createSvihovDam(zahradkaCentroid, damColor);

    viewer.entities.add(svihovDam);
4

At a quick glance, it seems likely to me that @Marco13 is right. It should be pretty simple to confirm by either trying your application on Cesium 1.134 (before the PR that caused that regression), or with the CI build that includes the fix to the regression that Marco linked.

-Matt

5

I tried version 1.134 and the problem is solved! Thank you for your contribution. If I understand correctly, this behavior (incorrectly rendered transparent entities, bad rendering order) is officially a bug in CesiumJS 1.135, is that right? And it should be fixed in future versions of CesiumJS, right?

6

Hi @RosBer97 that’s all correct. I’m hoping to get Fixes model-billboard depth interactions by mzschwartz5 · Pull Request #13018 · CesiumGS/cesium · GitHub into the next release (Cesium 1.136.0) to fix the issue.