CesiumJS加载1.1亿Splat高斯泼溅点LOD瓦片——官方完整教程翻译

Elusive 中文API文档

CesiumJS加载1.1亿Splat高斯泼溅点LOD瓦片——官方完整教程翻译

带细节层次（LODs）的高斯溅射（Gaussian splats）让你能够流式传输大规模的真实感溅射表示。在本教程中，你将从 Cesium ion 加载一个带有 LOD 的高斯溅射数据集，了解 LOD 细化如何工作，并使用标准的 3D Tiles 控件来调优性能。

3D 高斯溅射保留了细长几何结构（如起重机、路灯和植被）的精细细节，同时保持了大型结构（如建筑物）的视觉保真度。

3D 高斯溅射保留了细长几何结构（如起重机、路灯和植被）的精细细节，同时保持了大型结构（如建筑物）的视觉保真度。

你将学习如何：

  • 创建带有全球地形的 CesiumJS 查看器
  • 从 Cesium ion 加载内置 LOD 的 3D 高斯溅射瓦片集
  • 设置初始相机视图
  • 使用屏幕空间误差设置调优性能和视觉质量。使用边界框可视化 LOD 细化（可选）
  • 使用 3D Tiles 检查器探索瓦片层级和行为（可选）

先决条件

  • 已设置好使用 ES 模块导入的 CesiumJS 应用
  • 一个 Cesium ion 账户（推荐，以便后续可以上传和流式传输你自己的数据集）

信息：本教程使用一个公开的 Cesium ion 资产，因此你无需显式设置自己的访问令牌即可跟随学习。CesiumJS 包含一个用于访问 Cesium ion 的默认评估令牌。

步骤 1：创建 CesiumJS 查看器

首先创建一个查看器并启用全球地形。启用 Cesium World Terrain 与 Bing Maps 影像叠加将为你的 3D 高斯溅射瓦片集提供地理空间上下文。

import * as Cesium from "cesium";

const viewer = new Cesium.Viewer("cesiumContainer", {
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

步骤 2：从 Cesium ion 加载 3D 高斯溅射瓦片集

使用 Cesium ion 资产 ID 加载托管在 Cesium ion 上的公开 3D 高斯溅射瓦片集，并将其添加到场景中。

let tileset; // 将在瓦片集加载完成后赋值
try {
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(4547222);
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`加载瓦片集时出错: ${error}`);
}

Microsoft 雷德蒙德园区的 3D 高斯溅射瓦片集，在 CesiumJS 中查看。与 Bentley Systems 合作拍摄。该瓦片集使用了 20,169 张照片（4277 亿像素，DJI FC6310 相机），覆盖面积约 3.7 平方公里，平均地面采样距离 3 厘米。重建包含 1.1 亿个溅射点。

Microsoft 雷德蒙德园区的 3D 高斯溅射瓦片集，在 CesiumJS 中查看。与 Bentley Systems 合作拍摄。该瓦片集使用了 20,169 张照片（4277 亿像素，DJI FC6310 相机），覆盖面积约 3.7 平方公里，平均地面采样距离 3 厘米。重建包含 1.1 亿个溅射点。

信息：为什么使用 let 声明瓦片集？

瓦片集使用 let 声明，以便稍后在教程中可以复用它进行可选的调试步骤，例如启用 3D Tiles 检查器或可视化边界体积。

替代方案：简化的瓦片集加载（无需调试工具）

如果你不打算在教程后续启用 3D Tiles 检查器或其他可选的调试功能，可以这样加载瓦片集：

try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(4547222);
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`加载瓦片集时出错: ${error}`);
}

在这种情况下，瓦片集会被创建并立即使用，之后不需要共享引用。

设置初始相机视图

设置相机的初始位置和方向，以便看到加载的瓦片集：

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(-122.141186, 47.644605, 170.48),
  orientation: {
    heading: Cesium.Math.toRadians(100.0),
    pitch: Cesium.Math.toRadians(-25.0),
    roll: 0.0,
  },
});

替代方案：自动缩放到瓦片集

你可以让相机自动缩放到加载的瓦片集，而不是设置明确的相机视图。

这种方法使用瓦片集的边界体积来定位相机：

await viewer.zoomTo(
  tileset,
  new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0.0),
    Cesium.Math.toRadians(-15.0),
    200.0,
  ),
);

步骤 3：理解和调优 LOD

