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，群的宗旨不追求人多，只追求切实解决问题，真正学到东西。
后记
后来，万能群友给了个思路，又重新弄了下，大致是参考了可视域分析的效果，还别说，现在真有点投影仪投射影像的感觉了，阴影部分是不会贴图的，而且垂直边缘不会出现断崖式的衔接，看起来很舒服，来看看效果：
