基于Three.js的交互式魚類模型展示系統(tǒng)設計

王鐘澤,馬曉飛,段金榮,,沈楠楠,何雅慧,王 蕓,

(1 南京農(nóng)業(yè)大學無錫漁業(yè)學院,江蘇 無錫 214128;2 中國水產(chǎn)科學研究院淡水漁業(yè)研究中心,農(nóng)業(yè)農(nóng)村部淡水漁業(yè)和種質(zhì)資源利用重點實驗室,江蘇 無錫 214081)

虛擬三維魚類模型與實體標本相比有很多優(yōu)勢,3D魚類模型不僅顏色更真實,而且在制作、保存、維護等方面都有較大優(yōu)勢。3D模型可在網(wǎng)頁中進行放大、縮小、平移、旋轉(zhuǎn)等操作,是學習和研究魚類的載體,在學校相關專業(yè)和研究機構中有較大的需求。

目前國內(nèi)還沒有專業(yè)的魚類3D模型展示平臺。過去一些學者發(fā)表的魚類模型展示的論文在現(xiàn)在已比較落后,且流程麻煩。劉箴[1]研究了使用VRML和3ds Max實現(xiàn)虛擬水族館的場景,VRML語言被認為比較難使用,且早已經(jīng)退出市場。呂俊霖等[2]研究Flash的魚類標本展示技術,Flash技術目前已經(jīng)被淘汰。胡玉萌[3]使用Unity3D研究魚類三維標本展示系統(tǒng)。段金榮等[4]使用Unity3D研究魚類標本及標本館場景展示技術。Unity3D效率低、且需要導出為WebGL文件放到服務器中加載,加載時間較長,無法解決用戶在線上傳模型等問題。在國外也有一些學者對魚類3D展示進行了研究。Berquist[5]建立了魚類數(shù)據(jù)庫,對魚類2D圖像和一些3D內(nèi)容進行展示,主要使用MRI、CT掃描、Flash、PHP等技術實現(xiàn)。Betts[6]用動態(tài)圖像引擎技術建立了一個3D骨骼模型的網(wǎng)站,里面包含了許多魚類骨骼。LEBRUN[7]使用CakePHP框架和3DHOP框架設計了虛擬標本發(fā)布和存儲的在線平臺供他人搭建3D展示網(wǎng)站使用。馬來西亞大學的Yus等[8]在移動端設備創(chuàng)建一個VR水族館幫助人們學習和了解魚類,主要使用Unity3D技術進行開發(fā)。Sidlauskas等[9]發(fā)表了一篇用虛擬標本在線教授魚類學的文章,研究了使用3D掃描建立魚類模型的方法和建立魚類標本網(wǎng)站的思路。

網(wǎng)頁制作人員曾使用VRML、java3D、Flash3D、Unity3D等技術展示3D模型,但這些技術都存在較多問題,如需要安裝插件、跨平臺操作不友好、成本高、效率低等,限制了Web端3D展示和可視化技術的發(fā)展[10]。在Html5和WebGL三維標準繪圖標準出現(xiàn)后,Web 3D技術得以實現(xiàn)規(guī)范統(tǒng)一[11]。WebGL可通過硬件加速渲染場景,使人們將現(xiàn)實中的物體通過虛擬環(huán)境呈現(xiàn)的方式更加簡單,而且不需要安裝插件[12]。此外,幾乎所有的瀏覽器都支持WebGL進行三維模型展示,具有跨平臺的特點[13-14]。目前基于WebGL技術的虛擬現(xiàn)實應用領域正在逐漸增多[15]。在國外,網(wǎng)頁版本的虛擬現(xiàn)實技術主要用在建筑的漫游、城市的規(guī)劃、室內(nèi)設計等[16]。

本研究給出使用Three.js技術建立魚類3D模型展示系統(tǒng)方案,通過此方案可快速制作3D模型展示系統(tǒng),且功能較多,可節(jié)省成本,提高效率。

1 魚類建模技術和模型輕量化

1.1 魚類建模技術

