基于XNA 的3D 室內(nèi)裝修軟件的設(shè)計

王靈香　苗新亮

摘要：在進行室內(nèi)裝修時，業(yè)主一般找專業(yè)的裝修設(shè)計公司使用3D MAX等專業(yè)軟件進行設(shè)計，或者自行使用室內(nèi)裝潢大師等商業(yè)軟件進行設(shè)計。前者過于專業(yè)，一般人很難操作；后者則無法同步渲染輸出，設(shè)計完后再渲染輸出3D效果常會遇到失敗。提出了一種3D室內(nèi)裝修設(shè)計軟件，讓操作者能夠進行平面操作的同時，自動渲染輸出3D效果，達到所見即所得的觀感。平面操作采用SVG為基礎(chǔ)實現(xiàn)，3D效果展示采用XNA實現(xiàn)。

關(guān)鍵詞：3D；室內(nèi)裝修；SVG；XNA

中圖分類號 TP399 文獻標識碼 A 文章編號：1009-3044（2014）10-2268-02

Abstract： During interior decoration， the owners often use complicated 3D MAX or limited commercial software in order to see the effect. Presents a 3D interior design application that allows the operator to perform the operation on two-dimensional plane and automatically render output 3D effect， to WYSIWYG perception. The operation on two-dimensional plane using SVG， 3D effects show using XNA.

Key words： 3D； Interior design； SVG； XNA

目前，室內(nèi)環(huán)境的裝修與布置是一項浩大的工程，即使業(yè)主對最終的裝修效果不滿意也不容易從頭再來一遍，畢竟時間成本與經(jīng)濟成本都是很高的。在現(xiàn)實的裝修過程中，有一部分業(yè)主并不找專業(yè)的裝修公司，而是找普通的裝修隊來實現(xiàn)自己對于房間效果的想像，可是實際裝修出來的效果未必與業(yè)主最初的想像是一致的。一旦最終效果達不到業(yè)主最初的預(yù)期，業(yè)主要么只能忍受不滿意的家裝效果，要么返工重裝，無論哪一種選擇都將會浪費大量的時間與金錢。在專業(yè)的設(shè)計公司里，室內(nèi)裝修的效果圖一般用3D MAX、LightScape等專業(yè)軟件進行設(shè)計制作。雖然這些軟件做出來的效果圖非常精確，效果也很好，但對于一般家裝來說，業(yè)主只是想看看簡單的效果已，甚至只是想布置一下家具的擺放位置，使用這些軟件運用起來就太過麻煩了。

當前市場上，也有不少3D室內(nèi)裝修設(shè)計軟件，比如室內(nèi)裝潢大師、我家我設(shè)計、首席建筑師、e家家居設(shè)計軟件、創(chuàng)想裝修設(shè)計軟件等。這些軟件要么需要付費使用，要么需要聯(lián)網(wǎng)使用，有的甚至就直接通過瀏覽器訪問和使用。而且多數(shù)的軟件，都采用了二維操作，再渲染輸出3D效果的設(shè)計方案，有時候一個較為復(fù)雜的房間設(shè)計完成后，常常在渲染輸出3D效果時等待很長時間，甚至有可能渲染輸出失敗。

提出一款3D室內(nèi)裝修設(shè)計軟件，以SVG可縮放矢量圖形為基礎(chǔ)進行二維空間的操作，以微軟的XNA技術(shù)進行3D效果的同步渲染展示，實現(xiàn)所見即所得的即時觀感。同時，也提供室內(nèi)漫游的功能，可以滿足業(yè)主提前感受到未來的裝飾效果。

1 設(shè)計目標

3D室內(nèi)裝修設(shè)計軟件能夠：1）依據(jù)用戶需要自行繪制房間戶型圖，同步渲染輸出3D房間效果；2）能夠讓用戶自由擺放家具飾品，同步渲染輸出3D房間效果；3）能在3D房間中漫游查看擺放整體效果。

當然3D室內(nèi)裝修設(shè)計軟件也提供諸如：導(dǎo)入3D家具模型，導(dǎo)入地面和墻面紋理，新建、打開、保存房間模型等。

2 設(shè)計原理

在3D室內(nèi)裝修設(shè)計軟件中，將設(shè)計一個二維矢量繪制區(qū)和一個三維顯示區(qū)。二維矢量區(qū)，用于繪制戶型圖、擺放家具，是房間布局設(shè)計的主要操作區(qū)，并利用SVG可縮放矢量圖形進行操作繪制。三維顯示區(qū)，用于以三維的形式同步顯示二維矢量區(qū)的操作結(jié)果。

