cesium自定义材质发光效果

Question

我想在我的自定义流动线材质的基础上让这个材质有外发光的效果。是否可以通过编写修改其中的着色器语言来实现？

/**
 * @Author: dongnan
 * @Description: 流动线 连续循环 首尾相连
 * @param color 线段颜色
 * @param speed 频率
 * @param image 流动线贴图 (不同的贴图效果不同)
 * @Date: 2021-08-08 19:30:07
 */
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.speed = options.speed;
    this.image = options.image;
  }
}
Object.defineProperties(PolylineTrailMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    },
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    },
  },
  color: Cesium.createPropertyDescriptor("color"),
});
PolylineTrailMaterialProperty.prototype.getType = function () {
  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.speed = this.speed;
  result.image = this.image;
  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.PolylineTrailSource =
  `uniform float speed;` +
  `czm_material czm_getMaterial(czm_materialInput materialInput){` +
  `czm_material material = czm_getDefaultMaterial(materialInput);` +
  `float t = clamp(fract(czm_frameNumber * speed / 1000.0),0.0,1.0);` +
  "vec4 fragColor;" +
  `fragColor.rgb = color.rgb / 1.0;` +
  `fragColor = czm_gammaCorrect(fragColor);` +
  `vec2 st = materialInput.st;` +
  `vec4 colorImage = texture2D(image, vec2(fract(1.0 - st.s + t), st.t));` +
  `material.alpha = color

Answer 1

引自免费微信小程序：皆我百晓生

要在cesium自定义材质中实现发光效果，可以通过修改着色器语言来实现。以下是修改后的着色器代码示例：

Cesium.Material.PolylineTrailSource =
  `uniform float speed;
  uniform sampler2D image;
  czm_material czm_getMaterial(czm_materialInput materialInput){
    czm_material material = czm_getDefaultMaterial(materialInput);
    float t = clamp(fract(czm_frameNumber * speed / 1000.0), 0.0, 1.0);
    vec4 fragColor;

    // 发光效果
    vec2 glowPosition = vec2(0.5); // 发光位置
    float glowRadius = 0.02; // 发光半径
    float glowIntensity = 10.0; // 发光强度

    // 计算当前像素点到发光位置的距离
    vec2 st = materialInput.st;
    float distanceToGlow = distance(st, glowPosition);

    // 如果当前像素点在发光位置附近，给予发光效果
    if (distanceToGlow < glowRadius) {
      float intensity = glowIntensity * (1.0 - (distanceToGlow / glowRadius));
      fragColor.rgb += vec3(intensity);
    }

    fragColor.rgb *= color.rgb / 1.0;
    fragColor = czm_gammaCorrect(fragColor);
    vec4 colorImage = texture2D(image, vec2(fract(1.0 - st.s + t), st.t));
    material.alpha = colorImage.a;

    return material;
  }`;

这段代码在原来的基础上添加了发光效果的计算，具体实现如下：

1. 定义了发光位置、发光半径和发光强度的参数，你可以根据实际需求进行调整。
2. 计算当前像素点到发光位置的距离，根据距离和发光半径的比值来决定发光效果的强度。
3. 根据发光效果的强度和线段颜色，给予发光效果。
4. 最后根据流动线贴图和时间变化对材质进行纹理采样。

在使用时，可以将修改后的着色器代码赋值给PolylineTrailMaterialProperty的PolylineTrailSource属性，示例代码如下：

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.speed = options.speed;
    this.image = options.image;
  }
}
Object.defineProperties(PolylineTrailMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    },
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    },
  },
  color: Cesium.createPropertyDescriptor("color"),
});

PolylineTrailMaterialProperty.prototype.getType = function () {
  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.speed = this.speed;
  result.image = this.image;
  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.PolylineTrailSource = `
uniform float speed;
uniform sampler2D image;

czm_material czm_getMaterial(czm_materialInput materialInput){
  czm_material material = czm_getDefaultMaterial(materialInput);
  float t = clamp(fract(czm_frameNumber * speed / 1000.0), 0.0, 1.0);
  vec4 fragColor;

  // 发光效果
  vec2 glowPosition = vec2(0.5); // 发光位置
  float glowRadius = 0.02; // 发光半径
  float glowIntensity = 10.0; // 发光强度

  // 计算当前像素点到发光位置的距离
  vec2 st = materialInput.st;
  float distanceToGlow = distance(st, glowPosition);

  // 如果当前像素点在发光位置附近，给予发光效果
  if (distanceToGlow < glowRadius) {
    float intensity = glowIntensity * (1.0 - (distanceToGlow / glowRadius));
    fragColor.rgb += vec3(intensity);
  }

  fragColor.rgb *= color.rgb / 1.0;
  fragColor = czm_gammaCorrect(fragColor);
  vec4 colorImage = texture2D(image, vec2(fract(1.0 - st.s + t), st.t));
  material.alpha = colorImage.a;
  
  return material;
}`;

// 使用自定义材质
const trailMaterial = new PolylineTrailMaterialProperty({
  color: Cesium.Color.RED,
  speed: 1.0,
  image: "path/to/your/image.png",
});
entity.polyline.material = trailMaterial;

以上代码示例将自定义的流动线材质应用到了Cesium的entity的polyline上，并设置了发光效果的位置、半径和强度。你需要根据自己的实际需求进行调整，并提供自己的流动线贴图的路径。