[譯文]Norad Tracks Santa Tech Preview

Norad Tracks Santa Tech Preview

---

 

做爲北美防空聯合司令部追蹤聖誕老人(NORAD Tracks Santa)團隊的一員, Analytical Graphics, Inc. 正使用Cesium來構建一個3D網絡地圖以可視化Santa在12月24日的位置, 由於那一天他會在地球上游走。能夠聖誕節前夕在www.noradsanta.org上看到他的軌跡。

在本文中, 我會分享3D網絡地圖背後的技術。屏幕截圖使用的位置是基於測試數據的, 固然, 咱們不知道Santa的路線, 僅當NORAD在聖誕節前夕開始追蹤Santa。

Cesium and WebGL

咱們藉助Cesium開發了這個地圖應用。Cesium, 是一個開源的虛擬地球和地圖引擎(open-source virtual globe and map engine), 它自己基於WebGL——一個3D圖形的開發標準——基本上是用於JavaScript的OpenGL ES 2.0. 在當前大多數的瀏覽器, 包括Chrome和Firefox, 以及全部主流的桌面操做系統: Windows, Linux 以及 Mac中, WebGL是可用的。

這就意味着, 用戶能夠在他們的瀏覽器中看到3D效果, 在不須要安裝任何插件或獲取管理員權限。做爲一名長期的C++開發人員, 這也是咱們開始使用WebGL的主要緣由之一。

接下來, 讓咱們看看如何繪製這個應用的每一部分。

Land

咱們使用WGS84 Ellipsoid而非一個Sphere來精確地建模地球。全球地形數據源於Shuttle Radar Topography Mission(SRTM) —— 南北緯60°之間有90m的間隔, 以及Global 30 Arc Second Elevation Data Set(GTOPO30)——整個球有着1km的間隔。由於這些原始數據集很是大, 咱們使用了Tile Map Service(TMS)佈局, 來預處理這些數據集爲一個有層次的高度圖瓦片。

Cesium基於當前的視域來異步地請求瓦片並繪製, 所以, 只有很是小的異步數據集須要發送到客戶端。須要請求的瓦片是經過層級的精細級別(HLOD)肯定的, 所以, 當離觀察者很遠時, 就請求低分辨率的瓦片, 視錐體剔除(view frustum culling)那些位於視域外的瓦片, 這些瓦片不會被請求; 地平線剔除(horizon culling)位於地平線之上的瓦片, 這些瓦片也不會被請求。爲了最小化接收到新瓦片的停頓延遲, Cesium在網絡工做者線程(web worker)中建立了一個源於高度圖瓦片的網格, 這樣, 主線程(main thread)能夠繼續發送WebGL調用命令。固然, 在瓦片渲染過程當中使用了隱藏面(背面)剔除, 以使背離觀察者的隱藏三角形不會被光柵化和着色。

 貼在地形上面的高分辨率影像流自於Bing Maps。影像也被分片, 請求方式與地形相似。然而, 地形和影像瓦片之間並不存在一對一的關係, 所以, Cesium生成多個片斷着色器, 其中每一個在一個地形瓦片上支持不一樣數量的影像瓦片。固然, 片斷中真實的動態分支在這裏會頗有用, 可是按着色器排序和切換着色器仍然要比多路方式(the multi-pass alternative)要好。爲了改善地平線視野(horizon views)的可視化品質, 使用了非均勻地紋理過濾(anisotropic texture filtering)。

高度圖和影像瓦片都使用了緩存的方式, 最近最少使用的瓦片會被釋放覺得新的瓦片騰出空間。

Water

爲了渲染全球範圍內的水, 咱們從渲染地形時使用的SRTM和GTOPO30數據中獲得一個水面掩碼(water mask)。爲了最小化請求的數量(在追蹤Santa時, 咱們期待大量的請求), 咱們在高域(heightfield)瓦片中包含了這個水面掩碼做爲一個字節數組, 其中1表明水, 0表明陸地。大多數瓦片要麼全是水, 要麼全是陸地, 固然, 便於壓縮。咱們預先壓縮全部的瓦片以減小請求瓦片時, 服務器端(server-side)的處理。