目前建立魚類模型的方式比較多樣,可通過3D激光掃描儀直接對魚體掃描建立模型。但是3D激光掃描儀價格昂貴,對于簡單物體進行建模,投入成本太高[17]。還可以通過手機對魚類體表全方位拍照,將照片導入類似Reality Capture、Photoscan的照片建模軟件中直接生成3D模型。照片建模學習門檻低、對拍照設備要求低、可得到與真實物體極高相似的三維模型[18]。由于照片建模需要固定魚類進行多角度拍攝,并且模型質(zhì)量較大,因此這里使用3ds Max軟件構建魚類模型。3ds Max具有強大的建模功能,可創(chuàng)建出不同結(jié)構三維模型,在各行業(yè)中有廣泛應用[19]。在建立模型時可先在網(wǎng)頁中下載魚類側(cè)身照片或者自己采集魚類側(cè)身照片,接著在3ds Max中創(chuàng)建平面,并把魚類側(cè)身圖貼到平面上。然后使用樣條線繪制魚類輪廓,并轉(zhuǎn)化為可編輯多邊形,再使用剪切工具連接頂點,在左視圖和頂視圖中將頂點拉到合適的位置,最后給模型增加殼、渦輪平滑修改器,此時魚的半身模型就制作好了。然后在使用相同方法繪制魚的胸鰭和腹鰭部分。

接著使用Unwrap pro插件對上面建立的模型展UV,首先選中魚類模型的所有部分,點擊修改器列表中的Unwrap pro修改器,對該模型進行展UV。當UV展好后,點擊工具中的渲染UVW模板,并保存為圖片格式。然后使用Photoshop軟件打開UV圖片,并對下載的魚類的圖片進行摳圖,移動到UV展開圖中合適位置。最后將處理好的UV圖片給魚類模型貼圖,并添加對稱修改器,此時完整魚類模型就制作完成了。

1.2 魚類模型輕量化

三維模型由幾何信息、材質(zhì)、貼圖組成,為減小模型大小,需要對貼圖有和幾何信息進行壓縮,從而利于網(wǎng)絡傳輸[20]。對模型進行輕量化可通過減少頂點數(shù)量和無損壓縮貼圖以及使用Draco壓縮工具實現(xiàn)。減少頂點數(shù)可通過3ds MAX中的專業(yè)優(yōu)化修改器實現(xiàn)。貼圖的無損壓縮可通過Photoshop、Caesium Image Comproessor軟件或者使用在線壓縮網(wǎng)站Online Image Tool、PicDiet等實現(xiàn)。經(jīng)過對貼圖和頂點的優(yōu)化后即可實現(xiàn)較好的輕量化效果,也可再次使用Draco壓縮工具進行壓縮模型,Draco壓縮對模型具有較好的壓縮效果,可對FBX、OBJ、GLB、3D Tiles等格式的模型進行壓縮。使用Draco壓縮算法可節(jié)省模型幾何信息約80%的存儲空間[21]。

2 系統(tǒng)架構與開發(fā)技術

2.1 系統(tǒng)架構

系統(tǒng)架構如圖1所示。

系統(tǒng)采用B/S結(jié)構,由三部分組成,分別是客戶端、服務端和數(shù)據(jù)庫[22]。服務器端采用PHP編寫,數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫?？蛻舳伺c用戶進行交互,將用戶向服務器請求的Web資源呈現(xiàn)出來。服務端負責存儲數(shù)據(jù)和處理應用邏輯。數(shù)據(jù)庫給服務層中的業(yè)務邏輯提供數(shù)據(jù)支持,主要任務是存儲和管理數(shù)據(jù)[23]。

2.2 主要開發(fā)技術

2.2.1 Bootstrap技術

Bootstrap框架是一個優(yōu)秀的前端開發(fā)框架,常被用來設計響應式網(wǎng)頁,本身簡潔靈活具有強大的可擴展性。Bootstrap框架使用HTML、JavaScript、CSS、jQuery等多種技術來實現(xiàn)響應式Web的開發(fā),本身簡潔靈活可擴展性強[24]。Bootstrap還具有豐富的CSS樣式和靈活的柵格系統(tǒng),另外當Bootstrap中的功能不能滿足需求時,用戶還可直接添加新功能,修改方法十分靈活。

2.2.1 Three.js技術

