基于WebGL技術的綜合交通樞紐三維全景研究與應用

曲杰卿 黃河 高鵬

（青島市交通運輸公共服務中心 山東省青島市 266000）

三維全景是一種提供全空間范圍實景效果的可視化技術。通過在交通樞紐場站進行三維全景應用，可實現交通樞紐場站的真實的實景展示瀏覽漫游、應急管理指揮，并進行虛擬現實應用等，從而有效服務交通運輸部門的管理及決策。利用三維全景構建的交通樞紐場景，相比較傳統(tǒng)三維建模，具有較小的數據量，且部署簡捷，加載快速，場景開發(fā)及建模成本大為減少，對服務器端及客戶端硬件配置要求低。同時，基于WebGL 技術構建的全景應用無需部署額外插件，具有跨終端設備的特性。本文圍繞基于WebGL 技術及THREE.JS 庫的綜合交通樞紐三維全景模型構建、全景實現以及擴展應用等三方面的研究，為綜合交通樞紐三維全景平臺及其虛擬現實擴展提供了一套有效的技術解決方案。

1 全景模型構建

1.1 全景三維變換模型

對全景場景的三維變換使用webGL 的標準三維變換模型，即將所需渲染的三維場景以二維圖像的方式投射到客戶端窗口界面上，在該過程運用矩陣變換計算，經過模型視圖矩陣、投影矩陣、視口變換矩陣運算等，將三維空間坐標點轉為窗口坐標點。如圖1所示。

THREE.JS 對三維變換模型及相關算法進行了封裝，并基于面向對象的開發(fā)模式構造了攝像機類（Camera，包括正交投影攝像機、透視投影攝像機）、場景類（Scene）、球體類（Sphere）、立方體（Cube）等類，從而將三維變換轉化為在指定場景下對相機與視物的位置、角度、視向等狀態(tài)進行設置。

1.2 全景場景模型設計

全景場景模型是確保全景圖像有效顯示的三維場景的模型。該模型規(guī)定了支持全景渲染的對象、支持全景可視化的對象（本研究使用透視投影攝像機）等的空間位置及屬性特性，通過多個對象的共同配合實現全景展示。

支持全景渲染的模型以球體為基礎，且規(guī)定球心坐標設置于空間坐標系統(tǒng)的原點，同時將透視攝相機的位置即位于球心處。球體模型的半徑應大于透視攝相機的視體積最近的距離，且小于視體積最遠的距離，以保證球面的可視性。支持全景渲染的球模型可進行分割尺度的設置。分割尺度越小，球模型面片數越多，全景圖像因為映射造成的形變越小，最終呈現的真實效果更佳。

1.3 全景圖像模型設計

全景圖像模型規(guī)定了在上述全景場景模型中使用的全景圖像的特性。該圖像采集時應在一個固定觀察點，提供水平方向360 度，垂直方向上180 度的自由瀏覽效果的圖像。目前該類型全景拍攝可通過魚眼全景相機和多鏡頭全景相機實現。一個場景拍攝的原始全景圖像往往有多幅，通過一定的拼接算法形成單幅整體全景圖像，以在全景場景模型中使用。針對綜合交通樞紐的全景圖像采集，應重點關注客流集疏通道、安防消防通道、場站大廳等區(qū)域。如圖2所示。

圖1：WebGL 三維空間坐標轉為窗口坐標的流程示意

圖2：支持球模型的全景圖像

2 全景展示與擴展應用

通過THREE.JS 及Javascript 語言進行全景呈現以及相關應用功能的計算與開發(fā)，同時有效支持移動端等多端展示。

2.1 全景渲染及展示

全景渲染即利用全景圖像調取完成后，將其作為球面紋理在場景模型中的球面上覆蓋，該過程為常規(guī)的球面紋理映射。在屏幕上顯示全景是映射后的整個全景圖像的一部分，也是通過全景場景內的攝像機視口獲取的那一部分。在基于THREE.js 技術的渲染中，通過對攝像機視線方向的交互調整，可以實現對全景的指定區(qū)域的展示。如圖3 所示。

圖3：全景展示及瀏覽

2.2 擴展應用及優(yōu)化處理

圖4：全景視野內的要素標注

圖5：全景視野內方向箭頭的現實增強

以全景三維瀏覽展示為基礎，可根據全景場景模型的三維空間變換計算添加動態(tài)標注、現實增強等功能模塊，以強化該方案的交互應用。

2.2.1 動態(tài)標注應用

通過對交通樞紐視野內設施添加標注標簽，可以實現對所管理設施的定位等應用。標注標簽使用html 元素構造，同時需計算屏幕坐標和全景空間坐標的轉換：創(chuàng)建標注時，需將所選設施的當前屏幕坐標轉換為全景空間坐標。進行全景瀏覽時，標注標簽應始終跟隨指定設施，因此需進行設施的全景空間坐標轉變?yōu)槠聊蛔鴺说挠嬎悖瑢崿F標注的動態(tài)跟隨。如圖4 所示。

