EverCraft一直在關(guān)注Web可視化技術(shù)的發(fā)展，本文對(duì)國外一篇感覺很不錯(cuò)的綜述性文章進(jìn)行翻譯，供這一領(lǐng)域的愛好者相互學(xué)習(xí)。這篇paper的信息為：“Mwalongo, F., et al., State-of-the-Art Report in Web-based Visualization. COMPUTER GRAPHICS FORUM, 2016. 35(3): p. 553-575. ”。感興趣的同學(xué)可以關(guān)注我們，回復(fù)“可視化”直接閱讀原文獻(xiàn)。

一、概述

遠(yuǎn)程可視化技術(shù)研究在海量醫(yī)學(xué)數(shù)據(jù)、社交媒體數(shù)據(jù)或商業(yè)數(shù)據(jù)的可視化應(yīng)用方面發(fā)揮著重要作用。這一需求源自用戶終端計(jì)算能力的相對(duì)不足，比如手機(jī)處理能力不夠，或者需要可視化的數(shù)據(jù)量太大。同時(shí)，由于傳輸帶寬、延遲時(shí)間或者本地存儲(chǔ)的限制，即使終端計(jì)算能力足夠，這些海量的數(shù)據(jù)也難以實(shí)現(xiàn)高效傳輸。況且，在某些特殊場景下，一些敏感數(shù)據(jù)或者保密原始數(shù)據(jù)也并不適合直接向其他人開放。鑒于帶寬、網(wǎng)絡(luò)延遲等問題成為遠(yuǎn)程可視化的主要瓶頸，過去有大量研究和技術(shù)集中于解決這些問題。盡管過去的研究成績斐然，但數(shù)據(jù)量的不斷增長和硬件設(shè)備的持續(xù)發(fā)展，使得遠(yuǎn)程可視化依然一直是研究的熱點(diǎn)。由于天然的跨平臺(tái)屬性、以及成為未來協(xié)作平臺(tái)的潛力，基于Web的可視化技術(shù)在該領(lǐng)域表現(xiàn)得尤為突出。基于Web的方式使得一套可視化工具代碼可以跨平臺(tái)執(zhí)行，這不僅讓團(tuán)隊(duì)間的協(xié)作和分享更加便捷，并且降低了程序的維護(hù)復(fù)雜度，使得可視化領(lǐng)域的研究者和其他應(yīng)用行業(yè)領(lǐng)域的研究者可以更專注于研究各自領(lǐng)域的核心問題。更進(jìn)一步，基于Web的方式使得各應(yīng)用領(lǐng)域的研究者可以隨時(shí)獲得最新的數(shù)據(jù)（只需要刷新頁面即可）。同時(shí)，這種可視化研究者和行業(yè)應(yīng)用研究者的協(xié)同工作方式，更有助于促進(jìn)可視化研究成果的落地應(yīng)用。基于Web的可視化方案的另一個(gè)明顯優(yōu)勢(shì)則是用戶的便利性。用戶（比如各行業(yè)應(yīng)用的研究者）只需要通過網(wǎng)頁瀏覽器，而不需要安裝其他任何軟件。因?yàn)g覽器基本上在所有的計(jì)算終端均可直接使用，用戶可隨時(shí)隨地開展工作（只要能上網(wǎng)，同時(shí)其具有數(shù)據(jù)的訪問權(quán)限）。因?yàn)榇蠖嗟目梢暬鉀Q方案均是基于GPU的，著色器代碼（本質(zhì)是文本類文件）可與數(shù)據(jù)同時(shí)存在服務(wù)器供多客戶端使用。這種可視化方案在某些數(shù)據(jù)不便分享的場景尤具吸引力。比如用戶完全可以把數(shù)據(jù)存在本地終端，通過從服務(wù)器獲取著色器代碼，以實(shí)現(xiàn)數(shù)據(jù)的可視化，而不需要將數(shù)據(jù)上傳到服務(wù)器（尤其是當(dāng)多用戶同時(shí)在上傳數(shù)據(jù)時(shí)，這將帶來極大的傳輸成本）。顯然，對(duì)于比較大的數(shù)據(jù)量而言，傳輸可執(zhí)行的代碼遠(yuǎn)比傳輸數(shù)據(jù)要來得簡單。早期的Web可視化技術(shù)主要利用VRML和瀏覽器的Java插件，或者服務(wù)端的渲染實(shí)現(xiàn)，以及其他集成Java、JavaScript和Flash的方式。因帶寬和網(wǎng)絡(luò)延遲的限制，這些方式的體驗(yàn)都比較一般。由于瀏覽器技術(shù)的限制，服務(wù)端渲染的方式在當(dāng)時(shí)更受歡迎。但是，近些年Web技術(shù)發(fā)展迅速，目前Web可視化技術(shù)趨勢(shì)已是通過WebGL和HTML5以充分利用用戶終端的GPU加速渲染，而不需要瀏覽器加裝任何的插件。基于GPU的可視化技術(shù)將計(jì)算渲染的負(fù)擔(dān)由GPU承擔(dān)，以改善渲染和交互的體驗(yàn)（否則使用javaSript在CPU上是不可行的）。這種通過用戶終端進(jìn)行渲染計(jì)算的方式優(yōu)點(diǎn)在于其避免了網(wǎng)絡(luò)延遲帶來的影響，因?yàn)槠洳辉傩枰磸?fù)與服務(wù)端交換交互操作參數(shù)和渲染生成的圖片。當(dāng)然，雖然有了上述的進(jìn)步，將部分渲染計(jì)算分流到服務(wù)端渲染或預(yù)處理依然有助于瀏覽器端對(duì)于復(fù)雜場景的渲染。本文主要對(duì)Web可視化技術(shù)進(jìn)行綜述，包括討論最新的渲染技術(shù)、底層技術(shù)、以及優(yōu)化算法策略等。這些通用技術(shù)共同構(gòu)建了Web可視化應(yīng)用的基礎(chǔ)，因此，本文不僅關(guān)注高速、GPU加速的用戶終端渲染技術(shù)，同樣關(guān)注服務(wù)端渲染技術(shù)（比如網(wǎng)格化計(jì)算），以及如流媒體、數(shù)據(jù)壓縮等降低帶寬需求的技術(shù)。同時(shí)，我們討論了各應(yīng)用領(lǐng)域的一些Web可視化的應(yīng)用程序，分析這些應(yīng)用和前文所述基礎(chǔ)技術(shù)的相關(guān)性，并進(jìn)行了分類。最后，文章討論了一些特殊的應(yīng)用場景，并給出了一些落地的應(yīng)用方案。

