Cesium 3DTileset Style 原理简析

本文主要是介绍Cesium 3DTileset Style 原理简析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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);
}