概述

3D Tiles 如何与着色器结合使用。

const viewer = new Cesium.Viewer('cesiumContainer')

const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync()
viewer.scene.primitives.add(osmBuildingsTileset)

const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  /* fragmentShaderText: `
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
    {
        material.diffuse = vec3(1.0, 0.0, 0.0);
        material.alpha = 1.0;
    }
  ` */
  fragmentShaderText: `
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
    {
        float h = fsInput.attributes.positionMC.z; // 当前点的模型高度
        float intensity = clamp(h / 100.0, 0.0, 1.0); // 归一化到 0~1
        material.diffuse = vec3(intensity, 0.0, 0.0); // 高处更红
        material.alpha = 1.0;
    }
  `
})
osmBuildingsTileset.customShader = customShader

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(121.47, 31.23, 10000000),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: Cesium.Math.toRadians(0),
  }
})