資訊傳播工程學系

專題研究(總審)報告

虛擬傢俱擺設設計系統

指導教授：葉正聖 老師

專研學生：尤淑蓉 黃翎菱 陳静甫

中 華 民 國 九 十 七 年 十 二 月

i

虛擬傢俱擺設設計系統

摘要

目前坊間已經有許多關於室內設計的軟體可供室內設計師使用，但多數軟體的功能都以專業性取向，較適合學習過相關專業的人使用。本研究希望將室內設計軟體加入更多的互動性，利用擴增實境的技術，透過攝影機將設計過的紙片與虛擬物件做結合，一般使用者只要移動紙片，就可以立即透過攝影機在畫面上看到虛擬傢俱移動擺設的狀況。

我們使用 BCB 建立一個系統操控介面，並且使用 ARToolkit 的程式，讓攝影機讀取紙片，結合 3D 物件，把讀取到的 3D 畫面呈現在操控介面。希望能在系統中加入更多互動元素，讓使用者有更多和系統互動的機會。

關鍵詞：虛擬實境、擴增實境、傢俱擺設設計、人機互動

ii

目錄摘要.................................................................................................................. i

目錄................................................................................................................. ii

表目錄............................................................................................................ iv

圖目錄..............................................................................................................v

第一章 緒論....................................................................................................1

第一節 研究動機.....................................................................................2

第二節 研究目的.....................................................................................3

第二章 文獻探討............................................................................................4

第一節 擴增實境定義.............................................................................4

第二節 擴增實境初探.............................................................................5

第三節 擴增實境顯示方式.....................................................................6

第四節 軟體比較.....................................................................................8

第三章 研究工具..........................................................................................11

第一節 Borland C++ Builder 6..............................................................11

第二節 ARToolkit ..................................................................................12

第四章 系統實作..........................................................................................13

第一節 系統介紹...................................................................................13

第二節 系統架構...................................................................................16

第三節 硬體架設...................................................................................18

第四節 建立場景...................................................................................23

第五節 選擇傢俱...................................................................................28

第六節 ARToolkit 程式簡介 ................................................................32

第七節 Borland C++ Builder 結合 ARToolkit......................................36

第八節 虛擬傢俱設定...........................................................................39

iii

第五章 預期目標..........................................................................................46

參考文獻........................................................................................................52

參考網站........................................................................................................52

附錄一 風水小幫手......................................................................................53

附錄二 第一人稱視角的架構概念..............................................................55

附錄三 相關軟體試用心得..........................................................................57

第一節 空間魔法師專業版 6.1.............................................................57

第二節 IKEA 宜家家居「臥室設計軟體」 ........................................61

第三節 3D Home Architect ...................................................................64

附錄四 參展記錄..........................................................................................70

第一節 銘傳大學資訊學院五系聯合資訊展.......................................70

第二節 互動設計論壇...........................................................................71

第三節 專題組員心得...........................................................................74

iv

表目錄

表 4- 1 工作分配表 ..............................................................................17

v

圖目錄

圖 2- 1 擴增實境在現實與虛擬中的位置 .............................................4

圖 2- 2 使用者配戴的示意圖 .................................................................6

圖 2- 3 虛擬的線條地板浮現在實際的空間中 .....................................6

圖 2- 4 美國海軍訓練跳傘用機器 .........................................................7

圖 2- 5 空間魔法師第一人稱視角 1 ......................................................8

圖 2- 6 空間魔法師 試用完成圖 ...........................................................8

圖 2- 7 宜家家居軟體 3D 檢視圖 .........................................................9

圖 2- 8 軟體試用 3D 視角 ....................................................................10

圖 4- 1 系統開啟畫面 ..........................................................................13

圖 4- 2 系統 選擇傢俱 1 .....................................................................14

圖 4- 3 系統 選擇傢俱 2 .....................................................................15

圖 4- 4 系統架構圖 ..............................................................................16

圖 4- 5 硬體架設 木板 ........................................................................18

圖 4- 6 硬體架設 攝影機 ....................................................................19

圖 4- 7 硬體架設 紙片的方向性 ........................................................20

圖 4- 8 硬體架設 紙片的辨識性 ........................................................21

圖 4- 9 硬體架設 通過測試的紙片 ....................................................22

圖 4- 10 建立場景 1 .............................................................................23

圖 4- 11 建立場景 2..............................................................................24

圖 4- 12 虛擬場景的 Bug.....................................................................25

圖 4- 13 紙片拍攝角度的比較 ............................................................25

圖 4- 14 拍攝角度模擬圖 ....................................................................26

vi

圖 4- 15 系統模擬畫面 ........................................................................27

圖 4- 16 系統模擬畫面(去掉場景)......................................................27

圖 4- 17 選擇傢俱 一張以上的紙片 ..................................................29

圖 4- 18 選擇傢俱 利用單一紙片進行 ..............................................29

圖 4- 19 讀取 Vrml 檔的程式碼 ..........................................................30

圖 4- 20 開啟攝影機的執行畫面 ........................................................33

圖 4- 21 虛擬傢俱的設定 檢視傢俱 ..................................................39

圖 4- 22 虛擬傢俱的設定 存檔步驟 1 ...............................................40

圖 4- 23 虛擬傢俱的設定 存檔步驟 2 ...............................................40

圖 4- 24 用 ARToolkit 程式抓影像 ....................................................41

圖 4- 25 修改感應紙片的程式碼 ........................................................42

圖 4- 26 傢俱 Vrml 檔的內部程式碼 ..................................................43

圖 4- 27 紙片測試 ................................................................................43

圖 4- 28 虛擬物件顏色的修改 ............................................................44

圖 4- 29 虛擬物件內部程式碼 ............................................................44

圖 4- 30 用 MAYA 繪製 3D 物件 ........................................................45

圖 4- 31 檢視虛擬場景 ........................................................................45

圖 5- 1 視角轉換示意圖 .......................................................................46

圖 5- 2 燈光效果移動示意圖 ...............................................................47

圖 5- 3 風水小幫手示意圖 ...................................................................48

圖 5- 4 虛擬人物示意圖 .......................................................................49

圖 附錄- 1 風水小幫手 ........................................................................54

圖 附錄- 2 第一人稱視角 1 .................................................................56

圖 附錄- 3 第一人稱視角 2 .................................................................56

vii

圖 附錄- 4 空間魔法師專業版 6.1 執行畫面 .....................................57

圖 附錄- 5 空間魔法師第一人稱視角 1 .............................................58

圖 附錄- 6 空間魔法師第一人稱視角 2 .............................................58

圖 附錄- 7 空間魔法師 開新場景 ......................................................59

圖 附錄- 8 空間魔法師 選擇傢俱 ......................................................59

圖 附錄- 9 空間魔法師 傢俱的詳細資料 ..........................................60

圖 附錄- 10 空間魔法師 試用完成圖 ................................................60

圖 附錄- 11 IKEA 宜家家居 房間設計...............................................61

圖 附錄- 12 IKEA 宜家家居 配置傢俱...............................................62

圖 附錄- 13 IKEA 宜家家居 3D 檢視 .................................................62

圖 附錄- 14 IKEA 宜家家居 項目清單...............................................63

圖 附錄- 15 3D Home Architect 教學影片 ..........................................64

圖 附錄- 16 3D Home Architect 教學影片的選擇..............................65

圖 附錄- 17 3D Home Architect 教學影片畫面..................................66

圖 附錄- 18 3D Home Architect 執行介面 ..........................................66

圖 附錄- 19 3D Home Architect 適用的草圖 ......................................67

圖 附錄- 20 3D Home Architect 虛擬 3D 視角 ...................................68

圖 附錄- 21 3D Home Architect 傢俱數值的修改..............................69

圖 附錄- 22 五系聯合資訊展的海報 ..................................................70

圖 附錄- 23 五系聯合資訊展組員與指導教授合影 ..........................70

圖 附錄- 24 互動設計論壇展場海報 ..................................................71

圖 附錄- 25 互動設計論壇服務人員證 ..............................................71

