基于X3DOM的工藝品外觀定制系統(tǒng)研究

肖振球，梁 嘉，羅予東

(1.嘉應(yīng)學(xué)院計算機學(xué)院，廣東梅州514015;2.嘉應(yīng)學(xué)院美術(shù)學(xué)院，廣東梅州514015)

0 引言

外觀作為事物的外在形象，給人以第一視覺印象.［1］工藝品是以外觀形象為主要價值體現(xiàn)的消費產(chǎn)品，所以外觀設(shè)計在工藝品生產(chǎn)中至關(guān)重要.現(xiàn)今，隨著客戶的需求多樣化、個性化和品味化以及仿真技術(shù)的迅速發(fā)展，產(chǎn)品交互定制研究已成為國內(nèi)外學(xué)術(shù)界研究及企業(yè)應(yīng)用的重點.客戶通過定制設(shè)計的手段參與產(chǎn)品的設(shè)計開發(fā)，生產(chǎn)企業(yè)可以為客戶量身定做個性化的產(chǎn)品和服務(wù).［2］產(chǎn)品外觀定制可增強客戶參與度和體驗感，是生產(chǎn)企業(yè)和客戶溝通的核心.目前有關(guān)產(chǎn)品在線定制的研究大多停留在比國外相對滯后的Cult3D、Java3D、Flash3D、Virtools等WEB3D技術(shù)的應(yīng)用，且多數(shù)集中在產(chǎn)品功能、性能和參數(shù)定制的層面上，對于產(chǎn)品外觀形態(tài)交互設(shè)計定制研究較少.［3］

X3DOM是由國際WEB3D組織公開的一個開源運行環(huán)境，以JavaScript與WebGL實現(xiàn).X3DOM的前身是X3D語言，它對X3D進行了一些修改和擴充，形成標(biāo)準(zhǔn)文件規(guī)范和運行時架構(gòu).與其他WEB3D技術(shù)相比，X3DOM技術(shù)新穎，優(yōu)勢突出，它無需插件，開放性強，支持逼真的3D圖形場景在瀏覽器中的呈現(xiàn).可以通過在標(biāo)準(zhǔn)的HTML5 DOM中加入X3D格式的XML元素，實現(xiàn)將X3D格式的3D模型嵌入到HTML頁面，并通過瀏覽器解析，實現(xiàn)三維圖形的繪制、渲染，實時為用戶提供交互場景.X3DOM作為一種新的國際前沿應(yīng)用，其在國內(nèi)的應(yīng)用和開發(fā)還比較薄弱.

基于X3DOM的工藝品外觀定制研究是針對山區(qū)工藝品生產(chǎn)企業(yè)進行的，目的是使山區(qū)的工藝產(chǎn)品既能保留山區(qū)傳統(tǒng)手工藝品的特色，又能滿足市場多變的需求，高效率、低成本地為用戶提供個性化服務(wù)，增加工藝產(chǎn)品技術(shù)含量和市場競爭力.

1 系統(tǒng)設(shè)計

1.1 設(shè)計思路

工藝品外觀交互定制設(shè)計首先考慮把產(chǎn)品看作元素的組合，劃分模塊反映元素，使其有序關(guān)聯(lián).其次，通過產(chǎn)品劃分來建立產(chǎn)品功能結(jié)構(gòu)，生成對應(yīng)的模塊實例庫以備定制系統(tǒng)使用.客戶可按模塊依次確定設(shè)計方案.最后，運用X3DOM技術(shù)，在線為客戶提供多種的3D虛擬工藝產(chǎn)品，向客戶全方位展示，使客戶通過WEB交互功能，遠在千里也能通過互聯(lián)網(wǎng)地對產(chǎn)品造型、材質(zhì)、色彩、紋理、裝飾圖案、LOGO等外觀方面自由設(shè)計［4］，從而提高產(chǎn)品設(shè)計的個性化和增強客戶的體驗感.

1.2 功能結(jié)構(gòu)

