【CesiumJS素材】 (1)円形拡散

エフェクト例

ベストプラクティス：

その他の効果:

要素の説明:

コード

/*
 * @Date: 2023-07-21 15:15:32
 * @LastEditors: ReBeX  [email protected]
 * @LastEditTime: 2023-07-27 11:13:17
 * @FilePath: \cesium-tyro-blog\src\utils\Material\EllipsoidFadeMaterialProperty.js
 * @Description: 扩散圆材质
 */
import * as Cesium from 'cesium'

export default class EllipsoidFadeMaterialProperty {
    
    
  constructor(options) {
    
    
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this._time = (new Date()).getTime();
    this.color = options.color;
    this.duration = options.duration;
  };

  get isConstant() {
    
    
    return false;
  }

  get definitionChanged() {
    
    
    return this._definitionChanged;
  }

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

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

    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
  }

  equals(other) {
    
    
    return (this === other ||
      (other instanceof EllipsoidFadeMaterialProperty &&
        Property.equals(this._color, other._color))
    )
  }
}

Object.defineProperties(EllipsoidFadeMaterialProperty.prototype, {
    
    
  color: Cesium.createPropertyDescriptor('color'),
})

// Cesium.EllipsoidFadeMaterialProperty = EllipsoidFadeMaterialProperty;
Cesium.Material.EllipsoidFadeMaterialProperty = 'EllipsoidFadeMaterialProperty';
Cesium.Material.EllipsoidFadeMaterialType = 'EllipsoidFadeMaterialType';
Cesium.Material.EllipsoidFadeMaterialSource =
  `
  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(time);
    if(dis > per * 0.5){
      material.alpha = 0.0;
      discard;
    }else {
      material.alpha = color.a  * dis / per / 1.0;
    }
    return material;
  }
  `

Cesium.Material._materialCache.addMaterial(Cesium.Material.EllipsoidFadeMaterialType, {
    
    
  fabric: {
    
    
    type: Cesium.Material.EllipsoidFadeMaterialType,
    uniforms: {
    
    
      color: new Cesium.Color(1.0, 0.0, 0.0, 1),
      time: 0
    },
    source: Cesium.Material.EllipsoidFadeMaterialSource
  },
  translucent: function (material) {
    
    
    return true;
  }
})
console.log('成功加载扩散圆材质');


// ? 如何使用
// import EllipsoidFadeMaterialProperty from '@/utils/Material/EllipsoidFadeMaterialProperty.js'

// material: new EllipsoidFadeMaterialProperty({
    
    
//   color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
//   duration: 3000,
// })

例

import EllipsoidFadeMaterialProperty from '@/utils/Material/EllipsoidFadeMaterialProperty.js' // 引入这个材质类
import {
    
     viewer } from '@/utils/createCesium.js' // 引入地图对象
import * as Cesium from 'cesium'

const ellipse= viewer.entities.add({
    
    
  position: Cesium.Cartesian3.fromDegrees(50, 50),
  ellipse: {
    
    
    semiMajorAxis: 150000.0, // 长半轴距离
    semiMinorAxis: 150000.0, // 短半轴距离
    
    // ! 重点
    material: new EllipsoidFadeMaterialProperty({
    
    
      color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
      duration: 3000,
    }),
  }
});
viewer.zoomTo(ellipse);

シェーダ

カスタム マテリアルの実装の中核は、ファブリック オブジェクトのソース属性です。次は、GLSL 構文に基づくこのマテリアルのシェーダ コードです。

  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(time);
    if(dis > per * 0.5){
    
    
      material.alpha = 0.0;
      discard;
    }else {
    
    
      material.alpha = color.a  * dis / per / 1.0;
    }
    return material;
  }

コードの主な機能は、入力に従ってmaterialInputマテリアル オブジェクトを作成しmaterial、その後、何らかのロジックに従ってマテリアルを変更し、最後に変更されたマテリアルを返すことです。

コードの説明は次のとおりです。

1. デフォルトのマテリアルを作成する:関数を呼び出してczm_getDefaultMaterial(materialInput)デフォルトのマテリアル オブジェクトを作成し、それを変数に割り当てますmaterial。
2. 拡散カラーを変更します。material.diffuse現在のカラー値のcolor.rgb1.5 倍に設定します。これにより、マテリアルの拡散カラーが変更されます。
3. 距離とスケールを計算する:materialInput.stテクスチャ座標を取得し、テクスチャ座標から (0.5, 0.5) までの距離を計算しますdis。次に、グローバル変数を使用してtime、現在の時刻の小数部を計算しますper。
4. 判定距離条件: が0.5 倍より大きいdis場合、ステートメント ブロックに入ります。このステートメント ブロックでは、完全な透明性を意味する 0.0 に設定し、キーワードを使用して現在のフラグメントを破棄します (描画は無効です)。この条件ステートメントの目的は、距離と現在時刻に基づいて透明度と可視性を制御することです。perifmaterial.alphadiscard
5. 計算の透明性: 上記の距離条件が満たされない場合は、elseステートメント ブロックに入ります。ブロック内では、 1.0を乗算して除算した結果material.alphaを設定します。距離、時間、色の透明度に基づいてマテリアルの透明度を動的に調整することを意味します。color.adisper
6. materialReturnModifiedmaterial:関数の結果として、modifiedmaterial を返します。

参考

1. セシウム カスタム マテリアル マテリアルといくつかの考え - czm_material_GhostPaints のブログ - CSDN ブログ