圖 附錄- 26 互動設計論壇參觀同學正在試玩系統 ..........................72

圖 附錄- 27 參展設備全景 ..................................................................72

圖 附錄- 28 展場中的大螢幕 ..............................................................73

viii

圖 附錄- 29 互動設計論壇組員與指導教授合影 ..............................73

1

第一章 緒論

現代人越來越講究生活品味，對於吃、住甚至服飾都有越來越高的

要求。以前的生活，吃只要求吃飽，住也只求遮風避雨，但現在的生活

狀況好多了，飲食上不僅要講求色、香、味，為了健康，均衡的營養也

是馬虎不得，更不用說是每天住的地方。要怎麼擺設才能住的舒服，肯

定也是個需要讓人費盡心思，苦惱許久的問題。

「家」是每個人生命中最大的依靠，它不僅僅是一個供人們居住的

軀殼，讓我們每天回家，都可以得到放鬆，更是我們日常生活中，和家

人相處最主要的空間，這時房子內的擺設與空間感就顯得極為重要。

因此，我們希望可以提供一套傢俱設計的軟體，可以使用紙片作對

應的功能，希望可以讓使用者設計起來時更為順手且靈活，以下有兩個

原因讓我們打算使用這樣的方式。

第一是即時性：希望能提供多人即時互動。一般在介紹傢俱擺放的

設計時，通常來參觀的人不只一個人，在介紹及擺放傢俱的同時，參觀

者一定也會有他們自己的意見，但對於一般的傢俱設計軟體都只能做到

一次移動一個物件（使用滑鼠）。我們提供的是可以同一時間移動多個

物件（移動紙片），更可以讓大家都參與到討論，不但讓大家更有參與

感，討論的效率也可以有所提升。

第二是趣味性:希望能既是工具，也是玩具。很多東西都強調功能

性多，像手機就是個很好的例子，可以聽歌、照相、查單字等。因為人

們不可能天天都在移動傢俱位置，偶而心血來潮時才會做個傢俱換位設

計，所以這表示這套軟體的使用率很低，為了提高它的使用率，試著也

將它變成一個玩具。例如家裡有年幼的孩子時，系統也可以變成是一個

玩具，年紀很小的小朋友可能還不太會使用電腦，對於使用紙片移動傢

2

俱的方式，比使用滑鼠操控有趣多了，而且紙片也不會摔壞，更可以在

小朋友還小時就建立他們的空間概念以及空間設計的感覺，相信這對小

朋友們來講也是一個很好的玩具。

第一節 研究動機

由於現代人十分注重生活空間的規劃，更有不少人喜歡自己動手設

計自己的住家擺設，藉由虛擬傢俱，模擬傢俱實際擺設的空間感，讓使

用者可以用輕鬆簡單的方式去設計規劃出自己想要的空間擺設，而不必

在尚未確定傢俱的擺設位置時，不停的搬移實體傢俱，省時又省力。以

下有兩位組員親身經歷的小故事，促使我們想做此研究。

陳靜甫說：記得大二跟室友一起去找房子時，看了十多間房子，印

象最深刻的一間叫「銘傳老闆」，房子是挑高的樓中樓設計，那時雖然

只有看到他們所提供的小模型房子，但仍令我印象深刻，我與室友都莫

名對小模型的房子很感興趣。現在也有一種叫做袖珍藝術，似乎人們都

對這樣小東西蠻感興趣的。而我們提供的紙片移動，看似不過是在紙片

上做移動，但通常人們在移動時不可能一直看紙片，一定是盯著螢幕

看，螢幕上顯示的是傢俱，這也間接的讓使用者真實地感覺到他們手中

移動的是小傢俱，若我們再將螢幕中的場景做的很漂亮，相信任何人都

可以使用的愛不釋手。

黃翎菱說：每個人內心深處最重要的地方，即是家。在我最簡單的

夢想裡，就是能夠擁有自己的窩，根據自己想要的風格，讓朋友們一到

我家就能感受到我的品味。逛 IKEA 時，面對各式的傢俱，讓我構築了

無限的家的夢想，裡面呈現好的套房或是臥室的展示間，再再讓我興起

了想要有個獨特、溫馨、專屬於我的家。也因此，想要建立一套軟體，

可以將各種傢俱拖曳到視窗介面裡，依房間的格局與視角，做３Ｄ的畫

3

面的預覽，讓我對於房間擺設的天馬行空的想法，可以不斷在這套軟體

裡實現。我相信很多都會城市裡的人們都會渴望有這樣的東西。

第二節 研究目的

坊間已經有許多傢俱擺設的相關軟體，甚至提供平面設計圖及 3D

立體檢視介面相互對照，非常適合提供給專業的室內設計相關人才使

用。

但是相對的，一般民眾對室內設計的概念並不是相當熟悉，光以傳

統平面圖以及單向式的 3D 立體檢視圖很難具體描述並傳達內心的構想

給設計師了解，設計師與客戶之間的溝通就顯的困難許多。

本系統的設計，是以即時互動作為主軸，透過擴增實境的技術，即

時模擬呈現出傢俱在移動修改後的狀況，讓使用者透過模擬畫面及紙卡

的移動做各式各樣的嘗試與修改，並且可以立即感受到效果，即時性的

互動將是本系統不同於其他相關軟體的一大特色，不用學習專業知識也

能輕鬆設計出自己喜歡的擺設空間，可以提供房屋仲介或室內設計師作

為裝潢規劃時與客戶之間的溝通橋樑。

4

第二章 文獻探討

第一節 擴增實境定義

擴增實境(AR, Augmented Reality)，是虛擬實境（VR , Virtual Reality）

的延伸。簡單來說，當人處在真實的世界當中，虛擬實境它所呈現在我

們面前的，包括場景與物件都是虛擬的，更準確來說，擴增實境的技術

是利用電腦演算法將虛擬的物件直接繪製到真實場景裡。我們在其它研

究文獻中發現,擴增實境有三項明顯的屬性：

(1) 它提供是能夠結合真實環境與虛擬物件。

(2) 它能即時性的互動 。

(3) 它是呈現在 3D 的空間裡。

圖 2- 1擴增實境在現實與虛擬中的位置

5

第二節 擴增實境初探

擴增實境的核心概念在於虛擬與實際環境的互動，這種互動使得人

們感到新奇與有樂趣，不再是單調的人機互動，透過擴增實境，可以把

人們想像中的虛擬物件與真實的環境結合。目前擴增實境的技術多著墨

於實體物件的變化如何加入虛擬影像的因素。例如當我們從電影情節

中，看到演員帶上手套就能控制虛擬螢幕的裝置，這種高科技的東西，

令人讚嘆的技術，其表現正是虛擬與實際互動的呈現。目前擴增實境

（Augmented Reality, AR）已經漸漸成為喜愛他的創作者把玩虛擬與實

體互動的重要技術介面。

6

第三節 擴增實境顯示方式

Milgram al etc.在 1994 年的研究中，定義了擴增實境有以下兩種的

顯示方式：

(1)(See-through)顯示方式：

這種方式需要使用者戴上一個頭戴式的顯示裝置，它能直接看到外

界真實的情境，同時把繪製的虛擬物體一併出現在看到的視野中，能產

生最大的擴增實境的效果。頭戴型顯示器擁有體積小、能搭配頭戴式追

蹤器，追蹤使用者頭部目前角度等優點。

圖 2- 2使用者配戴的示意圖

圖 2- 3虛擬的線條地板浮現在實際的空間中

7

(2)(Monitor based)顯示方式

使用者戴上一個頭戴式小型的攝影機，電腦做過運算，會將拍攝到

的資料畫面與已經合成的電腦圖像彼此做結合，結合後的畫面會呈現在

一個不透明的頭戴型顯示器或螢幕上，呈現的感覺就如同真實看到的。

這兩種方式都是初期擴增實境典型的顯示方式。在我們專題研究部份，

更運用到網路攝影機，讓擴增實境的技術融入到我們息息相關的生活

