Ceisum无人机巡检视频投放

公司投标内容有个视频投放的功能动画,原本想实现这么一个效果:
在这里插入图片描述
案例效果来自别人的展示作品,Leader一眼就相中了这个效果,可惜别人的终究是别人的,又不会白白给你,终究是要自己动手尝试。

动画方面的展示效果我已经非常熟练了,无非就是两种写法1. 实体绑定时间轴,监听路径以及姿态;2. CZML加载模型和点位集合。
为了方便,我一般都用第二种。动画方面没有问题,那么就差一个视椎体视频了,只要把这个做出来,把它跟CZML的时间轴绑定起来就完事了。

Step 0:
思路:构建一个视椎体,然后计算远截面四点坐标,利用这四个点来画一个矩形,贴入视频材质,完成视频在视椎体内播放。
使用CZML播放动画,将视椎体的朝向更正为垂直向下,再将位置绑定给动画中的实体,让它们一起运动。
在这里插入图片描述
经过不懈努力拿到一个视椎体方法,可以计算出四点点位,视频作为材质镶嵌到视椎体头部,偶然间尝试到的perPositionHeight: true解决了多边形不贴合问题,视频播放也解决了,一切都在向着美好的方向,最后发现视椎体我控制不了它旋转到垂直向下的方向,这需要足够的矩阵计算能力,还有就是动态更新位置也是个技术大关,一时半会儿搞不定,Game Over!

花费了不少时间去追求最高品质效果,受阻后开始琢磨阉割版。

虽然接下来实现的可能是个简陋功能,但能让Leader有个可以交差的东西,后续有时间再重新研究。

想法:去除视椎体,添加一个适合贴视频的材质,让它跟随无人机一起运动,可以简单实现视频追着无人机飞。

Step 1:
思路: 动态点还是依靠CZML实现,在dataSource.then方法内部作用域中获取路径实体,添加rectangle矩形,所需四个点通过Cesium.CallbackProperty回调函数实时计算。

部分代码:

dataSource.then(function (dataSource) {var entity = dataSource.entities.getById("path");entity.viewFrom = new Cesium.Cartesian3(0.0, 0, 15000.0);that.viewer.trackedEntity = entity;const videoElement = document.getElementById('ceguiji'); //视频早已绑定到标签that.viewer.entities.add({rectangle: {coordinates: new Cesium.CallbackProperty(function (time, result){var sourpos = entity.position.getValue(time);var cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(sourpos);var lon1 = Cesium.Math.toDegrees(cartographic1.longitude);var lat1 = Cesium.Math.toDegrees(cartographic1.latitude);var height1 = cartographic1.height;return Cesium.Rectangle.fromDegrees(lon1-0.0001,lat1 - 0.0002, lon1+0.0001, lat1+0.0002)},false),material: videoElement},})}

在这里插入图片描述

很容易就出来一个跟随路径飞行的视频,但跟路径夹角基础在45度,视频长宽被拉伸得不成型,还不能变方向,这就是固定点的局限性,直接pass。

Step 2:
思路:将材质换成视频墙,plane比wall更合适,只需要一个动点,长宽皆可由属性定义,这样一个长宽合适的视频就跟随路径移动了,但有个两个问题,一个是大难题怎样实时更新姿态,另一个视频立起来了,我还要让它倒下去,跟地面平行。

部分代码:

var bluePlane = that.viewer.entities.add({name : "Blue plane",position : Cesium.Cartesian3.fromDegrees(118.835100, 35.183068, 190),plane : {plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),dimensions : new Cesium.Cartesian2(-150.0, 100.0),material : videoElement,stRotation: Cesium.Math.toRadians(90)},});

在这里插入图片描述

经过一系列尝试,我发现解决将它放平的难度可能比解决实时更新姿态的难度更高,AI也说了,这两个材质设计之初就没考虑过空间问题,所以还是换吧。

Step 3:
思路:box材质让我看到了希望,它是一个立体盒子,我可以通过设置长宽、高为0,来实现一个平面视频墙。

var bluePlane = that.viewer.entities.add({name : "Blue plane",position : Cesium.Cartesian3.fromDegrees(118.835100, 35.183068, 190),box: {dimensions : new Cesium.Cartesian3(60.0, 30.0, 0.0),material: videoElement},});

在这里插入图片描述

轻松得到一个平行地面的视频材质,所以只剩下最后一个问题,如何让材质跟随路径调整姿态。

Step 4:
思路:我尝试将box加入czml中,这样它可以通过czml的自带属性来实时更新姿态,我就不用考虑变换矩阵

{id: "box",name: "uva-box-fly",availability: "2022-08-04T10:00:00Z/2022-08-04T15:00:00Z",box: {dimensions: {cartesian: [60.0, 30.0]},material: Cesium.Color.RED.withAlpha(0.5),},orientation: {velocityReference: "#position"},model: {gltf: "/models/Cesium_Air.glb",scale: 2},position: {epoch: "2022-08-04T10:00:00Z",cartographicDegrees: [],},},

但我发现视频是横着放的,这个暂且不管,得到下面这个效果。
在这里插入图片描述
因为它用的是飞机路径的position,和飞机路线重合,所以就叠一起了,我复制了一份路径存储数组,在push的时候高度降低50,这样就可以分离飞机和视频。

但再看效果,发现连飞机都复刻下来了,简直离谱!
在这里插入图片描述
Step 5:
接上一步,既然都是要在dataSource.then中实现,那么加入实体追踪的方式似乎也难不了多少,尝试了一下思路,很轻易就实现了同样的效果,关键点在于设置实体方向orientation: Cesium.Quaternion.IDENTITY,这个值可以根据position初始化姿态,也就可以做到跟随路径同步调整方向,但实现效果上我看到了一个斜放的刀片一样的东西,视频方向永远倾斜,这跟视椎体初始化角度问题一样,是个大毛病。
在这里插入图片描述

看到只差最后一步,我只能去搜寻旋转实体的方法,让它在原有姿态基础上旋转到合适角度。原本尝试了Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(lon,lat,height), new Cesium.HeadingPitchRoll(45, 0, 0))这个常用办法,但报错了,搜了一下AI发现这个用于局部坐标系,而我获取到的点已经是Cartesian3,方法不可用,于是尝试更难的四元数矩阵转换,还好没给我出现太多阻碍,连着解决了几个小问题,实现了比较好的一版。

