Web 三維組態的仿真運用案例：民航飛機的數據監控

前言

在飛機航行的過程中，客艙裏座位上方的熒屏上，除了播放電視劇和廣告之外，還會時不時的切換到一個飛機航行的監控系統。這個監控系統的主要目的是，讓乘客可以瞭解到飛機在航行過程中的整體狀況、距離目的地的航線進程以及一些有可能出現的突發事件。飛機航行的監控系統在一定程度上，可以使乘客在旅途過程中得到準確的信息源，最重要的是可以使乘客在旅途中得到安心。在保障乘客獲取到實際信息源的同時，飛機航行的監控系統也能將採集到的數據及時的反饋給航務人員，而且將數據記錄保存下來，在飛機過站或航後供航務和機務人員使用和監測維護。介於 2D 組態和 3D 組態上，Hightopo（以下簡稱 HT ）的 HT for Web 產品上的有着豐富的組態化可供選擇，本文將介紹如何運用 HT 豐富的 2/3D 組態搭建出一個飛機航行的監控系統的解決方案。

預覽地址：flight-monitor

系統分析

飛機航行監控是一種測量、跟蹤飛機性能變化趨勢的簡單而實用方法。在日常航班飛行中，用機載儀表記錄飛機巡航時的有關參數，並將其與原有性能進行比較。監控的主要參數有:飛行單位時間消耗的燃油量、飛機的巡航飛行速度和消耗單位燃油量飛機飛過的水平距離。它們分別表示發動機、飛機及飛機發動機的綜合性能。它們分別表示發動機、飛機及飛機發動機的綜合性能。性能監控的結果，既可爲飛機維修提供可能的故障信息，又爲制定飛行計劃提供可靠的性能依據。

目前，先進的噴氣運輸機都已安裝飛行狀態監控系統，它記錄下有關參數值,並存儲在數據管理裝置中，這些數據可以發送到或在飛機着陸後送到地面站，用專用計算機程序進行計算和修正，使性能監控數據採集、發送、計箅分析工作自動化，節省了人力，提高了精確度。

1、飛行數據記錄器：自從飛行數據記錄器 FDR（Flight Data Recorder）“俗稱黑匣子”誕生以來，其提供的詳實準確的飛行數據爲事故調查、機務維護保障、安全運營監控提供了重要依據，成爲航空安全運營的重要管理手段。

2、ACMS（Aireraft Condition Monitoring System）的系統概述：ACMS 系統是飛機上安裝的先進機載數據採集和處理系統，它能以實時方式收集數據，對發動機狀態和飛行性能進行監控以及進行特殊的工程調查。由飛機通信尋址與報告系統（ACARS）通過地空數據鏈發送到地面接收站，最後傳送到航空公司的終端，也可通過快速存取記錄器（QAR）將數據記錄保存下來，在飛機過站或航後供航務和機務人員使用。

而 HT 實現的業務功能可以通過ACMS 系統採集到的數據，對接到顯示終端去展示，通過實時監測的數據準確地顯示出來，起到對飛機狀態的監控功能並即時反饋信息數據的變化。

實現過程

雲中穿行效果

爲了達到飛機雲中穿行的效果，最開始我遇到的問題是飛機飛行的層次感，也就通常所說的透視效果，這裏我採用的是雲通道和雲背景以不同的速度流動，製造一種飛行的透視效果。

雲我採用的是貼圖的方式呈現的，但是僅僅是貼圖會遮擋天空和飛機，非常影響飛機飛行的觀感，所以我開啓了相應圖元的transparent和opacity，雲背景和雲通道設置不同的透明度，不僅增加了層次感，還會讓人產生雲朵從眼前飄過的錯覺。

雲通道採用的是ht.Polyline類型，通道縮放拉大了 Y 軸的比例，使雲通道有更大的縱向空間，設置reverse.flip背拷貝使雲通道內部也顯示出貼圖，彷彿讓飛機置身於雲海中穿梭；雲背景採用ht.Node類型，只設置一個面顯示充當雲背景。

整體的雲流動效果採用offset偏移實現，改變相應圖元或相應圖元面的貼圖偏移量來達到飛機雲中穿行的效果， 代碼如下：

var i = 1,
    p = 0;
setInterval(() => {
    i -= 0.1; p += 0.005;
    clouds.s('shape3d.uv.offset', [i, 0]);
    cloudBackground.s('all.uv.offset', [p, 0]);
}, 100);

升降顛簸效果

