cesium着色器实现实现上升流光飞线效果

上一节我们学习了:cesium实现上下移动的光锥动画今天我们要学习的是cesium着色器实现实现上升流光飞线效果。

动态效果

生成矩形区域

用以生成矩形区域，规范点在这个区域内生成。

安装依赖

pnpm i @turf/turf

生成矩形区域

使用两个点来生成矩形区域

this.bbox = [113.2691, 23.014, 113.3691, 23.159];

创建随机点，生成300个点

// 创建随机点
let points = turf.randomPoint(300, {
  bbox: this.bbox,
});

生成线

let features = points.features;
features.forEach((item) => {
  // 获取点的经纬度
  let point = item.geometry.coordinates;
  // 根据点设置起始位置
  let start = Cesium.Cartesian3.fromDegrees(point[0], point[1], 0);
  // 根据点设置结束位置
  let end = Cesium.Cartesian3.fromDegrees(
    point[0],
    point[1],
    200 + Math.random() * 3000
  );
  //   创建自定义线材质
  let polylineTrailMaterialProperty = new PolylineTrailMaterialProperty();
  //   创建线
  let flyLine = viewer.entities.add({
    polyline: {
      positions: [start, end],
      width: 2,
      material: polylineTrailMaterialProperty,
    },
  });
});

给线设置材质

这一块的原理视频教程讲的很详细，这一块不再描述。

// 向Cesium的材质缓存中添加新的材质
Cesium.Material._materialCache.addMaterial(
    "PolylineTrailMaterial" + this.num,
    {
      fabric: {
        type: "PolylineTrailMaterial" + typeNum,
        uniforms: {
          uTime: 0, // 定义一个时间的uniform变量
          color: this.color, // 定义一个颜色的uniform变量
        },
        // 定义材质的着色器代码
        source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        // 生成默认的基础材质
        czm_material material = czm_getDefaultMaterial(materialInput);
        // 获取纹理坐标
        vec2 st = materialInput.st;
        // 获取当前帧数,在10秒内变化从0-1；
        float time = fract(czm_frameNumber / (60.0*10.0));
        time = time * (1.0 + 0.1);
        // 使用smoothstep函数平滑过渡
        float alpha = smoothstep(time-0.1,time, st.s) * step(-time,-st.s);
        alpha += 0.05;
        // 设置材质的透明度和颜色
        material.alpha = alpha;
        material.diffuse = color.rgb;
        
        return material;
      }

      `,
      },
    }
);

实例演示地址

cesium着色器实现实现上升流光飞线效果

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-着色器实现科技感流光飞线特效-实践的学习笔记

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

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