Cesium中实现动态扩散圆

概要

Cesium中实现动态扩散圆，关键函数仍然是czm_frameNumber。具体的方法参照上一篇流光线的实现方法，主要的思路就是控制片元的透明度即可。

DiffusionCircleMaterial.SOURCE = ` czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; // 计算出片元到中心点的距离 float distance = distance(st, vec2(0.5, 0.5)); float speed = fract(czm_frameNumber * animationSpeed); // edge表示扩散的边界，比如二分之一个圆的地方。如果distance小于边界则返回0；大于边界则返回1 float step = step(speed * edge, distance); float alpha = 0.0; if (step == 0.0) { // 距离越远透明度越大 alpha = color.a * (distance / speed); } // 最后让圆慢慢消失 alpha = alpha * (1.0 - speed); // material.diffuse = czm_gammaCorrect(color.rgb); material.alpha = alpha; return material; } ` DiffusionCircleMaterial.TYPE = 'DiffusionCircle'

效果