原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=MSAA.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/**
 * MSAA: Multisample anti-aliasing，多重采样抗锯齿，它是一种空间抗锯齿技术，用于计算机图形中去除锯齿。
 * 它能够显著提高视觉质量，特别是在渲染复杂几何体或边缘时。
 * 
 * FXAA: Fast approximate anti-aliasing，快速近似抗锯齿，它是由Nvidia的Timothy Lottes创建的一种屏幕空间抗锯齿算法。
 */

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,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
  "2022-08-01T00:00:00Z"
);

const scene = viewer.scene;
if (!scene.msaaSupported) {
  window.alert("当前浏览器不支持多重采样抗锯齿(MSAA)。");
}
//msaaSamples: 多样本抗锯齿的采样率（值大于 1 启用 MSAA），默认值为4。
scene.msaaSamples = 8;

function createModel(url, height) {
  const position = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    height
  );
  const heading = Cesium.Math.toRadians(135);
  const pitch = 0;
  const roll = 0;
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );

  const entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
      uri: url,
      minimumPixelSize: 128,
      maximumScale: 20000,
    },
  });
  const target = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    height + 7.5
  );
  const offset = new Cesium.Cartesian3(50.0, -15.0, 0.0);
  viewer.scene.camera.lookAt(target, offset);
}

let currentAssetId;
async function createTileset(assetId) {
  currentAssetId = assetId;

  try {
    const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(assetId);

    if (currentAssetId !== assetId) {
      // 若另一个场景已加载，则丢弃当前结果。
      return;
    }

    scene.primitives.add(tileset);
  } catch (error) {
    console.log(`加载瓦片集出错: ${error}`);
  }
}

const options = [
  {
    text: "自由女神像",
    onselect: function () {
      viewer.entities.removeAll();
      scene.primitives.removeAll();
      scene.camera.setView({
        destination: new Cesium.Cartesian3(
          1331419.302230775,
          -4656681.5022043325,
          4136232.6465900405
        ),
        orientation: new Cesium.HeadingPitchRoll(
          6.032455545102689,
          -0.056832496140112765,
          6.282360923090216
        ),
        endTransform: Cesium.Matrix4.IDENTITY,
      });
      createTileset(75343);
    },
  },
  {
    text: "3D BIM瓦片",
    onselect: function () {
      viewer.entities.removeAll();
      scene.primitives.removeAll();
      viewer.camera.setView({
        destination: new Cesium.Cartesian3(
          1234138.7804841248,
          -5086063.633843134,
          3633284.606361642
        ),
        orientation: {
          heading: 0.4304630387656614,
          pitch: -0.16969316864215878,
          roll: 6.283184816241989,
        },
      });
      createTileset(2464651);
    },
  },
  {
    text: "热气球",
    onselect: function () {
      currentAssetId = undefined;
      viewer.entities.removeAll();
      scene.primitives.removeAll();
      createModel(
        "../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
        1000.0
      );
    },
  },
];

/**
 * MSAA后的8x、4x表示采样倍数，以4x为例，表示在渲染过程中每个像素使用 4 个采样点 来计算最终的像素颜色。
 * 数字越大，效果更好，但性能开销更大。4x 通常是性能和质量之间的平衡点，适合大多数现代硬件。
 */
const samplingOptions = [
  {
    text: "MSAA 8x采样率",
    onselect: function () {
      scene.msaaSamples = 8;
    },
  },
  {
    text: "MSAA 4x采样率",
    onselect: function () {
      scene.msaaSamples = 4;
    },
  },
  {
    text: "MSAA 2x采样率",
    onselect: function () {
      scene.msaaSamples = 2;
    },
  },
  {
    text: "关闭MSAA",
    onselect: function () {
      scene.msaaSamples = 1;
    },
  },
];
Sandcastle.addToolbarMenu(options);
Sandcastle.addToolbarMenu(samplingOptions);