首页 > 其他分享 >cesium customShader实现建筑泛光效果

cesium customShader实现建筑泛光效果

时间:2022-09-27 15:00:15浏览次数:38  
标签:tileset float vtxf Cesium cesium 泛光 customShader

在cesium1.87版本及以上,可使customShader用实现建筑泛光效果,代码如下

// Cesium 3dtile 泛光效果实现(需版本1.87以上,支持customShader)
const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: Cesium.EllipsoidTerrainProvider(),
});
const tileset = new Cesium.Cesium3DTileset({
    url: 'https://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
});
viewer.scene.primitives.add(tileset);
  
tileset.readyPromise.then(function(tileset) {
    viewer.zoomTo(tileset)
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
            conditions: [["true", "color('rgb(51, 153, 255)',1)"]],
        },
    });
});
  
var customShader = new Cesium.CustomShader({
    lightingModel: Cesium.LightingModel.UNLIT,
    fragmentShaderText: `
        void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
            // 渐变
            float _baseHeight = 0.0; // 起始高度
            float _heightRange = 100.0; // 截止高度
            float vtxf_height = fsInput.attributes.positionMC.z-_baseHeight;
            float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
            // 去掉呼吸效果,去掉: + sin(vtxf_a11) * 0.1
            float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
            material.diffuse*= vec3(vtxf_a12, vtxf_a12, vtxf_a12);

            // 动态光环
            // float _glowRange = 300.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));
            // material.diffuse += material.diffuse * (1.0 - vtxf_diff);
        }       
        `,
});
tileset.customShader = customShader;

效果截图:

 

 

 

标签:tileset,float,vtxf,Cesium,cesium,泛光,customShader
From: https://www.cnblogs.com/dullfish/p/16734577.html

相关文章