sdk4.0/src/Obj/Materail/PolylineFlowMultMaterialProperty.js

/*
 * @Description: 流动线
 */
function PolylineFlowMult() {
  class PolylineFlowMultMaterialProperty {
    constructor(options) {
      this._definitionChanged = new Cesium.Event();
      this._color = undefined;
      this._speed = undefined;
      this._rotate = undefined;
      this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
      this.lineBackAlpha = options.lineBackAlpha || 0.05;
      this.rotate = options.rotate;
    }

    get isConstant() {
      return false;
    }

    get definitionChanged() {
      return this._definitionChanged;
    }

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

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

      result.color = Cesium.Property.getValueOrDefault(
        this._color,
        time,
        Cesium.Color.RED,
        result.color
      );
      result.speed = Cesium.Property.getValueOrDefault(
        this._speed,
        time,
        10,
        result.speed
      );
      result.rotate = Cesium.Property.getValueOrDefault(
        this._rotate,
        time,
        true,
        result.rotate
      );
      result.lineBackAlpha = this.lineBackAlpha;
      result.frameTime = Cesium.getTimestamp();
      return result;
    }

    equals(other) {
      return (
        this === other ||
        (other instanceof PolylineFlowMultMaterialProperty &&
          Cesium.Property.equals(this._color, other._color) &&
          Cesium.Property.equals(this._speed, other.speed) &&
          Cesium.Property.equals(this._rotate, other.rotate) &&
          Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
      );
    }
  }

  Object.defineProperties(PolylineFlowMultMaterialProperty.prototype, {
    color: Cesium.createPropertyDescriptor("color"),
    speed: Cesium.createPropertyDescriptor("speed"),
    rotate: Cesium.createPropertyDescriptor("rotate"),
    transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
  });

  Cesium.PolylineFlowMultMaterialProperty = PolylineFlowMultMaterialProperty;
  Cesium.Material.PolylineFlowMultMaterialProperty = "PolylineFlowMultMaterialProperty";
  Cesium.Material.PolylineFlowMultMaterialType = "PolylineFlowMultMaterialType";
  Cesium.Material.PolylineFlowMaterialSource = `
      uniform vec4 color;
      uniform float speed;
      uniform float lineBackAlpha;

      czm_material czm_getMaterial(czm_materialInput materialInput)
        {
            czm_material material = czm_getDefaultMaterial(materialInput);
            vec2 st = materialInput.st;

            // 基础时间轴（控制主光带）
            float baseTime = fract(czm_frameNumber * speed / 60.0) * 1.1;

            // 高频时间轴（控制高光点）
            // float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
            // float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01);
            float highlightTime = fract(frameTime / 1000.0  / abs(speed));
            float highlightSpacing = 0.3; // 高光点间隔

            // 主光带透明度计算
            float mainAlpha = smoothstep(baseTime-0.1, baseTime, st.s) * step(-baseTime, -st.s);

            // 多高光点计算（3个周期性光斑）
            float highlight11 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
                              step(-highlightTime, -st.s) *
                              (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - highlightTime)));

            float highlight21 = smoothstep(highlightTime+highlightSpacing-0.05,
                                        highlightTime+highlightSpacing, st.s) *
                              step(-(highlightTime+highlightSpacing), -st.s) *
                              (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+highlightSpacing))));

            float highlight31 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
                                        highlightTime+2.0*highlightSpacing, st.s) *
                              step(-(highlightTime+2.0*highlightSpacing), -st.s) *
                              (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+2.0*highlightSpacing))));


            float highlight12 = smoothstep(highlightTime-0.05, highlightTime, 1.0 - st.s) *
                              step(-highlightTime, -(1.0-st.s)) *
                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - highlightTime)));

            float highlight22 = smoothstep(highlightTime+highlightSpacing-0.05,
                               highlightTime+highlightSpacing, 1.0 - st.s) *
                              step(-(highlightTime+highlightSpacing),-(1.0 - st.s)) *
                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0-st.s - (highlightTime+highlightSpacing))));

            float highlight32 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
                              highlightTime+2.0*highlightSpacing, 1.0 - st.s) *
                              step(-(highlightTime+2.0*highlightSpacing), -(1.0-st.s)) *
                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - (highlightTime+2.0*highlightSpacing))));


            float highlight1 = !rotate?highlight11:highlight12;
            float highlight2 = !rotate?highlight21:highlight22;
            float highlight3 = !rotate?highlight31:highlight32;
            // 合并效果
            // material.alpha = mainAlpha * 0.7 +
            //                 (highlight1 + highlight2 + highlight3) * 0.5 +
            //                 lineBackAlpha;
            material.alpha = (highlight1 + highlight2 + highlight3) * 0.5 +
                            lineBackAlpha;
            material.diffuse = color.rgb; // 高光区变亮
            return material;
        }
       `;

  Cesium.Material._materialCache.addMaterial(
    Cesium.Material.PolylineFlowMultMaterialType,
    {
      fabric: {
        type: Cesium.Material.PolylineFlowMultMaterialType,
        uniforms: {
          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
          speed: 0.1,
          rotate: true,
          frameTime: Cesium.getTimestamp(),
          lineBackAlpha: 0.05,
        },
        source: Cesium.Material.PolylineFlowMaterialSource,
      },
      translucent: function (material) {
        return true;
      },
    }
  );
}

export { PolylineFlowMult }