林海

（湛江幼兒師范專(zhuān)科學(xué)校，廣東 湛江 524084）

1 研究背景

隨著虛擬現(xiàn)實(shí)技術(shù)的不斷進(jìn)步，特別是線(xiàn)上經(jīng)濟(jì)和MOOC 教育等領(lǐng)域的規(guī)模不斷擴(kuò)大，推動(dòng)了數(shù)字化虛擬產(chǎn)品展示技術(shù)的發(fā)展。產(chǎn)品展示從傳統(tǒng)靜態(tài)展示轉(zhuǎn)向三維呈現(xiàn)、從被動(dòng)觀看轉(zhuǎn)向人機(jī)交互體驗(yàn)、從現(xiàn)實(shí)空間擴(kuò)展到虛擬三維空間，將產(chǎn)品的更多細(xì)節(jié)信息傳達(dá)給消費(fèi)者。

許多研究人員圍繞虛擬現(xiàn)實(shí)技術(shù)在產(chǎn)品展示方面開(kāi)展具體研究[1]，例如：基于視覺(jué)傳達(dá)的虛擬產(chǎn)品展示系統(tǒng)[2]在呈現(xiàn)展示效果要求較高的藝術(shù)品時(shí)，利用圖像處理優(yōu)化技術(shù)中的圖像增強(qiáng)對(duì)通用系統(tǒng)的產(chǎn)品顯示模塊進(jìn)行優(yōu)化，尤其是在產(chǎn)品細(xì)節(jié)表現(xiàn)程度上，其展示效果提升了13.9%，體現(xiàn)出該系統(tǒng)良好的細(xì)節(jié)表現(xiàn)能力。數(shù)字化博物館虛擬展示系統(tǒng)[3]采用手勢(shì)識(shí)別方法完成人機(jī)交互系統(tǒng)研究。AR 商品展示系統(tǒng)[4]結(jié)合區(qū)塊鏈技術(shù)，將展示的商品虛擬模型與實(shí)體商品信息相結(jié)合，為消費(fèi)者電子購(gòu)物時(shí)提供一種單一化的真實(shí)商品購(gòu)物體驗(yàn)環(huán)境。

本文以計(jì)算機(jī)維護(hù)維修智能虛擬實(shí)驗(yàn)室為例，設(shè)計(jì)出了基于Away3D 的交互式虛擬產(chǎn)品展示系統(tǒng)Avpdss3D，對(duì)CPU、內(nèi)存、硬盤(pán)等比較微小的、不容易觀察的電腦配件進(jìn)行虛擬產(chǎn)品展示。強(qiáng)化了光線(xiàn)的BRDF 雙向反射分布效果，讓模型的展示顯得更加的真實(shí)，構(gòu)建出與實(shí)物非常相近的虛擬產(chǎn)品，人機(jī)交互便捷，只需要通過(guò)鼠標(biāo)控制，就可以對(duì)微小物品實(shí)現(xiàn)產(chǎn)品的放大、旋轉(zhuǎn)等功能；通過(guò)Flash 的發(fā)布系統(tǒng)，可以在Web 端發(fā)布與MOOC 相關(guān)的虛擬實(shí)驗(yàn)室內(nèi)容。

2 相關(guān)工作

2.1 Away3D 引擎

Away3D 是一款開(kāi)源的、高效的、高速的、功能豐富的3D 引擎[5]，由Away3D 創(chuàng)建的三維虛擬世界中包含了view、scene、camera 和三維模型4 部分，該引擎提供了GPU 加速功能，保持了穩(wěn)定的60 fps 性能；支持常用的Skeleton animation、Vertex animation、Particle animation、Path animation 和Particle System，為設(shè)計(jì)者提供很好的想像和創(chuàng)意空間。

2.2 Away3D 技術(shù)應(yīng)用分析

