cesium流动材质应用特效


采用vue+cesium实现

引入js部分

import Cesium from "cesium/Cesium";

export class PolylineTrailMaterialProperty {

    constructor(options) {

        options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

        this._definitionChanged = new Cesium.Event();

        this._color = undefined;

        this._colorSubscription = undefined;

        this.color = options.color;

        this.duration = options.duration;

        this.trailImage = options.trailImage;

        this._time = performance.now();

    }

}

Cesium.defineProperties(PolylineTrailMaterialProperty.prototype, {

    isConstant: {

        get: function() {

            return false;

        }

    },

    definitionChanged: {

        get: function() {

            return this._definitionChanged;

        }

    },

    color: Cesium.createPropertyDescriptor('color')

});

PolylineTrailMaterialProperty.prototype.getType = function(time) {

    return 'PolylineTrail';

}

PolylineTrailMaterialProperty.prototype.getValue = function(time, result) {

    if (!Cesium.defined(result)) {

        result = {};

    }

    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);

    //result.image = Cesium.Material.PolylineTrailImage;

    result.image = this.trailImage;

    result.time = ((performance.now() - this._time) % this.duration) / this.duration;

    return result;

}

PolylineTrailMaterialProperty.prototype.equals = function(other) {

    return this === other ||

        (other instanceof PolylineTrailMaterialProperty &&

            Cesium.Property.equals(this._color, other._color))

}

Cesium.Material.PolylineTrailType = 'PolylineTrail';

Cesium.Material.PolylineTrailImage = "images/colors.png";

Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +

                                                      "{\n" + 

                                                        "czm_material material = czm_getDefaultMaterial(materialInput);\n" +

                                                          "vec2 st = materialInput.st;\n" +

                                                          "vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n" +

                                                          "material.alpha = colorImage.a * color.a;\n"+

                                                          "material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n"+

                                                          "return material;\n" +

                                                      "}";

Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailType, {

    fabric: {

        type: Cesium.Material.PolylineTrailType,

        uniforms: {

            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),

            image: Cesium.Material.PolylineTrailImage,

            time: 0

        },

        source: Cesium.Material.PolylineTrailSource

    },

    translucent: function(material) {

        return true;

    }

});

Cesium.PolylineTrailMaterialProperty = PolylineTrailMaterialProperty;

vue应用部分

总结:此特效为三者传递信号,以流动材质作为传递信号源。注:材质图片采用渐变色,尽量与材质本事颜色色差凸显出来,否则效果不明显。在此也非常感谢Cesium流动线纹理的作者-happy_port。给我在他效果的基本上实现此效果的灵感。

你可能感兴趣的:(cesium流动材质应用特效)