XYZ Tile Layer(2D) over Photorealistic 3D Tiles in recent version like 1.123

[R.Ogi]

Hello community! I need help with a technical issue.

I’m trying to work with recent versions of CesiumJS (such as version 1.123) to display Google Photorealistic 3D Tiles and overlay them with a 2D tile layer containing transparency information (RGB: 255,255,255). The tile layer follows this URL pattern: http://test/{z}/{x}/{y}.png

While this overlay worked in older versions like 1.95 with the following source code:

// Create Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    navigationHelpButton: true,        // Display navigation help button
    requestWebgl2: true,
});

// Google's 3D Photorealistic Tiles
const tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(2275207)
    })
);

	// add 2D tile layer
	const imageryLayer = viewer.imageryLayers.addImageryProvider(
	  new Cesium.UrlTemplateImageryProvider({
	    url: 'https://test/tiledata1/{z}/{x}/{y}.png',
	    minimumLevel: 0,
	    maximumLevel: 21, 
	    credit: '2D Tile Data Source'  
	  })
	); 

(But when using this code, there’s an issue with the 2D tile layer not properly conforming to the terrain irregularities in the 3D tiles.)

It now throws errors in newer versions.

If anyone has experience with this issue, I would greatly appreciate your guidance.

[jjhembd]

Hi @R.Ogi, welcome to the community!

Draping 2D imagery on 3D Tiles is not currently supported. We have an issue open for this at Drape imagery over 3D Tiles · Issue #7591 · CesiumGS/cesium · GitHub

What are you trying to show with this transparency layer? It sounds like something that could be achieved with 3D Tiles Classification. See this example of classification applied to the Google Photorealistic 3D Tiles.

I am not sure why your specific code stopped working in later versions. Can you post a copy of the error message?

[R.Ogi]

@jjhembd Thank you for your helpful response.

I apologize for my unclear question. Let me explain the trial situation in more detail below

1. CesiumJS version 1.95
   // create viewer
   const viewer = new Cesium.Viewer(‘cesiumContainer’, {
   terrainProvider: Cesium.createWorldTerrain()
   });

   // Google’s 3D Photorealistic Tiles
   const tileset = viewer.scene.primitives.add(
   new Cesium.Cesium3DTileset({
   url: Cesium.IonResource.fromAssetId(2275207)
   })
   );

   // add 2D tileLayer
   const imageryLayer = viewer.imageryLayers.addImageryProvider(
   new Cesium.UrlTemplateImageryProvider({
   url: ‘https://dummy.com/dummytile/{z}/{x}/{y}.png’,
   minimumLevel: 0,
   maximumLevel: 21,
   credit: ‘2D Tile Data Source’
   })
   );

   // make 2dLayer more brighter
   imageryLayer.brightness = 5.0;

[result]
Successful overlay processing with transparency consideration for 2D layers

However, it was discovered that the terrain elevation differences were inappropriate

The 2D tile image overlay is stored as follows

Thinking that eliminating terrain elevation differences might solve the issue, I changed the terrainProvider to Cesium.EllipsoidTerrainProvider()

// create viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
	terrainProvider: new Cesium.EllipsoidTerrainProvider() // 

});

（Source code omitted as it is identical to the above）

[result]
The terrain irregularities were eliminated, but…

Upon inspection from below, we confirmed that the layers were incorrectly stacked underneath. I determined this approach was not viable

Like you said,This leads me to conclude that there is currently no viable method for overlaying 2D tile imagery onto the terrain geometry contained within Google 3D Photorealistic Tiles. Could you confirm if this understanding is accurate?

Sincerely thank you for your expert guidance.

[jjhembd]

Hi @R.Ogi, I think your understanding is correct.

One challenge is that terrain is only 2.5D: at a given X/Y position, the terrain only has one value for height. This makes it relatively simple to position a 2D overlay image at the appropriate height.

3D Tiles (like the Photorealistic Tiles) are truly 3D. The surface could have multiple Z values at the same X/Y position–for example, at a bridge or tunnel. We do not currently have a way to apply a 2D overlay to this kind of 3D data.

Your use case and example images are interesting. If you can add them to the GitHub issue at Drape imagery over 3D Tiles · Issue #7591 · CesiumGS/cesium · GitHub, it will help us prioritize it for future work.

[R.Ogi]

Hi @jjhembd, thanks for your answer.
I think I understand now!
So, Cesium terrain data is 2.5D, but Google photorealistic 3D tiles are truly 3D,
therefore, at present, 2D tile data cannot be overlaid on Google photorealistic 3D terrain data.
Anyway, I’m really grateful to understand the current situation. Thank you!

(P.S.) I appreciate you leaving a comment on GitHub. I’ll make sure to check the referenced topic.