Cesium深入浅出之视频投影【转】

摘要:
通常,我们使用矩形,因为视频形状是方形的。据怀疑,视频标签隐藏了这段关系。如果再次显示,视频将再次移动。此处使用VideoSynchronizer。它可以使视频元素与铯的模拟时钟同步。让我们看看它的构造函数:name type description optionsObject option子属性:name type默认值description用于驱动视频的时钟实例。结构非常简单。正是时钟和视频元素被送入铯。没什么好说的。上面的代码是:1letsynchronizer=newCesium。视频同步器;添加此步骤后,再次运行代码以重试。1viewer.clock。shouldAnimate=真;现在,如果你隐藏视频备忘录,它将无效。

引子

中间有事,耽搁了好久才更新。这一篇要做的是视频投影,也有视频投射、视频融合之类的叫法。本篇内容比较简单,仅停留在出效果的层面,所以想要高级应用的小盆友可别扔我鸡蛋啊,待我日后好好研究一番再来补上。要知道,要做到视频与模型真正的融合可不是一件简单的事情,不夸张地说,申请个专利都是没问题的。现在嘛,入门级实现,先讲究看着吧。

预期效果

Cesium深入浅出之视频投影【转】第1张

实现原理

开篇就说了,咱们这篇是入门级的,所以原理非常简单,用一句话来描述,就是给一个Geometry附上材质,然后贴到地图上。涉及到的API内容也比较少,MaterialRectangleGraphicsPolygonGraphics,前几篇也介绍过类似的接口了,就不在赘述了,可以点击链接查看官网API。

具体实现

Video标签

要把大象放冰箱,第一步你得有大象啊。先插入一个视频标签,里面是你的视频地址,这里我借用一下官网示例里的地址了。

1 <video   muted="" autoplay="" loop="" crossorigin="" controls="">
2     <source src="https://sandcastle.cesium.com/SampleData/videos/big-buck-bunny_trailer.webm" type="video/webm">
3     <source src="https://sandcastle.cesium.com/SampleData/videos/big-buck-bunny_trailer.mp4" type="video/mp4">
4     <source src="https://sandcastle.cesium.com/SampleData/videos/big-buck-bunny_trailer.mov" type="video/quicktime">
5 </video>

我们看到沙箱中给了我们三个地址,分别是三种格式,这里我们推荐使用webm格式,一看这名字就知道它对web支持最好了,实际测试的过程中,其他格式如mp4会有卡顿或延迟的情况出现。

实体容器

大象有了,现在就差个冰箱了。通常情况下我们会使用Rectangle,因为视频的形状就是四四方方的嘛。

复制代码
 1 // 获取视频元素
 2 const videoElement = document.getElementById("myVideo");
 3 // 创建实体对象
 4 const rectangle = viewer.entities.add({
 5     rectangle: {
 6         coordinates: Cesium.Rectangle.fromDegrees(-80.0, 39.0, -79.0, 40.0),
 7         material: videoElement
 8     },
 9     // 或创建多边形
10     // polygon: {
11     //    hierarchy: new PolygonHierarchy(positions),
12     //    material: videoElement
13     // },
14 });
15 // 锁定实体对象(这句可有可无)
16 viewer.trackedEntity = rectangle;
复制代码

好了,大功告成了。Waht? 这就好了?是的,这样就已经把视频投影到场景中了。哈哈,水了水了,这篇文章真的水,再多写点有的没的吧。

时钟同步

虽然功能已经,但是不要忘了页面中还挂着那个video呢,那么干掉它吧,设置样式隐藏谁都会。注意,只能是隐藏,不能删掉哦,删掉的话那你场景中的视频就是无源之水了。

1 videoElement.style.display = 'none';

OK,烦人的画面不见了,咦,你会惊喜的发现,场景中的视频怎么不播放了。怀疑是video标签隐藏的关系,把它再显示出来,果然视频又动了。怎么办?这时候就要用到时钟同步了。这里使用的是VideoSynchronizer,它可以使视频元素与Cesium的模拟时钟同步,下面看下它的构造函数:

