Cesium 3DTileset Style 原理簡析

應用層會看到這樣的使用。那么原理是什么, 為啥寫 height, 除了這個還有啥?

const tileset = await Cesium.Cesium3DTileset.fromUrl("../../public/tileset/building/tileset.json");
tileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [["${height} >= 7", "rgba(0, 149, 251, 0.3)"],["${height} >= 6", "rgb(0, 149, 251, 0.3)"],["${height} >= 5", "rgb(0, 149, 251, 0.3)"],["${height} >= 4", "rgb(0, 149, 251, 0.3)"],["${height} >= 3", "rgb(0, 149, 251, 0.3)"],["${height} >= 2", "rgb(0, 149, 251, 0.3)"],["${height} >= 1", "rgb(0, 149, 251, 0.3)"],["true", "rgb(0, 149, 251, 0.3)"]]}
});

1、相關類的結構

Cesium3DTileset┖ Cesium3DTile┖ Model3DTileContent┖ Model┖ ModelFeatureTable┣ Cesium3DTileFeature┖ BatchTexture

2、屬性的存儲

如果 tileset 可以存儲一些屬性信息, 比如 height,name等信息。都會存在 ModelFeatureTable中。可以通過拾取獲取。

const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {const feature = viewer.scene.pick(movement.position);if (!Cesium.defined(feature)) {return;}console.log(`Class: ${feature.getExactClassName()}`);console.log("Properties:");const propertyIds = feature.getPropertyIds();const length = propertyIds.length;for (let i = 0; i < length; ++i) {const propertyId = propertyIds[i];const value = feature.getProperty(propertyId);console.log(`  ${propertyId}: ${value}`);}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3、樣式的應用

當設置 樣式時, 比如:

conditions: [["${height} >= 7", "rgba(0, 149, 251, 0.3)"],["${height} >= 6", "rgb(0, 149, 251, 0.3)"],["${height} >= 5", "rgb(0, 149, 251, 0.3)"],["${height} >= 4", "rgb(0, 149, 251, 0.3)"],["${height} >= 3", "rgb(0, 149, 251, 0.3)"],["${height} >= 2", "rgb(0, 149, 251, 0.3)"],["${height} >= 1", "rgb(0, 149, 251, 0.3)"],["true", "rgb(0, 149, 251, 0.3)"]
]

那么就會遍歷 ModelFeatureTable中的屬性, 找到 height屬性, 然后判斷條件, 如果滿足條件,
就會將該顏色值寫入到 批處理紋理(BatchTexture)中。最終以 model_batchTexture 傳入到shader中。

示意圖:

// featureId 和 batchID 概念相同
vec2 computeSt(float featureId) {float stepX = model_textureStep.x;float centerX = model_textureStep.y;return vec2(centerX + (featureId * stepX), 0.5);
}void selectedFeatureIdStage(out SelectedFeature feature, FeatureIds featureIds) {int featureId = featureIds.SELECTED_FEATURE_ID;vec2 featureSt = computeSt(float(featureId));feature.id = featureId;feature.st = featureSt;feature.color = texture(model_batchTexture, featureSt);
}