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

引子

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

预期效果

实现原理

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

具体实现

Video标签

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

1 <video id="myVideo" 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的模拟时钟同步,下面看下它的构造函数:

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

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

1 viewer.clock.shouldAnimate = true;

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

小结

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

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

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

后记

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

posted on 2021-12-23 11:00  3D入魔  阅读(2150)  评论(0编辑  收藏  举报