基于網(wǎng)絡(luò)的三維可視化原理及幾種常用工具

陸 瑤

（北京中電慧視科技有限公司，北京 100015）

0 引 言

如今，信息化技術(shù)飛速發(fā)展，網(wǎng)絡(luò)三維可視化技術(shù)也日漸成熟，且已經(jīng)在電子商務(wù)、遠(yuǎn)程教育、網(wǎng)絡(luò)游戲及網(wǎng)絡(luò)展覽等多個領(lǐng)域發(fā)揮了重要的作用。例如在電子商務(wù)領(lǐng)域，網(wǎng)絡(luò)三維可視化交互式的展現(xiàn)方式，不僅能夠全方位、多角度地展示產(chǎn)品細(xì)節(jié)，而且能夠在網(wǎng)頁上嵌入文字說明、音頻解說等多種元素，使用戶可以更為自由、直觀地瀏覽產(chǎn)品信息，給人以個性化的消費體驗[1]；在網(wǎng)絡(luò)展覽領(lǐng)域，以該技術(shù)為基礎(chǔ)搭建的高度互動的3D虛擬展覽環(huán)境，將展品整體“搬”到網(wǎng)絡(luò)上，使瀏覽者只要點擊和拖動鼠標(biāo)，就可以通過不同視角瀏覽展品；在教育領(lǐng)域，網(wǎng)絡(luò)三維可視化教學(xué)課件成本低、效果好、交互性強、可進(jìn)行動態(tài)的演示，便于學(xué)生學(xué)習(xí)更為復(fù)雜的流程、結(jié)構(gòu)、關(guān)系等，能夠極大加深學(xué)生的理解能力，有效地增強教學(xué)效果[2]。在疫情還未平息的當(dāng)今社會，網(wǎng)絡(luò)三維可視化逐漸成為主流的展覽方式之一[3]。

網(wǎng)絡(luò)三維可視化基于瀏覽器/服務(wù)器（Browser/Server，B/S）架構(gòu)的模式構(gòu)建，以此實現(xiàn)模型的共享和訪問。模型構(gòu)建完成后，上傳并存儲于服務(wù)器。用戶通過瀏覽器訪問服務(wù)器，服務(wù)器提供模型數(shù)據(jù)，通過調(diào)用本機硬件資源渲染模型，并將結(jié)果呈現(xiàn)在瀏覽器上。隨著計算機技術(shù)和網(wǎng)絡(luò)技術(shù)的發(fā)展，硬件設(shè)備的處理速度和網(wǎng)絡(luò)傳輸速度得到了極大的提升，這就為網(wǎng)絡(luò)三維可視化技術(shù)的應(yīng)用和普及奠定了堅實的基礎(chǔ)。

1 原理分析

網(wǎng)絡(luò)三維可視化是將三維模型呈現(xiàn)在瀏覽器上，而用戶使用任何手段進(jìn)行網(wǎng)頁瀏覽時看到的內(nèi)容都是HTML格式。HTML是通用的網(wǎng)頁標(biāo)記語言，也是萬維網(wǎng)的核心語言。2014年10月29日，萬維網(wǎng)聯(lián)盟宣布HTML5的規(guī)范制定完成。日常人們所說的HTML5實際上包括了HTML標(biāo)記、CSS及JavaScript在內(nèi)的一系列技術(shù)[4]。WebGL（Web Graphics Library）是一種3D繪圖協(xié)議，是多平臺通用的標(biāo)準(zhǔn)，被多數(shù)瀏覽器所支持。這種繪圖技術(shù)標(biāo)準(zhǔn)可以把JavaScript和開放式圖形庫（Open Graphics Library，OpenGL）結(jié)合在一起。OpenGL是一個用于渲染2D、3D矢量圖形的應(yīng)用程序編程接口，是處理2D/3D圖形的最為廣泛的應(yīng)用程序編程接口（Application Programming Interface，API）。它獨立于視窗操作系統(tǒng)以及操作系統(tǒng)平臺，存在于Windows、部分Unix和Mac OS平臺，可繪制模型、賦予材質(zhì)、映射紋理、加載光照環(huán)境，還可以平移、旋轉(zhuǎn)、鏡像模型及陰影等[5]。

WebGL通過調(diào)用OpenGL圖形庫，可以為所有支持的瀏覽器，包括Firefox 4+，Google Chrome 9+，Opera 12+，Safari 5.1+，Internet Explorer 11+ 和Microsoft Edge build 10240+等提供硬件3D加速渲染[6]，完美地解決了現(xiàn)有三維可視化的兩個問題：第一，它通過HTML腳本本身實現(xiàn)Web交互式三維動畫的制作，無需任何瀏覽器插件支持；第二，它利用底層的圖形硬件加速功能進(jìn)行的圖形渲染，是通過統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺的OpenGL接口實現(xiàn)的。用戶可以在多種硬件設(shè)備如桌面電腦、筆記本、智能手機上，流暢地瀏覽3D場景和模型，隨意縮放、拖拽模型細(xì)節(jié)。這就意味著，這項技術(shù)在使用上沒有設(shè)備類型的限制，使用場景更加多樣，適用領(lǐng)域更加廣泛。

2 常用工具

