セシウムDataSourceCollectionレイヤの順序

Question

私はセシウムのグローブに入れたいオブジェクトを複数持っています。問題は、重複した場合、私はいくつかのzファイティングの問題が発生し、その順序を調整できないということです。

DataSourceCollectionにDataSourceオブジェクトの順序を指定する方法はありますか？例えば

、私は次のコードを使用して、赤のポリゴンの上に緑色のポリゴンを持っているしたいと思います：

var viewer = new Cesium.Viewer('cesiumContainer'); 

var red = Cesium.GeoJsonDataSource.load('map1.geojson', { 
    fill: new Cesium.Color(1, 0, 0, 1.0) 
}); 

var green = Cesium.GeoJsonDataSource.load('map2.geojson', { 
    fill: new Cesium.Color(0, 1, 0, 1.0) 
}); 

viewer.dataSources.add(red); 
viewer.dataSources.add(green); 

しかし、結果は次のようになります。

alpha引数を1.0未満に調整すると、私はz-fightingを修正できますが、依然として対処されていないことに気付きました。

Answer 1

質問の最後に、zファイティングのクイックフィックスでは、透明度を設定することによって、これらのポリゴンのZバッファをオフにすることが記載されています。透明度は8ビットのアルファチャンネルで発生するので、私の好きな値は254.0/255.0、つまり0.996です。

ただし、オフにしたい別のオプションがあります。それはorderIndependentTranslucencyです。これは、ビューアのコンストラクタのoptionsパラメータから初期化できるSceneのプロパティです。それをサポートするシステムのデフォルトでは、不透明度に関係なく、他の半透明オブジェクトの背後にある半透明オブジェクトを常に「見る」ことができます。もちろん、レンダリング順序は結果に影響しません。しかし、この場合は、レンダリング順序が結果に影響するようにしたい。一方のポリゴンでもう一方のポリゴンを隠す必要がある場合。

例を示します。下部にある[Run Code Snippet]をクリックするか、JavaScriptセクションのみをSandcastleに貼り付けます。

var viewer = new Cesium.Viewer('cesiumContainer', { 
 
    navigationInstructionsInitiallyVisible: false, animation: false, timeline: false, 
 

 
    // The next line is the important option for this demo. 
 
    // Test how this looks with both "true" and "false" here. 
 
    orderIndependentTranslucency: false 
 
}); 
 

 
var redPolygon = viewer.entities.add({ 
 
    name : 'Red polygon', 
 
    polygon : { 
 
     hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0, 
 
                 -115.0, 32.0, 
 
                 -102.0, 31.0, 
 
                 -102.0, 38.0]), 
 
     // The alpha of 0.996 turns off the Z buffer. 
 
     material : new Cesium.Color(1, 0, 0, 0.996) 
 
    } 
 
}); 
 

 
var greenPolygon = viewer.entities.add({ 
 
    name : 'Green polygon', 
 
    polygon : { 
 
     hierarchy : Cesium.Cartesian3.fromDegreesArray([-118.0, 42.0, 
 
                 -100.0, 42.0, 
 
                 -104.0, 32.0]), 
 
     // The alpha of 0.996 turns off the Z buffer. 
 
     material : new Cesium.Color(0, 1, 0, 0.996) 
 
    } 
 
}); 
 

 
viewer.zoomTo(viewer.entities);

html, body, #cesiumContainer { 
 
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; 
 
    font-family: sans-serif; 
 
}

<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css" 
 
     rel="stylesheet"/> 
 
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js"> 
 
</script> 
 
<div id="cesiumContainer"></div>

Answer 2

それは少し異なる場合に便利かもしれません： ポリゴンの高さを持っており、それらのいくつかは、透明またはないかもしれない、また、多角形の層が互いの上に横たわります。 この場合、z-fightingを解決するには、オプションフラグ{closeBottom：false}を持つポリゴンの底部を削除するのが良い方法です。 私は上記のコメントからこのケースのコードを修正しました：

var viewer = new Cesium.Viewer('cesiumContainer', { 
navigationInstructionsInitiallyVisible: false, animation: false, timeline: false, 

// The next line is the important option for this demo. 
// Test how this looks with both "true" and "false" here. 
orderIndependentTranslucency: false 
}); 

var redPolygon = viewer.entities.add({ 
name : 'Red polygon', 
polygon : { 
    hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0, 
                -115.0, 32.0, 
                -102.0, 31.0, 
                -102.0, 38.0]), 
    // The alpha of 0.996 turns off the Z buffer. 
    material : new Cesium.Color(1, 0, 0, 1), 
    closeBottom: false, 
    height: 1000, 
    extrudedHeight: 50100 
} 
}); 

var greenPolygon = viewer.entities.add({ 
name : 'Green polygon', 
polygon : { 
    hierarchy : Cesium.Cartesian3.fromDegreesArray([-118.0, 42.0, 
                -100.0, 42.0, 
                -104.0, 32.0]), 
    // The alpha of 0.996 turns off the Z buffer. 
    material : new Cesium.Color(0, 1, 0, 0.29), 
    height: 50100, 
    extrudedHeight: 95000, 
    closeBottom: false 
} 
    }); 

viewer.zoomTo(viewer.entities);