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