雖然達到了飛機雲中穿行的效果，但是如果飛機只是直直的飛行，那也會降低飛行的實感，相信坐過飛機的朋友肯定都遇到過因氣流產生的顛簸，也經常感受到飛機飛行途中的爬升和下降，這其實是因爲飛機的航線並不是一直固定在一個高度上，有時會爬升有時會下降，所以我就用ht-animation.jsHT 動畫擴展插件去實現飛機顛簸效果，代碼如下：

dm.enableAnimation(20);
plane.setAnimation({
    back1: {
        from: 0,
        to: 160,
        easing: 'Cubic.easeInOut',
        duration: 8000,
        next: "up1",
        onUpdate: function (value) {
            value = parseInt(value);
            var p3 = this.p3();
            this.p3(value, p3[1], p3[2]);
        }
    },
    //...省略相似
    start: ["back1"]
});

球扇形視角限制

飛行效果完善之後，這時我就遇到了一個比較棘手的問題，因爲實際上雖然看着飛機是在雲海中穿梭，但是僅僅是在通道中飛行，背景其實也只是平面貼圖，所以當視角到達某種程度的時候就會有強烈的違和感和不真實感，就需要一個視角限制，使視角的調整剛剛好在一個範圍內。

視角限制的話一般是限制 g3d 的 eye 和 center ，不太瞭解的朋友可以去看 hightopo 官網中的 3d 手冊，裏面有詳細的說明，這裏我就不再贅述了；因爲視角範圍的關係，所以我決定固定center的位置，代碼如下：

