cesium 渐变虚线效果 PolylineDashMaterialProperty

cesium中有虚线材质PolylineDashMaterialProperty，可以在这个材质的基础上结合uv设置每个顶点的透明度，就能实现渐变的效果了。

一、原理：在glsl中结合uv设置每个顶点的透明度

vec2 st = materialInput.st;
material.alpha = fragColor.a * (1.0 - st.s);

二、完整代码，扩展PolylineDashMaterialProperty材质

const defaultColor = Cesium.Color.WHITE;
const defaultGapColor = Cesium.Color.TRANSPARENT;
const defaultDashLength = 16.0;
const defaultDashPattern = 255.0;

/**
 * A {@link MaterialProperty} that maps to polyline dash {@link Material} uniforms.
 * @alias GradientPolylineDashMaterial
 * @constructor
 *
 * @param {Object} [options] Object with the following properties:
 * @param {Cesium.Property|Cesium.Color} [options.color=Cesium.Color.WHITE] A Cesium.Property specifying the {@link Cesium.Color} of the line.
 * @param {Cesium.Property|Cesium.Color} [options.gapColor=Cesium.Color.TRANSPARENT] A Cesium.Property specifying the {@link Cesium.Color} of the gaps in the line.
 * @param {Cesium.Property|Number} [options.dashLength=16.0] A numeric Cesium.Property specifying the length of the dash pattern in pixels.
 * @param {Cesium.Property|Number} [options.dashPattern=255.0] A numeric Cesium.Property specifying a 16 bit pattern for the dash
 */
function GradientPolylineDashMaterial(options) {
    options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this._gapColor = undefined;
    this._gapColorSubscription = undefined;
    this._dashLength = undefined;
    this._dashLengthSubscription = undefined;
    this._dashPattern = undefined;
    this._dashPatternSubscription = undefined;

    this.color = options.color;
    this.gapColor = options.gapColor;
    this.dashLength = options.dashLength;
    this.dashPattern = options.dashPattern;
}

Object.defineProperties(GradientPolylineDashMaterial.prototype, {
    /**
     * Gets a value indicating if this property is constant.  A property is considered
     * constant if getValue always returns the same result for the current definition.
     * @memberof GradientPolylineDashMaterial.prototype
     * @type {Boolean}
     * @readonly
     */
    isConstant: {
        get: function () {
            return (
                Cesium.Property.isConstant(this._color) &&
                Cesium.Property.isConstant(this._gapColor) &&
                Cesium.Property.isConstant(this._dashLength) &&
                Cesium.Property.isConstant(this._dashPattern)
            );
        },
    },
    /**
     * Gets the event that is raised whenever the definition of this property changes.
     * The definition is considered to have changed if a call to getValue would return
     * a different result for the same time.
     * @memberof GradientPolylineDashMaterial.prototype
     * @type {Event}
     * @readonly
     */
    definitionChanged: {
        get: function () {
            return this._definitionChanged;
        },
    },
    /**
     * Gets or sets the Cesium.Property specifying the {@link Cesium.Color} of the line.
     * @memberof GradientPolylineDashMaterial.prototype
     * @type {Cesium.Property|undefined}
     */
    color: Cesium.createPropertyDescriptor("color"),

    /**
     * Gets or sets the Cesium.Property specifying the {@link Cesium.Color} of the gaps in the line.
     * @memberof GradientPolylineDashMaterial.prototype
     * @type {Cesium.Property|undefined}
     */
    gapColor: Cesium.createPropertyDescriptor("gapColor"),

    /**
     * Gets or sets the numeric Cesium.Property specifying the length of a dash cycle
     * @memberof GradientPolylineDashMaterial.prototype
     * @type {Cesium.Property|undefined}
     */
    dashLength: Cesium.createPropertyDescriptor("dashLength"),

    /**
     * Gets or sets the numeric Cesium.Property specifying a dash pattern
     * @memberof GradientPolylineDashMaterial.prototype
     * @type {Cesium.Property|undefined}
     */
    dashPattern: Cesium.createPropertyDescriptor("dashPattern"),
});