中。

圖 2- 4美國海軍訓練跳傘用機器

8

第四節 軟體比較

一.空間魔法師專業版 6.1

我們使用空間魔法師專業版 6.1 的試用版。一進入他的介面，就有

提供三個範例作品。當點選其中一個範例，右邊視窗是 2D 平面圖，可

讓使用者在設計傢俱位置時，更為方便。從下圖中可看出，使用空間魔

法師設計出來的專案性，美工層面的技術相當精細，像是地板的反射和

燈光。圖中紅色位置是左圖的第一人稱視角，隨著 2D 圖上紅色位置的

移動，第一人稱視角也跟著即時性地變化，可按鍵盤上的方向鍵來進行

控制。在選取傢俱時，下方會有傢俱自動做 360 度的旋轉，供使用者觀

看。

圖 2- 5空間魔法師第一人稱視角 1

圖 2- 6空間魔法師 試用完成圖

9

二.IKEA 宜家家居「臥室設計軟體」

IKEA 基本上是讓他的產品做置入性行銷，讓使用者試用完房間的

配置，可以順便考量現成 IKEA 提供的傢俱，根據自身預算做選擇。軟

體麻雀雖小，五臟俱全的，而且操作簡單易懂。

這個軟體對於設計的房間大小和形狀，提供相當多且可以變化的方

式，可以讓使用者輕鬆的規劃出房間的大小和形狀，在視窗列中可以有

兩種選擇，分別可選擇在 3D 下執行編輯物件，或可選擇在 2D 平面圖下

執行，使用起來雖然沒有空間魔法師專業版 6那樣的專業，但是蠻流暢

的，簡單且很快就可以規劃出一個自己想要的房間，最後還有提供總

價，讓使用者考量是否符合自身的預算。也算是還不錯的室內設計軟體。

圖 2- 7宜家家居軟體 3D 檢視圖

10

三.3D Home Architect Home Design Deluxe 6

3D Home Architect Home Design Deluxe 6 是定位給室內設計裝潢師

使用，根據每個傢俱 model 作更細緻的改變與個人要求。甚至在戶外的

草皮及植物都可以按照個人喜好做設定。格局方面有一樓二樓的房間佈

置。屋角也能作細緻的調整，以期符合使用者需求。

圖 2- 8軟體試用 3D 視角

11

第三章 研究工具

第一節 Borland C++ Builder 6

本次程式介面開發工具選用 C++ Builder 6，理由是因為這套軟體對

於開發 Windows 軟體實用又簡單，易於上手，方便我們在短時間內就能

建構出我們想要的介面，只要著重在程式的流程，縮短了程式設計的時

間。軟體本身擁有的視覺化元件便是其有力的工具，我們只要找尋功能

符合我們要求的元件即可。例如設計一個按鈕圖案，如果需要執行什麼

動作，只要把程式碼放到相對應的事件就可以。

基本觀念介紹：每一個物件通常包含了屬性（property）、方法

（method）與事件（event），物件與物件之間藉由方法傳遞物件的訊息。

「屬性」描述的是這個物件的外觀，例如，表單的屬性包括表單的大小、

前景色、背景色、標題等，每個物件屬性都有其預設值，都可以在程式

設計階段改變其值，物件便可以按照你的設定表現出來。「方法」是指

當物件完成某件事或某項目標，所採取的處理方式。例如表單物件中提

供了清圖、列印、畫線、等功能，這些功能通稱為「方法」。「事件」是

指只要在某個有作用的物件上按下鍵盤、移動滑鼠或按滑鼠一下都會產

生一種反應，基本上我們的程式便是靠一個一個的事件堆砌而成的，只

在這個部份才需要寫程式碼。

有了這些視覺化元件的幫助，我們的程式才能以最有效率的速度完

成。

12

第二節 ARToolkit

ARToolkit 是一種擴增實境的應用軟體程式，可以把許多虛擬影像覆

蓋在真實的世界裡。舉例來說，當一個影像在 3D 虛擬環境裡出現，並

呈現在真實的卡片上。當使用者移動紙卡時，虛擬物件跟著移動，並且

依然緊密在真實物體上呈現。

ARToolkit 的追縱影像能夠即時的計算真實的網路攝影機的位置與

有關聯的紙片(markers)。因為這項技術使得增廣實境應用程式能夠更簡

易廣泛的發展。

ARToolkit 的特色：

1.單一網路攝影機/影像追縱。

2.影像追縱的程式碼僅需要能夠辨識的黑色框。

3.能夠有效使用各種方型的 marker pattens。

4.簡易的網路攝影機的程式碼。

5.能快速的執行即時的 AR 應用程式。

6.適用於 SGI IRIX，Linux，MacOS and windows OS 系統。

7.分享完整的原始碼。

ARToolkit 平臺包含輸入的來源，支援的格式，網路攝影機的追蹤，

GUI 介面。支援 3D VRML 檔案格式，簡單 API(in c)，其他程式語言支

援(Java，Matlab)，在無商業性的 GPL 授權下，提供開放性的來源。

ARToolKit 是 Dr. Hirokazu Kato 首先發展出來，目前仍然在華盛頓大學

的 Human Interface Technology Laboratory 持續發展當中。

13

第四章 系統實作

第一節 系統介紹

圖 4-1 為系統開啟畫面，此介面設計的特色是將各個功能框切割成

可自由移動的框頁，系統起始畫面的設計風格十分簡約，使用者選擇好

想要的場景之後，就可以點選「選擇傢俱」的按鈕進行家具的選擇。

圖 4- 1 系統開啟畫面

14

「選擇傢俱」鈕主要功能是讓使用者在主畫面開啟之前，先設定好

自己想要擺放的傢俱，如圖 4-2。按下「Patten」的按鈕可以選擇自己想

要的傢俱。

圖 4- 2 系統 選擇傢俱 1

15

圖 4- 3 系統 選擇傢俱 2

選擇傢俱的畫面可以按照傢俱的種類做選擇，如圖 4-3，選擇完之

後傢俱的圖片會出現在系統設定的畫面上，圖 4-2 表示第一張紙片上會

對應的是一張床，第二張紙片上會對應到一張單人沙發。

16

第二節 系統架構

圖 4-4 為本系統的系統架構圖，系統主架構包含系統使用說明、選

擇場景、選擇傢俱、開啟攝影機，其中選擇傢俱地部分又細分為 9個Patten

以及 8 個傢俱的種類工使用者選擇。

圖 4- 4 系統架構圖

17

下表為本專題研究小組主要工作分配表

表 4- 1 工作分配表

尤淑蓉 陳靜甫 黃翎菱

BCB 介面設計 ●

ARToolkit

程式修改●

3D 場景設計與傢

俱模型修改●

硬體架設與設計 ● ● ●

18

第三節 硬體架設

1.木板

木板就是整個虛擬房間的地板，大小大概 60 公分*45 公分，為了攜

帶方便，將木板設計成可以摺疊起來，摺疊起來之後的面積變小一半，

收納時更方便。如圖 4-5，木板可完全折疊起來。

圖 4- 5 硬體架設 木板

2.攝影機(camera)架設

攝影機本來打算架設在木板上，使用木棍固定，因為攝影機有重

量，所以必須將木棍固定死，經過測試後，會發生以下兩個問題。

一.木棍一旦固定，將無法折疊起木板。

二.攝影機若固定在木板上，它可拍攝到的範圍非常小，只有木板的四

分之一部分，若要加大拍攝範圍必須將木棍長度往上垂直加高，加

高完後，不但不穩，也相當不美觀。

19

綜合以上兩點，我們決定把攝影機架設在木板後，如此一來，木板

的收納不但不會照成影響，攝影機的高度也不需要太高，以下是我們測

試後，攝影機最佳的位置。使用照相機的腳架進行架設，將攝影機固定

至腳架上後，腳架三支腳任取兩支在後方互相對齊，第三支腳和前方桌

子維持一張 A4 紙的距離，如圖 4-5。照相機的腳架，可以依照桌子的高

