VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现）

最新推荐文章于 2023-09-22 09:32:49 发布
最新推荐文章于 2023-09-22 09:32:49 发布
阅读量3.4k 收藏 25
点赞数 6
分类专栏： Cesium 文章标签： 着色器 cesium vue.js 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/damadashen/article/details/125308966
版权

目录

1. 运用着色器编写图案

​2.着色器实现动画绘图

3.着色器实现圆环扩散效果

4.着色器实现雷达图效果

1. 运用着色器编写图案

1）挤出一个盒子

  const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: "挤出四边形",
  });

2）设置材质

const material = new Cesium.Material({
    fabric: {
      // type: "Color",
      // uniforms: {
      //   color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
      // },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          material.diffuse = vec3(0.84,0.66,0.81);
          
          return material;
      }
      `,
    },
  });
 console.log(material.shaderSource);

控制台输出：

 

3）着色器设置材质外观

 const appearance = new Cesium.MaterialAppearance({
    fragmentShaderSource: `
    varying vec3 v_positionEC;
    varying vec3 v_normalEC;
    varying vec2 v_st;

   void main()
  {
    vec3 positionToEyeEC = -v_positionEC;

    vec3 normalEC = normalize(v_normalEC);
   #ifdef FACE_FORWARD
    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
   #endif

    czm_materialInput materialInput;
    materialInput.normalEC = normalEC;
    materialInput.positionToEyeEC = positionToEyeEC;
    materialInput.st = v_st;
    czm_material material = czm_getMaterial(materialInput);
   //  实现圆
   // float strength = 1.0 - distance(v_st,vec2(0.5,0.5))*2.0;  
   // material.diffuse = vec3(strength);
   // material.alpha = step(0.0,strength);

   // 渐变环
   float strength =  1.0-(abs(distance(v_st,vec2(0.5,0.5))-0.25)*4.0);
   material.diffuse = vec3(strength);
   material.alpha = step(0.0,strength);


   #ifdef FLAT
    gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
   #else
    gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
   #endif
  }
    `,
  });

4）实例化着色图元

// 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );

  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

控制台输出：

 5）实现效果：


2.着色器实现动画绘图

1）挤出矩形

const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: "挤出四边形",
  });

2） 实例化材质：

  const material = new Cesium.Material({
    fabric: {
      // type: "Color",
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        uTime: 0,
      },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          material.diffuse = vec3(uTime,uTime,0.81);

          return material;
      }
      `,
    },
  });
  console.log(material);
  console.log(material.shaderSource);

3）安装gasp实现补间动画：

GASP是一款可以用来制作动画的js插件。GASP是一个JavaScript动画库，它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。

安装：

npm install gsap

yarn add gasp

导入：

import gsap from "gsap";

使用：

第一个参数为要控制元素的选择器，第二个参数为控制元素的动画属性

  gsap.to(material.uniforms, {
    uTime: 1,
    duration: 1,//持续时长
    repeat: -1,//重复次数
    yoyo: true,//是否往返动画
    ease: "linear",//运动模式
    onUpdate: () => {
      console.log("值发生了修改");

    },
  });

4）实例化材质表面和图元

const appearance = new Cesium.MaterialAppearance({
    material: material,
    // translucent: true,
    // closed: true,
  });

  // 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );

  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

5）实现效果：

 3.着色器实现圆环扩散效果

与上实现原理基本相似，通过挤出四边形，在该四边形上绘制半径变化的圆，并通过设置透明度，实现圆环扩散效果。

1）挤出矩形

const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: "挤出四边形",
  });

2）利用着色器绘制图形

