当前位置：首页 > article >正文

Ceisum无人机巡检视频投放

article 2024/11/2 4:35:42

公司投标内容有个视频投放的功能动画，原本想实现这么一个效果：
在这里插入图片描述
案例效果来自别人的展示作品，Leader一眼就相中了这个效果，可惜别人的终究是别人的，又不会白白给你，终究是要自己动手尝试。

动画方面的展示效果我已经非常熟练了，无非就是两种写法1. 实体绑定时间轴，监听路径以及姿态；2. CZML加载模型和点位集合。
为了方便，我一般都用第二种。动画方面没有问题，那么就差一个视椎体视频了，只要把这个做出来，把它跟CZML的时间轴绑定起来就完事了。

Step 0:
思路：构建一个视椎体，然后计算远截面四点坐标，利用这四个点来画一个矩形，贴入视频材质，完成视频在视椎体内播放。
使用CZML播放动画，将视椎体的朝向更正为垂直向下，再将位置绑定给动画中的实体，让它们一起运动。
在这里插入图片描述
经过不懈努力拿到一个视椎体方法，可以计算出四点点位，视频作为材质镶嵌到视椎体头部，偶然间尝试到的perPositionHeight: true解决了多边形不贴合问题，视频播放也解决了，一切都在向着美好的方向，最后发现视椎体我控制不了它旋转到垂直向下的方向，这需要足够的矩阵计算能力，还有就是动态更新位置也是个技术大关，一时半会儿搞不定，Game Over！

花费了不少时间去追求最高品质效果，受阻后开始琢磨阉割版。

虽然接下来实现的可能是个简陋功能，但能让Leader有个可以交差的东西，后续有时间再重新研究。

想法：去除视椎体，添加一个适合贴视频的材质，让它跟随无人机一起运动，可以简单实现视频追着无人机飞。

Step 1:
思路：动态点还是依靠CZML实现，在dataSource.then方法内部作用域中获取路径实体，添加rectangle矩形，所需四个点通过Cesium.CallbackProperty回调函数实时计算。

部分代码：

