Custom Shaders 3D Tiles【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Custom%20Shaders%203D%20Tiles.html&label=All

效果如下图所示：

示例代码如下：

const viewer = new Cesium.Viewer("cesiumContainer");

try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(75343, {
    customShader: new Cesium.CustomShader({
      /**
       * 光照模型:
       * - UNLIT: unlight，即无光照
       * - PBR: 使用基于物理的渲染光照计算。这包括 PBR 金属粗糙度和 PBR 镜面光泽度。
       */
      lightingModel: Cesium.LightingModel.UNLIT,
      //根据与相机的距离对瓦片进行着色
      fragmentShaderText: `
        void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
        {
            material.diffuse = vec3(0.0, 0.0, 1.0);
            material.diffuse.g = -fsInput.attributes.positionEC.z / 1.0e4;
        }
        `,
    }),
  });
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`瓦片加载出现错误: ${error}`);
}

const initialPosition = Cesium.Cartesian3.fromDegrees(
  -74.01881302800248,
  40.69114333714821,
  753,
);
const initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
  21.27879878293835,
  -21.34390550872461,
  0.0716951918898415,
);
viewer.scene.camera.setView({
  destination: initialPosition,
  orientation: initialOrientation,
  endTransform: Cesium.Matrix4.IDENTITY,
});