Terrain transparency

Probably a beginner question:

I need to vary the transparency of the world of a selected rectangular region (polygon would be better but rectangular will do) region with terrain data. I can't seem to figure out how to do it?

Hi Nahid,

Sounds cool. What is the use case? Are you looking at objects under the surface?

Cesium actually doesn’t support this out of the box, but could be a fairly simple change to output a less than 1.0 alpha value from the fragment shader based on the region and to change the renderstate to enable blending. This will require that the system supports OIT (Cesium will try to use it by default) though since sorting and alpha-blending would not work for horizon views. Some other issues may come up but I suspect this will work for many use cases.

I don’t know if this is a high priority right now for any of the contributors, but you could hack around and let us know how it goes.


Hello Patrick,

Sounds cool. What is the use case? Are you looking at objects under the surface?

About use cases, do you think it would be possible to realize in Cesium one mentioned in this blog :


There are countless applications related to modelling anything underground where you would want to refer / compare things to surface terrain. Closest thing out there now is ground push which displaces the ground instead. But with that, you also lose the ground / terrain which is a more intuitive point of reference for most people.

I hacked up translucent terrain on the translucent-terrain branch. Copy and paste the following code into Sandcastle and then use the geocoder widget in the top right to zoom to Mount Everest.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

terrainProvider : new Cesium.CesiumTerrainProvider({

url : ‘//cesiumjs.org/stk-terrain/tilesets/world/tiles


baseLayerPicker : false


var primitives = viewer.scene.primitives;

var corridorGeometry = new Cesium.CorridorGeometry({

positions : Cesium.Cartesian3.fromDegreesArray([

86.9253, 27.9881,

88.9253, 27.9881,

88.9253, 29.9881


width : 200.0,

vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT


var redCorridorInstance = new Cesium.GeometryInstance({

geometry: corridorGeometry,

attributes : {

color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))



primitives.add(new Cesium.Primitive({

geometryInstances : [redCorridorInstance],

appearance : new Cesium.PerInstanceColorAppearance({

closed : true



This branch is OK for experimenting but is not for production use. It most likely requires OIT to look good, does not address cracking between tiles, has culling issues, and needs improved camera control. I think the best way forward for this feature to to specify extents (rectangles) on the terrain and how translucent they should be, including completely transparent. This would allow a slider to dynamic change the translucency for a region of interest.

Let me know if folks have other ideas, use cases, and general interest in this feature.


Looks very nice. This effect should definitely be limited to an extent.

May need to place a white plane or something below the model to not make it look dark.

I agree about needing the plane or just push down the terrain like the groundpush plugin. Walls may also be useful.