3D Tiles Gaussian Splatting【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=3D%20Tiles%20Gaussian%20Splatting.html

效果如下图所示：左侧的为高斯泼溅渲染的。因为：（这里直接贴上了一篇公号文的对比结论，具体移步查看即可：推翻倾斜摄影？高斯泼溅与Mesh模型效果对比）

清晰度，OSGB清晰度比3DGS要高，细节表现更加良好。如墙上的字迹、车牌等，OSGB都可以看到，而3DGS放大看是模糊的；
细节层次，3DGS更加逼真。对于细小的难以构建的模型，3DGS能够表现出来，如电线、栏杆铁架等，
场景效果，3DGS更加和谐。对于场景内的植被，OSGB都是一坨在一起，而3DGS可以将枝叶表现出来，与实际更接近；场景中金属、木材、石块等材质，更有质感，效果更加逼真。
数据大小，3DGS数据量相对较小。同样的面积，3DGS的数据量不到OSGB的二分之一，存储空间更小（通信塔OSGB大小为392M，3DGS仅为28.1M），传输速度更快。

示例代码如下：

<style>
  @import url(../templates/bucket.css);

  #slider {
    position: absolute;
    left: 50%;
    top: 0px;
    background-color: #d3d3d3;
    width: 5px;
    height: 100%;
    z-index: 9999;
  }

  #slider:hover {
    cursor: ew-resize;
  }
</style>
<div id="cesiumContainer" class="fullSize">
  <div id="slider"></div>
</div>
<div id="loadingOverlay"><h1>数据加载中...</h1></div>
<div id="toolbar"></div>

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,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

try {
  const left = await Cesium.Cesium3DTileset.fromIonAssetId(3443920);
  viewer.scene.primitives.add(left);
  left.splitDirection = Cesium.SplitDirection.LEFT;

  viewer.zoomTo(
    left,
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(-50),
      Cesium.Math.toRadians(-20),
      100.0,
    ),
  );

  const right = await Cesium.Cesium3DTileset.fromIonAssetId(3443919);
  viewer.scene.primitives.add(right);
  right.splitDirection = Cesium.SplitDirection.RIGHT;
} catch (error) {
  console.log(`tileset加载出错: ${error}`);
}

// 实现滑块（slider）的拖动交互，动态调整场景的分割位置。
const slider = document.getElementById("slider");
viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;

const handler = new Cesium.ScreenSpaceEventHandler(slider);

let moveActive = false;

function move(movement) {
  if (!moveActive) {
    return;
  }

  const relativeOffset = movement.endPosition.x;
  const splitPosition =
    (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
  slider.style.left = `${100.0 * splitPosition}%`;
  viewer.scene.splitPosition = splitPosition;
}

// 鼠标按下或触摸开始，激活拖动
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);

// 鼠标移动或触摸移动，则调用move函数，更新滑块位置和splitPosition
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

// 鼠标释放或者触摸结束，则停止拖动
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);