度做調整。

圖 4- 6 硬體架設 攝影機

整體架設起來就如圖 4-6 的右圖，使用者可以在旁邊操控紙片，進

行虛擬傢俱的擺放。成功架設之後仍有一點需要注意，就是架設的地

點，辨識時會因為架設地點的光影效果不同，而造成紙片的辨識性降

低，如光影效果太亮或太暗都不好，會使得紙片的辨識區塊不易辨識。

20

3.紙片

紙片大小是 9*9 公分，中間白色區域是 4.2*4.2 公分。紙片製作時，

需要注意兩件重要的事，分別是方向性及辨識性。

方向性的介紹，如圖 4-7，左圖是一張失敗的紙片，他不具有方向

性，圖中有阿拉伯數字從 1 到 4 的四個方向，左圖的紙片每一邊都可當

作前面，因為紙片是對稱的圖形，這會造成 ARToolkit 讀取傢俱時，虛

擬傢俱的正面一下是 1 的方向，可能下一秒就變成 2 的方向，使得傢俱

的方向一直在變化。改善的方式是將圖 4-7 左圖紙片中其中一個黑點拿

掉，變成像右圖，就具有獨特的方向性，右圖這張紙片 1 的方向就確定

住，不會再任意改變。

圖 4- 7 硬體架設 紙片的方向性

21

辨識性的介紹，圖 4-8 左圖中畫紅色線的方塊是攝影機辨識紙片的

部分，裡面的圖畫得有點複雜，如果紙片做的很小，攝影機照射的距離

又遠，在攝影機下看起來的影像會像圖 4-8 右圖，很多部分都模糊掉，

如果只有辨識單張紙片可能還不會造成問題，但是只要紙片數量一多，

而且每張都如此模糊，可能會導致攝影機將很多紙片都辨識成一樣，因

為都一樣模糊。解決的方法就是把紙片設計的簡單明瞭，線條之間有足

夠的空隙，使得黑白部分分明，如此一來，就算紙片很多，每張也都具

有很大的差異性。

圖 4- 8 硬體架設 紙片的辨識性

下頁的圖是我們所製作的紙片，全部都測試過，效果都很好，總共

14 張，其中編號為 6 的紙片設定為場景。盡量採取圖案性質強烈，不容

易與其它圖案很雷同的圖案，避免攝影機辨識時，兩張紙片讀取到一樣

的傢俱。為了更容易辨識紙片的圖案，必須要將圖案的內容加粗，一旦

紙片距離攝影機較遠時，不會因為圖案的細小，而無法正確讀取到及辨

識。

22

1. 2. 3.

4. 5. 6.

7. 8. 9.

10. 11. 12.

13. 14.

圖 4- 9 硬體架設 通過測試的紙片

23

第四節 建立場景

使用 OpenGL 直接畫場景在攝影機下，如圖 4-10。因為這三面牆感

覺都是畫在 camera 的鏡頭上面，隨著 camera 鏡頭的移動，這三面牆也

會跟著移動，所以紙片根本就是被擋住，把三面牆拿掉後，紙片才可以

顯示出傢俱，不然紙片只能放在圖中紅色框框部分，才不至於被擋住。

圖 4- 10 建立場景 1

由於是在測試，所以三面牆都使用很強烈的對比顏色，經過測試

後，紙片的影像會被藍色的地面擋住，導致無法辨識，所以根本不會有

傢俱顯示出來。

24

為了使傢俱和場景不會互相影響，我們決定把場景也使用紙片對應

的方式來呈現，所以有一張專門給場景使用的紙片，這張紙片會被固定

在木板上，無法移動，因為場景並不會動。場景紙片被放置如圖 4-11，

為了使攝影機能清晰地辨識影像，故意將紙片擺置得較靠近攝影機。圖

中的虛線部分就是 camera 做影像辨識的地方，虛擬的場景會顯示在紙片

正上方，我們只要將虛擬場景放大至整個木板大小，並且將虛擬場景移

動至木板正中央。經過測試，虛擬場景成功的出現在木板上，但是場景

明顯有破裂的狀況發生，如圖 4-12。

圖 4- 11 建立場景 2

25

圖 4- 12 虛擬場景的 Bug

於是我們站在攝影機的角度去想，如果是圖 4-11 的狀況下，攝影機

所照射到的紙片會像圖 4-13 的左圖，紙片辨識的面積相當小，我們希望

辨識面積可以越大越好，如圖 4-13 右圖這種方式，所以我們針對圖 4-13

的右圖，想出另一種擺放場景紙片的方式，可以防止場景破碎，此種方

式擺設如圖 4-14，如此一來，大幅度增加辨識效果，使用圖 4-14 的方式，

我們只須將虛擬場景做 Y 軸 180 度旋轉，就可以把場景轉正。

圖 4- 13 紙片拍攝角度的比較

26

圖 4- 14 拍攝角度模擬圖

使用圖 4-14 的方式，成功做出不會破碎的場景，而且場景也不是另

外以用 OpenGL 畫的，所以其他傢俱的紙片不會被遮住，可以成功的顯

示在場景的地板上，如圖 4-15。用手把場景的紙片擋住，如圖 4-16，虛

擬場景就消失了。

27

圖 4- 15 系統模擬畫面

圖 4- 16 系統模擬畫面(去掉場景)

28

第五節 選擇傢俱

目前我們選擇傢俱的方式無法即時性地做切換，所以當使用者要換

傢俱時，都必須先關閉 ARToolkit，選擇完傢俱後，再重新開啟，這種方

式相當不方便，所以我們有想到另一種可以即時呈現的方式，以下是我

們的構想架構。

我們的目的就是做出在 ARToolkit 開啟並執行時，可以即時性的去

對 Model 做修改，不用關閉 ARToolkit。ARToolkit 可以同時讀到多個紙

片，若要修改紙片上的 Model，一次只能對一張紙片進行修改的動作，

如果攝影機同時照射到兩張以上的紙片，程式就無法判別要修改的是哪

一張紙片。假設寫一個名稱叫 change()的函式，此函式用來做傢俱的修

改，而在此函上使用 if()來限定，如下方範例程式，t 值是攝影機抓到的

紙片數量，如此一來，只要 camera 抓到兩張以上的紙片，都不會執行

change()函式，所以可以放心地一次針對一張紙片做修改。

if ( t < 2 && t > 0)

{

change();

}

29

在 change()的函式裡是寫修改傢俱的程式，把想修改的紙片拿到攝

影機下面，使得攝影機只能讀取到那一張紙片，如圖 4-17 與圖 4-18，在

一堆紙片中，選擇出 A 紙片來進行修改，程式則會跑 change()這函式，

即可進行修改。

圖 4- 17 選擇傢俱 一張以上的紙片

圖 4- 18 選擇傢俱 利用單一紙片進行

30

藉由程式可以知道現在攝影機讀到的哪張紙片，使用程式碼搭配鍵

盤的數字鍵，在按下對應的鍵之後，可以把對應的傢俱名稱傳到

Data/vrml_data 裡，如圖 4-19，修改紅色框線部分的檔案名稱即可更換

Vrml 檔。

圖 4- 19 讀取 Vrml 檔的程式碼

上圖是 vrml_data 檔案內容，其中紅色框線的部分就是 vrml 檔的檔

名，只要對檔案名稱 ufoFly.dat做修改，就可以任意改變成其他的 3D vrml

檔。

31

遇到的問題，在 change()函式裡使用程式去修改 vrml_data 裡的檔名

後，經由測試，發現紙片上的 Model 並不會改變，就算將所有傢俱先讀

入到 ARToolkit 裡，也不會有改變，原因是 vrml_data 這個檔案只有在一

開始開啟 ARToolkit 時先讀到一遍，之後這個檔案就不會再使用到了，

所以當它開啟完後，我們對他做任何的修改，都不會有改變，必須重開

一次 ARToolkit 才行，也因為如此，我們選擇傢俱的方式才會以目前方

式呈現，目前的方式是在開啟 ARToolkit 前先讓使用者選好傢俱。之後

