3D Tiles 1.1 S2 Globe【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=3D%20Tiles%201.1%20S2%20Globe.html&label=All

注： 由于个人的Cesium Ion中没有官方示例中的数据，因此仅在官方提供的在线编辑器中进行了学习、修改。

实现效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
  table,
  th,
  td {
    border: 1px solid white;
    border-collapse: collapse;
  }
  tt {
    padding: 8px;
  }
  .cesium-performanceDisplay-defaultContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

/**
 * 本示例使用的数据：Maxar 提供的高精度全球地形地球：
 * One World Terrain：是 Maxar 公司提供的一种全球地形数据集，具有高精度和广泛的覆盖范围。
 * 它通常用于军事、航空航天、地理信息系统（GIS）等领域，提供真实世界的地形和地貌数据。
 */

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
});

//隐藏版权信息
viewer.cesiumWidget.creditContainer.style.display = "none";
//添加帧速显示
viewer.scene.debugShowFramesPerSecond = true;

const scene = viewer.scene;

viewer.camera.flyTo({
  duration: 0,
  destination: new Cesium.Cartesian3(
    762079.3157173397,
    -28363749.882652905,
    19814354.842565004
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      -0.022007098944236157,
      0.819079900508189,
      -0.5732571885110153
    ),
    up: new Cesium.Cartesian3(
      -0.015396759850986286,
      0.5730503851893346,
      0.8193754913471885
    ),
  },
  easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
});

let tileset;
try {
  /**
   * MAXAR OWT WFF 1.2 Base Globe:
   * 基于 MAXAR 的 One World Terrain 数据集，采用 WFF 1.2 格式构建的高精度基础地球模型。
   */
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(1208297, {
    maximumScreenSpaceError: 4,
  });
  scene.primitives.add(tileset);
} catch (error) {
  console.log(`tileset加载出错: ${error}`);
}

// --- Style ---

const style = new Cesium.Cesium3DTileStyle({
  defines: {
    LandCoverColor: "rgb(${color}[0], ${color}[1], ${color}[2])",
  },
  color:
    "${LandCoverColor} === vec4(1.0) ? rgb(254, 254, 254) : ${LandCoverColor}",
});

// --- Custom Shader ---

const customShader = new Cesium.CustomShader({
  uniforms: {
    u_time: {
      type: Cesium.UniformType.FLOAT,
      value: 0,
    },
  },
  fragmentShaderText: `
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
    {
      int featureId = fsInput.featureIds.featureId_0;
      // 使用笛卡尔坐标，但比例大致为 [-1， 1]
      vec3 positionWC = fsInput.attributes.positionWC / 6.3e6;
      if (featureId == 60)
      {
        // 就像调频（FM）合成，产生不规则间隔的波
        float wave = sin(14.0 * positionWC.z - u_time);
        wave = 0.5 + 0.5 * sin(10.0 * wave * positionWC.z - u_time);
        // 混合一个过度饱和的漫反射版本以产生闪烁的色带
        material.diffuse = mix(material.diffuse, material.diffuse * 3.0, wave);
      }
    }
    `,
});

const startTime = performance.now();
const customShaderUpdate = function () {
  const elapsedTimeSeconds = (performance.now() - startTime) / 1000;
  customShader.setUniform("u_time", elapsedTimeSeconds);
};

viewer.scene.postUpdate.addEventListener(function () {
  customShaderUpdate();
});

// --- 拾取 ---

let enablePicking = true;
const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

const metadataOverlay = document.createElement("div");
viewer.container.appendChild(metadataOverlay);
metadataOverlay.className = "backdrop";
metadataOverlay.style.display = "none";
metadataOverlay.style.position = "absolute";
metadataOverlay.style.bottom = "0";
metadataOverlay.style.left = "0";
metadataOverlay.style["pointer-events"] = "none";
metadataOverlay.style.padding = "4px";
metadataOverlay.style.backgroundColor = "#303030";
metadataOverlay.style.whiteSpace = "pre-line";
metadataOverlay.style.fontSize = "16px";
metadataOverlay.style.borderRadius = "4px";

let tableHtmlScratch;
let i;

handler.setInputAction(function (movement) {
  if (enablePicking) {
    const feature = scene.pick(movement.endPosition);
    if (feature instanceof Cesium.Cesium3DTileFeature) {
      metadataOverlay.style.display = "block";
      metadataOverlay.style.bottom = `${
        viewer.canvas.clientHeight - movement.endPosition.y
      }px`;
      metadataOverlay.style.left = `${movement.endPosition.x}px`;

      tableHtmlScratch =
        "<table><thead><tr><th><tt>字段</tt></th><th><tt>值</tt></th></tr></thead><tbody>";

      const propertyIds = feature.getPropertyIds();
      const length = propertyIds.length;
      for (let i = 0; i < length; ++i) {
        const propertyId = propertyIds[i];
        const propertyValue = feature.getProperty(propertyId);
        tableHtmlScratch += `<tr><td><tt>${propertyId}</tt></td><td><tt>${propertyValue}</tt></td></tr>`;
      }
      tableHtmlScratch += "</tbody></table>";
      metadataOverlay.innerHTML = tableHtmlScratch;
    } else {
      metadataOverlay.style.display = "none";
    }
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// --- UI ---

const modes = [
  {
    text: "全球视角",
    onselect: function () {
      tileset.customShader = undefined;
      tileset.debugShowBoundingVolume = false;
      tileset.style = undefined;
    },
  },
  /**
   * 这个功能通常用于调试或可视化，展示 S2 分块的边界范围，帮助开发者理解数据的空间分布和索引结构。
   * 1. S2 是 Google 开发的一种空间索引系统，用于高效地表示和处理地理空间数据。https://github.com/google/s2geometry
   * - 它将地球表面划分为多个层次的分块（称为“S2 Cell”），每个分块都有一个唯一的标识符。
   * - S2 通常用于地理空间数据的快速查询和分析。
   * 2. Bounding Volumes（边界体）：
   * - 在 3D 图形和地理空间数据中，边界体是指用于包围一个对象或数据集的几何形状（如立方体、球体、圆锥体等）。
   * - 边界体的作用是简化碰撞检测、视锥剔除（frustum culling）等计算。
   */
  {
    text: "显示 S2 边界体",
    onselect: function () {
      tileset.customShader = undefined;
      tileset.debugShowBoundingVolume = true;
      tileset.style = undefined;
    },
  },
  {
    text: "应用自定义样式",
    onselect: function () {
      tileset.customShader = undefined;
      tileset.debugShowBoundingVolume = false;
      tileset.style = style;
    },
  },
  {
    text: "应用自定义Shader",
    onselect: function () {
      tileset.customShader = customShader;
      tileset.debugShowBoundingVolume = false;
      tileset.style = undefined;
    },
  },
];

Sandcastle.addToolbarMenu(modes);
Sandcastle.addToggleButton("启用拾取", enablePicking, function (checked) {
  if (enablePicking) {
    metadataOverlay.style.display = "none";
  }

  enablePicking = checked;
});