Cesium 自定义Material 系列 (一)

cesium 在materail 定义上还是比较自由的允许自己构建shader, 我整理一下常用的效果materail 设计
全程使用typescript 来编写这个系列。

首先我们要设计material 的基础类

```javascript

const loadedMap = new Map<string, boolean="">();
// 着色器的基类
export abstract class MaterialProperty {
public _type_ = "";//类型,不允许修改
protected option: any = {};//用户传入的参数
public _definitionChanged: any = new Cesium.Event();
get isConstant() {
return false
}
get definitionChanged() {
return this._definitionChanged
}
/**
* 需要根据参数变化而新建新的着色器类型,可以动态修改他-----------参考MaterialTrailImage类
@param option
/ protected abstract _getType(option: any):string; /*
* 获得着色器字符串
@param option 参数
/ protected abstract getSource(option: any): string; /*
*
@param childprototype 实现类的原型链
@param defaultOption 默认的参数
@param option 用户传入的参数
/ constructor(childprototype: any, defaultOption: any, option: any) { super(); this._type_ = this.getType(option); this.init(childprototype, defaultOption, option); this.option = JSON.parse(JSON.stringify(defaultOption)); Object.assign(this.option, option); this.setattributes(this.option); } /*
* 判断是否相等
@param other 比较的对象
/ public equals(other: any): boolean { if (other === this) { return true; } for (const key in this.option) { if (other[key] !== this.option[key]) { return false; } } return true; } /*
* 获得类型
@param option
*/
public getType(option?: any) {
if (this._type_) {
return this._type_;
} else {
return this._getType(option);
}
}

  • /**
  • * 是否要透明度,按照具体需求设置,默认有透明度
  • * @param material
  • */
  • protected _getTranslucent(material: any){
  • return true;
  • }
  • /**
  • * 设置必须要的属性
  • * @param option
posted @ 2022-01-20 16:55  haibalai  阅读(327)  评论(0编辑  收藏  举报