隨著電子商務(wù)和物聯(lián)網(wǎng)的迅速發(fā)展，電商平臺(tái)及在線(xiàn)放開(kāi)MOOC 教育等行業(yè)對(duì)Web 端產(chǎn)品的虛擬三維展示需求日趨強(qiáng)烈。其中，基于Flash 3D 的在線(xiàn)商品展示方法[6]，使用Away3D 引擎通過(guò)一個(gè)應(yīng)用實(shí)例技術(shù)說(shuō)明了該技術(shù)的有效性、可行性以及其在在線(xiàn)商品展示上的優(yōu)勢(shì)；校園三維模型在Web 中顯示的關(guān)鍵技術(shù)[7]，介紹了利用3D max 進(jìn)行校園三維建模的流程，并借助于開(kāi)源的Away3D 引擎實(shí)現(xiàn)校園三維模型在Web 中的顯示；基于Web 的三維虛擬裝配系統(tǒng)[8]，利用Flex 中Stage3D API 技術(shù)，提出了一種基于Away3D的Web 三維虛擬裝配軟件系統(tǒng)的方案，客戶(hù)端無(wú)需安裝任何軟件，就能觀看裝配過(guò)程中各個(gè)零件的安裝情況，服務(wù)器端可以統(tǒng)一更新裝配方案，方便軟件升級(jí)和維護(hù)。

以上的基于Web 端的Away3D 的虛擬產(chǎn)品展示系統(tǒng)，還存在著人機(jī)交互不方便、模型不夠真實(shí)、顯示效果差、還不能夠充分展示產(chǎn)品具體細(xì)節(jié)等問(wèn)題，本文的研究將對(duì)以上的問(wèn)題進(jìn)行優(yōu)化。

3 技術(shù)框架與方法

本文使用Flash CS6.0+Away3D 4.1.6 為開(kāi)發(fā)平臺(tái)，設(shè)計(jì)出了虛擬產(chǎn)品展示軟件系統(tǒng)Avpdss3D。系統(tǒng)工作主要流程如圖1 所示，接下來(lái)，以計(jì)算機(jī)維護(hù)維修的智能虛擬實(shí)驗(yàn)室為例，對(duì)Avpdss3D 的系統(tǒng)虛擬產(chǎn)品展示進(jìn)行詳細(xì)描述。

3.1 Avpdss3D 系統(tǒng)的虛擬三維世界構(gòu)建

計(jì)算機(jī)維護(hù)維修智能虛擬實(shí)驗(yàn)室中的Avpdss3D產(chǎn)品展示系統(tǒng)，首先使用3DMAX 設(shè)計(jì)制作出CPU、內(nèi)存、電源等產(chǎn)品的三維模型，然后給模型貼圖，輸出的模型格式為3DS 的文件格式。采用View3D 類(lèi)創(chuàng)建視口，使用Loader3D 類(lèi)導(dǎo)入三維模型，接著，使用Vector3D 類(lèi)設(shè)置模型的三維坐標(biāo)位置，使用URLReques 對(duì)象指定3D 模型文件的相對(duì)路徑，最后對(duì)模型在場(chǎng)景中的尺寸進(jìn)行縮放。以CPU 三維模型為例，關(guān)鍵代碼如下：

_loader.load(new URLRequest("cpu.3ds"));

_loader.scaleX=_loader.scaleY=_loader.scaleZ=8;

剛導(dǎo)入虛擬三維世界的模型是不可見(jiàn)的，還需要通過(guò)Camera3D 類(lèi)來(lái)創(chuàng)建view 攝像機(jī)，并設(shè)置view 攝像機(jī)的坐標(biāo)和HoverController 觀察視角，該視角的特點(diǎn)是提供針對(duì)的觀察視點(diǎn)，并限制相機(jī)距離不會(huì)透視過(guò)觀察視點(diǎn)，最后通過(guò)addChild 函數(shù)把view 攝像機(jī)加入到虛擬三維世界中，關(guān)鍵代碼如下：

view.camera.z=-50;

view.camera.y=-5;

firstController =new HoverController(camera ，mesh，0，0，1000，-90，90，NaN，NaN，8，1);