部分代码:

var bluePlane = that.viewer.entities.add({name : "Blue plane",position : Cesium.Cartesian3.fromDegrees(118.835100, 35.183068, 190),orientation: Cesium.Quaternion.IDENTITY,box: {dimensions : new Cesium.Cartesian3(60.0, 30.0, 0.0),material: videoElement},});that.viewer.clock.onTick.addEventListener(function(clock) {var currentTime = that.viewer.clock.currentTime;var currentOrientation = entity.orientation.getValue(currentTime);if (Cesium.defined(currentOrientation) && currentOrientation instanceof Cesium.Quaternion) {var newOrientation = Cesium.Quaternion.clone(currentOrientation);// 应用旋转var rotationQuaternion = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-90));var finalOrientation = Cesium.Quaternion.multiply(newOrientation, rotationQuaternion, new Cesium.Quaternion());// 更新实体的 orientationbluePlane.orientation = new Cesium.ConstantProperty(finalOrientation);} else {console.error('Orientation is not a valid Cesium.Quaternion');}})var property = new Cesium.SampledPositionProperty();//存储坐标for (var ind = 0; ind < timesArr.length; ind++) {var time = Cesium.JulianDate.addSeconds(that.viewer.clock.currentTime,timesArr[ind],new Cesium.JulianDate());var position = entity.position.getValue(time);if (position) {var cartographic =Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);var lat = Cesium.Math.toDegrees(cartographic.latitude);var lng = Cesium.Math.toDegrees(cartographic.longitude);var hei = cartographic.height / 1.9;property.addSample(time,Cesium.Cartesian3.fromDegrees(lng, lat, hei));}}bluePlane.position = property;

在这里插入图片描述
效果我很满意,实现了我最初的思路,视频和无人机保持相对静止状态,同时飞行和调整朝向,视频可以播放,于是迫不及待地写入了项目。
在这里插入图片描述
阉割版视频投屏正式完成了,Leader可以拿去交差了。

两个月后。。。

Leader找到我,问我视频投放这块有什么突破性研究没有,可不可以把之前看到的那个高品质效果做出来,我给了他一个OK的手势。

我在来到这个公司之前,是做军工项目的,对于Cesium用的最多的就是军标绘制,兵力单元的展示等静态方面的效果,交互用的不多,视椎体更是不了解。

在那次受挫之后,我看了很多计算机图形学的文章,搜罗了网上几乎所有对相机视椎体的介绍文章,还从地理专业的高中同学以及考研的大学室友那里取了经,自信已经可以试着把那个功能做出来了。

之前还遗留了个问题,就是关于视椎体为什么会歪的答案,我请教了Cesium中文网的作者,他告诉我视椎体初始姿态会受到地理位置的影响,需要手动矫正。后来我结识了很多Cesium爱好者,互相分享技术,探讨问题,终于在某个Demo中拿到了矫正过的视椎体,虽然方法被做过加密,里面全是单个字母那种变量,让人看的头晕,但我还是将矫正方法给剥离了出来,加入了我的视椎体中,但很神奇的一点,人家可以完美运行的方法,到了我这就不断报错,我逐行检查,发现了几个NaN,原来是计算过程中出现了不符合数学逻辑的东西,由于没找到罪魁祸首,我暂且在中间强行赋值,跳过了几步,让视椎体正常构建而不报错,最后成功矫正了朝向,但也留了个问题,想要在视椎体构建完成之后再次改动朝向,需要重新矫正视椎体,我用的暴力矫正方法可没那么灵活。

不要想太多,先把功能给实现再说,细节方面可以慢慢来。

我重新构建了视椎体,贴上视频,计算出远截面四顶点相对位置,构建平移矩阵移动位置,构建旋转矩阵调整朝向,很好,都成功了,接着加载CZML动画,将视椎体的中心点给绑了上去,视椎体其他部位都是根据中心点来自动调整的。

就在我满含期待之下,纳尼?视椎体不见了?

就在CZML启动之后,视椎体瞬移消失了,我根本不知道它跑哪儿去了,我询问了一些Cesium爱好者,他们说可能是没有考虑缩放等属性,导致视椎体变得很小或者处于隐身状态。

对此我毫无办法,我的能力目前只到这里,超出平移和旋转的知识还是两眼一抹黑,我心想难到就止步于此了吗?

不!我可不是一个人,我的背后还有一支完备的支援大军,我有一个Cesium探讨扣扣群,里面的个个都是人才,说话又好听,于是就将我的问题抛给了群友,期待能从他们那里得到答案。

答案并没有如期拿到,因为群里的老大哥不屑地告诉我,视频投影?群文件里早就上传的有,你干嘛再自己做一个?

于是我找到了那个源码,如获至宝,居然是封装完好的,可以直接拿来用,于是我就改变思路,在这个封装方法的基础上继续完成我的无人机视频投放。封装的方法只到改变初始姿态这点,后面的都要我自己加上,但这对我而言完全不是问题,很快我就看到了效果。
在这里插入图片描述在这里插入图片描述

感谢群友的贡献,功能真的很完美,效果跟Leader相中的那个案例作品差不多。
视频投影源码是别人的成果,我就不私自放了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466838.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust闭包(能够捕获周围作用域变量的匿名函数,广泛应用于迭代、过滤和映射)闭包变量三种捕获方式:通过引用(不可变引用)、通过可变引用和通过值(取得所有权)

文章目录 Rust 闭包详解闭包的定义与语法基本语法 闭包的特性- 环境捕获&#xff08;三种捕获方式&#xff1a;通过引用、通过可变引用和通过值&#xff08;取得所有权&#xff09;&#xff09;示例代码 - 内存安全与生命周期示例代码1 示例代码2&#xff1a;闭包所有权转移示例…

【国内中间件厂商排名及四大中间件对比分析】

国内中间件厂商排名 随着新兴技术的涌入&#xff0c;一批国产中间件厂商破土而出&#xff0c;并在短时间内迅速发展&#xff0c;我国中间件市场迎来洗牌&#xff0c;根据市占率&#xff0c;当前我国中间件厂商排名依次为&#xff1a;东方通、宝兰德、中创股份、金蝶天燕、普元…

Java 源码中的 Unicode 逃逸问题,别被注释给骗了

背景 看了一段项目源码&#xff0c;定义了一个 List 对象&#xff0c;往该列表对象 add 的代码前面有注释符号&#xff0c;但是程序运行时列表中却存在对象&#xff0c;为什么呢&#xff1f;仔细看了一下&#xff0c;注释符号和 add 代码之间有一个特殊符号 \u000d&#xff0c…

基于IM场景下的Wasm初探:提升Web应用性能|得物技术

一、何为Wasm &#xff1f; Wasm&#xff0c;全称 WebAssembly&#xff0c;官网描述是一种用于基于堆栈的虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标&#xff0c;用于编译C/C/Rust等高级语言&#xff0c;支持在Web上部署客户端和服务器应用程序。 Wasm 的开发者参…

基于百度飞桨paddle的paddlepaddle2.4.2等系列项目的运行

PPASR 必看&#xff01;&#xff01;&#xff01; PaddleSpeech develop --> PaddlePaddle 2.5.0/2.5.1 PaddleSpeech < 1.4.1 --> PaddlePaddle < 2.4.2 1.创建虚拟环境 conda create --name test python3.10 2.激活环境&#xff0c;安装ppasr的paddlepaddl…

2024MoonBit全球编程创新挑战赛参赛作品“飞翔的小鸟”技术开发指南

本文转载自 CSDN&#xff1a;https://blog.csdn.net/m0_61243965/article/details/143510089作者&#xff1a;言程序plus 实战开发基于moonbit和wasm4的飞翔的小鸟游戏 游戏中&#xff0c;玩家需要通过上下左右按键控制Bird&#xff0c;在不断移动的障碍pipe之间穿梭&#xf…

浅谈Agent

目录 什么是大模型 Agent &#xff1f; 大模型Agent 有哪些部分组成? 规划&#xff08;Planning&#xff09; Planning类型 不依赖反馈的计划 基于反馈的计划 拆解子目标和任务分解方法 COT TOT GOT LLMP 反思和完善 ReAct(融合推理与执行的能力) Reflexion(动态…

文本转SQL(Text-to-SQL),场景介绍与 Spring AI 实现

在众多的 AI 大模型的应用场景中&#xff0c;Text-to-SQL&#xff0c;也就是文本转 SQL&#xff0c;是其中实用性很高的一个。Text-to-SQL 充分利用了大模型的优势&#xff0c;把用户提供的自然语言描述转换成 SQL 语句&#xff0c;还可以执行生成的 SQL 语句&#xff0c;再把查…

DICOM标准:深入详解DICOM医学影像中的传输语法

引言 DICOM&#xff08;数字成像和通信医学&#xff09;标准在医学影像数据交换中扮演着至关重要的角色。其中&#xff0c;*传输语法&#xff08;Transfer Syntax&#xff09;是DICOM标准中定义数据编码和传输方式的核心部分。理解传输语法对于确保不同设备和系统之间的互操作性…

如何提高谷歌收录速度?

相信很多做外贸推广的朋友都遇到过这种情况&#xff1a;网站上线了&#xff0c;但新页面迟迟不被谷歌收录。即使你的内容很优秀&#xff0c;设计也很精美&#xff0c;如果谷歌爬虫抓不到页面&#xff0c;一切努力就白费了。这时候&#xff0c;GSI谷歌快速收录服务就成了“救命稻…

Spring面向切面编程

目录 1.AOP概述及Spring AOP实现原理 AOP概述 AOP的应用场景 AOP的作用 Spring AOP概述 Spring AOP的实现原理 Spring AOP中Advice的分类 2. 通过xml配置实现AOP 实现步骤&#xff1a; 新增模块&#xff1a; 导入相关依赖&#xff1a; 新增实体类User 新增业务类UserS…

Notepad++ 更改字体大小和颜色

前言 在长时间编程或文本编辑过程中&#xff0c;合适的字体大小和颜色可以显著提高工作效率和减少眼睛疲劳。Notepad 提供了丰富的自定义选项&#xff0c;让你可以根据个人喜好调整编辑器的外观。 步骤详解 1. 更改字体大小 打开 Notepad 启动 Notepad 编辑器。 进入设置菜…

香港航空 阿里滑块 acw_sc__v3 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我删…

Unet++改进3:添加NAMAttention注意力机制

本文内容:添加NAMAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 识别不太显著的特征是模型压缩的关键。然而,它在革命性的注意机制中尚未得到研究。在这项工作中,我们提出了一种新的基于归一化的注意力模块(NAM),它抑制了较不显著…

WPF+MVVM案例实战(二十二)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

汽车广告常见特效处理有哪些?

​汽车广告作为展示汽车性能和外观的重要媒介&#xff0c;常常需要借助特效来增强视觉效果&#xff0c;吸引观众的注意力。以下是一篇关于汽车广告中常见特效处理的文章。 在竞争激烈的汽车市场中&#xff0c;广告不仅是推广产品的工具&#xff0c;更是艺术和科技的结合。特效技…

【CUDA】线程配置

一、 线程层次结构 1.1 认识 GPU 可并行执行工作 Thread&#xff1a;所有线程执行相同的核函数&#xff0c;并行执行 Thread Block&#xff1a;执行在一个Streaming Multiprocessor (SM)&#xff0c;同一个Block中的线程可以协作 线程的集合称为块&#xff0c;块的数量很多…

爬虫-------字体反爬

目录 一、了解什么是字体加密 二. 定位字体位置 三. python处理字体 1. 工具库 2. 字体读取 3. 处理字体 案例1&#xff1a;起点 案例2&#xff1a;字符偏移&#xff1a; 5请求数据 - 发现偏移量 5.4 多套字体替换 套用模板 版本1 版本2 四.项目实战 1. 采集目…

transformer模型写诗词

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

【计算机网络】章节 知识点总结

一、计算机网络概述 1. 计算机网络向用户提供的两个最重要的功能&#xff1a;连通性、共享 2. 因特网发展的三个阶段&#xff1a; 第一阶段&#xff1a;从单个网络 ARPANET 向互联网发展的过程。1983 年 TCP/IP 协议成为 ARPANET 上的标准协议。第二阶段&#xff1a;建成三级…