g3d.addPropertyChangeListener(e => {
    // 固定中心點
    if (e.property === 'center') {
        e.newValue[0] = center[0];
        e.newValue[1] = center[1];
        e.newValue[2] = center[2];
    }
}

然後再把eye限制在某一個範圍內就大功告成了，然而這裏卻並不是那麼簡單，最開始我把eye限制在一個立方體的空間內，但交互效果很不理想，考慮到 g3d 默認交互中，鼠標拖拽平移視角變換時，實際上eye是在一個以center爲球心的球面上運動的，所以我決定從這個球中挖出來一塊作爲eye的限制空間，也就是球扇形，不太理解的朋友可以參考這個圖：

球扇形視角限制，一共需要三個參數，分別是中心參考軸、中心軸和外邊所成角度、所在球限制半徑，其中中心參考軸可根據初始eye和center的連接延長線確定，所在球限制半徑又分最大限制和最小限制，代碼如下：

function limitEye(g3d, eye, center, options) {
    var limitMaxL   = options.limitMaxL,
        limitMinL   = options.limitMinL,
        limitA      = options.limitA;

    g3d.addPropertyChangeListener(e => {
        // 固定中心點
        if (e.property === 'center') {
            e.newValue[0] = center[0];
            e.newValue[1] = center[1];
            e.newValue[2] = center[2];
        }
        // 限制視角
        if (e.property === 'eye') {
            var newEyeV = new ht.Math.Vector3(e.newValue),
                centerV = new ht.Math.Vector3(center),
                refEyeV = new ht.Math.Vector3(eye),
                refVector = refEyeV.clone().sub(centerV),
                newVector = newEyeV.clone().sub(centerV);

            if (centerV.distanceTo(newEyeV) > limitMaxL) {
                newVector.setLength(limitMaxL);
                e.newValue[0] = newVector.x;
                e.newValue[1] = newVector.y;
                e.newValue[2] = newVector.z;
            }
            if (centerV.distanceTo(newEyeV) < limitMinL) {
                newVector.setLength(limitMinL);
                e.newValue[0] = newVector.x;
                e.newValue[1] = newVector.y;
                e.newValue[2] = newVector.z;
            }
            if (newVector.angleTo(refVector) > limitA) {
                var oldLength = newVector.length(),
                    oldAngle  = newVector.angleTo(refVector),
                    refLength = oldLength * Math.cos(oldAngle),
                    vertVector,
                    realVector,
                    realEye;

                refVector.setLength(refLength);

                newEyeV = newVector.clone().add(centerV);
                refEyeV = refVector.clone().add(centerV);
                vertVector = newEyeV.clone().sub(refEyeV);
                vertLength = refLength * Math.tan(limitA);

                vertVector.setLength(vertLength);

                realVector = vertVector.clone().add(refEyeV).sub(centerV);

                realVector.setLength(oldLength);

                realEye = realVector.clone().add(centerV);

                // 防止移動角度大於 180 度，視角反轉
                if (oldAngle > Math.PI / 2) {
                    realEye.negate();
                }

                e.newValue[0] = realEye.x;
                e.newValue[1] = realEye.y;
                e.newValue[2] = realEye.z;
            }  
        }
    })
}

飛機監控系統

當然作爲監控系統，自然要有監控了，增加右下角的小地圖，並提供三種模式，分別是聚焦飛機，聚焦飛行軌跡和聚焦地圖，並根據飛機的飛行方向控制飛行軌跡的流動效果，其中聚焦飛機會跟隨飛機移動進行fitData，使飛機一直處於小地圖的中心，代碼如下：

var fitFlowP = function (e) {
    if (e.property === 'position' && e.data === plane) {
        mapGV.fitData(plane, false);
    }
};
buttonP.s({
    'interactive': true,
    'onClick': function (event, data, view, point, width, height) {
        map.a('fitDataTag', 'plane2D');
        mapGV.fitData(plane, false);
        mapDM.md(fitFlowP);
    }
});
buttonL.s({
    'interactive': true,
    'onClick': function (event, data, view, point, width, height) {
        mapDM.umd(fitFlowP);
        map.a('fitDataTag', 'flyLine');
        mapGV.fitData(flyLine, false);
    }
});
// ...省略

增加鼠標移到飛機相應位置進行名稱的提示、雙擊後顯示飛機相應位置的信息面板並將視角聚焦到面板上、點擊飛機任意地方切換回飛機飛行模式等效果。

左側增加監控面板替代上面提到的雙擊相應位置這步操作直接聚焦到相應位置的信息面板上，這裏按鈕開啓了交互並添加了相應的交互邏輯，代碼如下：

button_JC.s({
    'interactive': true,
    'onClick': function (event, data, view, point, width, height) {
        event.preventDefault();
        let g3d = G.g3d,
            g3dDM = G.g3d.dm();
        g3d.fireInteractorEvent({
            kind: 'doubleClickData',
            data: g3dDM.getDataByTag(data.getTag())
        })
    }
});
//...省略

天空渲染效果

既然是監控系統肯定是 24 小時無差別的監控，這就涉及到一個問題，我總不可能半夜的時候飛機也從瓦藍瓦藍的天空上飛過，這就很欠缺真實性了，所以要有一個天空從亮到暗再從暗到亮的過程，這個過程我暫定到 06:00-06:30 和19:00-19:30 這兩個時間段。

天空採用的是shape3d : 'sphere’球形，包裹整個場景，然後使用reverse.flip背拷貝 和blend染色，之後天空就可以渲染成我想要的顏色，如果按照時間改變天空明暗只要改變染色值就可以了。

但是由於白天和晚上光照情況的不同，雲反射光的強度也不同，就導致了白天和晚上雲的差異，所以也要調整雲道和雲背景的貼圖的opacity透明度，晚間更爲透明度，代碼如下：

if ((hour > 6 && hour < 19) || (hour == 6 && minutes >= 30)) {
    timePane && timePane.a({
        'morning.visible': false,
        'day.visible': true,
        'dusk.visible': false,
        'night.visible': false,
        'day.opacity': 1
    })
    skyBox.s({
        "shape3d.blend": 'rgb(127, 200, 240)',
    })
    cloudBackground.s({
        "back.opacity": 0.7,
    })
    clouds.s({
        "shape3d.opacity": 0.7,
    })
} else if ((hour < 6 || hour > 19) || (hour == 19 && minutes >= 30)) {
//...省略
} else if (hour == 6 && minutes < 15 ) {
//...省略
} else if (hour == 6 && minutes >= 15 && minutes < 30) {
//...省略
} else if (hour == 19 && minutes < 15) {
//...省略
} else if (hour == 19 && minutes >= 15 && minutes < 30) {
//...省略
}

這裏我還增加了對右上角時間面板時間狀態圖標的支持，並增加了圖標切換時的漸隱漸顯效果，同時給時間面板狀態圖標位置增加了點擊切換到下一時間狀態的功能。

爲了演示效果我增加了時間倍速按鈕，下圖是 500 倍時間流速下的變化情況：

總結

身處大數據時代的我們，在網絡科技發展越來越快的環境下，迎來了 5G 的新徵程和工業4.0的新變革，在信息數據採集傳輸和數據可視化系統的融合下，可以發掘出許多行業管控可視化系統的解決方案。而 HT 長久以來一直致力於多樣化行業系統可視化的搭建，涉獵的技術行業所累積的經驗，通過自主創新研發的技術產品，已經打造出許多行業上具有代表性意義的可視化管控系統，例如同樣有關於飛機的監控可視化系統：無人機 3D 可視化系統

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hvYQGzq8-1591092123840)(https://img2020.cnblogs.com/blog/1496396/202006/1496396-20200601185137243-2111613258.gif)]

2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裏你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同時，你也可以查看更多案例及效果：https://www.hightopo.com/demos/index.html