我們仍會再繼續嘗試修改程式來克服這個問題。

32

第六節 ARToolkit 程式簡介

ARToolkit 程式重要部分分別是以下幾個

1. 測試攝影機

程式一開始會先測試攝影機，包括攝影機解析度大小等等。

if( arVideoOpen( vconf ) < 0 ) exit(0);

找出影像的解析度，並將它在畫面印出來

if( arVideoInqSize(&xsize, &ysize) < 0 ) exit(0);

printf("Image size (x,y) = (%d,%d)\n", xsize, ysize);

攝影機的各個參數都測試完後，就可以將攝影機開啟

arVideoCapStart()

33

2. 讀取 3D 家具

讀取 3D 的 Vrml 檔，主要是利用 read_VRMLdata()這個函式，將

Model 一個一個讀進去。

if ( (object = read _ VRMLdata (model _ name , & objectnum ) ) == NULL )

exit(0);

printf ("Objectfile num = %d\n", objectnum);

若 Vrml 檔可以被讀取到，則會依照順序，顯示在黑色畫面上，如

圖 4-20。

圖 4- 20 開啟攝影機的執行畫面

34

3. 把 3D 物件畫到紙片上

在 draw( ObjectData_T *object, int objectnum )傳入兩個值，分別是物

件的資料及物件的編號，用 argConvGlpara()這個指令可以抓到紙片的位

置，draw_object()是把 3D Model 畫入。

int draw( ObjectData_T *object, int objectnum )

{

int i;

double gl_para[16];

for( i = 0; i < objectnum; i++ )

{

if( object[i].visible == 0 ) continue;

}

argConvGlpara(object[i].trans, gl_para);

draw_object( &object[i], gl_para );

}

利用 for 迴圈 i 從 0 開始，把每個 Model 都畫出來

for ( i = 0; i < objectnum; i++ )

{

printf("rendering %d \n",i);

arVrmlDraw( object[i].vrml_id );

}

35

4. 影像辨識

有個很重要的函式 arVideoCapNext()，他是去抓取攝影機的下一個

frame，然後就可以利用 arDetectMarker()的函式去做紙片的影像辨識部

份。

5. 重畫影格

傢俱跟著紙片移動的方式介紹，利用一個函式，此函式會一直抓取

下一個 frame 並且去跟前一個 frame 作比較，一直更新 frame，隨著紙片

移動，再利用 get_trans()去得到紙片的座標位置，將 3D Model 畫在 frame

更新後的位置上，如此的一直重複畫，所以使用者推動紙片時，就感覺

紙片上的虛擬 3D Model 也跟著移動，其實是因為一直重畫的關係。

36

第七節 Borland C++ Builder 結合 ARToolkit

為了使 ARToolkit 能在 BCB 的系統介面呈現，我們是了以下兩中方

法：

1.將 ARToolkit 轉換至 BCB 中︰

將該連結的.h 檔(如 config.h、video.h)全部丟進同一個資料夾，使他

在編譯時可以連結成功。之後編譯時仍會有很多錯誤，幾乎都是找不到

函式，錯誤內容都是寫缺少 OBJ 檔。打指令碼 (compile lib) 產生 OBJ

檔，並在 BCB 裡按 ProjectAdd to Project，把 OBJ 檔都附加進去，連

結到了應該連結的函式，錯誤數量就變少了。使用附加 OBJ 的方式，會

造成他所需要的函式越連越多，所以要去附加的 OBJ 檔也會越多，惡性

循環，要去找的 LIB 檔也越多。所以我們打算換方向，使用 DLL 檔去

做連結，但必須先去作出 DLL 檔。

37

2.在 BCB 讀取 GLUT 的檔案：

嘗試在 BCB 的系統裡面讀取 GLUT 的檔案，在某個論壇1上搜尋到

BCB 與 OpenGL 的對應 LIB，主要步驟如下：

到 C:\Program Files\Microsoft Visual Studio\VC98\Lib 找 4 個 libraries，

分別為

(1)GLU32.LIB

(2)OPENGL32.LIB

(3)WINMM.LIB

(4)glut32.lib

將這 4 個 libraries 複製到暫時目錄 C:\tmp，並將檔名修改成

(1)GLU32_VC.LIB

(2)OPENGL32_VC.LIB

(3)WINMM_VC.LIB

(4)glut32_VC.lib

找到 BCB 內建的 coff2omf.exe

路徑→

C:\Program Files\Borland\CBuilder6\Bin\coff2omf.exe

把找到的 coff2omf.exe 一併獨立複製到 C:\tmp

1論壇網址：http://delphi.ktop.com.tw/board.php?cid=168&fid=923&tid=73381

38

利用 coff2omf.exe 將 coff 轉成 omf 格式，指令分別為

(1)coff2omf GLU32_VC.LIB GLU32.LIB

(2)coff2omf OPENGL32_VC.LIB OPENGL32.LIB

(3)coff2omf WINMM_VC.LIB WINMM.LIB

(4)coff2omf glut32_VC.lib glut32.lib

註：coff2omf.exe 只能藉由 dos 執行

所產生出的GLU32.LIB, OPENGL32.LIB, WINMM.LIB, glut32.lib通通複

製到 C:\Program Files\Borland\CBuilder6\Lib

glut-3.7.6-bin.zip 裡面的 glut.h 也複製到

C:\Program Files\Borland\CBuilder6\Include\Gl

把以上轉檔過的.LIB 檔放到 BCB 的對應資料夾裡就可以順利在 BCB 讀

取 GLUT 的範例程式了。

工具：

1. coff2omf.exe (old.lib new.lib)

2. implib (new.lib old.dll)

3. tdump -ee (example.dll)

說明：

1. 將 VC 可用的 DLL 檔轉換成 BCB 可用的 DLL 檔

2. 將 DLL 檔轉成 LIB 檔

3. 可以看 DLL 檔裡面的內容

39

第八節 虛擬傢俱設定

1.Deep Exploration 可以檢視 Vrml 檔，如圖 4-21。

圖 4- 21 虛擬傢俱的設定 檢視傢俱

2.儲存 3D 物件

至 file→save as→存 檔 類 型 ： vrml world （ *wrl ， *vrml ）

→settings→geometry transform→enable pre-save transformation 打勾→確

定→儲存，以上動作可設定 model 的中心點位置，如圖 4-22、圖 4-23。

40

圖 4- 22 虛擬傢俱的設定 存檔步驟 1

圖 4- 23 虛擬傢俱的設定 存檔步驟 2

41

3.介紹 VR 中 ARToolkit 的技術：

圖 4- 24 用 ARToolkit 程式抓影像

ARToolKit\bin 中有一個 mk-patt 執行檔，它的作用是記憶 marker，

先連接攝影機，首先將做好的紙卡放置在桌上，用攝影機照攝紙卡，會

顯現紅色與綠色的框線，代表抓到紙卡的圖案，同時用滑鼠左鍵按住攝

影機畫面，畫面就被擷取，同時旁邊要 enter filename。記憶儲存至

ARToolKit\bin\data 裡。命名為 patt.XXX 格式名稱。

42

圖 4- 25 修改感應紙片的程式碼

首先在 data 中，將 object_data_vrml 圖示拖曳到可編譯程式的軟體

中，如上圖所示，第二行的數字代表有幾個 model，下面的#pattern 1 代

表第一個 model，語法類似，以此類推。這邊寫出紙卡與其對應的 wrl

檔。

進入到 ARToolKit\bin\Wrl 中有 2 種檔案格式，一為 Dat 檔，另一為

wrl 檔，將 Dat 圖示拖曳到可以編譯程式的軟體中，顯示 snoman.wrl，

從這裡可以將名稱更改成想要用的 Vrml 檔名稱即可，同時可以改變物

件位移、旋轉方向、大小調整。

43

圖 4- 26 傢俱 Vrml 檔的內部程式碼

圖 4- 27 紙片測試

在 ARToolKit\bin 中，使用 simpleVRML 執行檔，記得需將 webcam

