cesium实现立体墙（垂直、水平）渐变泛光效果

Cesium实战系列文章总目录： 传送门

1.实现效果

2.实现方法

通过分析材质可以发现，设置其纹理材质的漫反射diffuse颜色和透明度alpha属性即可，具体可见下文的着色器代码。

2.1材质文件

这里将立体向上泛光效果材质封装成了WallDiffuseMaterialProperty.js，代码如下：

/*
 * @Description: 动态扩散墙的墙体效果（参考开源代码）（不同高度透明度不同）
 * @Version: 1.0
 * @Author: Julian
 * @Date: 2022-03-07 19:50:46
 * @LastEditors: Julian
 * @LastEditTime: 2022-03-08 13:34:04
 */
class WallDiffuseMaterialProperty {
    constructor(options) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this.color = options.color;
    };

    get isConstant() {
        return false;
    }

    get definitionChanged() {
        return this._definitionChanged;
    }

    getType(time) {
        return Cesium.Material.WallDiffuseMaterialType;
    }

    getValue(time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }

        result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
        return result
    }

    equals(other) {
        return (this === other ||
            (other instanceof WallDiffuseMaterialProperty &&
                Cesium.Property.equals(this._color, other._color))
        )
    }
}

Object.defineProperties(WallDiffuseMaterialProperty.prototype, {
    color: Cesium.createPropertyDescriptor('color'),
})

Cesium.WallDiffuseMaterialProperty = WallDiffuseMaterialProperty;
Cesium.Material.WallDiffuseMaterialProperty = 'WallDiffuseMaterialProperty';
Cesium.Material.WallDiffuseMaterialType = 'WallDiffuseMaterialType';
Cesium.Material.WallDiffuseMaterialSource =
    `
    uniform vec4 color;
    czm_material czm_getMaterial(czm_materialInput materialInput){
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st;
    material.diffuse = color.rgb * 2.0;
    material.alpha = color.a * (1.0 - fract(st.t)) * 0.8;
    return material;
    }
                                            
    `

Cesium.Material._materialCache.addMaterial(Cesium.Material.WallDiffuseMaterialType, {
    fabric: {
        type: Cesium.Material.WallDiffuseMaterialType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
        },
        source: Cesium.Material.WallDiffuseMaterialSource
    },
    translucent: function(material) {
        return true;
    }
})

2.2代码调用

引入材质js文件后，使用entity方式创建墙体，并设置其材质即可。

// 绘制墙体
this.viewer.entities.add({
    name: "立体墙效果",
    wall: {
        positions: positions,
        // 设置高度
        maximumHeights: new Array(positions.length).fill(50),
        minimunHeights: new Array(positions.length).fill(0),
        // 扩散墙材质
        material: new Cesium.WallDiffuseMaterialProperty({
            color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
        }),
    }
})

2.3其他类型

上面实现的是立体向上泛光效果，通过修改着色器代码，还可以实现其他方向的渐变泛光效果。

首先要对WebGL纹理坐标有一定了解，使用二维纹理坐标st代表常规xy坐标，坐标范围为[0.0-1.0]之间。

2.3.1立体向下

只需将上文着色器代码中透明度设置修改如下，即按t轴高度设置透明度。

material.alpha = color.a * (fract(st.t)) * 0.8;

立体向下渐变效果：

2.3.2水平逆时针

将透明度设置为与s轴正相关。修改代码如下：

material.alpha = color.a * (fract(st.s)) * 0.8;

水平逆时针渐变效果：

2.3.3水平顺时针

将透明度渐变设置为与s轴负相关即可，修改代码如下：

material.alpha = color.a * (1.0 - fract(st.s)) * 0.8;

水平顺时针渐变效果如下：