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

**URL:** <https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456>\
**Category:** CesiumJS\
**Created:** [November 11, 2024, 2:54am UTC](https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456 "2024-11-11T02:54:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![R.Ogi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/r.ogi/32/14037_2.png) [@R.Ogi](https://community.cesium.com/u/R.Ogi)\
**Post date:** [November 11, 2024, 2:54am UTC](https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456/1 "2024-11-11T02:54:50Z")

</div>

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](http://test/%7Bz%7D/%7Bx%7D/%7By%7D.png)

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

```javascript
// 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.

---

<div class="post-metadata">

**Author:** ![jjhembd](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jjhembd/32/10144_2.png) [@jjhembd](https://community.cesium.com/u/jjhembd)\
**Post date:** [November 11, 2024, 10:57pm UTC](https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456/2 "2024-11-11T22:57:01Z")

</div>

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](https://github.com/CesiumGS/cesium/issues/7591)

What are you trying to show with this transparency layer? It sounds like something that could be achieved with [3D Tiles Classification](https://sandcastle.cesium.com/?src=3D%20Tiles%20Photogrammetry%20Classification.html). See this [example of classification applied to the Google Photorealistic 3D Tiles](https://sandcastle.cesium.com/?src=Google%20Photorealistic%203D%20Tiles%20with%20Building%20Insert.html).

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

---

<div class="post-metadata">

**Author:** ![R.Ogi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/r.ogi/32/14037_2.png) [@R.Ogi](https://community.cesium.com/u/R.Ogi)\
**Post date:** [November 12, 2024, 12:34pm UTC](https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456/3 "2024-11-12T12:34:16Z")

</div>

@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()  
});

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

 ![20241112cesiumcommunity1](https://global.discourse-cdn.com/cesium/original/3X/7/f/7f6db4acc1c8bd103b19c466cfa509178dd0554e.jpeg)

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

 ![20241112cesiumcommunity2](https://global.discourse-cdn.com/cesium/original/3X/4/1/413917b07f7558aa9025393aeef699c2b114b217.jpeg)

The 2D tile image overlay is stored as follows

 ![20241112cesiumcommunity3](https://global.discourse-cdn.com/cesium/original/3X/7/f/7fe766a7f393b4e79884b45fabe39900a3bceeb6.png)

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…

 ![20241112cesiumcommunity4](https://global.discourse-cdn.com/cesium/original/3X/a/9/a9ec2806e023bb56cff13a428a7aaaf15b784cb6.jpeg)

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

 ![20241112cesiumcommunity5](https://global.discourse-cdn.com/cesium/original/3X/5/9/592dd88a6968c5319a84d705becb2947f57149d5.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![jjhembd](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jjhembd/32/10144_2.png) [@jjhembd](https://community.cesium.com/u/jjhembd)\
**Post date:** [November 13, 2024, 2:14am UTC](https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456/4 "2024-11-13T02:14:48Z")

</div>

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](https://github.com/CesiumGS/cesium/issues/7591), it will help us prioritize it for future work.

---

<div class="post-metadata">

**Author:** ![R.Ogi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/r.ogi/32/14037_2.png) [@R.Ogi](https://community.cesium.com/u/R.Ogi)\
**Post date:** [November 13, 2024, 4:57am UTC](https://community.cesium.com/t/xyz-tile-layer-2d-over-photorealistic-3d-tiles-in-recent-version-like-1-123/36456/5 "2024-11-13T04:57:12Z")

</div>

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.