Three.js是WebGL架構的三維繪圖框架,使用JavaScript語言編寫,對WebGL進行了二次封裝與擴展[25]。Three.js簡化了相關接口的調(diào)用和三維繪圖方式,降低了學習門檻,在可視化設計[26]、仿真系統(tǒng)設計[27]應用較多。Three.js可加載大多數(shù)格式的模型文件,在解決用戶與WebGL打交道的同時,具較大的可自定義和擴展性。Three.js還提供了簡單易懂的JavaScript API,并且集輕量化、開源等優(yōu)秀品質(zhì)于一身[28-29]。

3 系統(tǒng)設計與實現(xiàn)

3.1 功能模塊設計

系統(tǒng)功能包括客戶端和服務器端兩部分?？蛻舳酥饕獙崿F(xiàn)訪問者與魚類模型的交互,包括搜索查看模型、將模型以分頁的形式展示出來查看模型,本地模型在Three.js 編輯器中的導入、導出、編輯、以Mobile VR方式展示魚類模型和用戶注冊登錄、用戶在線上傳與刪除模型等功能,服務器端主要負責存儲數(shù)據(jù)和處理應用邏輯。系統(tǒng)功能設計如圖2所示。

圖2 系統(tǒng)功能設計圖Fig.2 System function design diagram

3.2 數(shù)據(jù)庫設計

本項目按實際需求設計了5個表,分別是海水魚數(shù)據(jù)表(seafish)、淡水魚數(shù)據(jù)表(waterfish)、魚類搜索表(search)、用戶表(user)、用戶模型表(usermodel)。海水魚數(shù)據(jù)表主要存儲海水魚模型相關信息,淡水魚數(shù)據(jù)表存儲淡水魚模型相關信息,魚類搜索表中存儲所有魚類模型信息,用戶表存儲用戶的賬號和密碼,用戶模型表存儲所有用戶上傳的模型數(shù)據(jù)。

3.3 主要功能實現(xiàn)

3.3.1 模型搜索和模型分頁展示功能

搜索功能以特定的搜索條件為基礎,使用戶可快速方便查找搜索事件[30]。在搜索頁面中使用input實現(xiàn)輸入框和提交按鈕功能,然后通過form表單將數(shù)據(jù)提交到PHP頁面中。在PHP頁面中使用$_GET方式獲取form表單中的值,并將數(shù)據(jù)賦值給變量。接著使用mysqli_connet()函數(shù)、mysqli_select_db()連接數(shù)據(jù)庫,使用SQL語句對search表進行模糊查詢,使用mysqli_fetch_assoc()函數(shù)獲取查詢的結(jié)果集,并將數(shù)據(jù)保存為變量。并對該變量值進行判斷,如果不存在,就輸出沒有查到相關模型。如果查到數(shù)據(jù)使用foreach循環(huán)渲染到html代碼中,點擊查到的數(shù)據(jù)即可查看3D魚類模型。

使用分頁技術在網(wǎng)頁動態(tài)查詢并顯示數(shù)據(jù)記錄,可降低服務器負擔,提高查詢和現(xiàn)實速度,使頁面美觀[31]。分頁展示主要用在淡水魚標本和海水魚標本展示頁面中,可首先使用PHP連接數(shù)據(jù)庫,接著編寫SQL分頁查詢語句,并使用數(shù)組形式保存查詢到的數(shù)據(jù)。然后用PHP的foreach循環(huán)將數(shù)據(jù)渲染到html代碼中,接著使用PHP和html編寫計算分頁數(shù)目和頁面跳轉(zhuǎn)等部分的代碼實現(xiàn)完整分頁功能。

3.3.2 Three.js加載魚類模型場景

Three.js引擎對三維圖像渲染主要包括5個要素,既渲染器、場景、相機、光源、物體[32]。其中相機用于控制視角實現(xiàn)各個角度查看魚類模型,實現(xiàn)用戶與魚類模型的交互。本研究使用的魚類模型為FBX格式,需要在頁面中引入FBXLoader.js和OrbitControl.js控件,使用THREE.FBXLoader().load(url,function)函數(shù)完成模型導入,并控制模型的位置和大小,使用OrbitControls(camera)將控件綁到相機上,用來控制相機的旋轉(zhuǎn)和縮放。魚類3D展示場景搭建完成后,還可在場景中添加介紹面板、視頻介紹、button按鈕等內(nèi)容。魚類模型展示界面如圖3所示。

