Cesium實現(xiàn)背景透明的方法

前言

今天有人在Cesium實驗室QQ群里問如何把地球背景做成透明的，當時我以為Cesium比較復(fù)雜的渲染機制可能即使context設(shè)置了alpha屬性也未必能透明，所以和同學說可能得改Cesium代碼，可以使用ViewportQuad來實現(xiàn)。

后來自己實驗一下，發(fā)現(xiàn)實際上context設(shè)置為alpha還是起作用的。。。慚愧誤導了某位同學。。

最終效果

最終效果如下所示，其中背景圖片時通過設(shè)置css樣式background-image來實現(xiàn)的。

輸入圖片說明

源碼

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

注意點：

1 OIT的問題
其中orderIndependentTranslucency需要設(shè)置為true，才能去掉地球表面的大氣效果的黑圈問題，這個主要是因為Cesium的OIT機制會把FrameBuffer中的的透明度都改成1所致。如果不想禁用OIT的話，可以試試調(diào)整一下skyAtmosphere的幾個屬性值來試試。。

2 backgroundColor
backgroundColor需要設(shè)置成(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>