/**
 * Gets the {@link Material} type at the provided time.
 *
 * @param {JulianDate} time The time for which to retrieve the type.
 * @returns {String} The type of material.
 */
GradientPolylineDashMaterial.prototype.getType = function (time) {
    return "GradientPolylineDash";
};

/**
 * Gets the value of the property at the provided time.
 *
 * @param {JulianDate} time The time for which to retrieve the value.
 * @param {Object} [result] The object to store the value into, if omitted, a new instance is created and returned.
 * @returns {Object} The modified result parameter or a new instance if the result parameter was not supplied.
 */
GradientPolylineDashMaterial.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
        result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(
        this._color,
        time,
        defaultColor,
        result.color
    );
    result.gapColor = Cesium.Property.getValueOrClonedDefault(
        this._gapColor,
        time,
        defaultGapColor,
        result.gapColor
    );
    result.dashLength = Cesium.Property.getValueOrDefault(
        this._dashLength,
        time,
        defaultDashLength,
        result.dashLength
    );
    result.dashPattern = Cesium.Property.getValueOrDefault(
        this._dashPattern,
        time,
        defaultDashPattern,
        result.dashPattern
    );
    return result;
};

/**
 * Compares this property to the provided property and returns
 * <code>true</code> if they are equal, <code>false</code> otherwise.
 *
 * @param {Cesium.Property} [other] The other property.
 * @returns {Boolean} <code>true</code> if left and right are equal, <code>false</code> otherwise.
 */
GradientPolylineDashMaterial.prototype.equals = function (other) {
    return (
        this === other || //
        (other instanceof GradientPolylineDashMaterial &&
            Cesium.Property.equals(this._color, other._color) &&
            Cesium.Property.equals(this._gapColor, other._gapColor) &&
            Cesium.Property.equals(this._dashLength, other._dashLength) &&
            Cesium.Property.equals(this._dashPattern, other._dashPattern))
    );
};

Cesium.Material._materialCache.addMaterial("GradientPolylineDash", {
    fabric: {
        type: "GradientPolylineDash",
        uniforms: {
            color: defaultColor,
            gapColor: defaultGapColor,
            dashLength: defaultDashLength,
            dashPattern: defaultDashPattern
        },
        source:
            `
                uniform vec4 color;
                uniform vec4 gapColor;
                uniform float dashLength;
                uniform float dashPattern;
                varying float v_polylineAngle;

                const float maskLength = 16.0;

                mat2 rotate(float rad) {
                    float c = cos(rad);
                    float s = sin(rad);
                    return mat2(
                        c, s,
                        -s, c
                    );
                }

                czm_material czm_getMaterial(czm_materialInput materialInput)
                {
                    czm_material material = czm_getDefaultMaterial(materialInput);

                    vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;

                    // Get the relative position within the dash from 0 to 1
                    float dashPosition = fract(pos.x / (dashLength * czm_pixelRatio));
                    // Figure out the mask index.
                    float maskIndex = floor(dashPosition * maskLength);
                    // Test the bit mask.
                    float maskTest = floor(dashPattern / pow(2.0, maskIndex));
                    vec4 fragColor = (mod(maskTest, 2.0) < 1.0) ? gapColor : color;
                    if (fragColor.a < 0.005) {   // matches 0/255 and 1/255
                        discard;
                    }

                    fragColor = czm_gammaCorrect(fragColor);
                    material.emission = fragColor.rgb;
                    vec2 st = materialInput.st;
                    material.alpha = fragColor.a * (1.0 - st.s);
                    return material;
                }
                    
                `
    },
    translucent: function translucent() {
        return true;
    }
});

// 写到Cesium对象上，就可以像其他MaterialProperty一样使用了
Cesium.Material.GradientDashPolyline = 'GradientPolylineDash'
Cesium.GradientPolylineDashMaterialProperty = GradientPolylineDashMaterial