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