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