智能仿真虛擬實驗室中的產品展示技術及實現＊

林海

（湛江幼兒師范專科學校，廣東 湛江 524084）

1 研究背景

隨著虛擬現實技術的不斷進步，特別是線上經濟和MOOC 教育等領域的規模不斷擴大，推動了數字化虛擬產品展示技術的發展。產品展示從傳統靜態展示轉向三維呈現、從被動觀看轉向人機交互體驗、從現實空間擴展到虛擬三維空間，將產品的更多細節信息傳達給消費者。

許多研究人員圍繞虛擬現實技術在產品展示方面開展具體研究[1]，例如：基于視覺傳達的虛擬產品展示系統[2]在呈現展示效果要求較高的藝術品時，利用圖像處理優化技術中的圖像增強對通用系統的產品顯示模塊進行優化，尤其是在產品細節表現程度上，其展示效果提升了13.9%，體現出該系統良好的細節表現能力。數字化博物館虛擬展示系統[3]采用手勢識別方法完成人機交互系統研究。AR 商品展示系統[4]結合區塊鏈技術，將展示的商品虛擬模型與實體商品信息相結合，為消費者電子購物時提供一種單一化的真實商品購物體驗環境。

本文以計算機維護維修智能虛擬實驗室為例，設計出了基于Away3D 的交互式虛擬產品展示系統Avpdss3D，對CPU、內存、硬盤等比較微小的、不容易觀察的電腦配件進行虛擬產品展示。強化了光線的BRDF 雙向反射分布效果，讓模型的展示顯得更加的真實，構建出與實物非常相近的虛擬產品，人機交互便捷，只需要通過鼠標控制，就可以對微小物品實現產品的放大、旋轉等功能；通過Flash 的發布系統，可以在Web 端發布與MOOC 相關的虛擬實驗室內容。

2 相關工作

2.1 Away3D 引擎

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

2.2 Away3D 技術應用分析

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

以上的基于Web 端的Away3D 的虛擬產品展示系統，還存在著人機交互不方便、模型不夠真實、顯示效果差、還不能夠充分展示產品具體細節等問題，本文的研究將對以上的問題進行優化。

3 技術框架與方法

本文使用Flash CS6.0+Away3D 4.1.6 為開發平臺，設計出了虛擬產品展示軟件系統Avpdss3D。系統工作主要流程如圖1 所示，接下來，以計算機維護維修的智能虛擬實驗室為例，對Avpdss3D 的系統虛擬產品展示進行詳細描述。

3.1 Avpdss3D 系統的虛擬三維世界構建

計算機維護維修智能虛擬實驗室中的Avpdss3D產品展示系統，首先使用3DMAX 設計制作出CPU、內存、電源等產品的三維模型，然后給模型貼圖，輸出的模型格式為3DS 的文件格式。采用View3D 類創建視口，使用Loader3D 類導入三維模型，接著，使用Vector3D 類設置模型的三維坐標位置，使用URLReques 對象指定3D 模型文件的相對路徑，最后對模型在場景中的尺寸進行縮放。以CPU 三維模型為例，關鍵代碼如下：

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

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

剛導入虛擬三維世界的模型是不可見的，還需要通過Camera3D 類來創建view 攝像機，并設置view 攝像機的坐標和HoverController 觀察視角，該視角的特點是提供針對的觀察視點，并限制相機距離不會透視過觀察視點，最后通過addChild 函數把view 攝像機加入到虛擬三維世界中，關鍵代碼如下：

view.camera.z=-50;

view.camera.y=-5;

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

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

圖2 微表面理論

用f來表示特定方向的反射光和入射光的關系比例（即BRDF），定義如下：

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

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

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

由于該公式過于復雜，會增加系統的計算成本，在Away3D 中使用Fresnel 公式來優化模型，計算出光線的偏振和非偏振值，完整的Fresnel 公式如下：

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

SpecularBRDF 函數的關鍵參數代碼如下：

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

3.2 Avpdss3D 系統的交互事件處理機制

完成了模型在三維世界的構建后，還需要建立起交互機制與觀眾產生互動，首先是模型的自旋轉展示，在ENTER_FRAME 事件中，Avpdss3D 系統通過改變模型的rotationY 屬性，實現模型以Y軸為中心自旋轉。主要代碼如下：

_loader.rotationY+=1;

在MOUSE_CLICK 事件中，Avpdss3D 系統將檢測用戶的鼠標點擊的情況，當鼠標點擊后，系統將獲取鼠標當前的坐標，并停止模型的轉動。在MOUSE_DOWN 事件中，Avpdss3D 系統將檢測用戶鼠標按下的情況，當鼠標按下后，系統先停止模型旋轉，然后控制攝像機跟隨鼠標的移動方向，改變攝像機以Y軸旋轉的角度屬性panAngle 的值和以X軸旋轉的角度屬性tiltAngle 的值，主要代碼如下：

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

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

在MouseEvent.MOUSE_WHEEL 事件中，Avpdss3D系統將檢測用戶滾動鼠標滾輪的情況，當鼠標滾輪前后滾動時，系統通過改變攝像機的distance 屬性來設置相機距離觀察點的距離，以達到放大或縮小模型的作用，設置distance 大于0 可以避免透過物體，主要代碼如下：

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

設置好以上的交互事件處理機制后，用戶就可以通過鼠標來靈活地控制模型的旋轉和放大，能更好觀察產品的細節。最后，還要將Avpdss3D 系統發布到Web 端，使用Flash6.0 的發布功能，啟用HTML 包裝器，可以生成Web 端的放映文件，上傳云端服務器后，就可以使用Web 瀏覽器，來觀看Avpdss3D 系統的虛擬產品展示。

4 實驗與效果

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

圖3 CPU、內存等在三維世界中的質感表現

然后加入4 類交互事件處理，分別為：ENTER_FRAME 事件、Mouse.CLICK、Mouse.DOWN事件、Mouse.WHEEL 事件。完成后，Web 端人機交互展示如圖4 所示。從圖4 中可以觀察到，處于初始狀態的CPU 模型，以自旋轉的方式來展示產品的全方位外觀。當用戶向后滾動鼠標滾輪時，模型變小，向前滾動滾輪時模型變大，并可以通過拖動鼠標的方式來控制攝像機的角度，從而實現360°的全面觀察產品的細節。

圖4 Avpdss3D 人機交互系統演示

5 結論

本文以計算機維護維修智能虛擬實驗室為例，設計出了基于Away3D 的交互式虛擬產品展示系統Avpdss3D，通過微表面理論來實現虛擬模型的BRDF光線的雙向反射分布效果，讓模型材質和光線反射等效果更加真實。該系統Web 端的發布簡單，人機交互方面更智能化、便捷化只需要一個鼠標就可以控制模型的放大、縮小和旋轉到不同的角度，從而實現對產品細節的全面觀察。