圖3 魚類模型展示界面Fig.3 Fish model display interface

3.3.3 Three.js編輯器實現(xiàn)在線查看編輯模型

Three.js編輯器是一個開源的3D編輯器,支持將本地fbx、glb、obj、wrl等格式模型導入其中,對模型進行查看、編輯或者導出為其他模型。在上傳模型前可先在此編輯器中查看模型效果。目前也有一些商業(yè)公司對Three.js編輯器進行二次開發(fā),將模型在編輯器中修改后直接上傳到服務器中展示模型。這里將Three.js編輯器的代碼放入服務器中可以實現(xiàn)對電腦中模型的查看和編輯。Three.js編輯器中模型效果如圖4所示。

圖4 Three.js 編輯器查看魚類模型Fig.4 Three.js editor to view fish model

3.3.4 Mobile VR場景查看魚類模型

Three.js可使用分屏顯示的方式現(xiàn)實Mobile VR場景,這里使用Three.js提供的StereoEffect.js文件實現(xiàn)雙屏顯示,并使用dat.gui.js圖形界面庫創(chuàng)建菜單欄目實現(xiàn)雙屏顯示與單屏顯示的切換。Three.js雙屏顯示結(jié)果如圖5所示。

圖5 Three.js雙屏顯示模型Fig.5 Three.js dual-screen display model

也可使用Babylon.js去實現(xiàn)Mobile VR場景,Babylon.js創(chuàng)建的Mobile VR場景界面更加美觀,而且僅增加少量代碼即可實現(xiàn)。Babylon.js實現(xiàn)Mobile VR場景如圖6所示。

圖6 Babylon.js實現(xiàn)Mobile VR場景Fig.6 Babylon.js implements Mobile VR scene

3.3.5 用戶模型上傳與展示

目前3D展示技術,多是程序開發(fā)者直接將模型上傳到服務器中使用相關技術加載展示模型,實現(xiàn)用戶在線上傳展示模型比較麻煩。使用Three.js技術很容易實現(xiàn)用戶在線上傳模型、查看模型和分享模型等功能。目前3D模型格式中gltf、glb和fbx這三種最常用,因此這里實現(xiàn)用戶注冊、登錄后對gltf、glb和fbx模型的文件上傳與展示,其他模型的上傳展示也與此方法類似。模型上傳界面主要包括模型名稱、模型圖片、模型文件三個內(nèi)容。

在模型上傳頁面中需要使用JavaScript進行判斷,如果模型名稱、模型圖片、模型文件有空值就會進行提示,如果模型不是gltf、glb和fbx模型也會給出提示。在接收數(shù)據(jù)的PHP頁面中,編寫文件上傳類,定義圖片和模型保存的路徑,并對上傳的文件進行重命名和設置上傳文件的全目錄,然后將圖片和模型分別保存到服務器相應的文件夾中。接著調(diào)用類中的方法,并獲取上傳文件的全目錄。最后連接數(shù)據(jù)庫,將模型路徑、圖片路徑、模型名稱和session中存儲的用戶名插入到MySQL表中,并使用session保存模型路徑,當用戶上傳成功后,使用alert彈出發(fā)布成功的提示,并跳轉(zhuǎn)到模型展示界面。在模型展示界面中需要獲取文件路徑后綴,然后使用if函數(shù)進行判斷,如果是gltf和glb模型就執(zhí)行gltf和glb模型數(shù)據(jù)加載和渲染到頁面中的相關代碼,如果是fbx模型就執(zhí)行加載fbx模型數(shù)據(jù)和渲染到頁面中的相關代碼。如果上傳模型失敗,提示上傳失敗,并跳轉(zhuǎn)到模型上傳頁面,讓用戶重新上傳模型。模型上傳成功后該用戶可在模型管理列表里面查看自己上傳的模型,也可以在用戶模型界面查看所有用戶模型,當用戶點擊刪除標簽的時候,可將數(shù)據(jù)庫中模型路徑和服務器中模型文件同時刪除。

4 試驗驗證

4.1 系統(tǒng)運行環(huán)境