功能模塊主要按產(chǎn)品相關(guān)參數(shù)或者功能部件劃分，其中對產(chǎn)品外部覆蓋部件(外型)為造型模塊，含裝飾元素的部件為裝飾模塊，從視覺的角度可分為材質(zhì)、色彩、質(zhì)感、圖案等主要功能結(jié)構(gòu).該結(jié)構(gòu)中，客戶通過瀏覽器訪問定制系統(tǒng)進行外觀定制，外觀定制分為初級定制和高級定制，初級定制有兩種選擇:一是客戶可以在設(shè)計師預(yù)先設(shè)計好的3D工藝產(chǎn)品模型庫中選擇產(chǎn)品模型進行定制;二是半自助定制，即客戶可以把已供模型和自行設(shè)計中結(jié)合起來組合設(shè)計定制.高級定制是完全依照客戶需求的自定義設(shè)計定制.客戶進入定制平臺界面可以在定制界面中預(yù)設(shè)好對產(chǎn)品功能的要求，而后進入細節(jié)定制環(huán)節(jié)，各級定制都提供工藝品形態(tài)屬性配置選擇，主要設(shè)置有:造型定制、材質(zhì)定制、色彩定制、紋理定制、裝飾圖案定制(如圖1)［5］.單個模塊的方案工作流程圖(如圖2).

圖1 外觀設(shè)計定制功能模塊

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

2.1 關(guān)鍵技術(shù)實現(xiàn)

系統(tǒng)關(guān)鍵技術(shù)之一是，工藝品三維模型的生成可由3DS Max或X3DOM建立模型.X3DOM提供了對基本幾何模型的建模，但是對于一些復(fù)雜的模型，則需要使用3Dmax等工具建模.模型建立后，可通過VRML虛擬現(xiàn)實技術(shù)把模型轉(zhuǎn)換輸出為WRL，進一步轉(zhuǎn)換為X3D場景，同時把X3D文件格式存儲在后臺模型數(shù)據(jù)庫中等待指令調(diào)用，以方便用戶對模型進行貼圖、動畫、交互等設(shè)置.在使用X3DOM構(gòu)建三維場景中，系統(tǒng)引入支持實時渲染的x3dom.js語言包，并調(diào)用X3D中插補器、傳感器，結(jié)合JavaScript語言對Dom節(jié)點進行控制，以實現(xiàn)三維模型的造型、材質(zhì)、顏色、紋理、裝飾圖案等變換功能，用戶可在瀏覽器中操作相關(guān)屬性，以完成工藝品的在線定制.圖3為定制平臺技術(shù)路線圖.

系統(tǒng)關(guān)鍵技術(shù)之二是，三維造型節(jié)點樹的生成可用坐標(biāo)變換節(jié)點Transform創(chuàng)建若干個新坐標(biāo)系，并在新坐標(biāo)系上建立不同的節(jié)點，使新節(jié)點之間不重復(fù)疊加.坐標(biāo)轉(zhuǎn)換的語言描述如下:

新坐標(biāo)系node01與原坐標(biāo)系的距離是:＇－12.2044－1.1207－8.421＇，新坐標(biāo)系相對于原坐標(biāo)系旋轉(zhuǎn)角度為:＇1－23－3.324＇.

這里，通過傳感器節(jié)點MenuSensor，可形成交互菜單;利用傳感器節(jié)點TimeSensor設(shè)定DEF，可用于指示三維場景時空結(jié)點方位，加入對MenuSensor控制的Javacript腳本語言后，可創(chuàng)建右鍵菜單功能.從而實現(xiàn)對BsContact瀏覽器菜單的擴展.各傳感器節(jié)點組成交互功能的路由如圖4所示.

最后，系統(tǒng)調(diào)用了WebGL的3DAPI來實現(xiàn)實時渲染，在無需任何插件及輔助程序的情況下便可以實現(xiàn)工藝品外觀設(shè)計中的顏色、圖案、紋理等的定制.

2.2 運行模式

定制平臺是通過互聯(lián)網(wǎng)發(fā)布運行的，其運行模式核心采用瀏覽器/服務(wù)器(B/S)模式［6］.該模式的特點體現(xiàn)在客戶端(主機)的操作界面直觀靈活，以Internet Explorer或Firefox瀏覽器為客戶端，客戶在異地通過訪問互聯(lián)網(wǎng)就可實現(xiàn)滿意的工藝產(chǎn)品交互設(shè)計與定制.用戶通過安裝VRML(虛擬現(xiàn)實建模語言)相關(guān)插件，把X3D模型、JavaScript語句等嵌入HTML5標(biāo)準(zhǔn)的網(wǎng)頁，在瀏覽器里瀏覽并定制產(chǎn)品，以實現(xiàn)客戶與虛擬產(chǎn)品之間的交互.服務(wù)器端采用TOMCAT應(yīng)用服務(wù)器進行定制平臺網(wǎng)絡(luò)發(fā)布，以MYSQL作為平臺數(shù)據(jù)運行和維護終端數(shù)據(jù)庫，進行用戶及產(chǎn)品設(shè)計信息的云數(shù)據(jù)處理.如圖5所示.

