原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Custom%20Shaders%20Property%20Textures.html&label=All

效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = false;//开启深度检测

viewer.cesiumWidget.creditContainer.style.display = "none";

let tileset;
try {
  /**
   * MAXAR OWT Muscatatuk 摄影测量数据集，其属性纹理包含水平和垂直不确定性。
   */
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2342602);
  viewer.scene.primitives.add(tileset);
  viewer.zoomTo(tileset);
} catch (error) {
  console.log(`瓦片集加载出错: ${error}`);
}

const shaders = {
  NO_TEXTURE: undefined,
  /**
   * “CE90” 是90%概率下的圆误差(Circular Error at 90% Probability, CE90)，
   * 即在水平平面内，90% 的测量点落在以真实位置为中心、半径为 CE90 值的圆内。
   * “LE90” 是90%概率下的线误差 (Line Error at 90% Probability, LE90)
   * 详情请参考：https://www.kosmos-imagemall.com/index.php?m=wap&a=show&catid=73&typeid=catid&id=5808
   */
  UNCERTAINTY_CE90: new Cesium.CustomShader({
    fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
      {
        int horizontalUncertainty = fsInput.metadata.r3dm_uncertainty_ce90sum;
        material.diffuse = vec3(float(horizontalUncertainty) / 255.0);
      }
    `,
  }),
  UNCERTAINTY_LE90: new Cesium.CustomShader({
    fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
      {
        int verticalUncertainty = fsInput.metadata.r3dm_uncertainty_le90sum;
        material.diffuse = vec3(float(verticalUncertainty) / 255.0);
      }
    `,
  }),
  // combined uncertainty
  UNCERTAINTY: new Cesium.CustomShader({
    fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
      {
        int uncertainty = fsInput.metadata.r3dm_uncertainty_ce90sum + fsInput.metadata.r3dm_uncertainty_le90sum;
        material.diffuse = vec3(float(uncertainty) / 255.0);
      }
    `,
  }),
};

Sandcastle.addDefaultToolbarMenu([
  {
    text: "水平不确定性",
    onselect: function () {
      // customShader属性：用于应用于瓦片集中的所有瓦片的自定义着色器。
      tileset.customShader = shaders.UNCERTAINTY_CE90;
    },
  },
  {
    text: "垂直不确定性",
    onselect: function () {
      tileset.customShader = shaders.UNCERTAINTY_LE90;
    },
  },
  {
    text: "综合不确定性",
    onselect: function () {
      tileset.customShader = shaders.UNCERTAINTY;
    },
  },
  {
    text: "无不确定性",
    onselect: function () {
      tileset.customShader = shaders.NO_TEXTURE;
    },
  },
]);
tileset.customShader = shaders.UNCERTAINTY_CE90;