const material = new Cesium.Material({
    fabric: {
      // type: "Color",
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        uTime: 0,
      },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          float strength =  1.0 - (abs(distance(materialInput.st,vec2(0.5,0.5))-0.25+uTime)*8.0);
          material.diffuse = vec3(strength,0.0,0.0);
          // step<0.5就为0，否则返回1
          // material.alpha = step(0.5,strength);
          // clamp,可以将内容限制在某个范围内
          if(strength<0.0){
            material.alpha = 0.0;//强度小于0，透明度为0
          }else{
            material.alpha = clamp(0.0,1.0,strength);//最小值，最大值，强度
          }
          
          return material;
      }
      `,
    },
  });
console.log(material.shaderSource);

3）利用gasp实现补间动画

gsap.to(material.uniforms, {
    uTime: 1,
    duration: 1,
    repeat: -1,
    ease: "linear",
    yoyo: true,//往返重复
  });

4）实例化着色器及图元实例

 const appearance = new Cesium.MaterialAppearance({
    material: material,
    // translucent: true,
    // closed: true,
  });
  
  appearance.material.uniforms.uTime = 0.0;
  // 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );
  console.log(appearance);
  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

5）实现效果：

6） 全部代码：

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import * as dat from "dat.gui";

import gsap from "gsap";
// console.log(flightData);
const gui = new dat.GUI();

// 设置cesium的token
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边经度
  89.5,
  // 南边维度
  0.4,
  // 东边经度
  110.4,
  // 北边维度
  81.2
);
// 实现圆的扩散
onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 天地图影像服务
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),
  });

  viewer.scene.globe.enableLighting = true;

  // 设置沙箱允许使用JS
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", "");

  // // 隐藏cesiumLogo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(112.417, 23.29, 100000),
  });

  const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: "挤出四边形",
  });

  const material = new Cesium.Material({
    fabric: {
      // type: "Color",
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        uTime: 0,
      },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          float strength =  1.0 - (abs(distance(materialInput.st,vec2(0.5,0.5))-0.25+uTime)*8.0);
          material.diffuse = vec3(strength,0.0,0.0);
          // step<0.5就为0，否则返回1
          // material.alpha = step(0.5,strength);
          // clamp,可以将内容限制在某个范围内
          if(strength<0.0){
            material.alpha = 0.0;//强度小于0，透明度为0
          }else{
            material.alpha = clamp(0.0,1.0,strength);//最小值，最大值，强度
          }
          
          return material;
      }
      `,
    },
  });

  gsap.to(material.uniforms, {
    uTime: 1,
    duration: 1,
    repeat: -1,
    ease: "linear",
    yoyo: true,//往返重复
  });

  console.log(material.shaderSource);

  const appearance = new Cesium.MaterialAppearance({
    material: material,
    // translucent: true,
    // closed: true,
  });
  
  appearance.material.uniforms.uTime = 0.0;
  // 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );
  console.log(appearance);
  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

  // let fs = appearance.getFragmentShaderSource();
  // console.log(fs);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

4.着色器实现雷达图效果

实现原理：

通过设置一个矩形盒子，并在其上用着色器绘制圆形，通过对角度的不停旋及动态变换的透明度转实现雷达图效果。

实现代码：

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import * as dat from "dat.gui";

import gsap from "gsap";
// console.log(flightData);
const gui = new dat.GUI();

