基于Web的3D模型瀏覽與交互系統(tǒng)的研究與實(shí)現(xiàn)

郭明金 陳姝

? ? ? ? 摘 ? 要：設(shè)計(jì)了基于Web的3D模型瀏覽與交互系統(tǒng)，主要采用基于WebGL的第三方庫(kù)Three.js來(lái)實(shí)現(xiàn)。該系統(tǒng)的建立主要包括場(chǎng)景的構(gòu)建、場(chǎng)景的交互控制和模型的云存儲(chǔ)。模型是場(chǎng)景構(gòu)建的前提，用戶可從外部導(dǎo)入所需模型或利用系統(tǒng)自帶的簡(jiǎn)單模型進(jìn)行模型的構(gòu)建。場(chǎng)景交互技術(shù)主要包括模型的平移、旋轉(zhuǎn)、縮放、拾取、剖切、3D動(dòng)畫(huà)模型的播放以及信息的顯示等。模型的云存儲(chǔ)是指用戶可以通過(guò)登錄賬戶將3D模型存儲(chǔ)到服務(wù)器，日后需要時(shí)直接從服務(wù)器中加載即可。

關(guān)鍵詞：3D模型;WebGL技術(shù);Three.js庫(kù);服務(wù)器

中圖分類號(hào)：TP311.5 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

Research and Implementation of 3D Model Browsing

and Interaction System Based on Web

GUO Ming-jin？覮，CHEN Shu

（College of Information and Engineering，Xiangtan University，Xiangtan，Hunan 411105，China）

Abstract：3D model browsing and interaction system based on Web is designed，which mainly adopts the third-party library Three.js based on WebGL to realize. The establishment of the system mainly includes the construction of the scene，the interactive control of the scene and the cloud storage of the model. The model is the premise of the construction of the scene，users can import the required model from the outside or use the system's simple model to build the model. The interactive technologies of the scene mainly include the translation，rotation，zooming，picking up of the model，playing of the 3D animation model，and display of information and so on. The cloud storage of the model means that the user can store the 3D model on the server by logging into the account，and can directly load it from the server when needed.

Key Words： 3D model;WebGL technology;Three.js library;server

隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展，計(jì)算機(jī)圖形學(xué)在建筑、科學(xué)、醫(yī)藥、商務(wù)和娛樂(lè)等各種領(lǐng)域的應(yīng)用越來(lái)越廣泛，目前已經(jīng)成為各個(gè)應(yīng)用領(lǐng)域中極其重要的技術(shù)，成為計(jì)算機(jī)視覺(jué)、圖像處理、多媒體技術(shù)、模式識(shí)別等各個(gè)學(xué)科的技術(shù)基礎(chǔ)。Web3D作為三維計(jì)算機(jī)圖形學(xué)與網(wǎng)絡(luò)技術(shù)的產(chǎn)物，其發(fā)展和應(yīng)用非常廣泛，它可以在網(wǎng)頁(yè)上創(chuàng)建一個(gè)服務(wù)器，使得用戶可以直接通過(guò)瀏覽器實(shí)現(xiàn)3D場(chǎng)景的實(shí)時(shí)渲染與互動(dòng)[1]。

隨著3D技術(shù)的應(yīng)用領(lǐng)域逐漸增多[2]，普通用戶對(duì)其需求越來(lái)越強(qiáng)烈，為了滿足這些用戶的需求，必須要?jiǎng)?chuàng)建出一個(gè)適合大眾用戶且操作簡(jiǎn)單、方便快捷的3D模型瀏覽與交互工具。然而，目前的Web3D技術(shù)卻存在一些問(wèn)題。首先，這些技術(shù)都必須要安裝特定的插件，插件的安裝會(huì)影響網(wǎng)頁(yè)的跨平臺(tái)性及穩(wěn)定性，特別是限制了其在移動(dòng)終端網(wǎng)頁(yè)中的應(yīng)用;其次，許多技術(shù)僅僅針對(duì)特定行業(yè)，其通用性不強(qiáng)，比如Unity3D只適合游戲網(wǎng)頁(yè)的開(kāi)發(fā);再次，技術(shù)實(shí)現(xiàn)較為困難，開(kāi)發(fā)成本高，并且制作效率低下。為了解決這些問(wèn)題，本系統(tǒng)采用WebGL技術(shù)[3]，WebGL的優(yōu)勢(shì)是不用在瀏覽器上