準備好，也連接至電腦，按下後，按確定。將 webcam 對準紙卡 marker，

從螢幕中可以看到 model 在紙卡上浮現，如圖 4-27。

44

4.3D 物件上色解說

用 DEV_C++直接修改 VRML 程式碼，改變 model 的顏色及透明度，

圖 4-28 為上色後的 model，圖 4-29 為物件內部的程式碼。

圖 4- 28 虛擬物件顏色的修改

圖 4- 29 虛擬物件內部程式碼

45

關於材質，首先在 MAYA 部分，先做一個燈座，匯出成 vrml 檔，

資料夾同時會產生一個 rgb 檔，代表材質附加成功，如圖 4-30。虛擬場

景也是用 MAYA 做出基本的空間，上過基本色彩，匯出成 wrl，如圖 4-31。

圖 4- 30 用 MAYA 繪製 3D 物件

圖 4- 31 檢視虛擬場景

46

第五章 預期目標

未來我們希望加入更進階的功能，希望能讓系統更有特色

1. 音效

移動傢俱時，造成灰塵揚起，並且會發出唧唧的聲音，表示傢俱很

重，讓使用者感覺到移動東西的真實感。

2. 第一人稱

使用一張叫做人的紙片，移動此紙片時，會有一個子視窗顯示第一

人稱視角的畫面。推動此紙片行進時，可用鍵盤中的左右鍵，進行左右

觀看，讓第一人稱視角有轉頭的感覺，如圖 5-1。

圖 5- 1 視角轉換示意圖

圖 5-1 中左邊為正常時的視角，右圖是按右鍵後，視角如轉頭一樣，

向右轉頭。

47

3. 打光

燈光的效果很重要，若有打好燈光的角度位置，整個房間會有柔和

的感覺，希望可以讓使用者自行打燈光，我們提供一張燈的紙片讓使用

者來放置，在移動燈時燈光也會隨著到處改變，如此可讓使用者比較，

並且抓到一個感覺最棒的位置來放置燈光，如圖 5-2。

圖 5- 2 燈光效果移動示意圖

48

4. 加入風水說

我們當初想以互動式的方式呈現風水小幫手，就是在使用者移動紙

片進行擺設傢俱時，若擺設位置有違背風水的概念，則會有即時性的警

告跳出做提醒。

利用符號進行分類，分為好風水和壞風水兩類，壞風水的 tip 前面

使用符號一(※)表示，好風水前面用符號二(★)表示。例如，對壞風水做

出警告，對於好風水則出現讚美(例如，★這樣擺設會聚財)。如圖 5-3。

圖 5- 3 風水小幫手示意圖

圖 5-3 中的風水小幫手視窗內，※表示不好的風水，★表示好的風

水。隨著床頭移動走(不正對著廁所門)，所出現的警告視窗也隨著消失，

若再移動回來(正對著廁所門)，此時再跳出警告視窗。好風水也是一樣

的方式呈現。

49

5. 加入虛擬人物(John)來與傢俱進行互動

John 平時在房間內走來走去，假如各種傢俱擺放的太近時，則 John

在走動時就會撞到傢俱，撞到時可能就痛的在那裡跳腳。(John 每次經

過這就一直撞到，用此種有趣方式提醒使用者，傢俱可能放置的太近

了) 。一旦放入一種傢俱，放置完成後並不再作移動時，此時 John 會立

即過去進行與傢俱之間的互動，如：放入一台電視時，John 會走過去電

視那，並且將電視打開來。隨著傢俱擺放的越多的同時，John 也越來越

高興，如在走路時會開始輕快的跳著。

此構想可能會有以下兩個問題，問題一，若是 John 跟傢俱之間有互

動，那表示 John 不能穿透過那些傢俱，那 John 跟傢俱接觸時會有以下

狀況，假使一個櫃子正剛好移動至 John 的位置，若 John 來不及逃掉會

被櫃子壓過去、撞飛或是在櫃子正接近 John 時，觸發使 John 看到而做

出驚慌躲避的逃跑動作，如圖 5-4。

圖 5- 4 虛擬人物示意圖

50

問題二，由於 John 要跟很多傢俱進行互動，如：讓 John 和椅子互

動方式是 John 走去椅子那邊並且坐下，但光是椅子的 model 就有數十

種，且每張椅子高度也都不一樣，若想達到目的，可能要做出數十種椅

子和 John 之間的互動，而加上其他全部的 model，可能近百種互動要做，

非常困難且麻煩。解決方式可以讓 John 跟傢俱間的互動簡單化。例如，

跟書櫃的互動可簡化成走過去摸摸書櫃即可。

6. 存檔

設計完成後，可以將成品存檔成 vrml 檔，並且可以 360 度旋轉場景

角度(提供使用者從不同角度觀看自己的作品)。

7. 搜尋傢俱

增加搜尋 3D 傢俱物件的功能，使用網路。由於希望使用者擺設的

傢俱越多越好，所以希望可以提供一個網路平台，上面放數百種傢俱，

可供使用者下載並使用，在此平台上也打算提供所有使用者可以上傳傢

俱功能，開放此功能則會有兩個優點，第一，使用者可以自行上傳自己

做的傢俱(使用 MAYA 做的)，如此一來，傢俱則會有相當大的數量及種

類。第二，使用者也可以上傳他們利用我們系統所做出的成品(vrml 檔)，

可以放在網路上與大家分享自己的作品。

51

所以假如以上理想化都成立，我們可以模擬做出來後的成品結果，在一

個空房間內，有一個叫 John 的人，在隨著使用者慢慢加入傢俱的同時，

他也會持續做他自己的事。如加入一張椅子，他可能會很開心的跑去坐

下來。加入一台電視，他可能開心的去把電視打開。在擺設傢俱時，移

動傢俱會造成唧唧的聲音，最後擺設的完成後，可以利用人的紙片來進

行觀看整體傢俱的擺設，在使用者以第一人稱行進觀看時，John 同時也

正在做他自己的事。最終如果使用者很滿意目前的擺設成果，則可以將

成果存檔成 vrml 檔，方便以後進行觀看，而且觀看時也可以隨意拉動角

度，從不同角度觀看。使用者如果對自己作品相當滿意，也可以將此作

品上傳至網路，與大家分享討論。

52

參考文獻

[1] 陳連福、李孟軒、萬珮彣，(民 95)。擴增實境科技應用於傢俱類商

品之電子商務展示介面設計之研究，崑山科技大學視覺傳達設計研

究所、台南科技大學商品設計系碩士論文。

[2] 陳奕君、彭聖傑、劉俊松、林娟妏、陳偉玲，(民 94)。混合實境應

用，銘傳大學資訊傳播工程學系學士專刊。

[3] 蕭富貴，(民 92)。Borland C++ Builder 6 實用教學寶典，初版。

參考網站

[1] 空間魔法師：http://www.win-e.com.tw/tw/default.asp

[2] 圓想專業設計圖庫：http://www.twdeco.url.tw/interior/

[3] ARToolkit：http://www.hitl.washington.edu/artoolkit/

[4] BCB：http://www.codegear.com/products/cppbuilder

[5] IKEA：http://www.ikea.com.tw/chi/main.html

[6] MXRToolkit：http://www.mixedrealitylab.org

53

附錄一 風水小幫手

風水觀念肇始於先秦。每一種文化都有自己的歸屬，風水也有其歸

屬。古代將風水歸於陰陽學、地理學與術數。要研究風水學，首先必須

先了解風水的概念、歷史背景與範疇。

單從「風水」一詞首見晉朝郭璞所著的《葬經》一書，該書開宗明

義指出：「葬者乘生氣也。氣乘風則散，界水則止。古人聚之使之不散，

行之使之有止，故謂之風水。」由此定義可知，郭璞是從喪葬的角度提

出「風水」這個概念；認為埋葬死者應該找尋有「生氣」的地穴，這樣

才能使之「再生」。「氣」是萬物之源，有聚有散，有行有止，聚則成形，

