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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1、相关类的结构

Cesium3DTileset
  ┖ Cesium3DTile
        ┖ Model3DTileContent
                  ┖ Model
                      ┖ ModelFeatureTable
                            ┣ Cesium3DTileFeature
                            ┖ BatchTexture
1
2
3
4
5
6
7

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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)"]
]
1
2
3
4
5
6
7
8
9
10

那么就会遍历 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14