系統(tǒng)運行環(huán)境采用騰訊云輕量應用服務器配置為2核4G,操作系統(tǒng)為Windows Server 2012,寬帶為8 Mbps,硬盤為80 GB SSD云硬盤。Web服務器為Nginx軟件,Nginx實行反向代理到業(yè)務服務層,保障內(nèi)網(wǎng)服務層的安全[33]。PHP版本為8.1,MySQL版本為5.6,網(wǎng)站名稱為https://ringstar.top。

4.2 系統(tǒng)測試

(1)系統(tǒng)功能測試。使用手機和電腦瀏覽器測試各頁面內(nèi)容以及注冊、登錄、用戶在線模型上傳等功能,發(fā)現(xiàn)各功能正常可用,頁面布局良好。

(2)模型加載速度測試。在服務器中一共上傳了52條魚類模型,3D魚類模型平均大小為1M左右,測試發(fā)現(xiàn)網(wǎng)速為1M/s時,在PC端瀏覽器和手機端的瀏覽器中的模型多數(shù)都可在1 s加載出來,最遲不超過2 s。對于較大的模型如魚類標本館場景模型,經(jīng)過對模型頂點、貼圖信息和使用Draco壓縮庫壓縮后,并轉(zhuǎn)換為3D Tiles格式實現(xiàn)分步加載模型。此時標本館模型大小被優(yōu)化為7.2 M,在谷歌瀏覽器中網(wǎng)速為2 M/s時,第3秒時可加載出模型場景的一半,在第5秒時可加出全部模型內(nèi)容,實現(xiàn)邊加載邊查看,減少了用戶等待過程。

(3)模型渲染效果測試。Three.js提供了多種光源,為了使模型達到更加真實的渲染效果,需要對模型使用不同類型的光源組合。這里使用環(huán)境光、戶外光、平行光3種光源組合,所有模型在瀏覽器中渲染出的效果不失真,三維魚類模型顏色與貼圖顏色幾乎一致。

(4)不同WebGL技術加載模型方案對比。王孟博等[34]對Thrss.js、Babylon.js、PlayCanvas.js和Cesium.js

4個WebGL引擎進行比較,認為Three.js具有較高的靈活性、Babylon.js封裝程度高、PlayCanvas.js適合制作游戲,Cesium.js適合制作地理信息系統(tǒng)。為驗證Three.js在3D模型展示方面的優(yōu)越性,本研究對Three.js、Cesium.js和Unity 3D三個技術進行了測試。分別測試使用Three.js、Cesium.js和Unity 3D加載麥穗魚模型的速度、渲染結(jié)果等,試驗中采用麥穗魚的3D模型大小為553 kB。結(jié)果參考表1。

表1 不同3D展示技術對比Tab.1 Comparison of different 3D display technologies

4.3 試驗結(jié)果

本系統(tǒng)基于three.js設計的3D魚類標本展示平臺,采用B/S架構,使用戶可以隨時瀏覽魚類3D標本,可以克服魚類教學中缺乏直觀性和場所不靈活的問題。在系統(tǒng)開發(fā)過程中根據(jù)實際需求進行了分析,設計了用戶需要的功能。分析了現(xiàn)有的方案,并測試了一些常用的技術方案進行對比,確定了用戶體驗更好的開發(fā)框架。

試驗中首先對魚類建模技術和魚類模型輕量化技術進行了研究,采用了合適的魚類建模流程,可快速建立魚類3D模型并節(jié)省成本。在模型輕量化技術中,直接在建模過程中就對模型和貼圖進行壓縮,可直觀查看模型頂點數(shù)量和外觀色彩的變化,達到了較好的效果,避免了其他壓縮工具使用命令行方式無法及時查看模型顏色和頂點信息的變化,較大提升模型優(yōu)化效率。此外直接對貼圖進行無損壓縮和在3ds MAX中直接修改頂點的數(shù)量也可實現(xiàn)和Draco壓縮類似的優(yōu)化結(jié)果。對于較大魚類3D標本館場景模型,采取建模時就對模型優(yōu)化,再使用CesiumLab軟件進行Draco壓縮和轉(zhuǎn)化為3D Tiles格式,CesiumLab采用可視化方式處理模型,使用Draco和3dtiles工具則需要在GitHub下載相應代碼并使用命令行方式處理模型。使用上述方式處理模型可以提升模型輕量化效率,而且實現(xiàn)了模型分布式加載。此外由于瀏覽器的緩存功能,使3D模型在二次加載時不需要通過網(wǎng)絡下載可直接加載。在模型優(yōu)化方面還可使用壓縮包的形式進行優(yōu)化,關峰[37]將模型轉(zhuǎn)化為gz壓縮格式,將模型在瀏覽器中自動解壓提升加載速度。

