[cesium] | 建筑光效 | 基于3dtileset的建筑物效果插件 | 支持自定义着色器

r囧r小猫 2022-12-24 06:54 1076阅读 0赞

### 说明 ###

之前写了一篇关于建筑物效果实现的博客，后面有不少网友私信我，这里把代码封装了一下上传到GitHub上 ，有需要的自行提取。

无需修改源码，引入 cesium-tilesetEffect.js 即可使用，可以的收藏一下。

后续会更新一些其他效果和分析功能插件, 直接引用即可。[插件地址][Link 1]

### 使用 ###

// 特效 默认开启
          Cesium.TILE_EFFECT_STAYE = true;
    
          // 片元着色器 默认 可以自定义
    
          // 引入火星着色器
          Cesium.TILE_FS_BODY = ` float stc_pl = fract(czm_frameNumber / 120.0) * 3.14159265 *         
                     2.0;
                    float stc_sd = v_stcVertex.z / 60.0 + sin(stc_pl) * 0.1;
                    gl_FragColor *= vec4(stc_sd, stc_sd, stc_sd, 1.0);
                    float stc_a13 = fract(czm_frameNumber / 360.0);
                    float stc_h = clamp(v_stcVertex.z / 450.0, 0.0, 1.0);
                    stc_a13 = abs(stc_a13 - 0.5) * 2.0;
                    float stc_diff = step(0.005, abs(stc_h - stc_a13));
                    gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - stc_diff);`;
    
           // 引入cesiumlab 着色器
          Cesium.TILE_FS_BODY = `
                // 可以修改的参数
                // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
                float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
                float _heightRange = 60.0; // 高亮的范围(_baseHeight ~ _baseHeight + _      heightRange) 默认是 0-60米
                float _glowRange = 300.0; // 光环的移动范围(高度)
    
                // 建筑基础色
                float vtxf_height = v_stcVertex.z - _baseHeight;
                float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
                float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
                gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);
    
                // 动态光环
                float vtxf_a13 = fract(czm_frameNumber / 360.0);
                float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
                vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
                float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
                gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);
                `;
    
          // 加载3dtileset
          let tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: '/haidian/tileset.json'
          }))
          tilesets.readyPromise.then(function (tileset) {
            tileset.style = new Cesium.Cesium3DTileStyle({
              color: {
                conditions: [
                  ["true", "color('cyan')"]
                ]
              }
            });
            viewer.flyTo(tileset)
          })
        }

![20201127105613402.gif][]

![20201127110042936.gif][]![20201127105619745.gif][]

![20201127110047109.gif][]

在线查看：[地址][Link 2]

[Link 1]: https://github.com/zhangti0708/cesium-examples
[20201127105613402.gif]: /images/20221120/b6267dab99b34c14afec81c56e255512.png
[20201127110042936.gif]: https://img-blog.csdnimg.cn/20201127110042936.gif
[20201127105619745.gif]: https://img-blog.csdnimg.cn/20201127105619745.gif
[20201127110047109.gif]: https://img-blog.csdnimg.cn/20201127110047109.gif
[Link 2]: http://zhangticcc.gitee.io/cesium-tileseteffect/