dataSource
        .then(function (dataSource) {
          var entity = dataSource.entities.getById("path");
          entity.viewFrom = new Cesium.Cartesian3(0.0, 0, 15000.0);
          that.viewer.trackedEntity = entity;
	
	const videoElement = document.getElementById('ceguiji'); //视频早已绑定到标签
          that.viewer.entities.add({
              rectangle: {
                  coordinates: new Cesium.CallbackProperty(function (time, result){
                    var sourpos = entity.position.getValue(time);
                    var cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(sourpos);
                    var lon1 = Cesium.Math.toDegrees(cartographic1.longitude);
                    var lat1 = Cesium.Math.toDegrees(cartographic1.latitude);
                    var height1 = cartographic1.height;
                    return Cesium.Rectangle.fromDegrees(lon1-0.0001,lat1 - 0.0002, lon1+0.0001, lat1+0.0002)
                  },false),
                  material: videoElement
              },
          })

	}

在这里插入图片描述

很容易就出来一个跟随路径飞行的视频，但跟路径夹角基础在45度，视频长宽被拉伸得不成型，还不能变方向，这就是固定点的局限性，直接pass。

Step 2:
思路：将材质换成视频墙，plane比wall更合适，只需要一个动点，长宽皆可由属性定义，这样一个长宽合适的视频就跟随路径移动了，但有个两个问题，一个是大难题怎样实时更新姿态，另一个视频立起来了，我还要让它倒下去，跟地面平行。

部分代码：

var bluePlane = that.viewer.entities.add({
            name : "Blue plane",
            position : Cesium.Cartesian3
                .fromDegrees(118.835100, 35.183068, 190),
            plane : {
              plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
              dimensions : new Cesium.Cartesian2(-150.0, 100.0),
              material : videoElement,
              stRotation: Cesium.Math.toRadians(90)
            },
          });

在这里插入图片描述

经过一系列尝试，我发现解决将它放平的难度可能比解决实时更新姿态的难度更高，AI也说了，这两个材质设计之初就没考虑过空间问题，所以还是换吧。

Step 3:
思路：box材质让我看到了希望，它是一个立体盒子，我可以通过设置长宽、高为0，来实现一个平面视频墙。

var bluePlane = that.viewer.entities.add({
            name : "Blue plane",
            position : Cesium.Cartesian3
                .fromDegrees(118.835100, 35.183068, 190),
            box: {
              dimensions : new Cesium.Cartesian3(60.0, 30.0, 0.0),
              material: videoElement
            },
          });

在这里插入图片描述

轻松得到一个平行地面的视频材质，所以只剩下最后一个问题，如何让材质跟随路径调整姿态。

Step 4:
思路：我尝试将box加入czml中，这样它可以通过czml的自带属性来实时更新姿态，我就不用考虑变换矩阵

{
            id: "box",
            name: "uva-box-fly",
            availability: "2022-08-04T10:00:00Z/2022-08-04T15:00:00Z",
            box: {
                dimensions: {
                    cartesian: [60.0, 30.0]
                },
                material: Cesium.Color.RED.withAlpha(0.5),
            },
            orientation: {
                velocityReference: "#position"
            },
            model: {
                gltf: "/models/Cesium_Air.glb",
                scale: 2
            },
            position: {
                epoch: "2022-08-04T10:00:00Z",
                cartographicDegrees: [],
            },
        },

但我发现视频是横着放的，这个暂且不管，得到下面这个效果。
在这里插入图片描述
因为它用的是飞机路径的position，和飞机路线重合，所以就叠一起了，我复制了一份路径存储数组，在push的时候高度降低50，这样就可以分离飞机和视频。

但再看效果，发现连飞机都复刻下来了，简直离谱！
在这里插入图片描述
Step 5:
接上一步，既然都是要在dataSource.then中实现，那么加入实体追踪的方式似乎也难不了多少，尝试了一下思路，很轻易就实现了同样的效果，关键点在于设置实体方向orientation: Cesium.Quaternion.IDENTITY，这个值可以根据position初始化姿态，也就可以做到跟随路径同步调整方向，但实现效果上我看到了一个斜放的刀片一样的东西，视频方向永远倾斜，这跟视椎体初始化角度问题一样，是个大毛病。
在这里插入图片描述

看到只差最后一步，我只能去搜寻旋转实体的方法，让它在原有姿态基础上旋转到合适角度。原本尝试了Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(lon,lat,height), new Cesium.HeadingPitchRoll(45, 0, 0))这个常用办法，但报错了，搜了一下AI发现这个用于局部坐标系，而我获取到的点已经是Cartesian3，方法不可用，于是尝试更难的四元数矩阵转换，还好没给我出现太多阻碍，连着解决了几个小问题，实现了比较好的一版。

部分代码：

var bluePlane = that.viewer.entities.add({
                name : "Blue plane",
                position : Cesium.Cartesian3
                    .fromDegrees(118.835100, 35.183068, 190),
                orientation: Cesium.Quaternion.IDENTITY,
                box: {
                    dimensions : new Cesium.Cartesian3(60.0, 30.0, 0.0),
                    material: videoElement
                },
            });

            that.viewer.clock.onTick.addEventListener(function(clock) {
                var currentTime = that.viewer.clock.currentTime;
                var currentOrientation = entity.orientation.getValue(currentTime);
                if (Cesium.defined(currentOrientation) && currentOrientation instanceof Cesium.Quaternion) {
                    var newOrientation = Cesium.Quaternion.clone(currentOrientation);
                    // 应用旋转
                    var rotationQuaternion = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-90));
                    var finalOrientation = Cesium.Quaternion.multiply(newOrientation, rotationQuaternion, new Cesium.Quaternion());
                    // 更新实体的 orientation
                    bluePlane.orientation = new Cesium.ConstantProperty(finalOrientation);
                } else {
                    console.error('Orientation is not a valid Cesium.Quaternion');
                }
            })

            var property = new Cesium.SampledPositionProperty();//存储坐标
            for (var ind = 0; ind < timesArr.length; ind++) {
                var time = Cesium.JulianDate.addSeconds(
                    that.viewer.clock.currentTime,
                    timesArr[ind],
                    new Cesium.JulianDate()
                );
                var position = entity.position.getValue(time);
                if (position) {
                    var cartographic =
                        Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
                    var lat = Cesium.Math.toDegrees(cartographic.latitude);
                    var lng = Cesium.Math.toDegrees(cartographic.longitude);
                    var hei = cartographic.height / 1.9;

                    property.addSample(
                        time,
                        Cesium.Cartesian3.fromDegrees(lng, lat, hei)
                    );
                }
            }
            bluePlane.position = property;

