一些智慧城市项目经常需要加载建筑白膜数据(3dtiles),并制作炫酷的炫光效果,在cesium中可以使用自定义着色器修改白膜建筑的外观。上效果图
Cesium version: 1.123
Vue2.5.2
async fetchData() {
// Cesium.ExperimentalFeatures.enableModelExperimental = true
debugger
var height = -1.1406325468715177e-9;
var heading = 0;
const tileset = await Cesium.Cesium3DTileset.fromUrl(
'../../static/lix/tileset.json', //测试数据上海东方明珠建筑数据
);
this.viewer.scene.primitives.add(tileset,{
disableDepthTestDistance: Number.POSITIVE_INFINITY
});
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 = 60.0; // 高亮的范围(_baseHeight ~ _baseHeight + _ heightRange) 默认是 0-60米
float _glowRange = 300.0; // 光环的移动范围(高度)
float vtxf_height = fsInput.attributes.positionMC.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;
material.diffuse*= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
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;
},