名称类型描述
optionsObject选项子属性:
名称类型默认值描述
clockClock 用于驱动视频的时钟实例。
elementHTMLVideoElement 要被同步的视频元素。
epochJulianDateIso8601.MINIMUM_VALUE标记视频开始的模拟时间。
toleranceNumber1.0时钟和视频可分离的最大时间量(秒)。
结构很简单,就是传入Cesium的时钟和视频元素,没什么好说的,上代码: 
1 let synchronizer = new Cesium.VideoSynchronizer({
2     clock : viewer.clock,
3     element : videoElement
4 });

 加上这一步之后,再运行代码试试。矮~矮~怎么视频还是不动呢,不光如此,就连video标签里的视频也不动了。小盆友,别急,不动就对了。原来啊,视频已经和模拟时钟同步了,也就是说时钟动了你视频才能动啊。哦~恍然大悟,我去打开时钟。

1 viewer.clock.shouldAnimate = true;

现在再把video便签隐藏了就完全没有影响了。

小结

没有做多深入的研究,注定是就是一篇水文,群里有有伙伴问我怎么调整视频的形状,我说很简单啊,只要改变实体的形状就可以了,结果啪啪打脸,如图:

Cesium深入浅出之视频投影【转】第4张

我们看到,改变实体的形状并不能影响到视频投影,默认的是按最大边填充的,多余的都被截掉了。我们知道,实际的监控视频正射的很少,要想贴合三维模型肯定要做梯形校正的,这是个很实在的问题,后面必须解决掉。现在初步的思路是有的,既然视频投影就是材质填充,那么在着色器中通过纹理坐标应该能控制纹理的形状。哦嚯,又立了一个flag,之前的可视域分析还有坑没填,哎,时间真心不够啊。

最后,照例来一波宣传:如果你有什么好的想法,可以给我留言,或者可以加这个群854943530,群的宗旨不追求人多,只追求切实解决问题,真正学到东西。

后记

后来,万能群友给了个思路,又重新弄了下,大致是参考了可视域分析的效果,还别说,现在真有点投影仪投射影像的感觉了,阴影部分是不会贴图的,而且垂直边缘不会出现断崖式的衔接,看起来很舒服,来看看效果:

Cesium深入浅出之视频投影【转】第5张

免责声明:文章转载自《Cesium深入浅出之视频投影【转】》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇buildroot使用介绍【转】Systemd简介与使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

前端er们如何最快开发h5移动端页面?

因此,它总结了移动终端H5最快发展的最佳方案。web移动终端的发展应注重简化,以满足基本业务需求,设计应尽可能扁平化。前视图层angularjs或react作为框架,node作为中间层,js处理从后端接口获取的数据并操作渲染模板文件,这相当于在MVC中完成控制器层的工作。底层是数据库和后端。...

flutter Radio单选框

单选框,允许用户从一组中选择一个选项。...

Oracle11g温习-第七章:redo日志

thread:线程,在单实例的环境下,thread#永远是1sequence:日志序列号。在日志切换时会递增。FIRST_CHANGE#:在当前日志中记录的首个数据块的scn。...

Oracle的分条件计数COUNT(我的条件),由浅入深

@目录本文涉及关键字COUNT、CASEWHEN和DECODE。Oracle COUNT内置函数。复杂计数。常规操作。中间操作。对中间操作的反思。高级操作。高级操作的修订版本。(你需要根据你的业务知识灵活轮换。)总结。本文涉及关键字COUNT、CASEWHEN和DECODE。Oracle计数。所有操作都基于下表作为操作对象。创建一个名为sqlcreateta...

Python读取JSON数据操作实例解析

为了遵循JSON规范,您应该只编写Python列表和字典。JSON编码格式与Python语法几乎相同,只是存在一些细微差异。...

springboot项目:扫描不到其他模块的包 Parameter 0 of constructor in com.zjxf.repository.UserRepository

报错信息如下:***************************APPLICATIONFAILEDTOSTART***************************Description:Parameter0ofconstructorincom.zjxf.repository.UserRepositoryrequiredabeanoftype'java...