設(shè)置好攝像機(jī)后，在虛擬三維世界中還是一片漆黑，需要加入使用PointLight 類(lèi)創(chuàng)建的點(diǎn)光源，通過(guò)ambient 屬性定義環(huán)境光的大小。除此之外還需要加入使用DirectionalLight 類(lèi)創(chuàng)建的平行投射光源，通過(guò)創(chuàng)建SpecularBRDF 函數(shù)，實(shí)現(xiàn)光線(xiàn)的雙向反射分布效果。在現(xiàn)實(shí)中，我們看到產(chǎn)品表面上的點(diǎn)是由許多微光學(xué)表面組成，這些表面朝向各不相同，當(dāng)平行投影光源的入射光照射到產(chǎn)品表面時(shí)，光會(huì)被微光學(xué)表面反射到各個(gè)方向，不同方向的反射比例不一樣。當(dāng)光線(xiàn)從l方向照射到某一點(diǎn)時(shí)，微光學(xué)表面會(huì)將光線(xiàn)反射到相對(duì)于法線(xiàn)對(duì)稱(chēng)的v方向，于是就可以在v方向看到該點(diǎn)，如圖2 所示。

圖2 微表面理論

用f來(lái)表示特定方向的反射光和入射光的關(guān)系比例（即BRDF），定義如下：

式（1）中：l是入射光方向；v是觀察方向。

組成表面所有微光學(xué)表面的法線(xiàn)分布概率使用法線(xiàn)分布函數(shù)D（h）來(lái)表示，入射光線(xiàn)和反射光線(xiàn)的衰減率通過(guò)幾何衰減因子[9]G（l，v）來(lái)建模，反射比例符合菲涅爾方程[10]F（l，h）。通過(guò)上述3 個(gè)函數(shù)，可以建立高光BRDF 模型的核心算法，公式如下：

式（2）中：h為微表面法線(xiàn)；n為宏觀表面法線(xiàn)。

由于該公式過(guò)于復(fù)雜，會(huì)增加系統(tǒng)的計(jì)算成本，在Away3D 中使用Fresnel 公式來(lái)優(yōu)化模型，計(jì)算出光線(xiàn)的偏振和非偏振值，完整的Fresnel 公式如下：

在式（3）中，c=v（l+h）/（||l+h||），g=sqrt（n2+c2-1）（l+h）/（||l+h||）。向量l加上向量h除以l加h的模為半角向量，為了進(jìn)一步減少系統(tǒng)的計(jì)算成本，使用Schlick 近似Fresnel 項(xiàng)，近似后的Fresnel 項(xiàng)公式如下：

SpecularBRDF 函數(shù)的關(guān)鍵參數(shù)代碼如下：

SpecularBRDF(float NdotV，float NdotL，float NdotH，float LdotH，float VdotH，vec3 F0，float roughness)

3.2 Avpdss3D 系統(tǒng)的交互事件處理機(jī)制

完成了模型在三維世界的構(gòu)建后，還需要建立起交互機(jī)制與觀眾產(chǎn)生互動(dòng)，首先是模型的自旋轉(zhuǎn)展示，在ENTER_FRAME 事件中，Avpdss3D 系統(tǒng)通過(guò)改變模型的rotationY 屬性，實(shí)現(xiàn)模型以Y軸為中心自旋轉(zhuǎn)。主要代碼如下：

_loader.rotationY+=1;

在MOUSE_CLICK 事件中，Avpdss3D 系統(tǒng)將檢測(cè)用戶(hù)的鼠標(biāo)點(diǎn)擊的情況，當(dāng)鼠標(biāo)點(diǎn)擊后，系統(tǒng)將獲取鼠標(biāo)當(dāng)前的坐標(biāo)，并停止模型的轉(zhuǎn)動(dòng)。在MOUSE_DOWN 事件中，Avpdss3D 系統(tǒng)將檢測(cè)用戶(hù)鼠標(biāo)按下的情況，當(dāng)鼠標(biāo)按下后，系統(tǒng)先停止模型旋轉(zhuǎn)，然后控制攝像機(jī)跟隨鼠標(biāo)的移動(dòng)方向，改變攝像機(jī)以Y軸旋轉(zhuǎn)的角度屬性panAngle 的值和以X軸旋轉(zhuǎn)的角度屬性tiltAngle 的值，主要代碼如下：

firstController.panAngle = 0.3*(stage.mouseX -mouseXAxis)+mX;

firstController.tiltAngle = 0.3*(stage.mouseY -mouseYAxis)+mY;

