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

2024-01-20 09:40
文章标签 javascript 实现 使用 编写 vue vue3 绘图 效果 frontend 动画 着色器 扩散 cesium 雷达 图案 圆环

本文主要是介绍VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

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_FORWARDnormalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);#endifczm_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 FLATgl_FragColor = vec4(material.diffuse + material.emission, material.alpha);#elsegl_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 gsapyarn 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;// 设置沙箱允许使用JSvar iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-popups allow-forms");iframe.setAttribute("src", "");// // 隐藏cesiumLogoviewer.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;// 设置沙箱允许使用JSvar iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];iframe.setAttribute("sandbox","allow-same-origin allow-scripts allow-popups allow-forms");iframe.setAttribute("src", "");// // 隐藏cesiumLogoviewer.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>

实现效果：

 

这篇关于VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/625571。

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
gitlab安装及邮箱配置和常用使用方式

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》：本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...
SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
nginx启动命令和默认配置文件的使用

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》：本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx
阅读更多...
在Windows上使用qemu安装ubuntu24.04服务器的详细指南

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程：安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4
阅读更多...
使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
Windows下C++使用SQLitede的操作过程

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能（如数据库连接、事务管理）、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite：C++轻松操作SQ
阅读更多...
PostgreSQL中MVCC 机制的实现

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg
阅读更多...
SpringBoot整合Flowable实现工作流的详细流程

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2