Cesium深入浅出之视频投影
引子
中间有事,耽搁了好久才更新。这一篇要做的是视频投影,也有视频投射、视频融合之类的叫法。本篇内容比较简单,仅停留在出效果的层面,所以想要高级应用的小盆友可别扔我鸡蛋啊,待我日后好好研究一番再来补上。要知道,要做到视频与模型真正的融合可不是一件简单的事情,不夸张地说,申请个专利都是没问题的。现在嘛,入门级实现,先讲究看着吧。
预期效果
实现原理
开篇就说了,咱们这篇是入门级的,所以原理非常简单,用一句话来描述,就是给一个Geometry附上材质,然后贴到地图上。涉及到的API内容也比较少,Material、RectangleGraphics或PolygonGraphics,前几篇也介绍过类似的接口了,就不在赘述了,可以点击链接查看官网API。
具体实现
Video标签
要把大象放冰箱,第一步你得有大象啊。先插入一个视频标签,里面是你的视频地址,这里我借用一下官网示例里的地址了。
<video id="myVideo" muted="" autoplay="" loop="" crossorigin="" controls=""><source src="https://sandcastle.cesium.com/SampleData/videos/big-buck-bunny_trailer.webm" type="video/webm"><source src="https://sandcastle.cesium.com/SampleData/videos/big-buck-bunny_trailer.mp4" type="video/mp4"><source src="https://sandcastle.cesium.com/SampleData/videos/big-buck-bunny_trailer.mov" type="video/quicktime">
</video>
我们看到沙箱中给了我们三个地址,分别是三种格式,这里我们推荐使用webm格式,一看这名字就知道它对web支持最好了,实际测试的过程中,其他格式如mp4会有卡顿或延迟的情况出现。
实体容器
大象有了,现在就差个冰箱了。通常情况下我们会使用Rectangle,因为视频的形状就是四四方方的嘛。
// 获取视频元素
const videoElement = document.getElementById("myVideo");
// 创建实体对象
const rectangle = viewer.entities.add({rectangle: {coordinates: Cesium.Rectangle.fromDegrees(-80.0, 39.0, -79.0, 40.0),material: videoElement},// 或创建多边形// polygon: {// hierarchy: new PolygonHierarchy(positions),// material: videoElement// },
});
// 锁定实体对象(这句可有可无)
viewer.trackedEntity = rectangle;
好了,大功告成了。Waht? 这就好了?是的,这样就已经把视频投影到场景中了。哈哈,水了水了,这篇文章真的水,再多写点有的没的吧。
时钟同步
虽然功能已经,但是不要忘了页面中还挂着那个video呢,那么干掉它吧,设置样式隐藏谁都会。注意,只能是隐藏,不能删掉哦,删掉的话那你场景中的视频就是无源之水了。
videoElement.style.display = 'none';
OK,烦人的画面不见了,咦,你会惊喜的发现,场景中的视频怎么不播放了。怀疑是video标签隐藏的关系,把它再显示出来,果然视频又动了。怎么办?这时候就要用到时钟同步了。这里使用的是VideoSynchronizer,它可以使视频元素与Cesium的模拟时钟同步,下面看下它的构造函数:
名称 | 类型 | 描述 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options
|
Object |
选项子属性:
|
结构很简单,就是传入Cesium的时钟和视频元素,没什么好说的,上代码:
let synchronizer = new Cesium.VideoSynchronizer({clock : viewer.clock,element : videoElement
});
加上这一步之后,再运行代码试试。矮~矮~怎么视频还是不动呢,不光如此,就连video标签里的视频也不动了。小盆友,别急,不动就对了。原来啊,视频已经和模拟时钟同步了,也就是说时钟动了你视频才能动啊。哦~恍然大悟,我去打开时钟。
viewer.clock.shouldAnimate = true;
现在再把video便签隐藏了就完全没有影响了。
小结
没有做多深入的研究,注定是就是一篇水文,群里有有伙伴问我怎么调整视频的形状,我说很简单啊,只要改变实体的形状就可以了,结果啪啪打脸,如图:
我们看到,改变实体的形状并不能影响到视频投影,默认的是按最大边填充的,多余的都被截掉了。我们知道,实际的监控视频正射的很少,要想贴合三维模型肯定要做梯形校正的,这是个很实在的问题,后面必须解决掉。现在初步的思路是有的,既然视频投影就是材质填充,那么在着色器中通过纹理坐标应该能控制纹理的形状。哦嚯,又立了一个flag,之前的可视域分析还有坑没填,哎,时间真心不够啊。
最后,照例来一波宣传:如果你有什么好的想法,可以给我留言,或者可以加这个群854943530,群的宗旨不追求人多,只追求切实解决问题,真正学到东西。
后记
后来,万能群友给了个思路,又重新弄了下,大致是参考了可视域分析的效果,还别说,现在真有点投影仪投射影像的感觉了,阴影部分是不会贴图的,而且垂直边缘不会出现断崖式的衔接,看起来很舒服,来看看效果:
由于某些原因,代码就不贴了,有兴趣的可以到群里了解。
Cesium深入浅出之视频投影相关推荐
- Cesium深入浅出之图层管理器
引子 早就想做这篇内容了,毕竟做为一个GIS平台,没有图层管理器多不方便啊.然而在Cesium中图层这个概念都很模糊,虽然可以加载很多类型的数据,但是每种数据规格都不一样,导致加载进来之后并不能进行统 ...
- Cesium深入浅出之3dtiles渲染
引子 接触Cesium一年有余了,期间靠胡吃海塞吸收了很多有用的.没用的知识和技术,感觉有点消化不良,今天终于有时间来梳理一下了.之前一直搞二维的,对三维技术只能算是半路出家,不敢写太深的原理性文章, ...
- 音视频开发(29)---深入浅出理解视频编码H264结构
深入浅出理解视频编码H264结构 编码流程: 那么 H.264 其编解码流程是怎么样的呢?其实可以主要分为 5 部分: 帧间和帧内预测(Estimation).变换(Transform)和反变换.量化 ...
- PPT中视频投影问题
笔记本连接到投影仪演示PPT,演示文稿中有视频文件,笔记本上可以正常播放,但投影仪打出的画面无法显示.解决办法:命令行中输入dxdiag,将"Display"->" ...
- 【深入浅出项目管理视频1】-项目文档评审
决定尝试用视频的方式来表达这些繁琐的内容, 比写长篇大论可能更直观些,这是我们产品中实现的项目文档评审过程,与大家分享: 不小心录的视频有些大,得有1280宽的显示器才能看完整,也不知道视频在cnbl ...
- mysql私房菜_老男孩MySQL私房菜深入浅出精品视频第7章备份与恢复基础实践视频课程...
2017年06月更新老男孩DBA课程实战视频, 由互联网实战运维架构大牛老男孩主讲! 本视频是老男孩新书<老男孩的MySQL私房菜>的一次公开录制视频! <老男孩的MySQL私房菜& ...
- 深入浅出理解视频编解码技术
导读:随着移动互联网技术的蓬勃发展,视频已无处不在.视频直播.视频点播.短视频.视频聊天,已经完全融入了每个人的生活.Cisco 发布的最新报告中写道,到 2022 年,在移动互联网流量中,视频数据占 ...
- Cesium深入浅出之可视域分析
引子 万众瞩目的可视域分析功能终于来了!上一篇做这个预告的时候,压根还没开始碰这块东西,还有点小忐忑呢,万一弄不出来不就打脸了么,不过好在我脸转的快没打着. 预期效果 效果还可以吧,除了上面星星点点的 ...
- Cesium 深入浅出
基本概念 Viewer界面介绍及组件显隐 每一个组件的描述如下: Geocoder:**查找位置工具,查找到之后会将镜头对准找到的地址,默认使用微软的Bing地图 HomeButton:**首页位置, ...
最新文章
- NETGEAR拒绝连接请求_3分钟理解HTTP的请求与响应
- Lighttpd源码分析之状态机与插件
- Delphi中DLL封装业务逻辑的实现
- Hadoop快速入门——第一章、认识Hadoop
- Web服務器的配置方法
- 字符串处理,查询第一个不是 0 的字符的位置
- 【html】【19】高级篇--大事件时间轴
- Qt文档阅读笔记-Image QML官方解析与实例
- 一文带你了解GaussDB(DWS) 的Roach逻辑备份实现原理
- 网页设计配色方法论:配色秩序
- qq for linux无法安装路径,ubuntu amd 64bit 安装 QQ for linux教程(附 不能使用中文的解决办法)...
- 台式计算机颜色如何矫正,台式机怎么颜色校正操作教程
- 百度文库下载文档,没财富值,没下载卷也能下载
- html按钮扁平化,HTML5和CSS3扁平化风格博客教程的资源分享
- Oracle 字符函数
- spreadjs~~一个Excel在线编辑的工具
- Qt: 窗口的显示和隐藏
- 楼宇控制服务器显示FT,产品 - LOYTEC楼宇管理及控制 - 台达集团
- 2017 ccpc网络预选赛 CaoHaha's staff
- dinic 最大流费用流模板