对于扩散圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数
export interface PMaterialDiffusionCircle{
color?: any,
speed?: number,
type?: EMaterialDiffusionCircle,
}
export enum EMaterialDiffusionCircle {
normal,//标准
glow,//辉光
trail//拖尾
}
对于扩散圆我们叫 MaterialDiffusionCircle
``javascript import { MaterialProperty } from "./MaterialProperty"; const defaultOption: PMaterialDiffusionCircle = { color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), speed: 10, type: EMaterialDiffusionCircle.normal//是否微光 } //扩散圆效果 export class MaterialDiffusionCircle extends MaterialProperty { public _getType(option: PMaterialDiffusionCircle) { // 由于参数需要动态变动，所以count有变动，认为是新着色器 return "MaterialWaterRipple" + option.type } constructor(option = defaultOption) { super(MaterialDiffusionCircle.prototype, defaultOption, option); } protected getSource(option: PMaterialDiffusionCircle): string { const { type = EMaterialDiffusionCircle.normal } = option; if (type === EMaterialDiffusionCircle.glow) { return this._glow(); } else { return this._normal(type); } } //标准的或者拖尾效果 private _normal(type: EMaterialDiffusionCircle) { let trail = -0.01; if (type === EMaterialDiffusionCircle.trail) { trail = -0.1; } return
uniform vec4 color;
uniform float speed;
float circle(vec2 uv, float r, float blur) {
float d = length(uv) * 2.0;
float c = smoothstep(r+blur, r, d);
return c;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st - .5;
material.diffuse = color.rgb;
material.emission = vec3(0);
float time =fract(czm_frameNumber * speed / 1000.0);
float s = 0.5;
float radius = smoothstep(.0, s, time) * 0.5;
更多参考 https://xiaozhuanlan.com/topic/3284507619
