Some tiles looks afterimage after adjusting height

CesiumJS
1

Hi there,

I tried to adjust the height of point cloud (MSL) to consider the vertical reference(WGS84) in Cesium.

However, I confront an weird afterimage like some tiles are not transferred along with the other tiles.

image
image1022×816 141 KB

  this.tileset = this.viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
          url: this.tile_path + file.publish_url
      })
  );

  this.tileset.allTilesLoaded.addEventListener(()=>{
      const centerCoor = this.tileset.boundingSphere.center;
      const latlon = Cesium.Cartographic.fromCartesian(centerCoor);
      let gsi = new Geoid();
      const lat = Cesium.Math.toDegrees(latlon.latitude);
      const lon = Cesium.Math.toDegrees(latlon.longitude);
      const geoid = gsi.getGeoid(lat, lon);

      const heightOffset = geoid;
      const cartographic = Cesium.Cartographic.fromCartesian(centerCoor);
      const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
      const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
      const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
      this.tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
  });
2

Hello there,

You correctly adjusted the height of the tiles, but that adjustment is happening multiple times each time a frame is rendered. When you pan or zoom the camera, I think the adjustment is being applied again.

I would suggest using the initialTilesLoaded event instead.

1 Like
3

I tried it but it still the same…

image
image777×655 89.3 KB

I even tried this one but no change. I thought it would be rendering issue so I added this.viewer.render() but no change.

this.tileset.initialTilesLoaded.addEventListener( () => {
    setTimeout(()=> {
        console.log('tileset')
        const centerCoor = this.tileset.boundingSphere.center;
        const latlon = Cesium.Cartographic.fromCartesian(centerCoor);
        let gsi = new GsiGeoid();
        const lat = Cesium.Math.toDegrees(latlon.latitude);
        const lon = Cesium.Math.toDegrees(latlon.longitude);
        const geoid = gsi.getGeoid(lat, lon);
        console.log(geoid);
        const heightOffset = geoid;
        const cartographic = Cesium.Cartographic.fromCartesian(centerCoor);
        const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
        const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        this.tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        this.viewer.render();

    }, 500);
});
4

Is there a reason you are manually calling render? That’s typically not called by the user an is a internal function handled by Cesium when needed.