cesium着色器实现旋转雷达特效

上一节我们学习了:cesium纹理采样设置酷炫轨迹飞线今天我们要学习的是cesium着色器实现旋转雷达特效。

动态效果

选择位置，创建矩形

首先我们需要选择一个坐标，来放置我们的雷达。Cesium.Rectangle.fromDegrees 是CesiumJS库中一个方便的函数，用于创建一个新的 Rectangle 对象，该对象表示一个具有特定经度和纬度范围的矩形区域。

this.entity = viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      113.3291,
      23.119,
      113.3341,
      23.124
    ),
    material: Cesium.Color.WHEAT.withAlpha(0.5),
  },
});

给矩形设置材质

接下来我们来给矩形设置材质

this.radarMaterial = new RadarMaterialProperty("radarMaterial");
this.entity = viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      113.3291,
      23.119,
      113.3341,
      23.124
    ),
    material: this.radarMaterial,
  },
});

着色器

这时候我们就可以使用着色器生成一个默认的材质

export default class RadarMaterialProperty {
  constructor(name) {
    this.name = name;
    this.definitionChanged = new Cesium.Event();
    Cesium.Material._materialCache.addMaterial("RadarMaterial", {
      fabric: {
        type: "RadarMaterial",
        uniforms: {
          uTime: 0,
        },
        source: `
         czm_material czm_getMaterial(czm_materialInput materialInput)
          {
            // 生成默认的基础材质
            czm_material material = czm_getDefaultMaterial(materialInput);
            
            vec2 st = materialInput.st;
            
            return material;
          }

          `,
      },
    });

    this.params = {
      uTime: 0,
    };
    gsap.to(this.params, {
      uTime: 6.28,
      duration: 1,
      repeat: -1,
      ease: "linear",
    });
  }
  getType() {
    // 返回材质类型
    return "RadarMaterial";
  }
  getValue(time, result) {
    result.uTime = this.params.uTime;
    // 返回材质值
    return result;
  }
  equals(other) {
    // 判断两个材质是否相等
    return other instanceof RadarMaterialProperty && this.name === other.name;
  }
}

默认材质是一块黑色。

设置一个圆

代码中用到了

distance函数介绍及用法
 GLSL中的step介绍及用法

// 设置圆，外部透明，内部不透明
    
float alpha = step(0.3,distance(st,vec2(0.5)));
material.alpha = alpha;

圆不透明

我们需要圆不透明，外面的黑框透明，用1.0减去step(0.3,distance(st,vec2(0.5)))就是内部的区域了。

float alpha = 1.0 - step(0.3,distance(st,vec2(0.5)));
material.alpha = alpha;

实现雷达

方法中使用了atan

// 设置圆，外部透明，内部不透明
    
float alpha = 1.0 - step(0.5,distance(st,vec2(0.5)));
    
// 按照角度来设置强弱
    
float angle = atan(st.x-0.5,st.y-0.5);
// angle是从-pi到pi,所以如果要设置从0-1的转变,需要加上pi
float strength = (angle+3.1416)/6.2832;
    
// 将强弱与透明度结合
alpha = alpha*strength;
    
material.alpha = alpha;

给雷达上色

我们需要给雷达进行上色

material.diffuse = vec3(st.x,st.y,1.0);

让雷达转起来

这里我们使用mat2来让雷达转起来.

逆时针旋转

vec2 newSt = mat2(
    cos(uTime),-sin(uTime),
    sin(uTime),cos(uTime)
)*(materialInput.st-0.5);
    
newSt = newSt+0.5;
    
vec2 st = newSt;

顺时针旋转

vec2 newSt = mat2(
  cos(uTime), sin(uTime),
 -sin(uTime), cos(uTime)
)*(materialInput.st - 0.5);
  
newSt = newSt + 0.5;

实例演示地址

cesium着色器实现旋转雷达特效

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-着色器实现旋转雷达特效-实践的学习笔记

当前学习笔记实例代码下载

代码运行环境：vue3 + vite + js nodejs 14