文獻(xiàn)翻譯：網(wǎng)頁虛擬地球?qū)σ粓鎏摂M劃艇賽進(jìn)行的數(shù)據(jù)可視化

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