Cesium1.87+ 实现建筑泛光效果

代码

Cesium 1.87+增加了customShader自定义着色器，实现建筑泛光效果示例代码如下：

<template>
    <div id="cesiumContainer"></div>
</template>

<script>
export default {
    name: "Test4",
    data() {
        return {};
    },
    mounted() {
        let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
        window.viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,
            shouldAnimate: true,
            baseLayerPicker: false,
            fullscreenButton: false,
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            selectionIndicator: false,
            timeline: false,
            navigationHelpButton: false,
            infoBox: true,
            navigationInstructionsInitiallyVisible: false,
            imageryProvider: new Cesium.UrlTemplateImageryProvider({
                //高德底图
                url:
                    "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
            }),
        });
        window.viewer.scene.debugShowFramesPerSecond = true;

        this.test();
    },
    methods: {
        test() {
            Cesium.ExperimentalFeatures.enableModelExperimental = true;
            let tilesets = viewer.scene.primitives.add(
                new Cesium.Cesium3DTileset({
                    url: "https://lab.earthsdk.com/model/702aa950d03c11e99f7ddd77cbe22fea/tileset.json",
                })
            );
            tilesets.readyPromise.then(function(tileset) {
                tileset.style = new Cesium.Cesium3DTileStyle({
                    color: {
                        conditions: [["true", "color('rgb(51, 153, 255)',1)"]],
                    },
                });
                viewer.flyTo(tileset);
            });

            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);
                    }       
                    `,
            });
            tilesets.customShader = customShader;
        },
    },
};
</script>

<style scoped>
#cesiumContainer {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>

效果