安裝插件，就能被應(yīng)用到網(wǎng)頁(yè)中去以創(chuàng)建多種多樣的復(fù)雜3D模型，在硬件條件相同的情況下提高3D模型的渲染性能[4]和渲染效果。目前，國(guó)內(nèi)

Web3D相關(guān)產(chǎn)品比較稀缺，資源和資料也較稀少，所以，提出的基于Web的3D模型瀏覽與交互系統(tǒng)是虛擬現(xiàn)實(shí)技術(shù)亟待解決的重要技術(shù)問(wèn)題之一，應(yīng)用前景非常好[5]。

1 ? 系統(tǒng)方案設(shè)計(jì)

1.1 ? 系統(tǒng)架構(gòu)

該系統(tǒng)采用B/S結(jié)構(gòu)，由三部分組成，分別是客戶端、服務(wù)器端和數(shù)據(jù)庫(kù)。服務(wù)器端采用Java編寫(xiě)，對(duì)數(shù)據(jù)庫(kù)中各表進(jìn)行了封裝，從而使得數(shù)據(jù)的安全性得到了保障。不同客戶端如手機(jī)、電腦等通過(guò)Web瀏覽器導(dǎo)入或加載模型，服務(wù)器接收其請(qǐng)求，并將模型傳送到客戶端，客戶端的瀏覽器通過(guò)WebGL加速渲染模型[6]，形成三維場(chǎng)景。用戶可以在客戶端的場(chǎng)景中實(shí)現(xiàn)場(chǎng)景漫游和模型平移或縮放等操作。同時(shí)，客戶端可以向服務(wù)器發(fā)送請(qǐng)求，查看數(shù)據(jù)庫(kù)中存儲(chǔ)的模型。系統(tǒng)架構(gòu)圖如圖1所示。

1.2 ? 功能模塊

系統(tǒng)的功能模塊主要分為服務(wù)器端與客戶端，客戶端主要用于用戶與系統(tǒng)的交互，服務(wù)器端則主要負(fù)責(zé)存儲(chǔ)用戶上傳的模型，并能通過(guò)用戶的操作實(shí)時(shí)加載模型到場(chǎng)景中。客戶端包括本地導(dǎo)入、本地導(dǎo)出、模型操作、渲染、信息的存儲(chǔ)與顯示等功能模塊。服務(wù)器端主要包括用戶登錄、用戶登出、模型與場(chǎng)景的加載、上傳和刪除等功能模塊。其系統(tǒng)功能模塊圖如圖2所示：

1.3 ? 數(shù)據(jù)庫(kù)設(shè)計(jì)

為了使模型能夠云端存儲(chǔ)，實(shí)現(xiàn)模型的動(dòng)態(tài)加載與上傳，用戶可登錄自己的賬號(hào)將模型數(shù)據(jù)存入MySQL數(shù)據(jù)庫(kù)中，從中加載上傳過(guò)的模型，通過(guò)數(shù)據(jù)庫(kù)的查詢和刪除等操作實(shí)現(xiàn)模型的加載與刪除等操作。

本系統(tǒng)所涉及的表主要有用戶表tb_user、平臺(tái)表tb_platform、模型總表tb_total_model、模型詳表tb_detail_model和狀態(tài)表tb_status，各個(gè)表之間的聯(lián)系如圖3所示。

2 ? 系統(tǒng)實(shí)現(xiàn)

2.1 ? 界面實(shí)現(xiàn)

