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

 更多参考https://xiaozhuanlan.com/topic/6479351028