圖5 運行模式

2.3 系統(tǒng)應(yīng)用

下面以某企業(yè)的圍龍屋造型的藤籃為例，實現(xiàn)工藝產(chǎn)品實時交互設(shè)計定制.用戶通過登錄工藝品的定制界面，利用鼠標(biāo)和鍵盤對工藝品的參數(shù)要求進行自主設(shè)計，即時實現(xiàn)對產(chǎn)品外觀的預(yù)瀏覽.工藝品外觀的定制界面設(shè)計了造型、材料、色彩、紋理和裝飾圖案的交互定制，還提供導(dǎo)入圖片功能，讓客戶在設(shè)計中可以運用本地圖片自主設(shè)計產(chǎn)品的樣式.主要的代碼如下:

本例中，將功能擴展與X3DOM場景相互聯(lián)系.客戶訪問時，首先通過HTML加載BsContact瀏覽器，使腳本嵌入瀏覽器中，執(zhí)行事件響應(yīng)操作時便可激活后臺的腳本，從而實現(xiàn)對場景的操作.效果如圖6所示.

3 結(jié)語

X3DOM與其它的三維技術(shù)相比，采用XML及JavaScript編碼具有語法相對簡單、三維場景建立方便，功能強大，便于網(wǎng)上發(fā)布且實時渲染瀏覽速度快等優(yōu)點.本文充分結(jié)合虛擬現(xiàn)實語言，整合符合互聯(lián)網(wǎng)HTML5規(guī)范的技術(shù)應(yīng)用，并提出了基于X3DOM的關(guān)鍵技術(shù)與運行模式，并在企業(yè)工程實踐中得以應(yīng)用.面向X3DOM的三維交互設(shè)計與定制方面的研究應(yīng)用前景寬廣，應(yīng)通過不斷對虛擬現(xiàn)實技術(shù)的深入研究，在線設(shè)計出更復(fù)雜更逼真三維模型，以滿足企業(yè)和客戶需求.

［1］張珣，干靜，蔣春林.面向產(chǎn)品外觀的定制設(shè)計方法研究［J］.機械設(shè)計與制造，2010，3(3):252－254.

［2］程振波，肖剛.基于虛擬技術(shù)的產(chǎn)品定制設(shè)計平臺研究［J］.機械科學(xué)與技術(shù)，2003(3):389－392.

［3］王偉東，余華強，趙法信.基于Web的3D虛擬人智能導(dǎo)診系統(tǒng)設(shè)計［J］.湛江師范學(xué)院學(xué)報，2012，33(6):123－126.

［4］郭磊，鞠盈盈，安靜.基于Cult3D的陶瓷產(chǎn)品網(wǎng)絡(luò)定制系統(tǒng)關(guān)鍵技術(shù)［J］.中國陶瓷，2008，44(7):40－42.

［5］李小麗，李曉玲，薛艷敏.交互式虛擬包裝定制系統(tǒng)的關(guān)鍵技術(shù)研究［J］.包裝工程，2005(4):106－107.

［6］楊凌云，郭勇.基于PHP的包裝企業(yè)門戶網(wǎng)站設(shè)計與實現(xiàn)［J］.包裝工程，2013，34(5):111－114.

［7］web3D Consortium［EB/OL］.http://www.web3d.org/realtime－3d/(accessed on June 23，2011).

［8］ANDREAS ANYURU.WebGL高級編程——開發(fā)Web 3D圖形［M］.吳文國，譯.北京:清華大學(xué)出版社，2013.

［9］BEHR J，JUNG Y.A scalable architecture for the HTML5/ X3D integration model X3DOM［J］.Web3D＇10 Proceedings of the 15th International Conference on Web 3D Technology ACM New York，NY，USAc2010，Pages 185－194.

［10］ZHANG JIANPING，YANG UHUI.Design and Implementation of Virtual Museum base on Wed3D［J］.Transctions on Edutainmene III.2010，3(1):154－165.