散則化體。換句話說，郭璞相信大自然中運行之氣，因風與水的激盪與

調和而凝結於地穴，而人類經過地形地物的勘察，體認到風與水的特有

關係，妥適選擇地形、利用地形，這就是「風水」坽。風水，可以說是

中國人在長期生活經驗中所發展出的獨特觀點，包含了古代哲學、科

學、美學、倫理學及民俗等多方面的智慧，可說是中國人的一種生存環

境觀；此種獨特的觀點廣佈我國自古以來社會各個階層之中，上達皇室

下至百姓，無論陰陽宅的選址、規劃設計、營造施工等，都產生廣大而

深遠的影響。2

自古以來流傳一句話,一命二運三風水,我們的族群習俗貫有命理的

相信，不可避免在黃曆上挑選可以安宅的日子，為了替人們省下找尋相

關風水資料的麻煩，所以我們就設想把住宅該注意的風水也寫進我們的

BCB 的介面裡。

2 本段文字參考引用自「風水的意義」http://tw.myblog.yahoo.com/jw!yoFTrliWFQXVTQdkgrU08LA-/article?mid=100

54

我們列舉 4 種空間的命理擺設，有客廳、廚房、臥室、書房這４種，

我們採用條列式敘述，並且用選項按鈕跳到我們自己做的網頁，來節省

介面畫面的擁擠，並且讓使用者一目瞭然的找尋到該注意到的擺設細

項。

圖 附錄- 1 風水小幫手

55

附錄二 第一人稱視角的架構概念

ARToolkit 是利用攝影機去辨識紙片的影像，再將 vrml 檔的 3D

Model 畫在紙片中央，隨著紙片的移動，會一直去更新其位置，並畫出

Model 在新的地方。

對於第一人稱視角，我們起初是想利用像 MAYA 架攝影機的概念，

把攝影機設置在場景裡，隨著按鍵盤相對應的鈕，攝影機也跟著移動，

讓使用者可以在自行擺設好的場景裡以第一人稱視角的方式來行走。但

是在 ARToolkit 裡面似乎沒有我們想像中的場景，我們要如何架攝影機

呢?於是我們打算再創造出另一個場景，因為 ARToolkit 沒有真實的場

景，攝影機根本無從架設，但是我們可以從程式碼中抓出紙片所對應的

位置，以及每個對應的傢俱 Model，如此一來，我們可以再開啟一個

OpenGL 程式，將所對應的各個參數一一傳入，想像中有 A、B 兩個平

台，在 A 平台上放入紙片並進行擺設時，同時 B 平台也會將傢俱在

OpenGL 裡畫入，同步化兩個平台。

最後等到使用者都將傢俱擺設完成，B 平台也將另一個場景繪製完

成，此時只要在使用 gluLookat() 這個函式，把攝影機設定好，使用者

即可在第一人稱的視角下來欣賞自己的作品。

56

當點入現場模擬時，會跑出一個小視窗，這個小視窗就是站在第一

人稱視角來觀看傢俱，如下圖。

圖 附錄- 2 第一人稱視角 1

隨著使用者按鍵盤前後左右去移動，這個小視窗所顯示的畫面也會

跟著改變，就跟在場景中走路一樣的感覺。

圖 附錄- 3 第一人稱視角 2

57

附錄三 相關軟體試用心得

第一節 空間魔法師專業版 6.1

我們使用空間魔法師專業版 6.1 的試用版，一進入他的介面，就有

提供三個範例作品。

圖 附錄- 4 空間魔法師專業版 6.1 執行畫面

點選其中一個範例，右邊視窗是 2D 平面圖，可讓使用者在設計傢

俱位置時，更為方便。從圖中看出，使用空間魔法師設計出來的專案，

美工技術相當精細，像是地板的反射和燈光，也因此跑空間魔法師時電

腦會有點 Lag。

58

圖 附錄- 5 空間魔法師第一人稱視角 1

圖中紅色位置是左圖的第一人稱視角，隨著 2D 圖上紅色位置的移

動，第一人稱視角也跟的即時性的變化，可按鍵盤上的方向鍵來進行控

制。

圖 附錄- 6 空間魔法師第一人稱視角 2

自己重新開啟一個新檔來編輯，有了右邊 2D 圖的幫助下，可以很

快而且輕鬆的將地板及牆面畫出來，再利用右邊的小視窗，將材質一一

貼上。

59

圖 附錄- 7 空間魔法師 開新場景

接著把傢俱放入場景內，他本身所提供的傢俱並不多，可能因為這

是試用版的緣故。在選取傢俱時，下方會有傢俱自動做 360 度的旋轉，

供使用者觀看。在傢俱右下方，還有提供此傢俱的實際長寬、廠商及價

格，相當方便。

圖 附錄- 8 空間魔法師 選擇傢俱

60

圖 附錄- 9 空間魔法師 傢俱的詳細資料

使用空間魔法師，很快就設計出一間客廳，使用後的感想，空間魔

法師的介面相當容易摸索，就算第一次使用，都可以很快上手，而且他

的傢俱都很精細漂亮，最後製作完後，可再加上他材質及燈光的加持，

使得整個專案更為精美漂亮。

圖 附錄- 10 空間魔法師 試用完成圖

61

第二節 IKEA 宜家家居「臥室設計軟體」

這個軟體對於設計的房間大小和形狀，提供相當多且可以變化的方

式，可以讓使用者輕鬆的規劃出房間的大小和形狀，再視窗列中可以有

兩種選擇，分別可選擇在 3D 下執行編輯物件，還可選擇在 2D 平面圖下

執行，使用起來雖然沒有空間魔法師專業版 6 那樣的專業，但是其實蠻

流暢的，很簡單且很快就可以規劃出一個自己想要的房間，由於是 IKEA

的軟體，最後還有提供總價，也算是還不錯的室內設計軟體。

圖 附錄- 11 IKEA 宜家家居 房間設計

在右方的視窗，可以選取房間格式，IKEA 提供 3 種讓使用者使用，

設定牆壁數值，在房間四個面命名 ABCD，分別讓使用者輸入數值，以

符合使用者房間大小得需要，下方的是固定配置，基本的門，內牆，窗

戶，暖氣等，再配置傢俱，步驟已經明確的寫在右方視窗中，相當簡潔

易操作。

62

圖 附錄- 12 IKEA 宜家家居 配置傢俱

IKEA 讓使用者利用左下方的內建選單，根據常見的傢俱樣式，呈

現在下方的物件列中，讓使用者挑選。

圖 附錄- 13 IKEA 宜家家居 3D 檢視

首先在上方按 3D 檢視鍵，就會出現在房間視窗旁邊的鍵，可以讓

使用者作簡單的運作，「+」鍵是放大，「-」鍵是縮小，4 個方向鍵可以

讓視窗作右移，左移，上移，下移，讓房間不會產生死角，能全面性看

到房裡的各處。

63

圖 附錄- 14 IKEA 宜家家居 項目清單

在畫面上方中按第四個按鍵，會清楚一一列出使用者在試用階段做

的房間佈置的傢俱，包含圖片預覽，產品編號，產品名稱，選取的數量，

產品價格，最後總計(含稅)的價格，讓使用者考量是否符合自身的預算。

64

第三節 3D Home Architect

這套軟體有提供使用方法的教學影片，影片中說明的相當清楚。

圖 附錄- 15 3D Home Architect 教學影片

進入軟體後，畫面出現一個視窗，點選”Learn to use”會跑出另一視

窗，使用播放影片的方式，一步一步清楚地教學如何使用這套軟體。

65

圖 附錄- 16 3D Home Architect 教學影片的選擇

提供很多細項的教學的選擇，分別有

(a) 建造設計 → 如: 牆、門、窗。

(b) 內部設計 → 如: 傢俱擺放、佈線路。

(c) 景觀設計 → 如: 植物、室外花園。

(d) 地面、地形設計 → 如: 地形起伏設定。

66

選擇教學影片後，錄製好的教學影片會跳出來敎你一步一步操作。

