Points are being cut off by tileset

CesiumJS
1

I’m new to Cesium, and I’ve dug around a lot but I can’t find a solution that works for me. I’ve pulled together everything I want in this sandbox except that the tileset is interfering with the points I want to display. What am I missing?

My code:

const viewer = new Cesium.Viewer("cesiumContainer", {
  globe: false,
});
const scene = viewer.scene;


// One World Terrain Base Globe provided by Maxar
let tileset;
try {
  // MAXAR OWT WFF 1.2 Base Globe
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(1208297, {
    maximumScreenSpaceError: 4,
  });
  scene.primitives.add(tileset);
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}


// autorotate
var rotationSpeed = 0.01;
var lastNow = Date.now();
viewer.scene.postRender.addEventListener(function (scene, time) {
  var now = Date.now();
  var spinRate = rotationSpeed;
  var delta = (now - lastNow) / 1000;
  lastNow = now;
  viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, spinRate * delta);
});


// points
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
    color: Cesium.Color.fromCssColorString('rgba(255, 233, 147, 0.6)'),
    pixelSize: 20,
  },
});
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
  point: {
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
    color: Cesium.Color.fromCssColorString('rgba(255, 233, 147, 0.6)'),
    pixelSize: 20,
  },
});
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
  point: {
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
    color: Cesium.Color.fromCssColorString('rgba(255, 233, 147, 0.6)'),
    pixelSize: 20,
  },
});
2

Hi @mechobba, welcome to the forums! I’m guessing you’re referring to the points you want to display intersecting with the earth? One option you have to solve this is to set the disableDepthTestDistance property on each point to Number.POSITIVE_INFINITY, which will make the points ignore depth testing and never clip:


// points
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
    color: Cesium.Color.fromCssColorString('rgba(255, 233, 147, 0.6)'),
    pixelSize: 20,
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  },
});
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
  point: {
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
    color: Cesium.Color.fromCssColorString('rgba(255, 233, 147, 0.6)'),
    pixelSize: 20,
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  },
});
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
  point: {
    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
    color: Cesium.Color.fromCssColorString('rgba(255, 233, 147, 0.6)'),
    pixelSize: 20,
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  },
1 Like
3

That worked perfectly! But… now I can still see the points even when they are on the other side of the globe.

5

Hi @mechobba!

A few thoughts:

  1. CLAMP_TO_GROUND does not work by default with 3D Tiles (which is what you are using for the base globe). To enable it, pass the enableCollision option:
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(1208297, {
    maximumScreenSpaceError: 4,
    enableCollision: true
  });

  1. Even then, the points are probably too close to the terrain, and will still clip. You could use HeightReference.RELATIVE_TO_GROUND instead, and include a height value with your position like Cartesian3.fromDegrees(-80.5, 35.14, 10000).

  2. But I think the cleanest solution here would be to use a CallbackProperty with disableDepthTestDistance. We’ll make sure the depth test distance is always the distance from the camera to the center of the earth, so that points on the other side don’t show through:

    disableDepthTestDistance: new Cesium.CallbackProperty(() => viewer.scene.camera.getMagnitude(), false)
6

That worked perfectly! Thank you!