原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Post%20Processing.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
<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
  <h1>加载中...</h1>
</div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>启用轮廓</td>
        <td><input type="checkbox" data-bind="checked: silhouette"></td>
      </tr>
      <tr>
        <td>启用黑白效果</td>
        <td>
          <input type="checkbox" data-bind="checked: blackAndWhiteShow">
        </td>
        <td>
          <input type="range" min="1" max="10" step="1"
            data-bind="value: blackAndWhiteGradations, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>启用更改亮度</td>
        <td>
          <input type="checkbox" data-bind="checked: brightnessShow">
        </td>
        <td>
          <input type="range" min="0" max="1" step="0.01" data-bind="value: brightnessValue, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>夜视效果(Night Vision)</td>
        <td>
          <input type="checkbox" data-bind="checked: nightVisionShow">
        </td>
      </tr>
    </tbody>
  </table>
</div>
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
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  shadows: true,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
const url = "../SampleData/models/CesiumMan/Cesium_Man.glb";
viewer.trackedEntity = viewer.entities.add({
  name: url,
  position: position,
  model: {
    uri: url,
  },
});

const viewModel = {
  blackAndWhiteShow: false,//黑白效果
  //黑白效果的灰度级别（5.0 表示 5 个灰度级别，类似卡通渲染效果）
  blackAndWhiteGradations: 5.0,
  brightnessShow: false,
  brightnessValue: 0.5,//亮度值（0.0 到 2.0，0.5 为默认亮度）
  nightVisionShow: false,
  silhouette: true,
};

Cesium.knockout.track(viewModel);
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
for (const name in viewModel) {
  if (viewModel.hasOwnProperty(name)) {
    Cesium.knockout.getObservable(viewModel, name).subscribe(updatePostProcess);
  }
}

if (!Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
  window.alert("此浏览器不支持轮廓后期处理。");
}

// 添加后处理阶段
const stages = viewer.scene.postProcessStages;
const silhouette = stages.add(
  // 轮廓效果
  Cesium.PostProcessStageLibrary.createSilhouetteStage()
);
const blackAndWhite = stages.add(
  // 黑白效果
  Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
);
const brightness = stages.add(
  // 亮度效果
  Cesium.PostProcessStageLibrary.createBrightnessStage()
);
const nightVision = stages.add(
  // 夜视效果
  Cesium.PostProcessStageLibrary.createNightVisionStage()
);

// 更新后处理效果
function updatePostProcess() {
  silhouette.enabled = Boolean(viewModel.silhouette);
  silhouette.uniforms.color = Cesium.Color.YELLOW;
  blackAndWhite.enabled = Boolean(viewModel.blackAndWhiteShow);
  blackAndWhite.uniforms.gradations = Number(viewModel.blackAndWhiteGradations);
  brightness.enabled = Boolean(viewModel.brightnessShow);
  brightness.uniforms.brightness = Number(viewModel.brightnessValue);
  nightVision.enabled = Boolean(viewModel.nightVisionShow);
}
updatePostProcess();