3D Tiles 中的细节层次细化由屏幕空间误差驱动。maximumScreenSpaceError 值控制在瓦片细化到更高细节之前允许的视觉误差（以像素为单位）。

在实践中：

  • 较高的值允许较粗糙的瓦片保持更长时间可见，从而提高性能
  • 较低的值导致瓦片更早细化，以更高的成本增加视觉细节

在代码中调整屏幕空间误差

你可以直接在瓦片集上调优这个值：

tileset.maximumScreenSpaceError = 16;

常见的起始范围：

  • 24–64：用于性能优先的视图
  • 8–16：用于以性能为代价获得更高的视觉保真度

最佳值取决于数据集规模、相机距离和目标硬件。

—

（可选）使用边界体积可视化 LOD 细化

在调试 LOD 时，你可以通过绘制瓦片边界体积来使细化过程可视化。

CesiumJS 在 Cesium3DTileset 上暴露了明确的调试标志：

  • debugShowBoundingVolume：渲染每个可见瓦片的边界体积
  • debugShowContentBoundingVolume：渲染每个可见瓦片内容的边界体积

你可以在代码中切换这些标志：

// 显示瓦片边界体积（有助于理解细化）
tileset.debugShowBoundingVolume = true;

// 显示内容边界体积（当内容边界不同时有帮助）
tileset.debugShowContentBoundingVolume = true;

信息：观察要点

当你放大时，你可以观察到当瓦片满足屏幕空间误差阈值时，边界体积如何细分/细化。这为你提供了一种具体的方式来确认 LOD 细化在你预期的时候发生。

更小、更密集的内容体积表示更早的细化，导致更高的视觉保真度，在此缩放级别可以看到更详细的瓦片。

更小、更密集的内容体积表示更早的细化，导致更高的视觉保真度，在此缩放级别可以看到更详细的瓦片。

更大、更少的内容体积表示更晚的细化，导致在相同相机位置使用更粗糙的瓦片，视觉保真度较低。

更大、更少的内容体积表示更晚的细化，导致在相同相机位置使用更粗糙的瓦片，视觉保真度较低。

（可选）启用 3D Tiles 检查器

在 CesiumJS 查看器中添加 3D Tiles 检查器。使用它来检查和调试瓦片细化和性能，以便进行迭代。

viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);

// 将已加载的瓦片集连接到检查器（仅限公共 API）
if (tileset && viewer.cesium3DTilesInspector?.viewModel) {
  viewer.cesium3DTilesInspector.viewModel.tileset = tileset;
}

完整代码（Sandcastle）

点击 + 拖动进行交互

探索并尝试 3D 高斯溅射瓦片集 Sandcastle。

光照约束和预期

高斯溅射不是三角形网格，也不使用传统的基于物理的材质。颜色来自存储在数据集中的视图相关数据，当前的渲染专注于漫反射外观。

因此：

  • 溅射在真实感细节、薄结构和复杂几何方面表现出色
  • 它们不像具有完整光照模型的网格材质那样行为
  • 视觉外观可能与基于网格的工作流程不同，尤其是在剧烈的光照变化下

下一步：使用你自己的数据

要在你的 Cesium ion 账户中从你自己的源照片生成高斯溅射，请遵循 该教程 并选择高斯溅射作为输出。

故障排除

瓦片集无法加载

  • 确认资产 ID 正确
  • 如果加载你自己的资产，验证是否提供了有效的 Cesium ion 访问令牌
  • 检查浏览器控制台是否有认证或网络错误

性能低于预期

  • 通过操作系统的图形设置验证浏览器正在使用独立 GPU。更改 GPU 偏好设置后，在测试性能之前重新启动浏览器。这对于带有混合显卡的 Windows 笔记本电脑尤其重要
  • 增加 maximumScreenSpaceError
  • 不需要时减少同时进行的调试可视化

边界体积不出现

  • 确保调试标志设置在添加到场景的同一个瓦片集实例上
  • 在切换调试选项之前确认瓦片集已成功加载

资源

专业服务

奇小狐工作室 – 3D 数据处理专家

  • 高斯溅射（Gaussian Splat）PLY 数据处理
  • 大批量点云数据处理
  • 3D Tiles 格式转换与优化

联系方式：微信 Elusive57

cesium.com/learn 上的内容和代码示例根据 Apache 2.0 许可证 提供。你可以在商业或非商业应用中使用这些代码示例。

发表评论