cesium矢量倾斜摄影数据自定义shader-CFANZ编程社区

cesium矢量倾斜摄影数据自定义shader代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>

    const viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
      })
    });
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled = true;

    let uniforms = {
      u_texture: {
        value: new Cesium.TextureUniform({
          url: './building.png'
        }),
        type: Cesium.UniformType.SAMPLER_2D
      },
      T_time: {
        value: 0,
        type: Cesium.UniformType.FLOAT
      }
    }
    const createBuildingShader = () => {
      return new Cesium.CustomShader({
        lightingModel: Cesium.LightingModel.UNLIT,
        varyings: {
          v_normalMC: Cesium.VaryingType.VEC3
        },
        uniforms: uniforms,
        vertexShaderText: /* glsl */ `
          void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
            v_normalMC = vsInput.attributes.normalMC;
          }`,
        fragmentShaderText: /* glsl */ `
          void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
            vec3 positionMC = fsInput.attributes.positionMC;
            float width = 300.0;
            float height = 300.0;
            if (v_normalMC.z > 0.95) {
              material.diffuse = vec3(0.079, 0.107, 0.111);
              return;
            } else {
              float textureX =mod(200.0, width) / width;
              float textureY = mod(positionMC.z, height) / height;
              vec3 rgb = texture2D(u_texture, vec2(textureX, textureY-T_time)).rgb;
              gl_FragColor = vec4(0.2,  0.5, 1.0, 1.0);
              gl_FragColor *= vec4(vec3((positionMC.z + 40.0) / 30.0,0.3,0.8), 1.0);
              rgb = mix(gl_FragColor.rgb,rgb,0.5);
              material.diffuse = rgb;
              return;
            }
          }`
      })
    }
    let tileset = new Cesium.Cesium3DTileset({
      url: '倾斜摄影数据的地址',
      showOutline: false,
      customShader: createBuildingShader(),
      enableModelExperimental: true,
      style: new Cesium.Cesium3DTileStyle({
        color: 'vec4(1.0, 1.0, 1.0, 1.0)',
        show: {
          conditions: [
            [
              '${height} === undefined || ${height} === null || isNaN(${height}) ',
              'false'
            ]
          ]
        }
      })
    })
    const buildingTileset = viewer.scene.primitives.add(tileset);
    viewer.flyTo(tileset);
    render()

    function render() {
      requestAnimationFrame(render)
      uniforms.T_time.value += 0.005
    }

  </script>
  </div>
</body>

</html>
用到的贴图
效果如下

在这里插入图片描述