二、技術(shù)方面

本節(jié)內(nèi)容主要討論可視化在web服務(wù)、網(wǎng)格化、云服務(wù)方面的技術(shù)基礎(chǔ)，同時(shí)也涉及瀏覽器本地渲染、數(shù)據(jù)編碼、數(shù)據(jù)傳輸?shù)确矫娴募夹g(shù)。遠(yuǎn)程可視化及web可視化通常采用CS（client-server）架構(gòu)。網(wǎng)格化計(jì)算和云計(jì)算的可視化方法將大量數(shù)據(jù)的處理問題置于服務(wù)端（比如大型模型的渲染任務(wù)、復(fù)雜的預(yù)處理任務(wù)等），同時(shí)支持多客戶端訪問。在某些特殊場景下，比如來自仿真計(jì)算或其他處理后的結(jié)果數(shù)據(jù)已經(jīng)存儲(chǔ)在網(wǎng)格端或云端，這些源數(shù)據(jù)基本不大可能遷移，那么只能采取基于網(wǎng)格或云服務(wù)的可視化方案。基于web的可視化方法充分利用了跨平臺(tái)的瀏覽器以及對(duì)應(yīng)的web部署和協(xié)同技術(shù)。在基于網(wǎng)格和基于云的可視化方案里，web可視化同樣扮演了重要的作用，如將瀏覽器作為客戶端訪問入口。

2.1 作為Web服務(wù)的可視化

W3C組織將web服務(wù)定義為：用來支持機(jī)器與機(jī)器之間網(wǎng)絡(luò)信息交互的軟件系統(tǒng)。web服務(wù)的主要目標(biāo)即為盡可能使不同軟件應(yīng)用和工具在共同完成某項(xiàng)特定任務(wù)時(shí)，其相互之間可以進(jìn)行流暢的信息交互。因?yàn)閣eb服務(wù)定義了統(tǒng)一的接口，各不同類型編程代碼的應(yīng)用程序即使在不同的運(yùn)行環(huán)境執(zhí)行，其相互之間依然可以實(shí)現(xiàn)順暢的信息交互。web服務(wù)技術(shù)在異構(gòu)分布式計(jì)算系統(tǒng)里顯得尤為重要。根據(jù)渲染管線（pipeline）如何拆分，基于web服務(wù)概念的可視化方法主要分為三類：1.將所有的可視化管線作為一個(gè)黑盒，一個(gè)應(yīng)用程序視為單個(gè)服務(wù)，用戶通過交互界面配置需要可視化的數(shù)據(jù)并獲得可視化結(jié)果。這種方式的優(yōu)勢(shì)是對(duì)于用戶來說十分簡單。但是，另一方面則也限制了用戶對(duì)于更多可視化類型的選擇。2.將管線的每一個(gè)階段分為獨(dú)立的web服務(wù)。這種方式各部分的管線向用戶開放，用戶可通過集成不同類型的web服務(wù)來定制滿足自己需求的多樣化。各種不同類型的Web服務(wù)可由多方開發(fā)服務(wù)商提供、由不同的執(zhí)行代碼組成、運(yùn)行在不同的環(huán)境。雖然這種方式為用戶提供了最大的自由度，但是由于各服務(wù)之前的信息交互和數(shù)據(jù)交換成本，可能帶來效率的降低。3.將管線的每幾個(gè)階段打包為獨(dú)立web服務(wù)。這種方式為前兩種方式的結(jié)合，既為用戶提供一定的自由度，又保證信息交換的效率。若將數(shù)據(jù)可視化作為數(shù)據(jù)分析流程的一部分，相對(duì)于把可視化應(yīng)用程序拆分為不同web服務(wù)，把其作為單個(gè)web服務(wù)將更有助于抽象。將可視化應(yīng)用的管線的不同階段分為不同的web服務(wù)，則更適用于程序開發(fā)者。開發(fā)者們更愿意集成不同性能的可視化技術(shù)，以充分利用不同硬件特性，為用戶提供最有效的可視化服務(wù)。另外一個(gè)重要的技術(shù)點(diǎn)則是如何處理可視化管線不同服務(wù)之間的數(shù)據(jù)交換。Web服務(wù)之間可以直接進(jìn)行數(shù)據(jù)交換，也可通過數(shù)據(jù)中心進(jìn)行數(shù)據(jù)交換。有研究表明前者的性能通常優(yōu)于后者。在實(shí)現(xiàn)方面，通用有兩種主要的技術(shù)路徑：基于SOAP的web服務(wù)和基于RESTful的web服務(wù)。由于RESTful更為簡單，并更易與其他web標(biāo)準(zhǔn)集成，目前的主流更傾向于RESTful。但是，雖然基于RESTful的web服務(wù)在商業(yè)領(lǐng)域和云服務(wù)領(lǐng)域廣泛應(yīng)用，但在可視化服務(wù)方面卻沒有得到足夠的關(guān)注。我們將在2.2和2.3部分討論網(wǎng)格化和云計(jì)算環(huán)境下的可視化web服務(wù)。Web服務(wù)使得不同工具可以基于標(biāo)準(zhǔn)的方式進(jìn)行信息交互，不管其是用哪種代碼編寫的、在什么環(huán)境下運(yùn)行或者在什么設(shè)備上。這將使得數(shù)據(jù)分析可以更加的自動(dòng)化（在數(shù)據(jù)分析流程里可視化作為其中一部分）。各組元可以將其實(shí)現(xiàn)細(xì)節(jié)在自己內(nèi)部封裝，相互之間只要遵循一致的通信協(xié)議。將接口和實(shí)現(xiàn)分開，使得各組元可以更專注于針對(duì)某些特殊任務(wù)或硬件特性進(jìn)行優(yōu)化。目前關(guān)于作為web服務(wù)的可視化的工作主要還是關(guān)注如何將web服務(wù)理念應(yīng)用于可視化程序本身，關(guān)注可視化程序內(nèi)部各子服務(wù)的信息交互，而沒有過多關(guān)注在數(shù)據(jù)分析流程中可視化服務(wù)和其他數(shù)據(jù)分析工具的交互（如仿真和分析工具/服務(wù)）。不斷增長的數(shù)據(jù)量和復(fù)雜的數(shù)據(jù)分析需求，使得單獨(dú)的可視化工具并不足以滿足某些特定的任務(wù)，因此需要考慮可視化工具與數(shù)據(jù)分析其他工具的融合。通過為可視化服務(wù)提供不依賴于編程語言和運(yùn)行平臺(tái)的統(tǒng)一接口，各可視化服務(wù)之間的連接變得簡單，并將進(jìn)一步提高數(shù)據(jù)分析的自動(dòng)化程度。通過復(fù)雜的可視化引擎，用戶只需要輸入可視化數(shù)據(jù)和提供部分可視化參數(shù)，就可以自動(dòng)輸出可視化結(jié)果。這將更有助于各行業(yè)領(lǐng)域的研究人員專注于研究各自領(lǐng)域的核心工作，而不用花費(fèi)更多的時(shí)間在軟件工具的集成上面。