在这里插入图片描述
效果我很满意，实现了我最初的思路，视频和无人机保持相对静止状态，同时飞行和调整朝向，视频可以播放，于是迫不及待地写入了项目。

阉割版视频投屏正式完成了，Leader可以拿去交差了。

两个月后。。。

Leader找到我，问我视频投放这块有什么突破性研究没有，可不可以把之前看到的那个高品质效果做出来，我给了他一个OK的手势。

我在来到这个公司之前，是做军工项目的，对于Cesium用的最多的就是军标绘制，兵力单元的展示等静态方面的效果，交互用的不多，视椎体更是不了解。

在那次受挫之后，我看了很多计算机图形学的文章，搜罗了网上几乎所有对相机视椎体的介绍文章，还从地理专业的高中同学以及考研的大学室友那里取了经，自信已经可以试着把那个功能做出来了。

之前还遗留了个问题，就是关于视椎体为什么会歪的答案，我请教了Cesium中文网的作者，他告诉我视椎体初始姿态会受到地理位置的影响，需要手动矫正。后来我结识了很多Cesium爱好者，互相分享技术，探讨问题，终于在某个Demo中拿到了矫正过的视椎体，虽然方法被做过加密，里面全是单个字母那种变量，让人看的头晕，但我还是将矫正方法给剥离了出来，加入了我的视椎体中，但很神奇的一点，人家可以完美运行的方法，到了我这就不断报错，我逐行检查，发现了几个NaN，原来是计算过程中出现了不符合数学逻辑的东西，由于没找到罪魁祸首，我暂且在中间强行赋值，跳过了几步，让视椎体正常构建而不报错，最后成功矫正了朝向，但也留了个问题，想要在视椎体构建完成之后再次改动朝向，需要重新矫正视椎体，我用的暴力矫正方法可没那么灵活。

不要想太多，先把功能给实现再说，细节方面可以慢慢来。

我重新构建了视椎体，贴上视频，计算出远截面四顶点相对位置，构建平移矩阵移动位置，构建旋转矩阵调整朝向，很好，都成功了，接着加载CZML动画，将视椎体的中心点给绑了上去，视椎体其他部位都是根据中心点来自动调整的。

就在我满含期待之下，纳尼？视椎体不见了？

就在CZML启动之后，视椎体瞬移消失了，我根本不知道它跑哪儿去了，我询问了一些Cesium爱好者，他们说可能是没有考虑缩放等属性，导致视椎体变得很小或者处于隐身状态。

对此我毫无办法，我的能力目前只到这里，超出平移和旋转的知识还是两眼一抹黑，我心想难到就止步于此了吗？

不！我可不是一个人，我的背后还有一支完备的支援大军，我有一个Cesium探讨扣扣群，里面的个个都是人才，说话又好听，于是就将我的问题抛给了群友，期待能从他们那里得到答案。

答案并没有如期拿到，因为群里的老大哥不屑地告诉我，视频投影？群文件里早就上传的有，你干嘛再自己做一个？

于是我找到了那个源码，如获至宝，居然是封装完好的，可以直接拿来用，于是我就改变思路，在这个封装方法的基础上继续完成我的无人机视频投放。封装的方法只到改变初始姿态这点，后面的都要我自己加上，但这对我而言完全不是问题，很快我就看到了效果。
在这里插入图片描述