二維矢量繪制區(qū)由繪制區(qū)、墻體工具條、家具模型樹組成。繪制區(qū)用于顯示房間的平面圖，可以對其中的各個SVG對象進行簡單操作；墻體工具條含有常規(guī)直線、曲線、折線等常規(guī)工具選擇，可用來操作對象的SVG對象在繪制區(qū)繪制墻體；家具模型樹按照家具的功能進行分類顯示，可以直接拖動家具到繪制區(qū)，并以SVG圖形對象的形式顯示。在保存房間設(shè)計時，繪制區(qū)中的每個SVG對象將按照SVG標準進行保存。再次打開房間時，將重新加載并創(chuàng)建SVG對象顯示。同時，繪制區(qū)中的每個SVG對象將會同步渲染輸出的三維顯示區(qū)。

三維顯示區(qū)是一個獨立的XNA渲染環(huán)境，不具備對每個家具的操作功能。它只是被動顯示二維矢量繪制區(qū)的繪制結(jié)果，為操作者提供一個所見即所得的三維虛擬場景。同時，三維顯示區(qū)也提供可以選擇查看模式的菜單項，如鳥瞰模式還是虛擬漫游模式的選擇。

2.1 3D效果同步渲染輸出

3D室內(nèi)裝修設(shè)計軟件使用了觀察者模式，使得操作者在二維矢量繪制區(qū)進行操作后，其三維效果同步渲染顯示在三維顯示區(qū)。觀察者模式是GoF的《設(shè)計模式》中提到的23種基本設(shè)計模式之一，其意圖就是定義對象間的一種一對多的依賴關(guān)系，當一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都得到通知并被自動更新[1]。微軟的.NET框架中提供了一個委托機制，3D室內(nèi)裝修設(shè)計軟件也利用了基于事件的委托機制實現(xiàn)觀察者模式[2]。

將二維矢量繪制區(qū)區(qū)SvgArtiste和三維顯示區(qū)Room3D組織起來的工作，由主窗口RoomDesign負責。由于3D室內(nèi)裝修設(shè)計軟件是一個專用軟件，不會涉及到較多的變化，因此，基于避免過度設(shè)計的原則，這里沒有采用《設(shè)計模式》中的標準設(shè)計，而進行了簡化處理，同時充分利用了微軟的.NET框架中的委托機制，如圖1所示。

SvgObjectChangedEventArgs是一個自定義事件參數(shù)，主要用于指明具體的變化對象。Handler是一個自定義多播委托，所有符合該簽名的方法都可以注冊使用[3]。SvgArtiste是二維矢量繪制區(qū)類，它定義了一個Handler類型的多播委托NotifyObservers，也定義了一個Notify方法。Room3D是三維顯示區(qū)，定義了一個遵循Handler定義的Update方法，接收二維數(shù)量區(qū)的矢量物體變化。RoomDesign是主窗口類，它定義了一個RegObserver方法，用于將Room3D中的Update方法注冊到SvgArtiste的NotifyObservers多播委托中，訂閱SvgArtiste中發(fā)布的信息。

當操作人員操作SvgArtiste中的矢量物體時，如拖入一個家具，SvgArtiste將由Notify方法通過NotifyObservers將變化的信息ChangedObject發(fā)布給訂閱者Room3D。Room3D拿到ChangedObject后，就可從中獲取到三維顯示區(qū)中對應(yīng)的3D物體，并根據(jù)相應(yīng)參數(shù)做出相應(yīng)的變化。

對于ChangedObject，則定義了唯一標識、名稱、二維坐標位置、懸空高度、3D模型文件、二維靜態(tài)圖等。唯一標識決定二維矢量繪制區(qū)和三維顯示區(qū)操作的物體。二維坐標位置轉(zhuǎn)換成三維空間位置，使得操作者在二維矢量繪制區(qū)和三維顯示區(qū)能夠同步挪動、旋轉(zhuǎn)家具。懸空高度，表明了該家具在三維空間中離開地面的高度。3D模型文件，是通過3D MAX軟件設(shè)計輸出的3D模型文件，并經(jīng)由XNA編譯形成的xnb文件，它指明了在三維顯示區(qū)應(yīng)該加載哪個模型文件表示這個家具，當然對于墻體，則直接創(chuàng)建遵循一般墻體高度和厚度的3D長方體。二維靜態(tài)圖是該家具的平面圖形，用于在二維矢量繪制區(qū)的平面展示。