2.2 基于網(wǎng)格計(jì)算的可視化

網(wǎng)格化計(jì)算是一種分布式計(jì)算模型，通過匯聚各節(jié)點(diǎn)的計(jì)算和存儲(chǔ)資源池來提供高性能的計(jì)算架構(gòu)。各網(wǎng)格的計(jì)算資源與集群計(jì)算類似分布，區(qū)別在于集群的每個(gè)計(jì)算節(jié)點(diǎn)屬于同一個(gè)組織內(nèi)，而網(wǎng)格計(jì)算的計(jì)算節(jié)點(diǎn)是跨組織的。因此，相對(duì)于集群計(jì)算通常是同構(gòu)資源，網(wǎng)格化計(jì)算的資源通常是異構(gòu)的。基于網(wǎng)格化計(jì)算的可視化源自對(duì)于復(fù)雜高性能的仿真，需要通過各網(wǎng)格資源來滿足計(jì)算和存儲(chǔ)仿真結(jié)果。通常科學(xué)仿真和其他科學(xué)設(shè)備產(chǎn)生的數(shù)據(jù)量十分巨大，基本不大可能僅使用本地計(jì)算資源來實(shí)現(xiàn)該類數(shù)據(jù)的可視化，因此需要網(wǎng)格化計(jì)算架構(gòu)。各網(wǎng)格的計(jì)算和存儲(chǔ)資源在地理上是分散分布的，所以基于網(wǎng)格計(jì)算可視化的算法面臨著如何在有限帶寬和延遲的條件下高效利用這種分布式架構(gòu)的挑戰(zhàn)。大多數(shù)的網(wǎng)格計(jì)算可視化工作充分利用了web服務(wù)。考慮到網(wǎng)格化計(jì)算資源的異構(gòu)屬性，這很好理解。

2.3 基于云計(jì)算的可視化