主界面分為三個(gè)區(qū)域：場(chǎng)景渲染區(qū)域、菜單欄區(qū)域及信息欄區(qū)域，如圖4所示。場(chǎng)景渲染區(qū)域是系統(tǒng)界面最主要的區(qū)域，用來(lái)對(duì)3D場(chǎng)景進(jìn)行實(shí)時(shí)渲染;菜單欄區(qū)域?yàn)橛脩襞c界面交互的區(qū)域，用于用戶的注冊(cè)登錄、模型的導(dǎo)入導(dǎo)出、編輯與操作等的控制，采用下拉列表的方式;信息欄區(qū)域包括場(chǎng)景信息顯示欄、模型基礎(chǔ)信息欄和模型材質(zhì)欄，用于指導(dǎo)用戶使用該系統(tǒng)及顯示系統(tǒng)的其他相關(guān)信息。

2.2 ? 主要功能實(shí)現(xiàn)

（1）本地導(dǎo)入

系統(tǒng)支持導(dǎo)入外部模型到場(chǎng)景中渲染，外部模型格式可選，包括wrl、obj、dae、stl、ply等國(guó)際通用格式，系統(tǒng)還支持解析3D動(dòng)畫(huà)模型文件，可以支持dae格式和vrml格式的3D動(dòng)畫(huà)模型的播放。

（2）本地導(dǎo)出

系統(tǒng)支持導(dǎo)出場(chǎng)景以及場(chǎng)景中的模型，支持導(dǎo)出js、stl和obj格式，可導(dǎo)出場(chǎng)景中的所有信息，包括燈光及其基本信息，模型及其基本信息與材質(zhì)信息，以及場(chǎng)景列表中的信息。

（3）模型加載

用戶在登錄狀態(tài)下，選擇加載后，客戶端向服務(wù)器發(fā)送模型ID，服務(wù)器根據(jù)模型ID查找相應(yīng)的模型信息，包括3D模型和其貼圖，將其返回給客戶端，加載到瀏覽器中。

（4）信息存儲(chǔ)與顯示功能

信息存儲(chǔ)與顯示功能主要用于模型基本信息的展示，用戶修改模型時(shí)模型信息會(huì)實(shí)時(shí)顯示在信息欄，同樣的，若用戶在信息欄修改模型信息，修改的信息也會(huì)實(shí)時(shí)渲染到場(chǎng)景中。信息欄的顯示功能主要包括場(chǎng)景對(duì)象名字列表、選中對(duì)象的基本信息、幾何信息和材質(zhì)信息。

3 ? 系統(tǒng)測(cè)試與分析

3.1 ? 實(shí)驗(yàn)環(huán)境

系統(tǒng)的開(kāi)發(fā)環(huán)境分為前端和后臺(tái)。前端開(kāi)發(fā)工具采用WebStorm 8，頁(yè)面設(shè)計(jì)語(yǔ)言采用HTML5，頁(yè)面排版布局采用CSS樣式處理，盡可能的減少頁(yè)面刷新操作，前端語(yǔ)言采用JavaScript語(yǔ)言，并運(yùn)用jQuery.js及Three.js框架進(jìn)行設(shè)計(jì)，后臺(tái)語(yǔ)言采用Java語(yǔ)言，數(shù)據(jù)庫(kù)采用sql語(yǔ)言，前端與后臺(tái)數(shù)據(jù)交互使用用ajax技術(shù)。

系統(tǒng)的運(yùn)行環(huán)境為支持WebGL的瀏覽器，本系統(tǒng)PC端測(cè)試采用Windows 7操作系統(tǒng)上的Google Chrome 65瀏覽器，移動(dòng)端測(cè)試環(huán)境使用Android的UC瀏覽器。

3.2 ? 實(shí)驗(yàn)分析

（1）渲染比較