給定的水面掩碼, 用於繪製地球的片斷着色器知道它是在對陸地仍是水進行着色。對於動態的水,  橢球表面法線會受到幾個與時間有關的讀取到一個法線貼圖以建立波浪效果。水的顏色會與高分辨率的影像混合, 隱約地顯示出標籤。

Sky and Space

大氣圈提供了環繞地球的由白到藍的光暈(光環), 近似於大氣散射(Accurate Atmosphere Scattering)

星星是經過在整個場景外圍渲染一個天空盒來繪製的。爲了最小化咱們的數據需求, 在繪製天空盒的過程當中, 咱們使用了一個真實的赤道春分(True Equator Mean Equinox, TEME)到僞定點變換, 而非須要額外數據但更爲精確的慣性變換。星星數據集源自於NASA。原始的圖片被轉換爲6幅單獨的圖片, 每幅表明了天空盒的一個面, JPEG 壓縮了80%的質量來下降帶寬和啓動事件。

Columbus View

除了3D地球, 用戶能夠改變到2.5D平坦的地球視圖, 咱們稱之爲哥倫布視圖。使用了一個頂點着色器來作視圖間的改變, 因此, 場景能夠在視圖改變過程當中動畫。

Rendering Pipeline

渲染一個全球範圍的場景會致使精度問題。可能, 最多見的即是z-fighting, 即近處的物體或物體的一部分來回閃爍(flicker back and forth)。這是因爲透視變換和全球範圍場景所須要的大近到遠比例(large near-to-far ratios)所致。

爲了解決這個問題, Cesium渲染過程採用多重視錐(multiple frustums)。首先, 用來渲染天空盒、大氣圈的大視錐採用最小的近平面和最大的遠平面。在渲染天空盒和大氣圈時, 都禁用了深度寫(是的, 這徹底違背了最後渲染天空盒的咒語[mantra])。接下來, 咱們迭代場景中全部可渲染的對象, 返回繪製命令, 包括對象的邊界體積、着色器、頂點數組、渲染狀態等等。在這個過程當中, 咱們剔除了位於視錐體以外和地平線之上的對象, 並肯定剩餘對象的最小近距離和最大遠距離。而後, 咱們肯定咱們須要多少個視錐來渲染這些對象才能確保每一個視錐都維持一個合理的近到遠平面, 同時, 將各個對象放置到每一個視錐使用的桶中(一個對象能夠處於多個視錐體中)。做爲一項優化, 咱們利用了局部相關性(temporal coherence)在計算新的視錐體以前嘗試使用前一幀計算的視錐體以省去對這些對象再一遍計算。最終, 咱們從後向前遍歷這些視錐體, 在訪問以前清空深度值, 而後爲該視錐體中的每一個對象發射繪製命令。

表明了Santa, 北極點以及禮物的廣告牌, 會被批處理, 做爲單個繪製命令發射。儘管僅有一些惟一的圖標, 它們會被組合到單個紋理圖集中以使用批處理。廣告牌的大小是在頂點着色器中基於視覺距離設置的。

Flights

相機飛行(camera flights)在整個應用中可見。在應用首次啓動時, 相機從一個全局視圖飛行到Santa, 而後飛行到一個與被點擊的圖標相應的城市。使用了兩種樣條曲線: Hermite曲線肯定了相機的位置, 球面線性插值肯定了相機的方向。

Other Goodies

使用Fullscreen API, 咱們的應用容許用戶進入全屏模式。對於使用不支持WebGLobal的舊顯卡或瀏覽器的用戶, 咱們回退到2D地圖, 但仍然有大量的3D版本的特性, 如點擊一個城市圖標後查看Wikipedia彈窗。

在接近聖誕前夕的最後的幾周, 咱們仍然在調整咱們的應用-添加優化, 健壯以及改善用戶體驗。