2.2 XNA窗口化

XNA游戲框架提供了一種快速、易于使用和輕便的方式來托管用戶的游戲。它會自動創(chuàng)建一個窗口，通過重寫一些方法，游戲可以在其中運行、初始化硬件、提供簡單的更新和繪制[4]。但這都必須基于直接使用XNA框架的Game類來創(chuàng)建游戲環(huán)境，與常用的Windows用戶操作環(huán)境不同，而3D室內(nèi)裝修設(shè)計軟件要求將三維場景渲染輸出到Windows的窗口中。

幸運的是，XNA的核心框架可以直接利用，并且在XNA官網(wǎng)上也提供了一個WinForms Graphics Device示例。它的原理是編寫一個從System.Windows.Forms.Control繼承的控件，編寫繪制代碼，然后為Winform自定義控件提供XNA框架的功能，并使用XNA框架中的ContentManager來加載和處理數(shù)據(jù)[4]。

2.3 3D房間漫游

XNA提供了一個3D攝像機，通過設(shè)置攝像機的高度，可以實現(xiàn)鳥瞰和平視效果，如攝像機的高度設(shè)置為5米可以實現(xiàn)鳥瞰效果，設(shè)置為一個成人的高度1.7米可以實現(xiàn)平視效果。再增加對鼠標或鍵盤的響應(yīng)處理，實現(xiàn)前移、旋轉(zhuǎn)、仰視、俯視等效果，就可以實現(xiàn)鳥瞰模式漫游和虛擬參觀漫游的效果。

XNA的3D攝像機由視圖矩陣和投影矩陣這兩個Matrix對象構(gòu)成。視圖矩陣用于實現(xiàn)世界坐標向攝像機坐標的轉(zhuǎn)換，它決定了攝像機在3D世界中的位置、它的指向、以及它自己的擺放方向。投影矩陣用于實現(xiàn)攝像機坐標系向屏幕坐標系的轉(zhuǎn)換，它決定了如何在屏幕上觀察3D世界[5]。通過Matrix類的靜態(tài)方法CreateLookAt可以創(chuàng)建視圖矩陣，其中傳遞的參數(shù)就包括：cameraPosition攝像機位置坐標、cameraTarget攝像機指向的目標位置坐標、cameraUpVector代表哪個方向是“上”的Vector3對象。

通過移動攝像機的位置實現(xiàn)虛擬漫游時，則響應(yīng)鍵盤或者鼠標事件，設(shè)定好速度speed后，然后不斷調(diào)整cameraPosition、cameraDirection即可。其中cameraDirection是攝像機的朝向，是一個相對方向，它等于 cameraTarget 減 cameraPosition后的Normalize結(jié)果，是一個長度為1的向量[5]。如：向前移動時，只需要重新計算cameraDirection乘以speed得到新的cameraPosition；俯視時，相當于對攝像機進行Pitch旋轉(zhuǎn)[5]。

3 結(jié)束語

3D室內(nèi)裝修設(shè)計軟件利用了.NET的委托技術(shù)，采用觀察者模式，將操作人員對房間的二維矢量繪制同步輸出到三維顯示環(huán)境中，實現(xiàn)了所見即所得的三維房間布置效果。其中三維效果的展示利用了微軟的XNA核心框架，將三維世界窗口化展示。

利用XNA中的3D攝像機，3D室內(nèi)裝修設(shè)計軟件提供了鳥瞰模式的漫游和虛擬參觀模式的漫游兩種漫游效果，為操作者進行設(shè)計和參觀設(shè)計效果提供了良好的體驗?zāi)芰Α?/p>

參考文獻：

[1] Erich Gamma， Richard Helm， Ralph Johnson，等. 設(shè)計模式[M].北京：機械工業(yè)出版社，2007：194.

[2] 吳清壽.基于事件機制的觀察者模式及應(yīng)用[J]. 重慶理工大學學報：自然科學，2012，26（9）：100-104.

[3] Christian Nagel，Bill Evjen，Jay Glynn. C#高級編程（第四版）[M].北京：清華大學出版社，2006：153-173.

[4] MSDN. WinForms Series 1： Graphics Device Code Sample[EB/OL]. [2008-01-10]. http：//xbox.create.msdn.com/en-US/education/catalog/sample/winforms_series_1.

[5] Aaron Reed/XNA游戲編程（中文版）[M].北京：清華大學出版社，2011：167-225.