HTML5 WebGL 實現民航客機飛行監控系統

前些日子出差，在飛機上看到頭頂的監控面板，除了播放電視劇和廣告之外，還會時不時的切換到一個飛機航行的監控系統，不過整個監控系統讓人感到有一點點的簡陋，所以我就突發奇想製作了一個採用HT for Web 的升級版監控系統，demo 的效果還行，發出來大家互相學習下。

demo

雲中穿梭效果

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

雲我採用的是貼圖的方式呈現的，但是僅僅是貼圖會遮擋天空和飛機，非常影響飛機飛行的觀感，所以我開啟了相應圖元的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.js HT 動畫擴展插件去實現飛機顛簸效果，代碼如下：

 dm.enableAnimation(20);plane.setAnimation({ back1: { from: 0, to: 160, easing: 'Cubic.easeInOut', duration: 8000, next: up1, onUpdate: 函數 (value) { 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.adde>Changeener (adde =if. == '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) { newV.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.coscos(old), realEye; refVector.setLength(refLength); newEyeV = newVector.clone().add(centerV); refEyeV = refVector.clone().add(centerV); vertVector = newEyeV.clone().sub(refEyeV); 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 倍時間流速下的變化：

透過這個demo ，我發現生活中有很多沒有被人所注意到的細節都存在數據可視化的可能，在這個大數據的時代更多的可能性值得被人發掘出來，不要錯個身邊每一個值得數據可視化的細節，這樣不僅可以更好的挖掘HT for Web 的潛力，也可以加強自身身為一個程式設計師的綜合素質。