Cesium深入浅出之视频投影

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

Helsing

8188人浏览 · 2020-09-14 23:56:14

Helsing · 2020-09-14 23:56:14 发布

引子

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

预期效果

实现原理

开篇就说了，咱们这篇是入门级的，所以原理非常简单，用一句话来描述，就是给一个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

选项子属性：

名称	类型	默认值	描述
`clock`	Clock		用于驱动视频的时钟实例。
`element`	HTMLVideoElement		要被同步的视频元素。
`epoch`	JulianDate	`Iso8601.MINIMUM_VALUE`	标记视频开始的模拟时间。
`tolerance`	Number	`1.0`	时钟和视频可分离的最大时间量（秒）。

结构很简单，就是传入Cesium的时钟和视频元素，没什么好说的，上代码：

let synchronizer = new Cesium.VideoSynchronizer({
    clock : viewer.clock,
    element : videoElement
});

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

viewer.clock.shouldAnimate = true;

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

小结

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

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

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