圖附錄-18 是它的執行介面，介面相當專業，感覺是給專門的設計師使

用，功能做的相當完整，可供我們做參考。

圖 附錄- 17 3D Home Architect 教學影片畫面

圖 附錄- 18 3D Home Architect 執行介面

67

軟體特色：

(a)提供 2D、3D 及第一人稱視角切換(在視窗中的左下方可以做切換)。

(b)傢俱雖然沒有畫的很精緻，但是他的擺設和格局相當精細。

(c)傢俱都可以自行再做修改。

(d)除了屋內的擺設外，他也注重屋外，如草地的高低起伏都可做調整。

(e)屋外還可以種植物，觀看植物和屋子整體的對應狀況。植物部分提供

調整植物年齡的功能，模擬植物十年後的變化。介紹各種植物及如何

照顧它們，以及模擬春、夏、秋、冬四個季節植物的變化。

(f)提供的各項設定值都很精細，連屋簷的角度都可以去做細微的調整。

(g)提供樓層的規劃，可以切換選擇樓層進行設計

圖 附錄- 19 3D Home Architect 適用的草圖

我們試著使用它的軟體，做了一個大略的草圖，右邊的方格可以選擇想

要的傢俱進行擺設。

68

圖 附錄- 20 3D Home Architect 虛擬 3D 視角

(a)切換成 3D 的視角，仔細看會發現其實有些 model 繪製的蠻粗糙。

(b)在此模式下，視窗中的右下方，提供第一人稱視角畫面，以進行更真

實的觀看，但是實際使用時，覺得相當不順暢，尤其是視角的轉向做得

不好操作，像是要重複的去點選他的指令，每前進一次，就要點一次。

69

圖 附錄- 21 3D Home Architect 傢俱數值的修改

進行 3D 視角的模式時，也可以點選任何傢俱物件，對顏色、大小

等數值做即時性的修改。我們發現，此軟體注重的是技術性細節，雖然

物件繪製普通，但強調的是細節設定，各個房間內的大小都提供精確的

數值做設定，同時也注重整體傢俱擺放的格局。

70

附錄四 參展記錄

第一節 銘傳大學資訊學院五系聯合資訊展

本專題研究參加銘傳大學 97 學年度資訊學院五系聯合資訊展，展出

日期自 97 年 12 月 3 日至 97 年 12 月 5 日止，為期三天。以下為展出期

間的活動紀錄照片。

圖 附錄- 22 五系聯合資訊展的海報

圖 附錄- 23 五系聯合資訊展組員與指導教授合影

71

第二節 互動設計論壇

本次互動設計論壇為「教育部重要特色領域人才培育改進計畫之資

訊與設計整合之數位化互動設計學程子計畫」，本專題受邀參與展出，

展出日期自 97 年 12 月 15 日至 97 年 12 月 19 日止，為期五天。展出期

間邀請各大專院校資訊與設計相關科系教師蒞臨指教，以下為展出期間

的活動紀錄照片。

圖 附錄- 24 互動設計論壇展場海報

圖 附錄- 25 互動設計論壇服務人員證

72

圖 附錄- 26 互動設計論壇參觀同學正在試玩系統

圖 附錄- 27 參展設備全景

73

圖 附錄- 28 展場中的大螢幕

圖 附錄- 29 互動設計論壇組員與指導教授合影

74

第三節 專題組員心得

這次的專題研究，從一開始和組員們一起構思，到之後慢慢地著手

實作，歷經了許許多多的挫折與困難，常常望著跑不動的筆電不知道該

怎麼辦，也常常沒日沒夜的改程式、修系統，和組員討論著該如何解決

問題，每一件事都令人記憶深刻，就是這麼一點一滴地，把系統慢慢建

立起來，並且一再修改改進，才有今天的成果。只有三個成員的專題小

組，的確是比別人辛苦了點，但是也因為這樣，我們比別人學到了更多

克服問題的方法，也謝謝指導教授葉正聖老師在我們遇到困境的時候總

適時地指引我們方向，也教導我們許多解決問題的方法，並且總是給予

我們信心，讓我們有動力堅持下去。

很榮幸專題完成後，還能受邀到互動設計論壇參展，不僅能把我們

的成果展現給別人看，同時也可以看到許多跟互動設計相關的研究，大

開了眼界，想必這些作品的作者也都跟我們一樣是花了很多心血才完成

的，每一個作品都可能引領未來數位設計市場的潮流，成為新時代的產

物。希望我們的研究有一天也能在相關領域有所用途。

組長 尤淑蓉 2008.12.22

經過這段做專研的日子，深刻體會到從構思，到實際做出實體來，

尤其是要符合最初的藍圖，不斷的去修正原先的構想，一步步踏出創造

的步調。從無到有的過程，付出的時間、心力、腦力、精神讓我們發現

原來我們有能耐去做出這樣的成品。期間遇到的挫折曾經困到我們，挫

折的感覺常常有，但是我們仍不斷嘗試找尋答案，直到最後會去請教老

師們指點迷津。

75

很高興能夠從葉老師身上學到擴增實境的東西，這項看起來很炫的

技術，在經過專研歷練後，了解到擴增實境的原理，從網路搜尋 ARToolkit

的檔案，並從網站了解其概念，下載後。首先要了解裡面程式碼的意思，

這個部分花了不少時間去理解。要先從層層的資料夾中，找到屬於

webcam 的程式碼。因為我們是要透過 webcam 去抓取圖片後，呈現在電

腦螢幕上。

曾經上過虛擬實境、MAYA、影像處理等課程，對於我做專研的能

力有所助益，因為這都是我們專研要做的東西所具備的基礎，Maya 部

分要繪製場景跟部分傢俱 model，雖然經過轉檔成 VRML 後，有些傢俱

有破碎，甚至遇到不能看見材質的困境，不過我們仍舊能以上色及打光

去補足傢俱的特色。虛擬實境課程也先幫我們打好底，知道如何做出讓

webcam 判讀的 marker，每個 marker 的圖案會對應出不同的傢俱，一連

串的步驟，在虛擬課程中有詳盡教學過。此外影響處理所學的部分，軟

體 BCB 成為我們撰寫系統介面的好幫手，圖形化的介面易於設計，讓

我們的介面看起來整齊如一。在製作的過程，也發揮一些巧思，例如使

用珍珠板製作紙卡的底，還有將場景的紙卡用磁鐵吸附在木板的周圍，

這些是從一些生活層面去聯想到，並且將木板變成可以摺疊收納的功

能。這一切都是為了使作品美觀，方便。

寫出一本厚厚的論文，要集結我們對於做的東西了解的程度與實際

做出的狀況，這一切都得來不易，每一頁都是大家努力的結果。在撰寫

論文時，首重格式，你會發覺有很多東西要去修改，不知不覺本身的

word 能力提升了很多。很高興最後能到設計大樓參加互動設計展，跟一

群多媒體互動屬性相同的作品一同展示，尤其是一些老師對於我們的作

品很好奇並且覺得很棒!就感到做這個作品是值得的!

黃菱翎 2008.12.22

76

經過這次的專題訓練，使得我們對於團隊的合作更為熟析，不在只

是自己的意見，還要與其他不同的意見做交流，並且將大家最好的意見

整合，在其中，我覺得專題幫助我們最大的就是解決問題的態度以及方

法，在做專題時我們時常會一直卡住，這通常是最痛苦的階段。我們所

做的討論就是一起出來解決所遇到的問題，直接想辦法解決問題，或是

間接想辦法解決，反正只要是能解的出來，我們都盡量去嘗試，但事情

總不是那麼簡單，問題總是會再延伸出新的問題，總之，我們會盡量去

將想表達出來的方式給呈現出來。

在此，特別感謝我們的指導老師葉正聖教授，老師在專題上總是可

以提供一針見血的意見，專業方面的領域也很強，而且也會給予我們一

些做人處事的小道理，由於這個專題研究，讓我體驗到一個不一樣的階

段。

陳靜甫 2008.12.23