起初，各種硬件及網(wǎng)絡(luò)技術(shù)協(xié)議還不成體系，程序員們通過編寫代碼來描述模型，實現(xiàn)三維模型的可視化。經(jīng)過近些年的迭代開發(fā)，逐漸形成了多款成熟的三維呈現(xiàn)插件、平臺或工具包。而現(xiàn)有的模型軟件也多數(shù)兼容了用于網(wǎng)絡(luò)三維可視化的模型格式，并提供了相應(yīng)插件，不僅可以上傳模型，還具有渲染模型、配置場景操作、嵌入文字音頻等功能。下面簡單介紹幾種常用插件或平臺的使用方法。

2.1 Rhinoceros的iris插件

Rhinoceros是一款強大的三維建模軟件，可以快速簡捷地構(gòu)建復(fù)雜的NURBS模型，也支持多邊形網(wǎng)格模型，且具備基礎(chǔ)渲染功能，支持obj、DXF、IGES、STL、3dm等多種模型格式，幾乎兼容所有3D軟件。

使用Rhinoceros軟件實現(xiàn)模型可視化分享的具體方法是：完成模型創(chuàng)建后，將模型導(dǎo)出為Iris html Archive（.html）格式，如圖1所示；修改導(dǎo)出選項UI=Yes，這樣可以保留控制功能版面，此控制功能可用于模型交互、改變模型渲染模式等；此時導(dǎo)出的文件包可在本地用瀏覽器打開，當(dāng)項目有保密需求時，可使用物理傳輸方式，在可信賴的設(shè)備上打開觀看，如無保密需求，將此文件包上傳至可信賴的服務(wù)器，即可以通過瀏覽器訪問、觀看該模型文件。

圖1 Rhino模型導(dǎo)出格式

2.2 Sketchfab平臺

Sketchfab是一家3D分享平臺，專注于網(wǎng)絡(luò)三維可視化。平臺支持大部分模型格式，與多種設(shè)備兼容，適用于所有瀏覽器。瀏覽時無需安裝插件，可隨時隨地展示交互式3D模型。平臺自帶的3D編輯器還可以編輯材質(zhì)燈光，注釋功能可以添加音頻，用于描述產(chǎn)品功能或提供額外的產(chǎn)品信息，如圖2所示。

圖2 Sketchfab 3D編輯器添加視角和產(chǎn)品信息

該平臺為很多模型軟件如Unity，Lightwave，ZBrush，3ds Max等都提供了上傳插件。當(dāng)然，也可以不通過插件，直接將平臺支持的模型上傳至平臺進(jìn)行編輯。以Rhinoceros軟件為例，需要先將NURBS模型轉(zhuǎn)化為網(wǎng)格，如需使用平臺材質(zhì)編輯功能，導(dǎo)出前要將網(wǎng)格分層賦予不同材質(zhì)，根據(jù)材質(zhì)的平滑程度，編輯不同材質(zhì)的頂點法線；導(dǎo)出時選擇OBJ格式，得到OBJ文件和MTL文件；然后將導(dǎo)出的文件一起上傳Sketchfab平臺，使用編輯器操作材質(zhì)、為對象添加動畫效果等，最后保存視圖和設(shè)置，即可通過URL訪問瀏覽該模型文件，還可以生成代碼嵌入到其他網(wǎng)頁中。

2.3 Verge3D工具包

Verge3D是一款專用于網(wǎng)絡(luò)三維可視化的工具包，主要支持Blender，Maya，3ds Max三款模型軟件，可以直接創(chuàng)建出基于網(wǎng)頁的三維互動體驗。用戶可以在建模軟件中展開設(shè)計，然后導(dǎo)出到網(wǎng)頁實時查看效果。Verge3D工具包還提供了交互編輯器，可以為模型創(chuàng)建行為場景，使其響應(yīng)用戶的交互操作，如圖3所示。

圖3 Verge3D創(chuàng)建的交互式三維可視化場景

以3ds Max軟件為例，使用Verge3D工具轉(zhuǎn)化Max模型為交互式三維模型。首先安裝Verge3D插件并打開“App Manager”，創(chuàng)建新的WebGL項目，此瀏覽器管理頁面可以實時檢查工作進(jìn)程，然后通過編輯器添加交互操作，完成配置后，使用發(fā)布功能發(fā)布到可信賴的服務(wù)器，通過鏈接或代碼分享模型，如圖4所示。

圖4 分享鏈接和代碼

3 結(jié) 語

現(xiàn)代技術(shù)發(fā)展日新月異，電子產(chǎn)品的軟硬件性能得到快速提升，網(wǎng)絡(luò)三維可視化技術(shù)在各領(lǐng)域發(fā)揮著愈發(fā)重要的作用。這就要求相關(guān)人員及時接納、使用新技術(shù)，不局限于傳統(tǒng)的三維呈現(xiàn)方式。本文簡單介紹了網(wǎng)絡(luò)三維可視化技術(shù)在各領(lǐng)域的應(yīng)用情況，分析了該技術(shù)的實現(xiàn)原理，提供了幾種常用的實現(xiàn)工具，表明該技術(shù)適用于多行業(yè)領(lǐng)域，有著廣泛的應(yīng)用前景。