基于云計(jì)算的可視化可視為基于網(wǎng)格計(jì)算可視化的進(jìn)一步發(fā)展。云計(jì)算為遠(yuǎn)程可視化帶來了更高的彈性和量化平臺(tái)。通常云服務(wù)的接入還是需要具有計(jì)算和存儲(chǔ)限制的網(wǎng)絡(luò)終端（比如手機(jī)、平板、筆記本等），所以基于云計(jì)算的可視化面臨的挑戰(zhàn)，依然來自于如何在盡量降低對(duì)網(wǎng)絡(luò)終端要求的前提下，提高網(wǎng)絡(luò)終端和云端之間數(shù)據(jù)傳輸?shù)男省榱藨?yīng)對(duì)這一挑戰(zhàn)，通常利用云端進(jìn)行那些要求復(fù)雜預(yù)處理的任務(wù)，僅從終端提取和傳輸可視化必須的數(shù)據(jù)。目前的可視化技術(shù)依賴于GPU的計(jì)算能力以加速渲染，所以要求這些應(yīng)用程序能夠從云端虛擬機(jī)獲取GPU資源。雖然大都數(shù)的虛擬機(jī)管理程序可以有效實(shí)現(xiàn)主要計(jì)算資源類型的虛擬化，比如CPU、硬盤、I/O設(shè)備等，但GPU能力的虛擬化支持并不太夠。當(dāng)前從虛擬機(jī)訪問GPU的主要方法是通過GPU直通和虛擬GPU（當(dāng)前由NVIDIA GRID或AMD Multiuser GPU提供）基于GPU的云端渲染主要應(yīng)用在游戲和遠(yuǎn)程桌面解決方案。游戲在遠(yuǎn)端渲染并以流媒體的形式傳輸?shù)娇蛻舳恕榱私档脱舆t，GPU通常具有內(nèi)置視頻壓縮編碼，以降低傳輸視頻流時(shí)給CPU帶來的負(fù)擔(dān)。這些游戲服務(wù)的終端多為移動(dòng)設(shè)備、游戲終端、或者電視。對(duì)于云端游戲來說，延遲依然是最大的挑戰(zhàn)。因?yàn)榻换バ缘脑贫丝梢暬陀螒蚨紝?duì)延遲敏感，所以當(dāng)使用云端渲染方案時(shí)，基于云端的可視化面臨一樣的挑戰(zhàn)。將云端計(jì)算和客戶端渲染技術(shù)綜合使用，不失為解決對(duì)于延遲敏感場景下問題的有效云端可視化方案（我們將在之后討論）。云端虛擬機(jī)服務(wù)并不是就沒有上限。因?yàn)槊恳粋€(gè)虛擬機(jī)都需要完整的操作系統(tǒng)，存儲(chǔ)要求和日常通訊負(fù)荷很高。通過I/O接口的日常的通訊來自于運(yùn)行在虛擬機(jī)和實(shí)體硬件資源之間的服務(wù)、或者不同虛擬機(jī)之間的服務(wù)。目前輕量化的虛擬技術(shù)（如Docker容器）在計(jì)算資源共享的性能和效率方面具有更大的潛力。同時(shí)結(jié)合云端和客戶端計(jì)算資源的云端可視化方案，將優(yōu)于單獨(dú)的云端渲染方案。對(duì)于延遲敏感的可視化應(yīng)用來說，最理想的是在客戶端執(zhí)行渲染，并將任務(wù)的預(yù)處理放在云端。GPU移動(dòng)技術(shù)的進(jìn)步使這種結(jié)合成為可能。客戶端避免了因網(wǎng)絡(luò)帶來的延遲，適用于交互性的可視化程序。云計(jì)算已經(jīng)在仿真領(lǐng)域應(yīng)用，這些仿真通常產(chǎn)生巨量的數(shù)據(jù)，無法通過單個(gè)工作站實(shí)現(xiàn)可視化。而將仿真數(shù)據(jù)放在云端，則通過使用云端可視化服務(wù)，則避免了這些巨量數(shù)據(jù)的遷移。對(duì)于云端GPU的使用，不僅限于實(shí)現(xiàn)云端的GPU加速渲染。服務(wù)端的GPU加速計(jì)算（如使用CUDA及OpenCL），能在節(jié)省能源的情況下提供更高的性能。因此，尤其對(duì)于移動(dòng)設(shè)備來說，將高昂的計(jì)算放在云端，將獲益不菲。

2.4 瀏覽器的本地渲染

在客戶端渲染（如使用瀏覽器的本地渲染）的主要優(yōu)勢(shì)在于可視化過程中的交互。本地化渲染避免了服務(wù)端渲染方式所受的網(wǎng)絡(luò)延遲影響。最近web技術(shù)的發(fā)展（尤其是JavaScript的性能提高以及WebGL的廣泛使用）使得瀏覽器已經(jīng)可以實(shí)現(xiàn)高性能的可視化渲染。本部分我們將主要討論HTML5和WebGL相關(guān)的渲染技術(shù)，它們已經(jīng)是瀏覽器無插件渲染的實(shí)際上的標(biāo)準(zhǔn)。HTML5新引入的元素可通過JavaScript動(dòng)態(tài)地繪制圖形，支持2D上下文（context）以及3D上下文。2D上下文提供基于CPU的2D基本繪圖渲染（HTML5支持的另外一個(gè)2D矢量圖元素是）。3D上下文提供基于GPU的支持webgl的3D渲染。WebGL是OpenGL的一個(gè)特殊版本：OpenGL ES 2.0，專門用以支持瀏覽器端的3D渲染。因?yàn)樯鲜錾舷挛姆绞教峁┑腁PI都是底層接口，所以誕生了很多庫和框架，以簡化他們的開發(fā)使用：

• 如X3DOM和XML3D等框架都旨在將3D圖形與HTML5的DOM（document object model，文檔對(duì)象模型）集成。X3DOM通過X3D和HTML5集成以實(shí)現(xiàn)瀏覽器的3D圖形支持。這一類的框架通過場景聲明式的API完成3D渲染的WebGL頂層實(shí)現(xiàn)。這種集成方式與面向2D繪圖的SVG類似，一個(gè)3D場景使用XML語言來描述，嵌入在元素標(biāo)簽內(nèi)。
• 另一類通過瀏覽器訪問GPU實(shí)現(xiàn)3D渲染的頂層封裝庫包括如Three.js和Babylon.js等。相比于X3DOM和XML3D類型，Three.js和Babylon.js這類庫不再通過XML文檔聲明方式來實(shí)現(xiàn)3D場景，而是以JavaScript庫的方式提供可編程的API。
• 雖然Three.js和Babylon已經(jīng)實(shí)現(xiàn)了較高的頂層封裝，應(yīng)用十分廣泛，但在更垂直的應(yīng)用領(lǐng)域，為了更進(jìn)一步簡化編程過程，也出現(xiàn)了很多更頂層的封裝庫，極度降低了web 3D的可視化編程門檻。這一類的典型代表如EverAPI，最少僅需要四、五條代碼即可通過EverAPI實(shí)現(xiàn)web 3D的展示，并默認(rèn)集成了針對(duì)機(jī)械領(lǐng)域?qū)?D模型常用的操作功能，如結(jié)構(gòu)樹、剖切圖、標(biāo)注等。

2.4.1 基于GPU的3D渲染

利用GPU的瀏覽器渲染技術(shù)多使用基于多邊形的方法或射線跟蹤法。基于多邊形的技術(shù)通常使用基于WebGL構(gòu)建的庫來生成或從客戶端導(dǎo)入網(wǎng)格，并將其上傳到GPU渲染。在其他情況下，網(wǎng)格是從服務(wù)器傳輸?shù)娇蛻舳恕５?#xff0c;基于多邊形的技術(shù)具有一些限制。為了獲得順滑的表面，需要精細(xì)的曲面細(xì)分（tessellation），從而幀速率與三角面片的數(shù)量成比例的降低。此外，大量的三角面片不僅會(huì)消耗大量內(nèi)存，而且每次幾何形狀發(fā)生改變都將需要相當(dāng)大的CPU-GPU帶寬。同時(shí)，在瀏覽器環(huán)境中，如果CPU生成幾何圖形數(shù)據(jù)的過程被遲滯了，則又將進(jìn)一步降低渲染性能。將幾何圖形的生成過程遷移到功能強(qiáng)大的服務(wù)器也不總能解決上述問題。網(wǎng)絡(luò)延遲以及和網(wǎng)絡(luò)及CPU-GPU互聯(lián)的帶寬可能仍會(huì)對(duì)渲染性能產(chǎn)生負(fù)面影響。為了緩解這些問題，一種更好的方法則是使用隱式、參數(shù)化幾何體，并通過基于GPU的射線跟蹤法渲染。這種方法確保了CPU到GPU之間更少的數(shù)據(jù)傳輸，并降低了在JavaScript中的計(jì)算代價(jià)。基于GPU的射線跟蹤法利用參數(shù)定義對(duì)象的隱式表面，并且在片段著色器中計(jì)算射線與對(duì)象的交點(diǎn)以生成物體表面。為了開始渲染并生成這些片段，通常會(huì)渲染替代幾何體。例如，對(duì)象的全屏四邊形或者緊密包圍盒都可作為對(duì)象的一種替代幾何體。這些技術(shù)的優(yōu)點(diǎn)是即使對(duì)于大量數(shù)據(jù)也可以提供高渲染性能和高質(zhì)量圖像。根據(jù)所使用的實(shí)現(xiàn)算法，射線與物體交點(diǎn)的高效計(jì)算可能需要采用加速結(jié)構(gòu)。基于GPU的體積射線行進(jìn)算法是目前直接提供體繪制的最先進(jìn)的算法。此技術(shù)使用3D紋理（假設(shè)使用WebGL 2.0）或2D紋理集或圖集進(jìn)行數(shù)據(jù)存儲(chǔ)。通常使用替代幾何體（如體積數(shù)據(jù)的包圍盒）以進(jìn)行初始化渲染。與PC端的OpenGL類似，有兩種途徑可使用WebGL來實(shí)現(xiàn)此技術(shù)：多通道渲染和單通道渲染。

• 多通道渲染方法中，將替代幾何體（通常是體積包圍盒）渲染為紋理，以便在體積數(shù)據(jù)中獲取射線的入射點(diǎn)和出射點(diǎn)。這些射線然后在體積遍歷過程中使用，以獲得這些采樣射線的起點(diǎn)和方向。在片段著色器中，沿射線對(duì)體積進(jìn)行采樣、分類、選擇性的著色、并迭代合成得到像素的最終顏色。
• 在單通道渲染方法中，對(duì)體積包圍盒的正面和背面都進(jìn)行柵格化。在片段著色器中，射線遍歷沿著視線步進(jìn)穿過體積并合成樣本顏色，最終獲得像素顏色。在WebGL 1.0中可視化大量體數(shù)據(jù)的主要限制在于紋理存儲(chǔ)和對(duì)著色器動(dòng)態(tài)循環(huán)的支持。

使用WebGL進(jìn)行體積可視化的另一種方法是在服務(wù)器端提取幾何圖形并在客戶端上執(zhí)行渲染。如在服務(wù)端使用CUDA對(duì)原始的MRI數(shù)據(jù)進(jìn)行預(yù)處理，然后在客戶端使用Three.js進(jìn)行渲染，服務(wù)端和客戶端通過XML或者JSON格式傳輸幾何文件。或在服務(wù)端利用VTK庫從體數(shù)據(jù)提取切片圖片，并將JPEG或PNG格式的圖片發(fā)至客戶端通過GPU渲染。網(wǎng)格渲染：許多網(wǎng)格渲染技術(shù)使用漸進(jìn)式網(wǎng)格來改善交互。這是通過對(duì)網(wǎng)格的不同細(xì)節(jié)程度（LOD，levels of detail）進(jìn)行漸進(jìn)解碼和渲染來實(shí)現(xiàn)的。漸進(jìn)式網(wǎng)格的主要思想是用低分辨率（基礎(chǔ)網(wǎng)格）來表示網(wǎng)格數(shù)據(jù)，并結(jié)合各種算法操作（如定點(diǎn)分割）從基本網(wǎng)格重建網(wǎng)格，以獲得所需細(xì)節(jié)程度的結(jié)果。這種表示法可實(shí)現(xiàn)高效的加載、解碼和渲染。這是因?yàn)闉榱双@得所需細(xì)節(jié)程度的模型表示，僅需要在上一細(xì)節(jié)程度級(jí)別的模型基礎(chǔ)上進(jìn)行網(wǎng)格重建操作，這減少了需要傳輸?shù)娇蛻舳说臄?shù)據(jù)，降低了帶寬的使用。

2.4.2 SVG/Canvas的2D繪制

如前文所述，元素除了通過WebGL提供3D繪制外，還有2D圖形繪制的API。它提供了使用JavaScript繪制路徑及多個(gè)2D形狀和文本的內(nèi)置函數(shù)。D3.js是一個(gè)用于信息可視化的JavsScript庫，它建立在瀏覽器的DOM以及CSS和SVG之上。SVG為使用標(biāo)記語言的進(jìn)行2D圖形渲染的另一種方法。D3.js允許用戶將要可視化的數(shù)據(jù)綁定到DOM元素，并根據(jù)基礎(chǔ)數(shù)據(jù)的屬性值操縱器元素屬性。它顯示元素的文檔模型而不是提供自定義的數(shù)據(jù)模型（這避免了在模型之間轉(zhuǎn)換時(shí)產(chǎn)生額外的開銷）。直接操作DOM可能會(huì)導(dǎo)致性能下降，尤其是對(duì)于大型數(shù)據(jù)集，因?yàn)槊慨?dāng)DOM發(fā)生變化時(shí)，都可能要求瀏覽器進(jìn)行布局、繪制和合成。但是，通過使用DOM模型，可以確保與其他Web標(biāo)準(zhǔn)的無縫互操作性。

2.5 數(shù)據(jù)編碼與傳輸技術(shù)

高效的數(shù)據(jù)編碼和傳輸對(duì)于瀏覽器中的交互可視化非常重要。如果沒有有效的數(shù)據(jù)傳輸格式，帶寬和延遲問題可能導(dǎo)致客戶端等待數(shù)據(jù)加載時(shí)間過長。對(duì)于動(dòng)態(tài)數(shù)據(jù)，這可能會(huì)妨礙實(shí)時(shí)數(shù)據(jù)更新，影響時(shí)間序列的動(dòng)畫效果流暢性。盡管數(shù)據(jù)壓縮減少了要傳輸?shù)臄?shù)據(jù)量并因此節(jié)省了帶寬，但它不能獨(dú)自保證交互式數(shù)據(jù)的更新，因?yàn)閴嚎s和解壓時(shí)間的開銷可能超過傳輸節(jié)省的時(shí)間。理想情況下，從數(shù)據(jù)編碼、傳輸、解碼到渲染這個(gè)完整的數(shù)據(jù)傳輸管線，都應(yīng)該綜合優(yōu)化，以獲得平衡的端到端性能體驗(yàn)。需要技術(shù)只關(guān)注優(yōu)化其中的一個(gè)或者幾個(gè)環(huán)節(jié)。瓶頸通常在解碼和渲染階段，因?yàn)檫@兩個(gè)階段在客戶端執(zhí)行。針對(duì)網(wǎng)絡(luò)提出的各種壓縮和解壓縮方法集中于允許有效的解碼和渲染，而不是僅優(yōu)化壓縮率。流式和漸進(jìn)式網(wǎng)格格式是一種隱藏的方法，可以隱藏延遲并改善交互性，從而改善用戶體驗(yàn)。網(wǎng)格數(shù)據(jù)通常以不同的細(xì)節(jié)級(jí)別表示，并且每個(gè)級(jí)別被編碼為可以逐步解壓縮并在客戶端上呈現(xiàn)的單獨(dú)的數(shù)據(jù)塊。大多數(shù)方法專注于基于CPU的高效解碼，另一個(gè)選擇是使用GPU友好格式，可以將其直接上傳到GPU。在這種情況下，解碼完全在GPU上執(zhí)行。這不僅可以通過減少客戶端上的解碼時(shí)間來提高性能，而且僅需要更少的CPU-GPU帶寬。

三、基于Web可視化的應(yīng)用

以下列舉一些基于Web可視化的行業(yè)應(yīng)用。

粒子數(shù)據(jù)可視化

在瀏覽器中實(shí)現(xiàn)分子可視化在互聯(lián)網(wǎng)的早期就很流行。分子數(shù)據(jù)可視化，例如小球模型，是基于粒子的可視化的一個(gè)示例，其中每個(gè)原子都描述為一個(gè)球體。每個(gè)球體的大小代表相應(yīng)元素的范德瓦爾斯半徑。使用基于多邊形的渲染時(shí)，必須將這些球體細(xì)分為三角形，然后對(duì)其進(jìn)行柵格化。下圖為該領(lǐng)域應(yīng)用的一個(gè)案例：

proteinformatics.charite.de—http://proteinformatics.charite.de/ngl/html/ngl.html

分子模擬中動(dòng)態(tài)分子數(shù)據(jù)（軌跡）的可視化也是該領(lǐng)域科學(xué)家的一項(xiàng)重要功能，但是這一實(shí)現(xiàn)直到最近幾年僅限于桌面解決方案。如2.4.1節(jié)所述，兩種主要方法可用于渲染球體：基于GPU的射線投射和網(wǎng)格渲染。基于GPU的光線投射技術(shù)在渲染性能和圖像質(zhì)量方面提供了更好的結(jié)果。

體數(shù)據(jù)可視化

正如2.4所述，有研究者使用WebGL提出一種基于GPU的體積射線行進(jìn)算法的早期實(shí)現(xiàn)。他們使用基于GPU的多線程體數(shù)據(jù)射線投射方法來可視化來自醫(yī)學(xué)成像和天氣雷達(dá)掃描的體數(shù)據(jù)。也有人提出用于醫(yī)學(xué)圖像分割和渲染的CS架構(gòu)應(yīng)用程序。這一分割算法使用一種基于圖像的方法，從服務(wù)器上的原始數(shù)據(jù)中提取切片，并將它們作為JPEG或PNG圖像發(fā)送到客戶端，在其中可以對(duì)其進(jìn)行操作以出發(fā)服務(wù)器上的圖像分割。完成圖像分割后的等值面發(fā)送到客戶端渲染實(shí)現(xiàn)可視化。其服務(wù)器使用VTK庫，客戶端使用Three.js庫（這一應(yīng)用實(shí)例如下圖）。這種方法最直接的應(yīng)用為通過MR斷層圖像分割，獲取患者的膝關(guān)節(jié)三維可視化（話說小編BOSS以前實(shí)驗(yàn)室就有做過這個(gè)）。

地理空間數(shù)據(jù)可視化

網(wǎng)絡(luò)上的地理空間數(shù)據(jù)（包括4D時(shí)空數(shù)據(jù)）的可視化涵蓋了各種數(shù)據(jù)，例如海洋數(shù)據(jù)，柵格圖像，天氣預(yù)報(bào)數(shù)據(jù)和城市模型。在所有基于Web的現(xiàn)代地理空間可視化中，常見的是將WebGL用于硬件加速渲染和其他現(xiàn)代HTML5技術(shù)。一些方法直接使用WebGL，而其他方法則使用聲明性框架，例如X3DOM。X3DOM實(shí)現(xiàn)了X3D標(biāo)準(zhǔn)中的一個(gè)組件，用于可視化地理空間數(shù)據(jù)。

信息可視化

比如有研究者介紹了用于大型二維點(diǎn)數(shù)據(jù)的交互式可視化的散點(diǎn)圖技術(shù)，該技術(shù)基于WebGL實(shí)現(xiàn)。該方法解決了常規(guī)散點(diǎn)圖方式可視化大量點(diǎn)數(shù)據(jù)集時(shí)遇到的數(shù)據(jù)量過載問題。原始實(shí)現(xiàn)中在CPU上執(zhí)行的計(jì)算已使用“渲染到紋理”技術(shù)移至GPU，以獲得更好的性能。

3D模型可視化

3D模型可視化歷史則由來已久，早在上個(gè)世紀(jì)60年代就開始存在3D的CAD軟件（比如UG、Solidworks等），只不過大多數(shù)時(shí)間都是基于客戶端安裝軟件的形式而不是Web可視化。隨著SAAS服務(wù)的發(fā)展，各傳統(tǒng)的3D CAD公司都在做云端的遷移，逐漸實(shí)現(xiàn)基于Web的3D模型可視化，甚至可以直接基于Web 3D做產(chǎn)品的設(shè)計(jì)（如前段時(shí)間以4.7億美金被PTC收購的onshape）,以及一些主要用于做3D協(xié)作項(xiàng)目管理，同時(shí)提供Web可視化功能的解決方案（比如EverCraft.co）

通用工具包

有很多基于Web的通用可視化工具包，涵蓋了一系列應(yīng)用領(lǐng)域，包括信息可視化，蛋白質(zhì)可視化，醫(yī)學(xué)可視化和地理空間可視化。本節(jié)中討論的大多數(shù)工具箱都使用了WebGL之類的基于瀏覽器的現(xiàn)代Web技術(shù)的客戶端渲染方式。比如比較流行的商用云端信息可視化解決方案以Tableau Online和TIBCO Spotfire Cloud為例。這些解決方案提供了SaaS工具，用于本地或在線數(shù)據(jù)創(chuàng)建各種交互式可視化，并允許在用戶之間共享可視化結(jié)果。這些商業(yè)解決方案通常可支持非常大的數(shù)據(jù)集和許多并發(fā)用戶。Cesium.js則是用于地理空間數(shù)據(jù)可視化的通用庫，它基于WebGL進(jìn)行快速渲染。其支持各種標(biāo)準(zhǔn)數(shù)據(jù)格式以及glTF格式，用于在客戶端和服務(wù)器之間進(jìn)行3D數(shù)據(jù)交換。而EverAPI庫則主要針對(duì)工程類3D模型的可視化，其支持各種工程類數(shù)據(jù)格式如stp、stl、obj等，并默認(rèn)集成了針對(duì)機(jī)械領(lǐng)域?qū)?D模型常用的操作功能，如結(jié)構(gòu)樹、剖切圖、標(biāo)注等。

四、Web可視化技術(shù)的分類

文章調(diào)研了很多Web可視化應(yīng)用案例（可見原文的參考文獻(xiàn)），對(duì)基于Web可視化應(yīng)用程序進(jìn)行了一個(gè)分類，來評(píng)估相應(yīng)可視化的技術(shù)應(yīng)用發(fā)展。分類的第一要素是按各類應(yīng)用程序所采取的可視化基礎(chǔ)框架劃分（比如Web服務(wù)、網(wǎng)格化、云端、瀏覽器本地渲染方式） ，第二要素則是按渲染的技術(shù)和算法方法（與可視化的數(shù)據(jù)類型相關(guān)）劃分，第三要素則是按數(shù)據(jù)傳輸和渲染的優(yōu)化算法劃分。另外，還使用了其他的特征，比如壓縮算法和GPU加速優(yōu)化算法的使用，因?yàn)閮烧叨伎赡軐?duì)可視化的交互性產(chǎn)生重大影響。下圖則為文章對(duì)第3節(jié)中介紹的基于Web的可視化應(yīng)用程序進(jìn)行的分類結(jié)果，展示了各應(yīng)用程序使用了哪些技術(shù)方法和基礎(chǔ)框架。表中，各應(yīng)用案例根據(jù)各自的行業(yè)領(lǐng)域進(jìn)行了分類，同一應(yīng)用領(lǐng)域之間又按時(shí)間的先后進(jìn)行了排序，以便分析技術(shù)發(fā)展的潛在趨勢(shì)。

五、總結(jié)

由于仿真技術(shù)、傳感器技術(shù)和各類信息采集技術(shù)的發(fā)展（更不用說物聯(lián)網(wǎng)的發(fā)展），遠(yuǎn)程可視化引起了人們的廣泛興趣，并努力利用更為強(qiáng)大的技術(shù)資源來輔助科學(xué)家和工程師們更好的分析和理解這些龐大的數(shù)據(jù)集。遠(yuǎn)程可視化的主要挑戰(zhàn)仍然是帶寬和延遲。其中帶寬的問題大家已通過各種壓縮技術(shù)和視頻編碼技術(shù)來試圖緩解。而網(wǎng)絡(luò)延遲還沒有得到十分充分的解決方案。
過去服務(wù)端進(jìn)行遠(yuǎn)程渲染、通過圖像/視頻流的傳輸實(shí)現(xiàn)遠(yuǎn)程可視化的方案，是建立在用戶客戶端沒有足夠的計(jì)算能力以實(shí)現(xiàn)交互性渲染的基礎(chǔ)上。但是，隨著移動(dòng)設(shè)備上CPU和GPU技術(shù)以及網(wǎng)絡(luò)技術(shù)的改進(jìn)，這種情況正在發(fā)生改變。將昂貴的預(yù)處理步驟放到服務(wù)器或云端、在用戶客戶端執(zhí)行渲染的混合可視化方案可能更加有前途，因?yàn)檫@充分利用了各端的可用計(jì)算資源。此外，在用戶客戶端渲染可解決網(wǎng)絡(luò)延遲問題，這對(duì)于交互式可視化至關(guān)重要。隨著數(shù)據(jù)集的不斷增長，即使有可能可視化所有數(shù)據(jù)，由于人類視覺系統(tǒng)的限制，生成的圖像也可能變得難以理解。于是基于查詢的可視化技術(shù)也變得越來越重要，其僅提取與當(dāng)前任務(wù)相關(guān)的數(shù)據(jù)子集而不是一次可視化所有數(shù)據(jù)，這大大減少了帶寬需求，并將本地渲染的計(jì)算要求降至最低。這種大型數(shù)據(jù)集的可視化可能需要類似于數(shù)據(jù)庫的數(shù)據(jù)管理功能輔助。在數(shù)據(jù)管理和分析平臺(tái)的基礎(chǔ)上構(gòu)建可視化算法將使可視化算法免于數(shù)據(jù)管理問題和數(shù)據(jù)源異構(gòu)性的挑戰(zhàn)。可視化層將僅關(guān)注可視化的渲染步驟， 數(shù)據(jù)訪問和過濾可以由單獨(dú)的數(shù)據(jù)服務(wù)層處理。WebGL和HTML5使得瀏覽器有能力成為部署交互式圖形應(yīng)用程序的首選平臺(tái)。鑒于跨平臺(tái)的瀏覽器無處不在，可視化工具可以利用所有可用的計(jì)算資源來支持異地研究團(tuán)隊(duì)實(shí)現(xiàn)協(xié)作可視化。通過將移動(dòng)、Web和云計(jì)算技術(shù)相結(jié)合，可以將全球各地的專家召集起來共同解決更為復(fù)雜的問題，從而加快科學(xué)研究。總之，Web可視化的優(yōu)勢(shì)十分明顯，尤其是對(duì)于那些潛在用戶而言（即那些并不是每天盯著數(shù)據(jù)，但指不定什么場景下就成為數(shù)據(jù)可視化展示的觀眾）。當(dāng)不需要安裝任何軟件就可以獲得可視化結(jié)果的呈現(xiàn)時(shí)，Web可視化方案成為內(nèi)容傳播和教育的最佳選擇。尤其是隨著5G的推廣，帶寬和延遲帶來的限制將越來越少。

總結(jié)

以上是生活随笔為你收集整理的java可视化压缩_WEB可视化技术发展的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。