Ambient Occlusion

<!--
  示例：给建筑群体块加环境光遮蔽
  说明：用 PerInstanceColorAppearance 图元摆一片立方体，再打开内置的 ambientOcclusion 后处理阶段
  核心逻辑：GeometryInstance 摆体块 → postProcessStages.ambientOcclusion.enabled → 调 uniforms 的强度与采样
  依赖：CesiumJS 1.121 · jsDelivr CDN，几何体全部由代码构造
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>环境光遮蔽</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Widgets/widgets.css">
<style>
  html,body{height:100%;margin:0}
  body{background:#0e1116;color:#e6e8ec;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  #c{height:100%}
  .hud{position:absolute;left:12px;top:12px;z-index:5;background:rgba(23,28,35,.9);
       border:1px solid #2a313b;border-radius:6px;padding:9px 12px;font-size:12px;
       color:#a2a9b6;max-width:250px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:7px}
  input[type=range]{width:100%}
  .cesium-viewer-bottom .cesium-widget-credits,.cesium-viewer-animationContainer,
  .cesium-viewer-timelineContainer{display:none!important}
</style>
</head>
<body>
<div id="c"></div>
<div class="hud">
  <div><b>环境光遮蔽</b></div>
  <div class="row"><label><input id="on" type="checkbox" checked> 开启 AO</label></div>
  <div class="row"><label><input id="only" type="checkbox"> 只看遮蔽图</label></div>
  <div class="row">强度 <span id="intVal">3.0</span></div>
  <div class="row"><input id="int" type="range" min="0.5" max="8" step="0.1" value="3"></div>
  <div class="row">步长 <span id="stepVal">2.0</span></div>
  <div class="row"><input id="step" type="range" min="1" max="6" step="0.1" value="2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Cesium.js"></script>
<script>
(function () {
  'use strict';

  var viewer = new Cesium.Viewer('c', {
    baseLayer: false,
    baseLayerPicker: false, geocoder: false, homeButton: false,
    sceneModePicker: false, navigationHelpButton: false,
    animation: false, timeline: false, fullscreenButton: false,
    infoBox: false, selectionIndicator: false
  });

  var scene = viewer.scene;
  scene.globe.baseColor = Cesium.Color.fromCssColorString('#121820');
  scene.backgroundColor = Cesium.Color.fromCssColorString('#0e1116');
  scene.skyBox.show = false;
  scene.sun.show = false;
  scene.moon.show = false;
  if (scene.skyAtmosphere) scene.skyAtmosphere.show = false;
  scene.globe.enableLighting = true;

  var BASE_LON = 116.3913;
  var BASE_LAT = 39.9074;
  var instances = [];
  var palette = ['#d8d3c8', '#c6c9cf', '#e0d6c4', '#b9c2c9', '#d2c9bb'];

  /* ---------- 用 BoxGeometry 摆一片高低错落的体块 ---------- */
  function addBox(i, j) {
    var w = 26 + (i * 7 + j * 3) % 14;
    var d = 24 + (i * 5 + j * 9) % 16;
    var h = 18 + ((i * 37 + j * 53) % 90);
    var lon = BASE_LON + (i - 3) * 0.00052;
    var lat = BASE_LAT + (j - 2) * 0.00044;

    var geometry = new Cesium.BoxGeometry({
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
      minimumCorner: new Cesium.Cartesian3(-w / 2, -d / 2, 0),
      maximumCorner: new Cesium.Cartesian3(w / 2, d / 2, h)
    });

    instances.push(new Cesium.GeometryInstance({
      geometry: geometry,
      modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(lon, lat, 0)
      ),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.fromCssColorString(palette[(i + j) % palette.length])
        )
      }
    }));
  }

  for (var i = 0; i < 7; i++) {
    for (var j = 0; j < 5; j++) addBox(i, j);
  }

  scene.primitives.add(new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new Cesium.PerInstanceColorAppearance({ flat: false, translucent: false }),
    asynchronous: false
  }));

  /* ---------- 内置环境光遮蔽阶段 ---------- */
  var ao = scene.postProcessStages.ambientOcclusion;
  ao.enabled = true;
  ao.uniforms.intensity = 3.0;
  ao.uniforms.bias = 0.1;
  ao.uniforms.lengthCap = 0.5;
  ao.uniforms.stepSize = 2.0;
  ao.uniforms.blurStepSize = 0.8;

  document.getElementById('on').addEventListener('change', function () {
    ao.enabled = this.checked;
  });

  document.getElementById('only').addEventListener('change', function () {
    ao.enabled = true;
    document.getElementById('on').checked = true;
    ao.uniforms.ambientOcclusionOnly = this.checked;
  });

  document.getElementById('int').addEventListener('input', function () {
    ao.uniforms.intensity = parseFloat(this.value);
    document.getElementById('intVal').textContent = ao.uniforms.intensity.toFixed(1);
  });

  document.getElementById('step').addEventListener('input', function () {
    ao.uniforms.stepSize = parseFloat(this.value);
    document.getElementById('stepVal').textContent = ao.uniforms.stepSize.toFixed(1);
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(BASE_LON - 0.0016, BASE_LAT - 0.0022, 430),
    orientation: {
      heading: Cesium.Math.toRadians(42),
      pitch: Cesium.Math.toRadians(-16),
      roll: 0
    },
    duration: 0
  });
})();
</script>
</body>
</html>