Cesium實(shí)現(xiàn)背景透明的方法
前言
今天有人在Cesium實(shí)驗(yàn)室QQ群里問(wèn)如何把地球背景做成透明的绰寞，當(dāng)時(shí)我以為Cesium比較復(fù)雜的渲染機(jī)制可能即使context設(shè)置了alpha屬性也未必能透明到逊，所以和同學(xué)說(shuō)可能得改Cesium代碼，可以使用ViewportQuad來(lái)實(shí)現(xiàn)克握。
后來(lái)自己實(shí)驗(yàn)一下蕾管，發(fā)現(xiàn)實(shí)際上context設(shè)置為alpha還是起作用的。菩暗。掰曾。慚愧誤導(dǎo)了某位同學(xué)。停团。
最終效果
最終效果如下所示旷坦，其中背景圖片時(shí)通過(guò)設(shè)置css樣式background-image來(lái)實(shí)現(xiàn)的。
輸入圖片說(shuō)明
源碼
把以下代碼拷貝到Cesium的Sandcastle中就能看到效果佑稠。
注意點(diǎn)：
1 OIT的問(wèn)題
其中orderIndependentTranslucency需要設(shè)置為true秒梅，才能去掉地球表面的大氣效果的黑圈問(wèn)題，這個(gè)主要是因?yàn)镃esium的OIT機(jī)制會(huì)把FrameBuffer中的的透明度都改成1所致舌胶。如果不想禁用OIT的話捆蜀，可以試試調(diào)整一下skyAtmosphere的幾個(gè)屬性值來(lái)試試。。
2 backgroundColor
backgroundColor需要設(shè)置成(0, 0, 0, 0)樣式辆它，其他顏色會(huì)影響最終效果誊薄。
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>
