Cesium自定义材质

Cesium自定义材质可以作为一个模板。基本上照着写就可以实现效果。比如以下是圆形扩散为例。

CircleRippleMaterialProperty.js

import * as Cesium from "cesium";

const CircleRippleMaterialSource = `

                                            uniform vec4 color;
                                            uniform float speed;
                                            uniform float count;
                                            uniform float gradient;
                                            czm_material czm_getMaterial(czm_materialInput materialInput)
                                            {
                                            czm_material material = czm_getDefaultMaterial(materialInput);
                                            material.diffuse = 1.5 * color.rgb;
                                            vec2 st = materialInput.st;
                                            float dis = distance(st, vec2(0.5, 0.5));
                                            float per = fract(czm_frameNumber * speed / 1000.0);
                                            if(count == 1.0){
                                                if(dis > per * 0.5){
                                                discard;
                                                }else {
                                                material.alpha = color.a  * dis / per / 2.0;
                                                }
                                            } else {
                                                vec3 str = materialInput.str;
                                                if(abs(str.z)  > 0.001){
                                                discard;
                                                }
                                                if(dis > 0.5){
                                                discard;
                                                } else {
                                                float perDis = 0.5 / count;
                                                float disNum;
                                                float bl = 0.0;
                                                for(int i = 0; i <= 999; i++){
                                                    if(float(i) <= count){
                                                    disNum = perDis * float(i) - dis + per / count;
                                                    if(disNum > 0.0){
                                                        if(disNum < perDis){
                                                        bl = 1.0 - disNum / perDis;
                                                        }
                                                        else if(disNum - perDis < perDis){
                                                        bl = 1.0 - abs(1.0 - disNum / perDis);
                                                        }
                                                        material.alpha = pow(bl,(1.0 + 10.0 * (1.0 - gradient)));
                                                    }
                                                    }
                                                }
                                                }
                                            }
                                            return material;
                                            }`;


/**

 * 圆形扫描以及圆形扩散的类对象

 * @alias EV_CircleScan

 * @constructor

 * @param {Viewer} viewer       视图对象

 */

function CircleRippleMaterialProperty(options) {

  this._definitionChanged = new Cesium.Event();
  this._color = options.color;
  this._speed = options.speed;
  this.color = options.color;
  this.speed = options.speed;
  this.count = options.count;
  this.gradient = options.gradient;
  //   Cesium.CircleRippleMaterialProperty = CircleRippleMaterialProperty;
  Cesium.Material.CircleRippleMaterialProperty = "CircleRippleMaterialProperty";
  Cesium.Material.CircleRippleMaterialType = "CircleRippleMaterialType";
  Cesium.Material.CircleRippleMaterialSource = CircleRippleMaterialSource;
  //   if (defined(customMaterial)) {
  //     if (defined(customMaterial.FShader)) {
  //       Material.PolylineTrailLinkSource = customMaterial.FShader;
  //     }
  //     if (defined(customMaterial.ColorImage)) {
  //       Material.PolylineTrailLinkImage = customMaterial.ColorImage;
  //     }
  //   }
  Cesium.Material._materialCache.addMaterial(
    Cesium.Material.CircleRippleMaterialType,
    {
      fabric: {
        type: Cesium.Material.CircleRippleMaterialType,
        uniforms: {
          color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
          speed: 3.0,
          count: 4,
          gradient: 0.2,
        },
        source: Cesium.Material.CircleRippleMaterialSource,
      },
      translucent: function (material) {
        return true;
      },
    }
  );
}

Object.defineProperties(CircleRippleMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    },
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    },
  },
  color: Cesium.createPropertyDescriptor("color"),
  speed: Cesium.createPropertyDescriptor("speed"),
  count: Cesium.createPropertyDescriptor("count"),
  gradient: Cesium.createPropertyDescriptor("gradient"),

});

CircleRippleMaterialProperty.prototype.getType = function (time) {
  return Cesium.Material.CircleRippleMaterialType;
};

CircleRippleMaterialProperty.prototype.getValue = function (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.count = this.count;
  result.gradient = this.gradient;
  return result;
};

CircleRippleMaterialProperty.prototype.equals = function (other) {
  return (
    this === other ||
    (other instanceof CircleRippleMaterialProperty &&
      Cesium.Property.equals(this._color, other._color) &&
      Cesium.Property.equals(this._speed, other._speed) &&
      Cesium.Property.equals(this.count, other.count) &&
      Cesium.Property.equals(this.gradient, other.gradient))
  );

};

export default CircleRippleMaterialProperty;

导出js后，在需要的地方引入这个js可以实现想要的材质效果

Circle.js

import CircleRippleMaterialProperty from "./CircleRippleMaterialProperty.js";

/**
 * 圆形扩散
 *
 */
function Circle(options) {
  this._viewer = options.viewer;
  this._id = options.id;
  this._positions = options.positions;
  this._color = options.color;
  this._duration = options.duration;
  this._direction = options.direction;
}

Circle.prototype.addCircle = function () {
  this._viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.9236839, 22.528061),
    name: "波纹圆",
    ellipse: {
      semiMinorAxis: 1000.0,
      semiMajorAxis: 1000.0,
      material: new CircleRippleMaterialProperty({
        color: new Cesium.Color(1, 1, 0, 0.7),
        speed: 12.0,
        count: 2,
        gradient: 0.2,
      }),
    },
  });
};

export default Circle;

效果图