文獻翻譯：網(wǎng)頁虛擬地球對一場虛擬劃艇賽進行的數(shù)據(jù)可視化

網(wǎng)頁虛擬地球對一場虛擬劃艇賽進行的數(shù)據(jù)可視化GerardLlorach,JaviAgenjo,AlunEvans,JosepBlat互動科技集團，龐培法布拉大學，巴塞羅那，西班牙{gerard.llorach,javi.agenjo,alun.evans,josep.blat}@摘要在本文中，我們提出了在瀏覽器中使用虛擬地球的技術和方法，用于對虛擬世界帆船賽的參賽者軌跡進行可視化。諸如HTML5和WebGL這些新的網(wǎng)絡技術，為可視化和共享三維數(shù)據(jù)開辟了新的途徑。然而，基于Web的可視化的大數(shù)據(jù)仍然是具有挑戰(zhàn)性的，作為三維可視化的網(wǎng)頁瀏覽器的力量還沒有達到桌面應用程序的水平。這項工作使用WebGL技術將參加2015巴塞羅那世界賽中17000艘虛擬船的軌跡進行可視化，并提出了渲染優(yōu)化大數(shù)據(jù)的最佳策略（而在一般的消費級硬件中，使用網(wǎng)頁渲染類似的數(shù)據(jù)是不可能的）。之后我們將這一優(yōu)化方式與渲染到紋理的方法進行結合，實現(xiàn)船的路線密度可視化，更進一步提升了渲染和可視化的效果。逐步利用網(wǎng)絡工作者處理和管理數(shù)據(jù)。CR分類：:I.3.7【計算機圖形學】：應用；:I.3.3【計算機圖形學】：圖像處理-位圖和幀緩沖處理關鍵詞：網(wǎng)絡三維，webGL,渲染，大數(shù)據(jù)，最優(yōu)化，可視化1.引言巴塞羅那世界競賽是世界領先的帆船賽之一。兩人組成一只參賽隊伍，離開巴塞羅那之后爭取以最短的時間在世界范圍內航行競爭。在他們回到巴塞羅那之前（大概需要三個月），參賽的船只不會靠岸。與此同時，在網(wǎng)絡上運行的一個大規(guī)模多人在線（MMO）游戲可以讓公共玩家駕駛“虛擬船”航行世界，與真正參加大賽的船只進行實時競爭。在航行時虛擬世界和現(xiàn)實世界中的船只處于相同的天氣條件，其中的天氣數(shù)據(jù)從實時天氣預報中獲取，每六小時更新一次）。因為參與游戲的的人數(shù)眾多，所以在整個比賽過程中將每艘虛擬船的航行軌跡，當前的天氣條件和航行選擇存儲起來后，為三維應用中的可視化和大數(shù)據(jù)分析提供了引人入勝的數(shù)據(jù)源。由于其易于共享的可視化和交互性，利用網(wǎng)絡進行大數(shù)據(jù)的可視化是現(xiàn)在非常有吸引力的工作。雖然價格昂貴，先進的渲染效果圖仍然依靠桌面應用程序或遠程機器，網(wǎng)絡技術的革命為一個基于網(wǎng)絡的在客戶端進行可視化的工作提供了巨大潛力。在大多數(shù)情況下，一個高質量的渲染需要服務器端先進行處理，處理的結果是以圖像傳輸給客戶端的。在服務器端的渲染的主要優(yōu)點是克服渲染客戶端上渲染局限性，以及避免傳輸效率低下和解析率的較低的問題。它有一個負面影響——交互性，作為用戶操作需要被發(fā)送到服務器和交互需要經歷一個傳輸?shù)臅r間。將數(shù)據(jù)在客戶端進行渲染提供了一個更好的有互動體驗，銘記應用在客戶端機器上運行，因此需要足夠強大的能力運行。此外，數(shù)據(jù)需要發(fā)送和以高效、智能的方式處理，為用戶能夠以最小的延遲開始的交互。當基于數(shù)據(jù)并且用戶需要與可視化進行交互的時候，客戶端渲染是一個更好的選擇。在上述情況下使用客戶端渲染可以有效提高渲染的質量。這份工作的主要貢獻是在網(wǎng)頁瀏覽器中高效渲染復雜數(shù)據(jù)的可視化策略。我們想象了17000艘船的航行路線世界海洋，共有2000萬多個點。我們的主要問題來自消費者層面的能夠在一個網(wǎng)絡中以較高的速度呈現(xiàn)許多線。在模擬比賽的過程中，我們通過動態(tài)地切割路徑來解決這個問題。然而，這個解決方案不允許所有的完整路徑的可視化，所以我們進一步把所有的路徑進行密度圖表達。我們的工作顯示了在客戶端瀏覽器上可視化軌跡大數(shù)據(jù)集的的可能性。2之前的工作使用二維地圖或者地球的三維模型對地面上的數(shù)據(jù)進行可視化是過去被推薦的方法。因為二維地圖經過投影之后會產生變形，所以我們選擇了三維地球模型。例如，圓柱投影最常用的二位地圖投影，會在兩極地區(qū)產生很大的變形?！拘恋?987】三維展示的球體，也叫做虛擬球體，已經被廣泛用于分類數(shù)據(jù)的可視化，天氣預報和許多種其他類型的數(shù)據(jù)（人口統(tǒng)計學，出生率，國內生產總值等等）布魯爾等[2007]介紹了在三個桌面軟件中（谷歌地球，美國國家航空航天局的世界風和ArcGIS瀏覽器）中使用虛擬球體的情況。這其中的一些軟件非常強大，然而用戶需要去下載并安裝每一個單獨的軟件。（不同于網(wǎng)頁方式，用戶只需要單獨安裝一個瀏覽器即可）當前在網(wǎng)絡上使用虛擬球體有很多種不同的方式。例如，基德于2009年，布才力諾于2014年，普朗提斯于2015年用不同的技術設計了自己的應用?；碌膽檬褂昧艘环N用于三維景物的描述性文件格式VRML。布才力諾的應用使用SVG格式，這種文件格式用于二位矢量圖形，是基于XML文件格式的。普朗提斯的應用使用WebGL（更多關于這些方法的信息見伊文思等【2014】的文章）。此文中我們使用定制的WebGL引擎，因為它的靈活性好，可以在底層與GPU進行通信，而且性能優(yōu)秀?！炯镜龋?012】3一般方法我們的成果是在一個虛擬球體表面展示和繪制數(shù)據(jù)。用戶可以在虛擬球體上導航，交互和關注球體上任何一個區(qū)域。在虛擬球體上可以從不同的角度和尺度可視化數(shù)據(jù)，這是十分有用的。并且在這個球體能展示全球范圍的大數(shù)據(jù)集。我們的目標是對參加MMO的船只軌跡進行可視化并進行分析。考慮到顯卡的性能，使用消費級別的硬件渲染如此多的線數(shù)據(jù)很難。鑒于此，我們提出了兩種不同的方式可視化數(shù)據(jù)：1）依據(jù)時間顯示船的軌跡變化時，只顯示每艘船在當前時間的軌跡。2）將所有的軌跡數(shù)據(jù)逐步傳輸?shù)綆彌_區(qū)中，結果是產生一張鬼記得密度圖。（如圖一和圖二所示）。將兩種方法結合，我們只需要很少的計算時間就能實現(xiàn)近似同時顯示所有軌跡的方法。擁有30~60赫茲的刷新率對可視化顯示來說是很重要的，尤其是在交互的時候。在我們的工作中有一些在中央處理器中進行的運算會拉低刷新率。為了避免這個問題，我們使用網(wǎng)頁工作線程。在JavaScript線程沒有進入主線程存儲器和HTML文檔。它們異步運行，并通過消息機制與主線程通信。更多的細節(jié)見本文線程和效率一章。從存儲的角度考慮，比賽過程中只在船只改變方向或明顯改變速度時才將比賽數(shù)據(jù)添加到數(shù)據(jù)集中。這樣創(chuàng)造出的數(shù)據(jù)集其采樣時間是不均勻的。平均每艘船大約會產生1200條數(shù)據(jù)，但是由于其采樣過程記錄的行動不同，每條船的數(shù)據(jù)量也會很不相同。每一條樣本數(shù)據(jù)包含經緯度和時間戳信息。這些文件以二進制形式存儲，可以發(fā)送到客戶端進行可視化和處理。船的軌跡以二進制存儲，經緯度信息標準化處理為兩位無符號的短數(shù)據(jù)（所以經緯度可以有2的16次方種可能性）。每艘船的位置信息占有4byte。我們將初始時間以8bytes存儲，之后的時間使用4bytes表示與初始時間差。每艘船的每條記錄在加載時都是8bytes。為了加快加載速度，整個文件在之前離線存儲中應該被切分和預處理，但是這不在本文討論范圍之內。圖一：以紋理形式渲染的結果。從左到右紋理分辨率為1024像素，50赫茲；2048像素，43赫茲；4096像素，35赫茲圖二：路徑可視化的屏幕截圖。截圖1：每船15個頂點，沒有省略。截圖2：每船4個頂點，4個頂點省略。截圖3：每船15的頂點，1個頂點省略。截圖4：每船15個頂點，4個頂點跳過。4實施細節(jié)我們利用定制的WebGL引擎，采取了兩種不同的方式對數(shù)據(jù)進行可視化。第一種方式包括對每艘船渲染一段較短的路徑。因為有太多的數(shù)據(jù)需要同時被渲染，所以只有每艘船航行的最后一條數(shù)據(jù)被選擇。當可視化進行時一個包含所有這些被選擇數(shù)據(jù)的網(wǎng)格也在被重新計算。我們允許路徑數(shù)量的動態(tài)變化，所以應用程序可以根據(jù)中央處理器和顯卡的性能適配不同的硬件。第二種方法使用幀緩沖區(qū)，將軌跡以紋理的形式渲染。其結果是根據(jù)用戶是否經常經過制作的密度圖。這幅地圖的制作是實時的，與模擬過程同步。當使用這種方法時，在分辨率和效率之間有很大的制約關系。更高的分辨率意味著更低的性能，但是良好的可視化要求高分辨率來展現(xiàn)細節(jié)信息，而且要允許用戶放大特定的區(qū)域。圖一展現(xiàn)了不同分辨率的圖像。隨著軌跡紋理繪制得越來越精細，更多的細節(jié)也可以展現(xiàn)出來，同時造成刷新分辨率減小。這幅地圖也可以離線渲染以達到高分辨率并展現(xiàn)更多細節(jié)的目標。這兩種方法的細節(jié)將在本章中具體介紹。圖三：路徑可視化的說明。綠色的點表示從數(shù)據(jù)集中選出的記錄（n+1,n,n-1...)。插值后的記錄（用紅色點表示）是在當前時間（t）對船只精確位置的估計。變量tstmp表示臨近記錄項所記錄的時刻。4.1路徑可視化如之前所說，比賽進行中是依據(jù)時間進行可視化的。每一艘船有一段短路徑或尾跡來表示最新動向。這段由特定數(shù)量的記錄組成的尾跡以線的形式展現(xiàn)。每一條記錄都包括經緯度和時間戳信息。這些記錄以頂點的形式存儲在一張包括所有軌跡的特定的格網(wǎng)中。當記錄不是均勻生成時，我們需要根據(jù)記錄（與時間t有關）進行插值以此來確定船只的位置。（如圖三）我們測試了兩種不同的方式：使用著色器插值：在GPU中，頂點著色器對記錄點之間的時間戳進行差值。在片段著色器中，舍去時間戳在t時刻之后的像素。整個過程統(tǒng)一在著色器中完成。使用CPU插值：通過二分法查找時間t之前和之后的最近記錄，以找到插值的位置。新插值的點根據(jù)時間最近的記錄來計算經緯度。當使用著色器插值時，我們得到了更加平滑的結果。這是因為每一次更新時，數(shù)據(jù)傳到著色器后都要超過一幀的時間來進行渲染更新。通過GPU進行插值比通過CPU重新計算網(wǎng)格所花費的時間更少，所以可能是更好的方法。然而實際操作中，在性能上GPU插值存在一些問題。在數(shù)據(jù)集中有時記錄點之間的距離非常接近。當GPU在網(wǎng)格上進行插值時，如果辛得記錄點的時間沒有更靠后的（tstmp>t），就可能會出現(xiàn)一個明顯的（并且不愿看到的）軌跡密度變化。為了解決這個問題，額外的記錄點可以加在這條軌跡的最前面使得插值結果更加平滑，但是加入辛得記錄點使得格網(wǎng)數(shù)據(jù)更大而且降低了性能。例如，給每條船的軌跡添加額外的三個記錄點可能會造成整體數(shù)據(jù)增加51000個新紀錄點。我們使用了另一種辦法，采用相同數(shù)目的記錄點可視化更長的路徑。在重新計算格網(wǎng)時，允許程序跳過可選數(shù)量的記錄點。這使得可視化的結果的可信度下降，但是程序可以顯示更長的大致軌跡，同時保持刷新率不降低。圖二顯示了這個方法的潛能：截圖1,2非常相似，但是截圖一使用了15個記錄點二截圖二只用了4個；網(wǎng)格的計算量因此減少了11倍4.2密度圖紋理渲染常被用于計算機圖形學中的反射等效果。這里的紋理渲染可以被用到之后的幀中，而不是直接渲染到屏幕上。由于我們的數(shù)據(jù)量巨大而不能一次性渲染完成，我們將其紋理分布渲染。這樣做得到的是密度圖，展現(xiàn)了更長常用的路徑和更多人經過的區(qū)域。密度圖可以實時產生，向客戶展示比賽過程。它也可以提前在服務器中準備好再傳遞給客戶端?？上У氖荳ebGL1.0規(guī)范不允許在幀緩沖對象中進行多重采樣（在WebGL2.0的草稿意見中有這個功能），如果有這個功能的話，得到的柵格圖形會有更好的抗鋸齒效果。不過，這個功能也能被紋理后期處理技術替代。例如在所有的樣本畫完后使用類似FXAA的函數(shù)處理。4.3線程和效率CPU進行點的重新計算通常是緩慢的從而導致幀速率下降，導致交互的反應遲鈍。在我們的工作中，重新計算網(wǎng)格的過程實在網(wǎng)頁任務或線程中進行的。這個線程在應用程序開始時負責加載和解析數(shù)據(jù)以及重新計算格網(wǎng)。主線程和網(wǎng)頁進程之間的通訊是通過請求響應機制完成的。一旦最后一個數(shù)據(jù)點重新計算的結果被接受到，主進程就開始請求新的計算。緩沖區(qū)中的新紀錄點就被傳送到主線程。之后主線程將格網(wǎng)上的記錄點更新。在這個過程中我們使用類型數(shù)組來提高性能。我們嘗試過使用可傳遞對象，那是一種新的在主線程和其他線程之間傳遞數(shù)據(jù)的技術。然而我們放棄了可傳遞對象，因為這個技術意味著要在每次格網(wǎng)更新時創(chuàng)建新的數(shù)組緩沖，大大減弱了可視化的性能。5結論在可視化大量船只的全球比賽軌跡中我們使用了一些不同的方法。紋理渲染允許參賽者分析區(qū)域和路徑數(shù)據(jù)。密度圖展現(xiàn)出參賽者認為風向有助于航行的區(qū)域，也就展現(xiàn)出了他們更喜歡的航線，具有實用性。路徑的可視化精確展現(xiàn)了每一艘帆船的軌跡，這是密度圖本身不能做到的。在對路徑進行可視化的時候我們選擇使用CPU進行插值。在之前已經提到過了，這是因為使用著色器插值會在可視化時造成意料之外的路徑密度改變。盡管如此，用戶可以在我們的應用中選擇特定數(shù)量的船只并且在網(wǎng)格中加載所有的記錄。所以他們可以選擇特定的一些船只，然后將這些船的所有軌跡顯示出來。為了這個工作，我們創(chuàng)造了一個包含從比賽開始到結束包含所有選定船只的格網(wǎng)。這個格網(wǎng)不需要更新，所有使用著色器插值會是最好的辦法。當我們使用客戶端進行渲染工作的時候，我們需要記住每一個客戶的機器配置是不一樣的。允許用戶選擇每條路徑上記錄點的數(shù)目和跳過記錄點的數(shù)目，從而使程序可以與不同的客戶機器適配?？梢暬慕Y果雖然可能會有細微的差別，但是他們的結果是非常相似的。表格1證明了不使用我們的技術是無法可視化所有數(shù)據(jù)的。表格二展示了在不同配置下程序的性能差異。將我們的技術結合（路徑可視化和密度圖），可以同時可視化軌跡數(shù)據(jù)和展現(xiàn)軌跡密度變化。由于是在同一臺機器（windows864位，2.5GHz，英偉達GeForceGT750M）上進行的測試，表格的數(shù)據(jù)只展示了部分。表格1：不使用本文技術的結果路徑數(shù)量記錄點數(shù)量幀刷新速率（fps）500614.9154510001235.8833850006171.16514170002092.474程序崩潰表格2：使用本文推薦的方法展現(xiàn)17000艘船的數(shù)據(jù)。最后的結果是將路徑可視化和密度圖同時使用的數(shù)據(jù)每艘船記錄點數(shù)記錄點數(shù)格網(wǎng)更新速率紋理分辨率幀刷新速率（fps)813614.9-561525511.2-49305106.1-421525512.31024481525511.12048411525510.3409628152558.88192146未來的工作這篇文章提出了一些MMO虛擬賽艇的可視化方法。不過，還有一些其他的技術并沒有在這里使用，但是它們應該在未來的工作中被涉及。為了減小重新計算包含船軌跡的格網(wǎng)的大小，可以考慮根據(jù)視體的原理舍去一些樣點。由于格