Cesium 自定义Material 系列（六）

原创

haibalai2009 2022-03-08 15:12:32 ©著作权

文章标签 gis javascript 着色器 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者haibalai2009的原创作品，请联系作者获取转载授权，否则将追究法律责任

对于扩散圆效果我们先定义一下他的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;