在MouseEvent.MOUSE_WHEEL 事件中，Avpdss3D系統(tǒng)將檢測(cè)用戶(hù)滾動(dòng)鼠標(biāo)滾輪的情況，當(dāng)鼠標(biāo)滾輪前后滾動(dòng)時(shí)，系統(tǒng)通過(guò)改變攝像機(jī)的distance 屬性來(lái)設(shè)置相機(jī)距離觀察點(diǎn)的距離，以達(dá)到放大或縮小模型的作用，設(shè)置distance 大于0 可以避免透過(guò)物體，主要代碼如下：

firstController.distance-=10*(e.delta);

設(shè)置好以上的交互事件處理機(jī)制后，用戶(hù)就可以通過(guò)鼠標(biāo)來(lái)靈活地控制模型的旋轉(zhuǎn)和放大，能更好觀察產(chǎn)品的細(xì)節(jié)。最后，還要將Avpdss3D 系統(tǒng)發(fā)布到Web 端，使用Flash6.0 的發(fā)布功能，啟用HTML 包裝器，可以生成Web 端的放映文件，上傳云端服務(wù)器后，就可以使用Web 瀏覽器，來(lái)觀看Avpdss3D 系統(tǒng)的虛擬產(chǎn)品展示。

4 實(shí)驗(yàn)與效果

首先使用3DMAX 給CPU、內(nèi)存、硬盤(pán)、電源等產(chǎn)品建模，貼圖，并導(dǎo)出。然后在Flash 中加載Away3D三維引擎庫(kù)，創(chuàng)建3D 視口，導(dǎo)入已經(jīng)生成的模型文件，然后再為視口添加view 攝像機(jī)和設(shè)置BRDF 光線(xiàn)效果，完成以上Away3D 虛擬三維世界的構(gòu)建后，CPU、內(nèi)存、硬盤(pán)、電源等模型在三維世界中的質(zhì)感表現(xiàn)如圖3、4 所示。從圖3 和圖4 中可以看到，虛擬后的產(chǎn)品模型高光、漫反射和紋理的質(zhì)感效果真實(shí)，硬盤(pán)表面和CPU、內(nèi)存的金屬質(zhì)感強(qiáng)烈。電源外殼和圓形防塵網(wǎng)的2 種金屬質(zhì)感對(duì)比也很明顯。

圖3 CPU、內(nèi)存等在三維世界中的質(zhì)感表現(xiàn)

然后加入4 類(lèi)交互事件處理，分別為：ENTER_FRAME 事件、Mouse.CLICK、Mouse.DOWN事件、Mouse.WHEEL 事件。完成后，Web 端人機(jī)交互展示如圖4 所示。從圖4 中可以觀察到，處于初始狀態(tài)的CPU 模型，以自旋轉(zhuǎn)的方式來(lái)展示產(chǎn)品的全方位外觀。當(dāng)用戶(hù)向后滾動(dòng)鼠標(biāo)滾輪時(shí)，模型變小，向前滾動(dòng)滾輪時(shí)模型變大，并可以通過(guò)拖動(dòng)鼠標(biāo)的方式來(lái)控制攝像機(jī)的角度，從而實(shí)現(xiàn)360°的全面觀察產(chǎn)品的細(xì)節(jié)。

圖4 Avpdss3D 人機(jī)交互系統(tǒng)演示

5 結(jié)論

本文以計(jì)算機(jī)維護(hù)維修智能虛擬實(shí)驗(yàn)室為例，設(shè)計(jì)出了基于Away3D 的交互式虛擬產(chǎn)品展示系統(tǒng)Avpdss3D，通過(guò)微表面理論來(lái)實(shí)現(xiàn)虛擬模型的BRDF光線(xiàn)的雙向反射分布效果，讓模型材質(zhì)和光線(xiàn)反射等效果更加真實(shí)。該系統(tǒng)Web 端的發(fā)布簡(jiǎn)單，人機(jī)交互方面更智能化、便捷化只需要一個(gè)鼠標(biāo)就可以控制模型的放大、縮小和旋轉(zhuǎn)到不同的角度，從而實(shí)現(xiàn)對(duì)產(chǎn)品細(xì)節(jié)的全面觀察。