Cesium實現背景透明的方法

前言

今天有人在Cesium實驗室QQ羣裏問如何把地球背景作成透明的，當時我覺得Cesium比較複雜的渲染機制可能即便context設置了alpha屬性也未必能透明，因此和同窗說可能得改Cesium代碼，可使用ViewportQuad來實現。

後來本身實驗一下，發現實際上context設置爲alpha仍是起做用的。。。慚愧誤導了某位同窗。。

最終效果

最終效果以下所示，其中背景圖片時經過設置css樣式background-image來實現的。

 

輸入圖片說明

源碼

把如下代碼拷貝到Cesium的Sandcastle中就能看到效果。

注意點：

1 OIT的問題
其中orderIndependentTranslucency須要設置爲true，才能去掉地球表面的大氣效果的黑圈問題，這個主要是由於Cesium的OIT機制會把FrameBuffer中的的透明度都改爲1所致。若是不想禁用OIT的話，能夠試試調整一下skyAtmosphere的幾個屬性值來試試。。

2 backgroundColor
backgroundColor須要設置成(0, 0, 0, 0)樣式，其餘顏色會影響最終效果。

js代碼

var viewer = new Cesium.Viewer('cesiumContainer', { orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true, } }, }); viewer.scene.skyBox.show = false; viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); //viewer.scene.skyAtmosphere.show = false; //viewer.scene.skyAtmosphere.brightnessShift = -0.0; 

html代碼

<div id="cesiumContainer" class="fullSize" style="background-image: url(https://www.bjxbsj.cn/images/dem.jpg);"></div> <div id="loadingOverlay"><h1>Loading...</h1></div> <div id="toolbar"></div> 

---

歡迎關注 Cesium實驗室 ，QQ羣號：595512567。

 

image.png