[cesium] 自定义材质(2) 动态泛光面

效果

实现

shader

"czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
    czm_material material = czm_getDefaultMaterial(materialInput);\n\
    vec2 st = materialInput.st;\n\
    vec4 colorImage = texture2D(image, vec2(fract((st.t - time)), st.t));\n\
    vec4 fragColor;\n\
    fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
    fragColor = czm_gammaCorrect(fragColor);\n\
    material.alpha = colorImage.a * color.a;\n\
    material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
    material.emission = fragColor.rgb;\n\
    return material;\n\
}";

直接调用

// 在引入的cesiumJS下面引入d3kit插件
<script src="http://zhangticcc.gitee.io/d3kit/d3kit.js"></script>
<script>
    
 // 初始化 Cesium.Viewer
 let viewer = new Cesium.Viewer("d3map");
 // 初始化 d3kit
 let d3kit = new Cesium.D3Kit(viewer)
 // 泛光场景配置 建筑物材质发光
 d3kit.setDefSceneConfig()
 d3kit.setBloomLightScene()
 
 let material = d3kit.getCustomMaterialWall({
      image: 'data/images/Textures/b2.png',
      freely: 'vertical',
      direction: '+',
      count: 2,
      color: Cesium.Color.RED,
      duration: 2000
    })
 
 
let wall = viewer.entities.add({
      name: 'wall',
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          104.07263175401185, 30.647622150198725, 500.0,
          104.06369117158526, 30.648834374000277, 500.0,
          104.06437182811021, 30.62274533905387, 500.0,
          104.07463538167119, 30.62285687644371, 500.0,
          104.07263175401185, 30.647622150198725, 500.0
        ]),
        material: material
      }
 })
 
viewer.flyTo(wall)
</script>