在設計該系統(tǒng)時,考慮到設計的3D魚類模型數(shù)量不是太多,模型搜索和列表展示采用PHP動態(tài)渲染技術,魚類3D模型展示界面采用靜態(tài)數(shù)據(jù),方便直接修改頁面光源和添加其他功能。用戶模型展示界面,所有功能均采用PHP動態(tài)渲染技術,提高頁面復用性。在魚類3D場景展示中,研究了網(wǎng)頁中3D標本交互的方法,將所有3D模型的坐標原點設置為0,這樣在展示模型時即可圍繞自身進行旋轉(zhuǎn)、平移、縮放,達到較好的交互效果,還可以通過JavaScript在頁面添加需要的功能,擴展性較高。如果想要使用實現(xiàn)類似mobile VR的效果可以采用three.js提供的雙屏渲染插件或者Babylon.js庫。最后系統(tǒng)實現(xiàn)了在線上傳不同格式的3D模型和展示不同格式3D模型的方法,可滿足使用者在網(wǎng)頁中展示魚類3D模型的需要。另外由于頁面采用響應式設計,使系統(tǒng)頁面在電腦、平板和手機端都可進行良好展示。

4.4 結(jié)果分析

劉箴[1]的方案需要裝VRML插件,呂俊霖等[2]和Berquist等[5]的方案需要裝Flash插件,田應平等[36]的方案需要裝Silverlight插件,胡玉萌[3]、段金榮等[4]的方案需要下載Unity Web Player、ActiveX插件,Betts等[6]的方案屬于對高清圖像的動態(tài)展示。本方案與上述方案相比,直接加載3D模型使得開發(fā)流程和開發(fā)效率也得到提高,還可以實現(xiàn)VR功能和跨平臺使用。目前Three.js技術在展示3D模型方面有較多研究,如展示3D解剖模型[37]、構建極地陸生植物3D數(shù)據(jù)庫[38]、機電產(chǎn)品展示[39]、藝術品展示[40],但是在研究魚類標本展示系統(tǒng)方面還未見報道。該系統(tǒng)的構建可良好地展示魚類的形態(tài)學特征,為研究不同魚類間3D形態(tài)提供了基礎數(shù)據(jù),還解決了魚類實體標本占用空間,不易保存,在制作和保存中容易破壞魚類形態(tài)學特征的問題。該系統(tǒng)在互聯(lián)網(wǎng)中呈現(xiàn)大量復雜魚類3D模型,使數(shù)據(jù)可被廣泛地瀏覽,同時還可滿足魚類教學和研究機構的學習和使用,具有良好的推廣價值。

5 結(jié)論

使用Three.js與其他技術結(jié)合構建魚類3D模型展示系統(tǒng),解決了以往魚類模型和室內(nèi)標本館場景需要安裝插件查看、3D展示系統(tǒng)無法跨平臺訪問、缺乏用戶在線上傳模型、魚類可視化場景功能較少的問題。本系統(tǒng)實現(xiàn)了一套比較完整的魚類3D標本展示系統(tǒng),針對系統(tǒng)的各個功能進行了測試,驗證系統(tǒng)不存在缺陷,可流暢運行與使用,達到了預期開發(fā)目標。但是系統(tǒng)仍存在一些不足,魚類3D交互頁面功能不是很多,用戶后臺界面需要改進,系統(tǒng)構架沒有考慮大規(guī)模用戶、高并發(fā)場景和模型數(shù)據(jù)加密傳輸。下一步可在魚類模型展示頁面添加測距和動畫功能、研究用戶提交模型時自動壓縮模型等技術,使用對象存儲技術存儲模型和研究模型加密技術。