Rendering Issues with Google 3D Tiles and Globe On

CesiumJS
1

I’ve read some forum posts stating that you don’t have to turn off the globe when you load Google’s Photorealistic 3D Tiles. However, if we leave the globe on we get really bad and strange rendering of black areas all over the globe (see screen captures below).

We have a ton of code that draws various entities and primitives. But if we turn the globe off many of these objects aren’t rendered (not sure if they are not drawn at all or just not visible). If we turn the globe on while displaying Google’s 3D Tiles, however, we get the really bad rendering effects.

I’ve tried to reproduce the issue in Sandcastle, but so far I haven’t been able to do so.

Wondering if anyone has any idea what would be causing this to occur and how we could correct it?

Thanks in advance…

Globe Off:

image
image1297×621 109 KB

Globe On:

image
image1318×618 131 KB

2

@sean_lilley hope you’re doing well. Also hoping you might have an idea about what might be causing this?

3

@Rob I’m not sure offhand. Are you able to provide any sample code for how you’re constructing the globe and Google 3D Tiles?

4

@sean_lilley , thanks for the reply. Below is the basic approach we’re using to construct the globe and 3D Tiles.

As I mentioned in the original post I’ve tried replicating the issue in Sandcastle and haven’t been able to so far.

const tp = await Cesium.createWorldTerrainAsync({
    requestVertexNormals: true,
    requestWaterMask: false
});

let provider = new Cesium.MapboxStyleImageryProvider({ 
    username: 'our_username',
    styleId: 'our_style',
    accessToken: 'our_token'
});
let layer = new Cesium.ImageryLayer(provider, {
    alpha: 1.0,
    brightness: 1.0
});

var skyBoxBaseUrl = "resources/Cesium/Assets/Textures/SkyBox/tycho2t3_80";

const viewer = new Cesium.Viewer("cesiumContainer", {
    contextOptions: {
        requestWebgl1: false
    },
    animation: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    requestRenderMode: false,
    useDefaultRenderLoop: true,
    targetFrameRate: 15,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    terrainProvider: tp,
    baseLayerPicker: false,
    baseLayer: layer,
    skyBox: new Cesium.SkyBox({
                    sources: { 
                        positiveX: skyBoxBaseUrl + '_px.jpg',
                        negativeX: skyBoxBaseUrl + '_mx.jpg',
                        positiveY: skyBoxBaseUrl + '_py.jpg',
                        negativeY: skyBoxBaseUrl + '_my.jpg',
                        positiveZ: skyBoxBaseUrl + '_pz.jpg',
                        negativeZ: skyBoxBaseUrl + '_mz.jpg'
                    }
                }),
    sceneMode: Cesium.SceneMode.SCENE3D
});

try {
    var Google3DTileset = await Cesium.createGooglePhotorealistic3DTileset();
    viewer.scene.primitives.add(Google3DTileset);                    
} 
catch (err) {
    console.log("Error loading Photorealistic 3D Tiles tileset.  Error: " + err.toString());
}

Appreciate any thoughts you might have!

5

@sean_lilley sorry to bug you, but wondering if you had a chance to take a look at how we’re creating the globe and Google 3D Tiles… and if any suggestions come to mind?

Thanks!

6

@Rob nothing immediately stands out to me…

7

We still haven’t been able to resolve this issue. Anyone else experiencing this? Any suggestions?

8

Still unable to figure this out. Is anyone else experiencing this?

9

It’s difficult to analyze this without a reproducible test case. (One can “manually” try to reproduce it, but that often involves the same (if not more) guesses as trying to find a workaround/solution for the issue itself).

But to clarify: When you talk about the globe being “on” or “off”, what exactly does this refer to? There’s a crucial difference of whether you try to run everything without a globe at all by saying

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

or whether you simply hide the globe, by omitting that globe: false part, and doing a
viewer.scene.globe.show = false;
instead.

10

The viewer is being constructed without any special reference to the globe (no “globe: false”). When we want to display the Google 3D Tiles we hide the globe using “viewer.scene.globe.show = false;”. And when we turn off the Google 3D Tiles (or display a different map source) we show the globe using “viewer.scene.globe.show = true;”.

However, when we hide the globe in this fashion we are unable to draw various objects (lines, polygons, etc.). But if we leave the globe visible so that we can draw these objects we get the appearance as seen in the screenshot above.

Thanks for the reply. We’re trying to figure out how to work through a process to determine the source of the issue. Unfortunately, we have been writing our app for quite a few years and there are a lot of features that have been implemented. The simplest Cesium example doesn’t produce the problem. So, it’s going to take some time to add features one-by-one.

We were just hoping someone else had experienced this and already knew what might be causing the issue.

11

I’m not sure whether I can provide really profound help right now (because I cannot imagine what might cause the issue that you described). But I’m curious about this part:

However, when we hide the globe in this fashion we are unable to draw various objects (lines, polygons, etc.). But if we leave the globe visible so that we can draw these objects we get the appearance as seen in the screenshot above.

When you say that you have to keep the globe visible to show certain objects, then I wonder why this might be the case. Usually, you can draw polygons and other things both when the globe is not shown, and when it is completely omitted from the viewer.

So to put it that way: What happens when you remove the globe and try to draw such an object? Does it simply not appear, or does it cause a crash…?

12

It didn’t cause a crash (or report an error of any kind)… objects just didn’t appear. But if we switched the globe back on the objects would appear.

However, something must have changed in the latest build. I hadn’t tried many of the objects since we upgraded Cesium (we upgraded to 1.120 a few days ago). It looks like most of the objects are now appearing correctly even when the Google 3D Tiles are displayed and the globe is hidden… which is great!

The only issue I’ve noticed so far that when we attempt to draw a custom material with a custom gradient shader to display basically heatmap polygons on the ground they don’t show up at first. But if I switch to another map source (turning the globe’s visibility on) and then switch back to the Google 3D Tiles (turning the globe’s visibility back off) the heatmaps appear.

image
image887×621 49.4 KB

I’ll work on this as it seems we should be able to figure out what the issue is or at least a work around.

Thanks for the responses!