2.2.2 多場景疊加的現實增強應用

全景場景支持其他模型的擴展增加，可增強全景信息展示、模擬分析的功能。一種常規(guī)方式是將三維對象添加在當前全景場景的指定位置，通過攝像機對象的計算即可實現現實增強。但對于分散式的三維對象，如放置在與全景同一個場景內，則在視窗只能看到部分內容，不能展示全貌。比如，指示多個方向的箭頭集合，如置于同場景下，只能看到其中一個方向的箭頭。因此研究全景多場景疊加的交互運算模式，以優(yōu)化增強現實效果。

以多方向箭頭（含東、西、南、北四個方向箭頭）為例，為保證所有箭頭始終以立體懸浮效果出現在視野中，需要為其添加獨立的場景，命名為箭頭場景，與全景場景空間坐標系一致。同時需要添加獨立攝像機，命名為箭頭攝像機，與全景攝像機使用同一套的三維空間坐標系統(tǒng)。結合全景相機的視角數據，對箭頭攝像機的空間位置計算，實現兩個場景內對象元素的同步。

設置北方向箭頭指向X 軸正方向，其余方向的箭頭根據與北方向的位置關系對應地進行調整。全景紋理粘貼時，三維坐標的X軸正方向自動指向全景圖像的中心點。

已知全景圖像中心點的方向與實際正北方向的差角為delta（-π 至π）。在三維空間坐標系下，已知全景相機的當前視向為panoEyeTarget（x,y,z）。

首先將全景相機的視向由三維空間坐標系轉為經緯度坐標系（phi,theta),其中phi 為球坐標的緯度，范圍為-π/2 至π/2（由下至上）；theta 為球坐標的經度，范圍為0 至2π（從X 軸正方向開始逆時針計算），計算方式為：

設置箭頭攝相機的視向始終為三維空間坐標系統(tǒng)的原點。考慮到全景圖像中心點的方向與實際北方向的差角為delta，則箭頭攝像機的經度坐標theta’為：

則可計算出箭頭攝相機應所處的空間坐標位置為：

arrowCamera.position.z = 36（由于全景球模型半徑設置為100，故箭頭攝像機空間坐標位置x、y 使用了90 倍系數，且設置z值為36 可實現對箭頭的微俯視的效果）。

同時通過以上計算，在客戶端顯示了全景場景與箭頭場景下兩個場景視口內各自元素的疊加渲染，即箭頭集合全部懸浮顯示在視野中，且與全景的視野范圍聯(lián)動顯示。如圖5 所示。

對箭頭添加點擊事件，則可以進行指定方向全景圖像的跳轉展示，從而實現全景場景的漫游功能。

2.2.3 LOD 優(yōu)化顯示處理

對于三維全景來說，當視野拉近，即屏幕視野的可視范圍變小時，表明對全景圖像中的細節(jié)進行關注，從而需要對細節(jié)進行清晰優(yōu)化。本系統(tǒng)通過利用LOD 技術進行全景優(yōu)化顯示。

LOD（Levels of Detail）即多細節(jié)層級，是指根據模型對象的可視化效果根據所處的位置和關注程度，來調整模型對象的面數、紋理圖片等細節(jié)，從而呈現不同的渲染效果。

本全景系統(tǒng)創(chuàng)建3 級全景圖像貼圖（低精度縮略圖像、普通精度中尺寸圖像以及區(qū)域高精度大尺寸圖像），并利用THREE.JS 的回調模式進行動態(tài)加載。頁面初始化時加載低精度的全景縮略圖像作為當前三維模型的貼圖紋理，加載顯示完成后異步進行普通精度圖像的下載，并在下載完成后進行精細圖像的貼圖覆蓋及顯示。該設計有效避免了初始化時場景空白及卡頓狀況，優(yōu)化了用戶體驗。同時當窗口視野縮放至更小范圍的區(qū)域時，進行視域范圍對應的高精度圖像下載并貼圖顯示，從而實現對細節(jié)更清晰的展示。

3 結語

通過構建交通樞紐場站三維全景應用，實現了多終端無插件的交通樞紐場站內外景的交互展示瀏覽操作，并有效支持空間查詢、虛擬現實等擴展功能，為交通運輸部門進行樞紐場站的現場狀況分析、應急管理指揮等提供了一種直觀可靠的可視化管理方式。

為豐富全景的三維虛擬應用，提升三維模型加載速度，考慮利用WebGL 擴展模塊支持DDS 格式，以二進制格式進行數據傳輸，從而有效避免以圖像文件的方式進行異步加載造成的資源浪費，為實際應用的三維數據即時性提供更好支撐。