本系統(tǒng)是基于Web的3D模型瀏覽與交互系統(tǒng)，需要在瀏覽器中渲染出客戶端軟件的渲染效果。因此，對(duì)本系統(tǒng)導(dǎo)入模型后的渲染效果和3dsMax 2014、Cortona3D和BS Contact軟件的渲染效果進(jìn)行了比較，如圖5所示。

圖中四行四列展示了四個(gè)模型在四種系統(tǒng)中的渲染效果，其中，本系統(tǒng)為第一列，Cortona3D、BS Contact和3DMax則分別為第二列、第三列以及第四列。從圖中可以看出，本系統(tǒng)與三個(gè)軟件的渲染效果存在一定的差異，不過(guò)都達(dá)到了比較好的渲染效果，四者的渲染效果相差不大?？梢?jiàn)本系統(tǒng)達(dá)到了預(yù)期的渲染效果。

（2）性能測(cè)試

性能測(cè)試主要測(cè)試系統(tǒng)的3D場(chǎng)景渲染性能，幀率是檢測(cè)系統(tǒng)渲染性能的關(guān)鍵指標(biāo)之一。幀率就是在渲染場(chǎng)景時(shí)圖形處理器每秒鐘的刷新次數(shù)。幀率越高說(shuō)明系統(tǒng)展示的動(dòng)畫(huà)效果越流暢。通常每秒30幀及以上就能達(dá)到較好的實(shí)時(shí)渲染的效果，就能讓人覺(jué)得較逼真[7]。在本次測(cè)試中，測(cè)試了系統(tǒng)在承載三種不同大小的模型時(shí)在場(chǎng)景中渲染幀率，模型大小分別是5 M、10 M、25 M，每隔10秒記錄一次，結(jié)果如表1所示。

由表1中的數(shù)據(jù)可以看出，在不同的時(shí)刻，渲染幀率在不停的變化，但是都波動(dòng)幅度不大?？傮w來(lái)說(shuō)，系統(tǒng)承載25 M以內(nèi)的數(shù)據(jù)量時(shí)，渲染幀率都保持在每秒30幀以上，場(chǎng)景渲染效果較好，操作流暢，用戶體驗(yàn)感較好。

4 ? 結(jié) ? 論

通過(guò)對(duì)基于Web的3D模型瀏覽與交互系統(tǒng)的研究，介紹了模型信息的導(dǎo)入與加載、導(dǎo)出與上傳以及3D場(chǎng)景交互和場(chǎng)景的實(shí)時(shí)渲染等方法。系統(tǒng)還支持解析3D動(dòng)畫(huà)模型文件，可以支持dae格式和vrml格式的3D動(dòng)畫(huà)模型的播放。在PC端或移動(dòng)端的瀏覽器中將3D數(shù)據(jù)進(jìn)行實(shí)時(shí)渲染，并確保用戶在模型操作過(guò)程中的各個(gè)功能的正常使用，提高系統(tǒng)的交互性以及實(shí)用性。

參考文獻(xiàn)

[1] ? MIDORI T，TAKAHIKO H，SHOJI T. Color naming experiments using 2D and 3D rendered samples[J]. Color Res. Appl. 2015，40 （3）：270—280.

[2] ? ?KRALIK M，ZAKOVA K. Interactive WebGL model of hydraulic plant[J]. IFAC-Papers OnLine. 2015，48（29）：146—151.

[4] ? ?ANDERSSON S，GORANSSON J，ANDERSSON J G S. Virtual Texturing with WebGL[D].Chalmers University of Technology，2012.

[5] ? ?SAWICKI B，CHABER B. Efficient visualization of 3D models by web browser[J]. Computing. 2013，95（1）：661—673.

[6] ? ?夏金瑤. 基于WebGL的EAST可視化系統(tǒng)[D]. 合肥：中國(guó)科學(xué)技術(shù)大學(xué)，2017.

[7] ? ?楊潤(rùn)斌，梁文章，陳姝. 基于WebGL的3D動(dòng)畫(huà)實(shí)時(shí)播放系統(tǒng)[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用. 2015，24（11）：58—63.