Cesium 自定义Material 系列 （五）

对于水波纹效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数

export interface PMaterialWaterRipple{

color?: any,

speed?: number,

count?: number,

gradient?: number

}

对于轨迹图片我们叫 MaterialWaterRipple

```javascript

import { MaterialProperty } from "./MaterialProperty";

const defaultOption: PMaterialWaterRipple = {

color: Cesium.Color.AQUA,

speed: 1,//步长

count: 3,//波纹总数

gradient: 11//波纹的间须长度

}

//水波纹效果

export class MaterialWaterRipple extends MaterialProperty {

public _getType(option: PMaterialWaterRipple) {

// 由于参数需要动态变动，所以count有变动，认为是新着色器

return "MaterialWaterRipple" + option.count

}

constructor(option=defaultOption) {

super(MaterialWaterRipple.prototype, defaultOption, option);

}

protected getSource(option: PMaterialWaterRipple): string {

return `

czm_material czm_getMaterial(czm_materialInput materialInput)

{

czm_material material = czm_getDefaultMaterial(materialInput);

material.diffuse = 1.5 * color.rgb;

vec2 st = materialInput.st;

vec3 str = materialInput.str;

float dis = distance(st, vec2(0.5, 0.5));

float time = fract( czm_frameNumber * speed / 1000.0);

float per = fract(time);

if (abs(str.z) > 0.001) {

discard;

}

if (dis > 0.5) {

discard;

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