Seeing OSM Buildings through terrain

CesiumJS
1

Hi all,
Only just started playing with CesiumJS, so maybe I’m doing something wrong - then again, maybe I’m not :slight_smile:

When adding a Viewer to my webpage, then adding WorldTerrain and next OSM Buildings, I can see the buildings through the terrain after zooming, panning and rotating a bit. This looks a bit weird, if you’re looking at the side of a mountain and you can actually see the buildings of the village on the other side of the mountain. I’ve tried to capture it in a screenshot:
image
Here we’re looking from Little Loch Broom in the direction of Ullapool. Camera standpoint is low enough that the hills in between should hide all the OSM buildings, yet they still can be seen. Using the code below I can reproduce in a sandcastle, although it seems it may have something to do with one of the options that I’ve turned off. Before I added those in the sandcastle, I could not reproduce it. Not sure if the sandcastle remembers the camera position, also not sure if it immediately loads the proper building tiles right away. But it happens everywhere that I can see.

Sandcastle attempt
(sorry, new here so not very familiar with sandcastle - it’s been 40 years or more since I last played with those :wink: :smiley: )

const viewer = new Cesium.Viewer(“cesiumContainer”,
{
terrainProvider: Cesium.createWorldTerrain(),
animation : false,
baseLayerPicker : false,
timeline : false,
geocoder : false,
homeButton : false,
fullscreenButton : false,
sceneModePicker : false,
});
viewer.scene.primitives.add(Cesium.createOsmBuildings());

2

From a quick test, this seems to be related to baseLayerPicker : false, part. Omitting this line will cause the buildings to not show through. This might even be a bug - I’ll have to re-read some of the documentation here, to see whether this behavior is explained somewhere. Even if it’s not a “bug” in the most narrow sense, it’s at least suprising and unexpected.

However, it’s possible to manually enable the depth test again, with
viewer.scene.globe.depthTestAgainstTerrain = true;

An example with the fix:

const viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: Cesium.createWorldTerrain(),
  animation: false,
  baseLayerPicker: false,
  timeline: false,
  geocoder: false,
  homeButton: false,
  fullscreenButton: false,
  sceneModePicker: false,
});

viewer.scene.globe.depthTestAgainstTerrain = true;

viewer.scene.primitives.add(Cesium.createOsmBuildings());

viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    4449322.378960778,
    451492.40169566526,
    4533089.879192436
  ),
  orientation: new Cesium.HeadingPitchRoll(
    0.2001936605288579,
    -0.13844889585704911,
    0.000009184286030361477
  ),
});
3

Ah yes, that fixes it indeed! Thank you for the quick solution. It was definitely a bit surprising and unexpected :slight_smile:

I’m using CesiumJS to display GPS-tracks from my hikes and, more importantly, the tracks for my hiking plans as well (which are mostly in the Scottish Highlands, quite remote places). So I’m following those tracks around, and was indeed quite surprised to see buildings halfway up a mountain where I was quite sure there couldn’t be any. That’s when I started really looking into it, and noticed it happened everywhere. But: it did not happen with my GPS-tracks (loaded as GeoJson files), if that is helpful with investigations.

Thanks for the quick fix though!

4

Hi there,

Just a quick addition– BaseLayerPicker overriding depthTestAgainstTerrain is a documented issue. I’ll bump the issue with this report as well.

Thanks!