// 设置cesium的token
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边经度
  89.5,
  // 南边维度
  0.4,
  // 东边经度
  110.4,
  // 北边维度
  81.2
);
// 实现圆的扩散
onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 天地图影像服务
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),
  });

  viewer.scene.globe.enableLighting = true;

  // 设置沙箱允许使用JS
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", "");

  // // 隐藏cesiumLogo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(112.417, 23.29, 100000),
  });

  const extrudePolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        112.417, 23.29, 113.67, 23.56, 114.093, 22.59, 112.838, 22.285,
      ])
    ),
    // extrudedHeight: 30000,
  });

  const instance = new Cesium.GeometryInstance({
    geometry: extrudePolygon,
    id: "挤出四边形",
  });

  const material = new Cesium.Material({
    fabric: {
      // type: "Color",
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        uTime: 0,
      },
      source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
          czm_material material = czm_getDefaultMaterial(materialInput);
          
          vec2 newSt = mat2(
            cos(uTime), -sin(uTime),
            sin(uTime), cos(uTime)
          )*(materialInput.st-0.5);
          newSt += 0.5;

          //设置透明度
          float alpha = 1.0 - step(0.3,distance(newSt, vec2(0.5)));
          //计算角度
          float angle = atan(newSt.x - 0.5, newSt.y - 0.5);
          //计算强度
          float strength = (angle+3.14)/6.28;

          material.alpha = alpha*strength;
          material.diffuse = mix(vec3(0.0, 0.0, 0.0), vec3(1.0,0.0,0.0), strength);//由黑到红
          
          return material;
      }
      `,
    },
  });

  gsap.to(material.uniforms, {
    uTime: -6.28,
    duration: 1,
    repeat: -1,
    ease: "linear",
    // yoyo: true,
  });

  console.log(material.shaderSource);

  const appearance = new Cesium.MaterialAppearance({
    material: material,
    // translucent: true,
    // closed: true,
  });

  appearance.material.uniforms.uTime = 0.0;
  // 创建图元添加
  var primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: [instance],
      appearance: appearance,
    })
  );
  console.log(appearance);
  console.log(appearance.vertexShaderSource);
  console.log(appearance.fragmentShaderSource);

  // let fs = appearance.getFragmentShaderSource();
  // console.log(fs);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

实现效果：

 

HM-hhxx！
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium圆形扩散扫描效果封装
元仙僧的博客
05-23 163
增加了边框大小调整参数，增加了清除效果方法。注：在页面销毁时需要调用清除方法。
Cesium：绘制带洞的多边形
席木木的博客
12-06 1533
Cesium：绘制带洞的PolygonGeometry多边形。
Cesium通过着色器实现~动态墙效果
qq_35984445的博客
11-18 3059
转载链接：https://blog.csdn.net/wgf1997/article/details/105680049 colors1.png 一、由上到下 // 着色器代码 "czm_material czm_getMaterial(czm_materialInput materialInput)\n\ {\n\ czm_material material = czm_getDefaultMaterial(materialInput);\n\ vec2 st = materialInpu
绘制圆形/圆环/扇形/扇面Mesh
09-07
在Unity3D里绘制圆形/圆环/扇形/扇面Mesh
cesium1.105.1以此版本的自定义着色器CustomShader中文文档
u012425087的博客
06-07 4635
用户想要添加到着色器的任何自定义uniform。
Cesium 中的Shader解析1
苹果园dog
05-04 6293
Cesium中在创建点、线、面、球等Geometry的时候，可以动态指定材质。材质用于设置物体的外观。通常修改材质的片元着色器来改变外观。
vue-cesium:CesiumJS的Vue 3.x组件
04-02
VueCesium-用于GIS的CesiumJS的基于Vue 3.x的组件库。 :flexed_biceps: Vue 3.0合成API :fire: 用TypeScript编写 状态：测试版 该项目仍在大力开发中。 欢迎加入我们，并提出您的第一个请求。 语言能力 文献资料 ...
vue3-vite-ts-cesium-天地图 地图影像 矢量地图 矢量标注
04-02
这个模板是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着...
vue-cesium-v2
03-28
VUE CESIUM 用于CesiumJS的Vue 2.x组件。 加载Cesium构建的程序包或其他基于Cesium构建的第三方程序包。 语言能力 链接 开始吧 VueCesium使用内置的CesiumJS库。 您可以根据项目需要使用基于Cesium构建的在线，本地...
vue3-vite-ts-cesium实现地球自转
04-01
本篇案例介绍如何使用 Vue3、Vite、TypeScript 和 Cesium 实现一个简单的数字地球浏览器，并通过 icrf 函数实现地球的自转效果。文章主要包括以下内容： 初始化 Vue3 项目，并安装相关依赖； 配置 Vite，使其支持 ...
vue-cesium-example：vue-cesium-example
01-30
Vue Cesium作者：马丁项目设置git clone git@github.com:martinageradams/vue-cesium-example.gityarn install编译和热重装以进行开发yarn serve编译并最小化生产yarn build运行单元测试yarn test:unit整理和修复...
cesium动态绘制多边形(polygon)
qq_25519615的博客
07-27 2529
项目中需要通过三个坐标点位动态调整覆盖范围，于是使用cesium实体对象中的多边形来实现(polygon),实现效果如下。第一步，先创建多边形，使用Cesium.CallbackProperty函数来实时更新位置。注意：此案例是在cesium1.95版本上开发的。这样就完成了动态的多边形绘制了，完整代码如下。第二步，使用定时器定时调用模拟位置变化。
03-Cesium自定义着色器完整代码以及注释
fxshy的博客
07-26 1705
03-Cesium自定义着色器完整代码以及注释
Cesium实现限高设计
小火车况且况且况且的博客
10-26 1332
ClassificationPrimitive GeometryInstance PolygonGeometry直接上代码 方法不使用的效果图如下 使用 倾斜摄影可以参考这个大佬的文章
cesium态势标绘 （ 绘制攻击箭头）
God's asylum的博客
05-18 2554
vue + cesium攻击箭头标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
Cesium 使用着色器实现点光源
kuyewb的专栏
09-22 1874
可设置点光源位置，颜色，使用自定义着色器，混合3DTileset，实现点光源效果。
cesium中如何修改图层的着色器，使其达到我们想要的图层风格
webMinStudent的博客
05-20 844
这里面的字符串是glsl代码，我们使用字符串的replace函数来替换掉我们想替换的代码。在cesium中我们可以，通过修改图层的着色器源代码使其达到一些酷炫的效果，现在我们。好现在 baseFragmentShader里面就是图层的着色器代码。这样就做到了，修改glsl代码的效果。这样就可以达到一些自定义的图层效果。获取图层对应的片源着色器源代码。来说说如何做到这一切。
Cesium.js着色器的简单实现
weixin_42443851的博客
01-07 9374
cesium.js着色器的简单实现 最近在研究cesium.js，第一次接触这个引擎，以前用Babylon.js和Three.js比 较多，对于这个新的引擎感觉还是比较新鲜，也扩充一下自己的知识面。学习了一段时间 感觉还是挺有意思的。于是乎就想实现一个简单的自定义shader，看一下cesium.js是 如何 ...
基于Cesium使用自定义着色器的资源总结
wwx199126的博客
09-24 1547
基于Cesium使用自定义着色器的资源总结
vue3 使用 vue-cesium
最新发布
09-28
Vue3可以使用vue-cesium插件来整合Cesium。在配置过程中，首先需要全局安装vue/cli，然后创建一个新的Vue3项目。接下来，可以通过npm安装vue-cesium插件并编写Vue组件来使用Cesium功能。在运行项目时，可能会遇到一些问题，可以在vue-cli的issues中找到解决办法，例如通过卸载vue并重新安装特定版本的vue。希望这些信息对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HM-hhxx！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值