Cesium深入浅出之视频投影【转】
引子
中间有事,耽搁了好久才更新。这一篇要做的是视频投影,也有视频投射、视频融合之类的叫法。本篇内容比较简单,仅停留在出效果的层面,所以想要高级应用的小盆友可别扔我鸡蛋啊,待我日后好好研究一番再来补上。要知道,要做到视频与模型真正的融合可不是一件简单的事情,不夸张地说,申请个专利都是没问题的。现在嘛,入门级实现,先讲究看着吧。
预期效果
实现原理
开篇就说了,咱们这篇是入门级的,所以原理非常简单,用一句话来描述,就是给一个Geometry附上材质,然后贴到地图上。涉及到的API内容也比较少,Material、RectangleGraphics或PolygonGraphics,前几篇也介绍过类似的接口了,就不在赘述了,可以点击链接查看官网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 | 选项子属性:
|
1 let synchronizer = new Cesium.VideoSynchronizer({ 2 clock : viewer.clock, 3 element : videoElement 4 });
加上这一步之后,再运行代码试试。矮~矮~怎么视频还是不动呢,不光如此,就连video标签里的视频也不动了。小盆友,别急,不动就对了。原来啊,视频已经和模拟时钟同步了,也就是说时钟动了你视频才能动啊。哦~恍然大悟,我去打开时钟。
1 viewer.clock.shouldAnimate = true;
现在再把video便签隐藏了就完全没有影响了。
小结
没有做多深入的研究,注定是就是一篇水文,群里有有伙伴问我怎么调整视频的形状,我说很简单啊,只要改变实体的形状就可以了,结果啪啪打脸,如图:
我们看到,改变实体的形状并不能影响到视频投影,默认的是按最大边填充的,多余的都被截掉了。我们知道,实际的监控视频正射的很少,要想贴合三维模型肯定要做梯形校正的,这是个很实在的问题,后面必须解决掉。现在初步的思路是有的,既然视频投影就是材质填充,那么在着色器中通过纹理坐标应该能控制纹理的形状。哦嚯,又立了一个flag,之前的可视域分析还有坑没填,哎,时间真心不够啊。
最后,照例来一波宣传:如果你有什么好的想法,可以给我留言,或者可以加这个群854943530,群的宗旨不追求人多,只追求切实解决问题,真正学到东西。
后记
后来,万能群友给了个思路,又重新弄了下,大致是参考了可视域分析的效果,还别说,现在真有点投影仪投射影像的感觉了,阴影部分是不会贴图的,而且垂直边缘不会出现断崖式的衔接,看起来很舒服,来看看效果: