通用格式三維圖形瀏覽平臺設(shè)計

童凌, 歐陽純萍, 羅凌云

(南華大學(xué) 計算機科學(xué)與技術(shù)學(xué)院 軟件工程系， 衡陽 421001)

通用格式三維圖形瀏覽平臺設(shè)計

童凌, 歐陽純萍, 羅凌云

(南華大學(xué) 計算機科學(xué)與技術(shù)學(xué)院 軟件工程系， 衡陽 421001)

隨著互聯(lián)網(wǎng)與虛擬現(xiàn)實技術(shù)發(fā)展產(chǎn)生網(wǎng)絡(luò)三維瀏覽技術(shù)，其目的是讓人們更加清晰明了地認(rèn)識真實物體。目前，網(wǎng)頁中的三維圖像至今尚未成為主流的瀏覽方式。一個重要的原因是，三維圖形的文件格式多樣，尚未形成統(tǒng)一的標(biāo)準(zhǔn)。研究了不同的三維模型文件在瀏覽器上的顯示方法，并搭建小型平臺，用于三維文件在瀏覽器中的預(yù)覽。對加載時間進(jìn)行相關(guān)測試。實驗結(jié)果表明，該平臺能讀取不同格式的文件，方便用戶的即時瀏覽，可將其作為基礎(chǔ)運用于在線購物、虛擬現(xiàn)實等Web應(yīng)用中。

三維文件； 在線預(yù)覽； 文件格式轉(zhuǎn)換； Three.js

0 引言

傳統(tǒng)的網(wǎng)頁一般以圖片、文字和動畫的形式為用戶呈現(xiàn)信息，人們可以方便地獲取圖像、聲音、文本、視頻等各種多媒體信息。然而，這種瀏覽形式與用戶缺乏互動。相比之下，三維圖形所表示的場景具有較強的逼真性和很強的交互性。

在電子商務(wù)中，由于網(wǎng)上虛擬環(huán)境所限，顧客無法親身接觸商品實物，只能通過圖片，文字描述以及客服咨詢等方式了解商品，因此，顧客常常對網(wǎng)頁上展示的商品持有懷疑態(tài)度，商品實物與圖片展示的內(nèi)容不符的情況也時有發(fā)生。當(dāng)前的消費者不再滿足于簡單形式的產(chǎn)品描述，希望有更逼真的產(chǎn)品展示。想象一下，如果淘寶網(wǎng)上所有的產(chǎn)品都使用3D模型來展示是多么酷的一件事。

眾所周知，二維圖像，早已擁有固定而成熟的文件格式。png, jpeg, gif等圖像格式早已得到廣泛的傳播。早在1992年，國際標(biāo)準(zhǔn)化組織(ISO)聯(lián)合圖像專家小組就已經(jīng)制定并完善了JPEG的文件標(biāo)準(zhǔn)格式的表示方法，這極大地促進(jìn)了二維圖像在互聯(lián)網(wǎng)上的傳播。與二維圖像相比，三維瀏覽的形式并沒有得到廣泛推廣，主要有兩個原因：1、與常見的圖片相比，三維模型占用的磁盤空間很大。在網(wǎng)絡(luò)帶寬不足時，需要花費很長時間傳輸數(shù)據(jù)，因此用戶在Web上瀏覽體驗受到制約。論文[1]提出一種使用三角形網(wǎng)格壓縮三維圖形數(shù)據(jù)的方法，有效地壓縮了三維文件的大小，為三維圖形的傳播奠定了基礎(chǔ)。 2、三維模型格式多樣，step, dwg, stl等文件格式分別各自占有一席之地：dwg格式是Autodesk 公司在其建模軟件Auto CAD中使用的默認(rèn)文件格式，在建模領(lǐng)域中被廣泛使用；step格式是國際標(biāo)準(zhǔn)化組織(ISO)所建立的標(biāo)準(zhǔn)，在船舶、制造業(yè)、輕工業(yè)等傳統(tǒng)領(lǐng)域具有普遍的應(yīng)用；stl格式在計算機圖形應(yīng)用領(lǐng)域中用來表示三角形網(wǎng)格的一種文件格式，它僅僅保存了三角面片的幾何信息，因此文件格式簡單，在互聯(lián)網(wǎng)線上應(yīng)用廣泛。各自的領(lǐng)域擁有其相應(yīng)主流格式，但是由于不同格式的文件不能在同一個軟件中訪問，因此各個領(lǐng)域之間缺乏交流。

為了打破這種隔閡，使得不同格式的文件能夠統(tǒng)一起來，筆者提出了一個支持多種文件格式的瀏覽技術(shù)，并開發(fā)了一個小型平臺，使用該技術(shù)實現(xiàn)了三維模型文件的在線瀏覽功能，并對其進(jìn)行相關(guān)測試。結(jié)果表明，該技術(shù)能夠跨平臺，跨多種不同的格式快速完成高精度模型的讀取與展示，為三維圖像在線發(fā)展瀏覽方向的發(fā)展提供了理論指導(dǎo)和技術(shù)支持。

1 三維框架分析

Web 3D顯示技術(shù)對三維文件進(jìn)行即時建模，使用渲染引擎展示立體圖像。[2]雖然目前的Web 瀏覽已有多個解決方案，但是或多或少存在一些缺陷：

1. 基于VRML的技術(shù)需要客戶端預(yù)裝插件。使用該技術(shù)展示三維圖像時，用戶的客戶端需要下載并安裝額外的工具包。如果插件沒有正確地安裝好，那么所有的三維圖像在瀏覽器中都不能顯示。對于不熟悉計算機的用戶來說，額外插件的安裝常常會造成很大的麻煩。

2. 基于Java的技術(shù)需要處理大量數(shù)據(jù)，對CPU的算力要求較高。

3. 基于流式傳輸?shù)募夹g(shù)需要準(zhǔn)備實景照片，對實體物品和場景的照片要求也是限制其發(fā)展的一個瓶頸。

本文采用Three.js作為實現(xiàn)瀏覽功能的框架，可以將三維圖像完美地融合到網(wǎng)頁中。使用該技術(shù)，可以快速方便地創(chuàng)建三維場景，包括攝影機，光影，材質(zhì)等各種對象，以WebGL標(biāo)準(zhǔn)為支撐的Three.js引擎具有以下優(yōu)勢[3]：

(1)無需額外插件。Three.js可以直接支持3D圖形的GPU硬件加速，因此所有用戶打開瀏覽器即可直接使用。

(2)開源：Three.js框架遵循MIT開源協(xié)議，可自由復(fù)制，分發(fā)和修改，因此使用成本很低。

(3)跨平臺：Three.js基于JavaScript語言開發(fā)，而所有瀏覽器都內(nèi)置Javascript引擎，所以Three.js可以在幾乎所有瀏覽器上使用。

(4)易用性：Three.js實現(xiàn)了三維建模眾多功能，封裝了眾多三維場景渲染所需的重要工具方法與渲染循環(huán)，因此，對計算機圖形學(xué)不了解的程序員也可以很方便地使用[4]，方便了Three.js的推廣與普及。

因此，基于WebGL標(biāo)準(zhǔn)，通過與傳統(tǒng)的web技術(shù)相結(jié)合，Three.js框架可以從源文件中讀取文件數(shù)據(jù)，完美地以三維圖形的方式呈現(xiàn)出來[5]。因此該方案不僅具有較好的平臺適應(yīng)性，同時也具有方便后續(xù)二次開發(fā)的優(yōu)點。

2 文件瀏覽技術(shù)原理

因為網(wǎng)頁顯示三維圖像的標(biāo)準(zhǔn)與三維源文件的格式大相徑庭，所以將源文件轉(zhuǎn)換為瀏覽器中顯示的圖像是一個復(fù)雜的過程。為了實現(xiàn)跨平臺，跨文件格式的功能，我們需明確一個標(biāo)準(zhǔn)：無論文件格式如何轉(zhuǎn)變，其內(nèi)部的核心元素即為它的基本幾何體的表示信息。只要導(dǎo)出關(guān)鍵的基本幾何體信息，就可以將這些元素進(jìn)行重構(gòu)，將幾何體的元素導(dǎo)入web開發(fā)中，用適合網(wǎng)頁瀏覽的方式在瀏覽器中表達(dá)出來。

對于任意3D模型，其構(gòu)成元素都是頂點、邊和面三種圖形。為了完整表示幾何體的信息，在文件中需要包括幾何數(shù)據(jù)和拓?fù)湫畔煞矫妫呷币徊豢伞6]

幾何數(shù)據(jù)：

它能確定三維模型在歐式空間中的位置與大小，比如頂點的坐標(biāo)、邊的方向矢量的法向量。點、邊、面各個元素之間可以互相轉(zhuǎn)換。

拓?fù)湫畔?/p>

用以表示三維形體的構(gòu)造方法，即在該三維物體中各個元素之間的相互關(guān)系。如層次關(guān)系、連接關(guān)系等，都是屬于拓?fù)湫畔⒎矫娴膬?nèi)容。

接下來從源文件中提取與此相關(guān)的有效數(shù)據(jù)格式。以常用三維模型文件格式 STL為后綴的文件源碼為例：

1)點、線、面的信息提取

設(shè)v3n-2(x3n-2,y3n-2,z3n-2)，v3n-1(x3n-1,y3n-1,z3n-1)和v3n(x3n,y3n,z3n)分別是第n個三角面片三個頂點的坐標(biāo)，集合

是包含該幾何體所有頂點的點集。集合

是包含該幾何體所有法向量的向量集。

從根據(jù)集合和三角面片的個數(shù)為n，可推出集合

E={e3n-2(|x3n-1-x3n-2|,|y3n-1-y3n-2|,|z3n-1-z3n-2|),e3n-1(|x3n-x3n-1|,|y3n-y3n-1|,|z3n-z3n-1|),e3(|x3n-x3n-2|,|y3n-y3n-2|,|z3n-z3n-2|)}

是包含該幾何體所有邊的邊集。

由此，可以歸納出該源文件中所有的點、線、面信息，從而可以構(gòu)造出需要的三維模型。當(dāng)需要增加新的格式支持時，只要編寫特定格式文件的編碼規(guī)則，將其中含有三維模型元素的關(guān)鍵信息提取出來，并整合到集合V,P,E中去，即可導(dǎo)入所有的幾何體信息。以AMF文件為例，標(biāo)準(zhǔn)的AMF文件格式包含三種格式的數(shù)據(jù)：三角面片信息、向量信息和法向量信息。由于點、線、面在各個元素之間可以互相轉(zhuǎn)換，因此從文件中可以通過文件的轉(zhuǎn)換過程，提取出所需的幾何體信息，構(gòu)成網(wǎng)頁在線顯示該文件的基礎(chǔ)。

2)點、線、面的信息導(dǎo)出

提取出所有的數(shù)據(jù)后，我們需要重構(gòu)新的文件。按照Three.js的語法規(guī)則，生成可以在線顯示該模型的代碼。根據(jù)上文中集合V，集合P和集合E所包含的三維文件新中，可以在Three.js中使用以下集合數(shù)據(jù)來定義3D模型的文件信息：v1(x1,y1,z1),v2(x2,y2,z2),……,v3n(x3n,y3n,z3n)，其中每個三元組(xk,yk,zk)表示一個頂點坐標(biāo)值。

其中每個三元組(an,bn,cn)表示第n個三角面片的法向量。而和的數(shù)據(jù)信息在STL源文件格式中均可提取出來。

因此，使用Three.js編寫的通用.STL后綴文件格式的偽代碼如下：

Num_triangle = n //該模型中三角面片的個數(shù)

For i in 0…Num_triangle

Generate(point_triangle(xi,yi,zi)) //在文件中生成各個三角形頂點的坐標(biāo)

End

Return file.format(); //將文件中的數(shù)據(jù)按照STL格式標(biāo)準(zhǔn)化

將上述三角形的頂點和法向量參數(shù)代入文件格式的代碼中，即可將文件轉(zhuǎn)成在瀏覽器上顯示。

3 應(yīng)用平臺的搭建與實現(xiàn)

上述過程僅僅是將三維文件的核心數(shù)據(jù)轉(zhuǎn)換為web可識別的格式，并不能通過簡單的代碼直接在網(wǎng)頁上顯示出三維圖像，因此我們需要渲染該數(shù)據(jù)形成的幾何體，將其映射到網(wǎng)頁上。為了實現(xiàn)該目標(biāo)，需要搭建平臺顯示出相應(yīng)的三維模型。從目前的情況來看，大多數(shù)三維模型的呈現(xiàn)方式仍然停留在二維的顯示器屏幕上，如何將三維模型以二維圖形的形式渲染輸出，是3D模型顯示的關(guān)鍵問題。3D渲染過程中涉及五個基本步驟，經(jīng)過以下五個基本步驟，一個三維模型就可以在網(wǎng)頁上顯示出來，圖1為三維場景web顯示的基本結(jié)構(gòu)模塊，一個簡單的Three.js建模步驟，[7]如圖1所示。

圖1 三維圖形顯示過程

(1)場景

場景可以被看作一個在二維平面上“模擬”的三維空間，相當(dāng)于一個容器。它定義了一個三維坐標(biāo)系，提供一個參照物，以便確定三維模型的基本數(shù)據(jù)。后續(xù)添加的三維模型都是添加到場景中去。場景的效果會根據(jù)觀察的距離、視野和角度而發(fā)生相應(yīng)變化。

(2)照相機

它定義了三維空間到二維屏幕的投影方式，從而讓三維模型得以呈現(xiàn)。在圖形學(xué)中，三維場景不可能在一個二維的空間上完全顯示，利用WebGL可以模擬三維空間，但是最終必須輸出在一個二維的顯示器上。[8]為了解決這個從三維場景轉(zhuǎn)換到二維平面問題，筆者引入“照相機”的概念。類比于將三維場景轉(zhuǎn)換到一張二維照片上，“照相機”就是這樣一個抽象，在建立三維場景時，在某一個位置放置攝像機，并在該視角按照特定的投影方式，得到該視角上的二維投影。

(3)形狀與材質(zhì)

在真實的三維場景中，一個物體模型通常有兩個屬性：幾何形狀與物體材質(zhì)。幾何形狀，如球體、長方體、圓柱、圓錐等存儲了幾何體的頂點信息。通過大量不同的幾何體進(jìn)行旋轉(zhuǎn)、縮放、并、交、補等運算，即可得到需要組成的3D模型；物體材質(zhì)是獨立于物體頂點信息之外的屬性，在建模中，它是表面可視屬性的結(jié)合，它直接影響到渲染時物體表面的光澤與觀察效果。

(4)光源設(shè)置

光源是影響三維物體瀏覽的一個重要因素。在不同強度，不同方向的光源下，相同的材質(zhì)在渲染后會呈現(xiàn)出不同的顯示效果。

(5)圖像渲染

三維圖像渲染，是一種將圖形著色并方便用戶觀察的技術(shù)。顯示器在沒有渲染時是看不到任何圖像模型的。渲染器通過照相機獲得了需要的渲染范圍，計算光源對物體的影響。通過光源、物體材質(zhì)、物體形狀、陰影等多個參數(shù)的影響，獲得幾何、視圖方向、光源以及紋理信息。渲染完成以后，應(yīng)用軟件最終獲得二維圖形，并展示在屏幕上。

用一個簡單的代碼做測試，在瀏覽器中繪制出簡單的模型。如圖2所示。

這是一個在瀏覽器中進(jìn)行的完整3D建模過程。以此為通用的基礎(chǔ)代碼搭建平臺，瀏覽器即可在動態(tài)創(chuàng)建并向用戶顯示相應(yīng)的三維模型。為了保證平臺良好的運行效率，將平臺的架構(gòu)設(shè)計，如圖3所示。

用戶在導(dǎo)入相關(guān)3D文件時，該模塊對文件進(jìn)行相應(yīng)格式轉(zhuǎn)換，成為可執(zhí)行代碼，然后瀏覽器JavaScript層使用WebGL和Three.js框架將文件轉(zhuǎn)換成瀏覽器可解析的數(shù)據(jù)，瀏覽器通過三維圖形顯示技術(shù)將其映射到顯示器上，渲染出3D圖像。同時，瀏覽器視圖層向后臺發(fā)出請求，服務(wù)器將接收到的文件進(jìn)行相關(guān)處理，然后為前端提供文件導(dǎo)出的接口。使用該系統(tǒng)結(jié)構(gòu)，不僅避免了數(shù)據(jù)庫的使用給服務(wù)器帶來的瓶頸，也充分利用了JavaScript層的腳本解析能力，充分發(fā)揮了瀏覽器前端的運算能力，服務(wù)器可以快速處理相關(guān)文件轉(zhuǎn)換模塊過程，大幅提升文件瀏覽速度。

圖2 文件模型展示

圖3 3D Web系統(tǒng)結(jié)構(gòu)框架

4 應(yīng)用效果與分析

圖5展示了一個筆者編寫的AMF格式的文件，經(jīng)過該平臺展示后所顯示的效果。為了測試該平臺實現(xiàn)的模型瀏覽和文件格式轉(zhuǎn)換功能的效率，使用Quicktest Professional 測試工具編寫腳本，對6個大小不同的三維模型源文件(44KB, 82KB, 244KB, 398KB, 766KB, 1997KB)進(jìn)行驗證，并分別測試3DMax和該平臺下執(zhí)行核心業(yè)務(wù)的消耗時間。

6個文件分別代表從最簡單的三維模型到具有一定規(guī)模的三維圖像處理，在實際應(yīng)用中，不同大小的文件均可能被加載到，因此該測試具有一定代表性，可以較好地代表實際應(yīng)用中出現(xiàn)的情況。

模型展示消耗時間和文件轉(zhuǎn)換時間，如表1所示。

表1 AMF文件從讀取到渲染到界面上的時間(ms)

右邊的柱狀圖代表的是同一個STL文件在3DMax軟件中打開所花費的時間，左邊代表的是該文件在筆者開發(fā)的平臺上讀取所花費的時間。六個測試文件在該平臺上均能在1s內(nèi)完成讀取與展示。與3DMax相比，AMF文件在從開始讀取到渲染到界面上的耗時有大約10%的提升。從在線瀏覽的角度看，實驗表明，該軟件能夠在較短時間內(nèi)在線渲染出高質(zhì)量的模型，模型精度如圖所示。對于amf格式，該系統(tǒng)能在1s以內(nèi)渲染完成并展示出2 000KB以下的所有模型文件，提升了相應(yīng)的瀏覽效率

除此以外，該平臺還有以下優(yōu)勢：

(1)方便易用。該平臺支持目前主流的大多數(shù)瀏覽器。因此所有用戶打開瀏覽器即可直接使用，無需加載其他插件。

(2)跨操作系統(tǒng)平臺。平臺基于JavaScript語言開發(fā)，因此無論在Windows，Linux或其他系統(tǒng)下都可以自由使用，不會出現(xiàn)平臺兼容問題。

(3)多種格式兼容。支持三維模型.stl,.dwg,.amf等多種不同格式，對于每種格式都可以自由拉動，旋轉(zhuǎn)，拖曳平臺上的模型，方便文件的修改，查看和分發(fā)。

5 總結(jié)

在互聯(lián)網(wǎng)+等國家政策背景下，能夠以統(tǒng)一的接口處理三維文件并呈現(xiàn)三維文件的系統(tǒng)由于其簡潔、直觀、明了的特點，更容易收到用戶的青睞，在產(chǎn)業(yè)升級的浪潮中發(fā)揮重要的作用。目前Web 3D文件格式在領(lǐng)域內(nèi)尚未統(tǒng)一，各種新技術(shù)與新方法層出不窮。雖然三維圖像處理在網(wǎng)絡(luò)化進(jìn)程中尚有未解難題，但部分技術(shù)已經(jīng)取得相當(dāng)?shù)某晒10]

本文針對目前3D模型文件在日常使用的不便之處，提出了一種對不同格式的文件，均可在線瀏覽的設(shè)計思路，并說明了其軟件構(gòu)建原理和技術(shù)方法，在軟件中對展示功能做出優(yōu)化，增強了應(yīng)用的性能，使用戶體驗得到提升。在未來為三維圖像應(yīng)用的發(fā)展提供了一套可行的方法。

[1] 劉波,張鴻賓,王靖. 三維圖形數(shù)據(jù)的壓縮與網(wǎng)上瀏覽[J]. 計算機工程與應(yīng)用,2004,28:44-45.

[2] 蔣燕萍,夏旺盛,黃心淵. 幾種Web3D技術(shù)的比較[J]. 北方工業(yè)大學(xué)學(xué)報,2003(1):21-25.

[3] Wikipedia.Additive Manufacturing File Format[EB/OL].[2016-03-15].https://en.wikipedia.org/wiki/Additive_Manufacturing_File_Format.

[4] 卞敏捷,高玨,高洪皓,許杰品. Web3D可視化技術(shù)的研究與應(yīng)用[J]. 計算機技術(shù)與發(fā)展, 2015(6):141-144.

[5] 鄭華,宿景芳. 面向Web的三維模型生成與處理技術(shù)[J]. 現(xiàn)代電子技術(shù), 2015,24:83-86.

[6] 周莉,蘇鴻根. 通用3D模型文件格式和算法的研究及其OpenGL實現(xiàn)[J]. 計算機工程與設(shè)計, 2009,02:433-436+439.

[7] Mr Doob.Three.js documentation[EB/OL].[2016-04-08]. http://threejs.org/docs/index.html.

[8] 卞敏捷,高玨,高洪皓,許杰品. Web3D可視化技術(shù)的研究與應(yīng)用[J]. 計算機技術(shù)與發(fā)展, 2015(6):141-144.

[9] 何龍,杜鵬. 基于WebGL的三維可視化[J]. 科技資訊, 2015,30:23+25.

[10] 韓義. Web3D及Web三維可視化新發(fā)展——以WebGL和O3D為例[J]. 科技廣場, 2010(5):81-86.

[11] Jonathan D. Hiller, STL 2.0: A proposal for a Universal Multi-material Additive Manufacturing File Format[C]. Solid Freeform Fabrication Symposium (SFF'09), 2009, 8: 3-5.

[12] Khronos. WebGL-OpenGL ES 2.0 for the Web [EB/OL].[2016-04-03]. https://www.khronos.org/webgl/.

[13] Wikipedia. WebGL(Web Graphics Library)[EB/OL].[2016-03-31]. https://en.wikipedia.org/wiki/WebGL.

[14] Wikipedia. STL(file format)[EB/OL].[2016-03-31]. https://en.wikipedia.org/wiki/STL_(file_format).

[15] 劉運增. 互聯(lián)網(wǎng)上的三維技術(shù):Web3D[J]. 計算機與網(wǎng)絡(luò),2003,10:32-35.

[16] 王磊,高玨,金野,許華虎. 基于Web3D無插件的三維模型展示的研究[J]. 計算機技術(shù)與發(fā)展,2015,04:217-220.

[17] 黃健. 面向通用性的Web3D虛擬展覽館的設(shè)計與實現(xiàn)[D]. 成都：電子科技大學(xué),2012.

[18] 趙孔陽,朱軍,尹靈芝. 基于WebGL的虛擬場景網(wǎng)絡(luò)漫游研究[J]. 測繪與空間地理信息,2015,12,40-43.

Analysis and Design of an online 3-dimension Viewer for Supporting Different File Formats

Tong Ling, Ouuang Chunping, Luo Lingyun

(School of Computer Science and Technology, University of South China, Hengyang 421001, China)

Web 3D browsing has never become a popular trend among customers. There are a number of reasons. One is that 3-dimensional files vary from place to place, and they don't form exact criteria. Customers have difficulties in viewing these files on browsers. To solve the inconvenience of viewing online, the authors propose a method which can make varied 3-dimension files readable in websites. Besides, the article also explores the methods of displaying 3D model in browser. The result indicates that the platform which runs well in both Windows and Mac systems can successfully present 3D models online in a very effective way. However, 3-demension files can be opened currently only in specific design software, which is hard to be viewed in web browsers.

Three-dimension files; Online view; File-format transformation; three.js

童 凌(1994-)，男，浙江麗水人，研究方向：軟件工程與Web開發(fā)。 歐陽純萍(1979-)，女，博士研究生，講師，研究方向：語義web、領(lǐng)域數(shù)據(jù)集成等。 羅凌云(1981-)，女，博士后，講師，研究方向：語義Web技術(shù)及其應(yīng)用，醫(yī)學(xué)信息學(xué)，理論計算機科學(xué)。

1007-757X(2017)04-0076-05

TP311.5

A

2016.09.22)