國立臺東大學資訊管理學系
環境經濟資訊管理碩士在職專班碩士論文
指 導 教 授：謝昆霖 先生 共同指導教授：施能木 先生
運用擴增實境技術於開發行動載具應 用程式之研究-以 IOS 系統為例
研 究 生：陳俊良 撰
中華民國一○一年六月
II
國立臺東大學資訊管理學系
環境經濟資訊管理碩士在職專班碩士論文
指 導 教 授：謝昆霖 先生 共同指導教授：施能木 先生
運用擴增實境技術於開發行動載具應 用程式之研究-以 IOS 系統為例
研 究 生：陳俊良 撰 中華民國一○一年六月
III
IV
V
謝誌
論文終於完成了，歷經了兩年沒有假日的時光，總算熬過這段辛苦的日 子，非常感謝我的指導教授 – 謝昆霖教授及施能木教授，在論文撰寫的過程中 給予我許多的建議與支援，讓我在應用程式實作時，能不斷改善不足的地方，
才能順利完成研究，而在論文口試期間，感謝口試委員趙家民教授的審閱，給 予我許多寶貴的意見，讓我的論文更趨完整。
在論文的實作過程中，感謝我的大學同學瑋智在 3D 建模的鼎力相助，
提供我非常多的資源，讓我的應用程式實作能順利完成；另外感謝跟我的研究 所同學，因為有你們，讓我這兩年的日子過的多采多姿，很懷念大家戰戰兢兢，
一起報告的時候，每個人分工合作一同討論，經過了這些歷練，大家都成長了，
感情也越來越融洽了，也很懷念跟大家一起遊山玩水、吃喝玩樂的日子，總是 充滿許多的歡笑。感謝兩年的班長振源，對班上事務總是盡心盡力，也因為有 你的統籌規劃，論文口試才能順利完成；感謝「跨宇宙超強無敵口試小組成員」
璽鳳、莊倫、懷恩、尉志、奏方、秀梅、義賢、泰峰，大家一定要一起共同度 過口試，一起順利畢業；感謝晶蓉、白哥、紀紋、育廷、冠葆、牛哥當我的受 訪對象，沒有你們的相挺，我們論文也很難完成，能與你們一起讀研究所，真 是我莫大的福氣，希望未來還能永續我們的情誼。
再來還要感謝默默在背後支持我的家人，謝謝我爸媽一路對我無私的奉 獻，在我遇到困難的時候鼓勵我、為我禱告，也感謝我的女朋友欣如，如果沒 有你的包容與陪伴，我很難熬過這兩年的日子，謝謝你，謝謝我的家人。
要感謝的人太多了，你們都是我生命中的貴人，因為有你們的參與才能 完成我的學業，謝謝大家。
陳俊良 謹誌 國立臺東大學資訊管理學系環境經濟資訊管理碩士在職專班 中華民國一○一年六月
I
摘要
隨著行動運算的技術的成熟，智慧型手機與平板電腦成了市場上當紅的位 數產品，「APP」也改變了人們取得資訊的習慣。生活逐漸的數位化，虛擬資 訊也漸漸融入現實的生活中，透過手中的行動載具，感受擴增實境技術結合虛 擬與現實的互動體驗，會是個新奇的視覺饗宴。
本研究採用文獻回顧分析、雛型開發法、觀察法及訪談法進行實作。探 討運用擴增實境技術開發 IOS 系統的行動載具應用程式，將以 Vuforia 套件的擴 增實境技術開發應用程式雛型，使用無標記式(Ｍarkerless)辨識，再藉由歸納出 的人機介面及互動設計原則進行雛型開發，雛型評估則選用觀察法與訪談法驗 證本研究。
本研究開發的應用程式「AiR」包含了「手指足球」、「變裝喬巴」及
「魔術海報」等三件應用案例。「手指足球」、「變裝喬巴」使用虛擬按鍵的 互動模式設計，讓使用者能簡單地透過手指與行動載具螢幕上的虛擬物件產生 互動；「魔術海報」則是結合影片與印刷品，重現電影哈利波特中神奇的報紙，
讓擴增實境技術應用在我們生活當中。
最後經由使用者實際操作行動載具上的應用程式，獲得相關意見，並進 行成效評估。本論文之貢獻如下：
1. 本研究以擴增實境技術開發行動載具的應用程式之雛型，實踐了應用在 行動載具的可能性。
2. 針對行動載具的應用，提出與過去擴增實境技術不同的互動模式與介面 應用。
3. 整合多種軟體與套件開發擴增實境的應用程式，可提供開發者參考。
關鍵詞：擴增實境、行動載具、應用程式、互動模式
II
Abstract
With the increasing maturity of mobile computing, smartphones and tablets have become popular digital products in the consumer market, and “APPs” have also changed the ways people acquire information. Under the trend of digitalization, virtual information has gradually come into reality. Through application of augmented reality technology, people can also have enhanced interactions with the reality on their mobile devices.
This study attempted to develop an APP for iOS-based mobile devices using Vuforia augmented reality SDK. The research methodology included literature review, prototype development, observation, and interview. This APP used markerless object recognition technique and was developed based on induced design principles of human-machine interface and interactions. The developed prototype was evaluated through observation and interview.
The developed APPcalled AiR consisted of three works, including Finger Soccer, Chopper in Disguise, and Magic Poster. Finger Soccer and Chopper in Disguise are based on the virtual button interaction model, which enables users to interact with virtual objects on mobile devices using their fingers. Magic Poster integrates videos and prints to represent magic newspaper in the film Harry Potter. All these works were intended to apply augmented reality technologyin our daily life.
Finally, the effectiveness of this APP was assessed by users who have tested it on their mobile devices. The main contributions of this study were as follows:
1. This study applied augmented reality technology to develop a prototype APP for mobile devices. This attempt established the possibility of applying this technology to mobile devices.
2. This study proposed a novel interactive model and interface for application of augmented reality on mobile devices.
3. This study offered APP developers an example of integratingnumerous software systems and development kits to develop an augmented reality-based mobile APP.
Keywords:Augmented Reality,Mobile Device,Application,Interactive Technology
III
目錄
中文摘要 ... I Abstract ... II 目錄 ... III 表目次 ... VI 圖目次 ... VII
第一章 緒論 ... 1
第一節 研究背景與動機 ... 1
第二節 研究目的 ... 1
第三節 研究流程與研究方法 ... 2
第四節 名詞釋義 ... 3
一、擴增實境 ... 3
二、行動載具 ... 4
三、應用程式 ... 4
第五節 研究範圍與限制 ... 4
第二章 文獻探討 ... 5
第一節 擴增實境 ... 5
一、擴增實境的定義 ... 5
二、擴增實境系統的類型 ... 6
第二節 擴增實境的系統開發套件 ... 10
第三節 互動介面與模式 ... 12
第四節 智慧型載具擴增實境技術的相關應用... 14
一、Aurasma(2011) ... 14
二、Konstruct(2011) ... 14
三、String™ Augmented Reality Showcase ... 15
四、Starbucks Cup Magic ... 15
五、fiat street evo ... 16
六、Historic New Orleans ... 16
第三章 系統架構與研究方法 ... 19
第一節 研究方法 ... 19
一、文獻回顧與分析 ... 19
二、雛型開發法 ... 19
IV
第二節 觀察法與訪談法 ... 23
一、觀察法： ... 23
二、訪談法： ... 23
第三節 研究流程 ... 24
第四章 系統設計與實作 ... 25
第一節 應用案例一：手指足球 ... 25
一、設計概念 ... 25
二、3D 模型設計 ... 25
三、互動介面設計 ... 26
四、互動模式設計 ... 28
五、互動應用程式設計 ... 29
第二節 應用案例二：變裝喬巴 ... 33
ㄧ、設計概念 ... 33
二、3D 模型設計 ... 34
三、互動介面設計 ... 34
四、互動模式設計 ... 36
五、互動應用程式設計 ... 39
第三節 應用案例三：魔法海報 ... 43
ㄧ、設計概念 ... 43
二、視覺設計 ... 43
三、互動介面設計 ... 43
四、互動模式設計 ... 44
五、互動應用程式設計 ... 46
第四節 應用程式整合與設計 ... 51
一、應用程式視覺設計 ... 51
二、應用程式整合 ... 52
第五章、應用程式測試與評估 ... 54
第一節 應用程式測試 ... 54
第二節 成果評估–觀察法與訪談使用者 ... 57
第三節 研究結果與討論 ... 69
第六章 結論與建議 ... 71
第一節 研究結論 ... 71
V
第二節 研究建議 ... 72 第三節 未來展發 ... 72 參考文獻 ... 74
VI
表目次
表2‐1 常見的標記圖 ... 8
表2‐2 現有擴增實境開發套件 ... 10
表2‐3 行動裝置的擴增實境發展套件 ... 12
表2‐4 互動介面設計分析 ... 17
表2‐5 互動模式分析 ... 18
表3‐1 本研究使用者訪談大綱 ... 24
表4‐1 手指足球軟硬體項目 ... 28
表4‐2 「手指足球」的互動步驟介紹 ... 28
表4‐3 「手指足球」應用程式建置 ... 31
表4‐4 變裝喬巴軟硬體項目 ... 36
表4‐5 「變裝喬巴」互動步驟介紹 ... 37
表4‐6 「變裝喬巴」應用程式建置 ... 40
表4‐7「魔法海報」軟硬體項目 ... 44
表4‐8「魔法海報」互動步驟介紹 ... 45
表4‐9 「魔法海報」應用程式建置 ... 48
表5‐1「手指足球」觀察結果分析表 ... 58
表5‐2「變裝喬巴」觀察結果分析表 ... 59
表5‐3「AR 電影海報」觀察結果分析表 ... 60
VII
圖目次
圖1‐1 研究流程 ... 3
圖2‐1 虛擬實境與實體環境的程度劃分 ... 6
圖2‐2 擴增實境系統架構 ... 6
圖2‐3 iPhone 擴增實境應用程式實例 ... 7
圖2‐4 有標記式技術的運作流程 ... 7
圖2‐5Template markers 標記 ... 9
圖2‐6 無標記式技術的運作流程 ... 9
圖2‐7 Aurasma App ... 14
圖2‐8Konstruct App ... 15
圖2‐9String™ Augmented Reality Showcase APP ... 15
圖2‐10 Starbucks Cup Magic App ... 16
圖2‐11 Fiat Street Evo App ... 16
圖2‐12 Historic New Orleans App ... 17
圖3‐1 本研究雛型開發流程圖 ... 20
圖3‐2 雛型開發流程 ... 21
圖3‐3 雛型一「手指足球」開發流程圖 ... 22
圖3‐4 雛型二「變裝喬巴」開發流程圖 ... 22
圖3‐5 雛型三「AR 電影海報」開發流程圖 ... 23
圖3‐6 研究流程 ... 24
圖4‐1 使用 3Ds Max 2012 製作模型 ... 26
圖4‐2 使用 Unity3D 讀取模型 ... 26
圖4‐3 手指足球圖卡設計 ... 27
圖4‐4 「手指足球」的互動示意圖 ... 27
圖4‐5 手指足球整合示意圖... 30
圖4‐6 變裝喬巴的模型設計 ... 34
圖4‐7 變裝喬巴模型的貼圖設計... 34
圖4‐8 變裝喬巴圖卡設計 ... 35
圖4‐9 變裝喬巴的四種帽子變化 ... 35
圖4‐10「變裝喬巴」互動示意圖 ... 36
圖4‐11 「變裝喬巴」系統整合示意圖... 39
圖4‐12 魔法海報圖卡設計 ... 43
VIII
圖4‐13「魔法海報」互動示意圖 ... 44
圖4‐14「魔法海報」系統整合示意圖 ... 47
圖4‐15 「AiR」圖示設計 ... 51
圖4‐16「AiR」啟動畫面設計 ... 52
圖4‐17「AiR」應用程式整合（iPhone 版本） ... 52
圖4‐18「AiR」在 iPhone 上的測試畫面 ... 53
圖5‐1 使用者使用手指操作 ... 54
圖5‐2 使用者使用兩隻手指操作 ... 54
圖5‐3 多人一起操作 ... 55
圖5‐4 使用者在測試觸碰互動 ... 55
圖5‐5 使用者觸碰虛擬按鍵 ... 55
圖5‐6 使用者觸碰虛擬按鍵 ... 55
圖5‐7 使用者觸碰虛擬按鍵 ... 56
圖5‐8 使用者變換不同視角觀看... 56
圖5‐9 使用者觸碰螢幕的控制鍵 ... 56
圖5‐10 使用者測試感應效果 ... 56
圖5‐11 使用者觀看影片 ... 57
圖5‐12 使用者觀看影片 ... 57
圖5‐13 應用案例觀察指標分析圖 ... 61
圖5‐14 受訪者性別資料統計 ... 62
圖5‐15 受訪者教育程度資料統計 ... 62
圖5‐16 受訪者年齡資料統計 ... 63
圖5‐17 受訪者職業資料統計 ... 63
圖5‐18 受訪者是否有智慧型手機之資料統計 ... 64
圖5‐19 受訪者否有看過擴增實境技術相關的應用程式之資料統計 ... 64
圖5‐20 受訪者否有在行動載具使用過擴增實境技術相關的應用程式之資料統計 ... 65
圖5‐21 受訪者對「應用程式操作難易度」的看法 ... 66
圖5‐22 受訪者對「應用程式中三件應用案例操作難易度」的看法 ... 66
圖5‐23 受訪者對「應用程式中三件應用案例滿意度」的看法 ... 67
圖5‐24 受訪者對「應用程式中三件應用案例互動方式」的看法 ... 68
圖5‐25 受訪者對「應用程式中三件應用案例趣味性」的看法 ... 68
1
第一章 緒論
本章節共分四節，第一節敘述本研究的研究背景與動機，第二節擬定本 研究的研究目的，第三節說明本研究的研究方法與研究架構，而第四節則對本 研究的相關名詞作解釋，最後第五節針對本研究的研究範圍及限制進行相關說 明。
第一節 研究背景與動機
近幾年隨著科技的進步，各種輕薄、短小、功能強大的行動載具(Mobile Devices)不斷的推陳出新，像是平板電腦(Tablet PC)及智慧型手機(Smart Phone)等，
不僅體積越來越輕巧、機身越來越薄，功能與效能也越來越強大，且豐富多樣 的內容與應用程式讓資訊的獲得不再只是侷限在個人電腦與筆記型電腦上。由 於無線網路和 3G 信號的建設，資訊的取得越來越容易、越來越迅速即時，使 得行動載具的相關應用層面變得更為廣泛。
擴增實境(Augmented Reality，簡稱 AR)的技術應用在近幾年越來越熱門，
相關的應用工具也從個人電腦(Personal Computer)延伸到行動載具上，在 2007 年 1 月蘋果電腦公司發表了 iPhone 後，智慧型手機市場就進入了戰國時代，各家 科技公司紛紛的加入這塊行動科技市場，如 Google 的 Android、Windows 的 Windows Phone 等智慧型手機作業系統，都相繼的應用在多種智慧型手機上，
iPhone 的出現不僅宣告了智慧型手機的行動資訊時代，也開啓了智慧型手機應 用程式(Application，簡稱 APP)開發的大門，讓軟體開發者投入應用程式的開發。
隨著行動載具的硬體技術的逐漸成熟，具備了高效能處理器、大尺寸螢幕及高 畫素攝影鏡頭等功能，讓擴增實境的技術可以在行動載具上開發相關的應用程 式。
本研究希望透過擴增實境之技術開發行動載具的應用程式，嘗試結合行 動載具的特性、擴增實境的技術與不同以往的互動模式，開發新奇有趣的應用 程式。
第二節 研究目的
目前台灣在擴增實境技術相關的學術研究中，大部份都是以個人電腦為 基礎的程式開發和應用，實際將擴增實境的技術應用在行動載具上的例子屈指 可數，其原因可能在於智慧型手機發展至這幾年才逐漸成熟或是開發難度過高、
相關應用程式開發套件支援不足等因素。因此，本研究的目的為利用擴增實境
2
的技術來開發 IOS 系統載具（如 iPhone 及 iPad 等）的應用程式作研究探討，提 供開發者往後應用擴增實境技術於行動載具的建議。
本研究之研究目的：
1. 探究擴增實境技術應用於行動載具應用程式開發的可行性。
2. 運用擴增實境技術，嘗試開發 IOS 系統載具的應用程式。
3. 探究擴增實境技術應用於行動載具應用程式的互動模式。
第三節 研究流程與研究方法
由於國內使用擴增實境的技術在行動載具上的相關研究不多，缺乏明確 的理論基礎，而本研究是屬於探索性質的研究，所以在應用程式系統開發的部 份採用雛型法開發行動載具的應用程式，系統分析的方法採用則是觀察法與訪 談法。
研究流程如圖 1-1 所示，首先針對本研究相關的問題進行文獻探討與回 顧，再由文獻中整理歸納出適合本研究進行開發行動載具應用程式的方法及系 統需求，接著以雛型開發、觀察法及訪談法進行系統規劃與實作，系統開發完 成初步雛型後，經由使用者測試與回饋，將他們提出的問題進行應用成式的修 正，再反覆測試到無問題之後，以觀察法與訪談法驗證所開發之應用程式的可 行性，最後在對所獲得的資料做分析與歸納整理，並做出最後的結論。
3
圖 1-1 研究流程 第四節 名詞釋義
本研究旨在使用行動載具的擴增實境技術開發應用程式，因此將針對擴 增實境、行動載具、應用程式等名詞作解釋。
一、擴增實境
擴增實境（Augmented Reality，簡稱 AR）是一種能將「虛擬」的 資訊及「真實」的事物進行結合的技術，所以，擴增實境的技術除了能讓使用 者感知所在真實的環境外，又能感知得到由電腦產生的虛擬物件或資訊，透過 使用者的感官，可以感受到真實物體與虛擬物件，同時存在於相同的空間裡的。
因此，擴增實境的概念是適用於任何的感官（Azuma，1997）。
本研究所指的擴增實境，是利用視覺、觸覺感知，透過本研究開發的應 用程式在行動載具上產生的虛擬物件，即時與使用者所在的真實環境影像進行 結合。使用者在使用以行動載具上擴增實境技術開發的應用程式為基礎的系統 架構中，與虛擬物件互動，讓使用者感受到擴增實境技術的臨場感受。
研究問題
文獻探討與需求分析
系統實作及測試
觀察法與訪談法
資料分析及歸納整理
結論 使用者測試
4
二、行動載具
行動載具（Mobile Device）具有接近筆記型電腦般高效能的運算能力以 及體積小、重量輕的可攜帶性，宋曜廷等人（2006）研究將行動載具分為配帶 式工具、手持載具、掌上型電腦和筆記型電腦等四類，其中智慧型手機是屬於 手持載具類，平板電腦屬於掌上型電腦類，本研究所只開發蘋果公司的 IOS 平 台的應用程式，所以行動載具的部分只限定具有 IOS 系統的平板電腦 iPad 與智 慧型手機 iPhone。
三、應用程式
應用程式（Application）原是指使用於個人電腦系統平台的應用程式，像 是文書軟體、影音軟體、繪圖軟體等，之後因行動載具的快速發展，將原本個 人電腦的應用程式功能移植到行動載具的系統平台，讓使用者能依照自己的需 求安裝應用程式在行動載具中，讓行動載具增加更多的功能。
第五節 研究範圍與限制
本研究運用擴增實境的技術與行動載具的結合，探討其發展的可行性，
研究範圍著墨於行動載具的擴增實境應用程式開發與互動設計，因行動載具的 平台環境很多，本研究的開發環境只以蘋果公司 IOS 系統的行動載具為主，應 用程式開發使用 Unity 3D、QualComm AR SDK 及 Xcode 開發相關應用程式，其 他平台環境則不在本研究範圍之內。
基於上述研究範圍的探討，本研究可能會有下列的研究限制，其內容敘 述如下：
一、由於行動載具的系統平台有很多種，以目前各項軟硬體之限制下難以全面 觸及，本研究主要針對 IOS 系統進行討論。
二、對不同的使用者而言，每個人對互動介面之理解力及經驗可能會略有不同，
而影響本研究的調查結果。
5
第二章 文獻探討
擴增實境技術的發展與虛擬實境息息相關，Azuma 則認為擴增實境是虛 擬實境的延伸出的技術。Cawood 和 Fiala(2008)提出了擴增實境技術的三項基礎，
而隨著科技的逐漸進步，擴增實境技術從個人電腦上的應用，慢慢發展到行動 載具上，相關的應用程式越來越多。
本章節除了對擴增實境技術進行探討之外，也對行動載具上的擴增實境 套件進行分析。本章節共分三節，第一節是針對擴增實境的原理和技術類型進 行探討，第二節是分析行動載具的擴增實境的相關套件，第三節則是敘述行動 載具的擴增實境應用程式的應用實例。
第一節 擴增實境
一、擴增實境的定義
擴增實境（augmented reality，簡稱 AR），是從虛擬實境（Virtual Reality，
簡稱 VR）延伸出來的技術。Azuma（1997）將擴充實境定義為虛擬實境的另一 種變化，虛擬實境的目的是要讓使用者完全的融入在電腦所創造出來的虛擬 3D 環境中，當使用者沉浸在 VR 的環境中時，現實與虛擬的環境的界限會變得很 模糊，無法清楚的辨認其週遭的現實環境；然而擴充現實可以讓使用者看到現 實環境以及重疊在現實環境中的虛擬物體，因此，擴充現實是增進了現實，而 不是完全的取代現實。
Azuma 認為擴增實境的要素必須包含：
(1)結合真實與虛擬的環境。
(2)有即時性的互動。
(3)必需在三度空間內運作。
運用擴增實境的目的在於將虛擬的數位資訊與現實空間的實體結合，使 得虛擬和真實的界線互相交融。Milgram et al. （1994） 依據現實環境中使用者 所接觸的虛擬資訊的比例，將混合實境(Mixed Reality, 簡稱 MR)界定於真實環境 與純粹虛擬環境之間。
6
圖 2-1 虛擬實境與實體環境的程度劃分
Feiner(2002)指出擴增實境與虛擬實境的差異：虛擬實境試圖以虛擬的影 像來取代現實環境中的影像，而擴增實境則是把虛擬的影像重疊在真實環境中，
讓使用者能同時接收真實與虛擬融合的資訊，並獲得訊息。
二、擴增實境系統的類型
Cawood 和 Fiala(2008)研究指出，擴增實境的系統開發以影像辨識、互動 控制及電腦圖學等三項技術為其基礎（圖 2-2）。
圖 2-2 擴增實境系統架構
以 IOS 系統的智慧型載具來說，使用者在操作擴增實境的應用程式時，
攝影機擷取的影像會透過影像辨識系統比對標記圖卡（Marker）進行比對，當 標記圖卡比對成功後，核心處理器將會依據標記圖卡把設定好的虛擬物件與即 時拍攝的現實環境疊合成影像，影像再顯示於觸控螢幕上，使用者可以藉由顯 示畫面看見虛擬物件與現實環境結合的影像，並可透過觸控螢幕對虛擬的物件 即時的互動（圖 2-3）。
User Application
Interaction Devices and Techniques Presentation Authoring Tracking and Registration Display Technology Rendering
Mixed Reality（MR）
Real Environment
Virtual Environment Augmented
Reality(AR)
Augmented Virtuality(VR)
7
圖 2-3 iPhone 擴增實境應用程式實例
資料來源：http://technabob.com/blog/2008/08/16/artoolkit-augmented-reality-iphone/
隨著科技的進步，行動載具的互動控制與電腦圖學技術已逐漸發展成熟，
影像辨識技術的創新更是扮演擴增實境發展的關鍵因素。擴增實境的影像辨識 技術分成有標記式(Marker)與無標記式(Markerless)兩類(薛楷文，2009)。
(1) 有標記式擴增實境(Marker AR)
有標記式擴增實境技術必須要有特定的標記（marker）或圖案讓系統辨 識，且透過標記的辨識來定位模型顯示在畫面上的相對位置，運作流程如圖 2-4。
圖 2-4 有標記式技術的運作流程
常見的標記方式如圖 2-5，分別有 Frame markers、Dot markers、Split
markers、Data Matrixmarkers、ID markers、Template markers 等六種(吳明諶，2010)，
載入當前攝影機畫面
比較攝影機畫面與 系統辨識圖案
疊加虛擬資訊於 攝影機畫面
形成擴增實境 顯示畫面
8
標記大多用簡單的方塊、文字或圖案呈現，其色調以黑白或灰階為主， 好處是 能讓系統在低光源或攝影機像素較低時能精確快速的辨識圖樣，在六種標記中 以 Data Matrix、ID Marker、Template markers 最為常見，如表 2-1。
表 2-1 常見的標記圖
9
圖 2-5Template markers 標記
資料來源：http://arblog.inglobetechnologies.com/?p=397
(2) 無標記式擴增實境(Markerless AR)
無標記式擴增實境又稱自然特徵辨識擴增實境(Natural-Feature Tracking AR)，於 2008 年提出，並在能在手機上運作。相較於有標記式擴增實境技術，
無標記式擴增實境不須透過特定的圖案作為媒介，就能達成辨識的效果，且不 只是平面圖形，實體的物件也能辨識，運作流程如圖 2-7。
圖 2-6 無標記式技術的運作流程 建立辨識圖片
載入當前攝影機畫面
比較攝影機畫面與 辨識圖案
疊加虛擬資訊於 攝影機畫面
形成擴增實境 顯示畫面
10
本小節說明了擴增實境的技術是由虛擬實境延伸的，並瞭解使用者能夠 在真實的環境中與虛擬的 3Ｄ物件及時的互動，並透過擴增實境技術的辨識類 型及運作程序的歸納，進而開始研究擴增實境在行動載具的應用程式的開發。
本研究將運用無標記式辨識技術為主軸開發擴增實境的應用程式，確定 辨識類型之後，接著分析能在行動載具運作的擴增實境套件，再藉由圖卡的介 面設計與程式的互動模式進行設計與開發。
第二節 擴增實境的系統開發套件
目前的擴增實境開發套件分成有標記式技術與無標記式技術，表 2-2 為 開發套件的相關說明與內容。
表 2-2 現有擴增實境開發套件
套件名稱 技術類型 使用系統語言 套件說明
AR
Toolkit 有標記式技術 C++
由日本加藤博一 (Hirokazu Kato)先 生及華盛頓大學 HITLab 於 1999 年 所共同開發的一套以 C/C++為開發 語言的跨平台擴增實境函式庫。此 函式庫可即時從輸入裝置(如攝影 機)所輸入的影像中追蹤標記，並 算出相機至實體標記之距離、位置 及方向，最後再將虛擬三維物件繪 於現實的標記上方。
AR Tag 有標記式技術 C++
由加拿大 Mark Fiala 受到 ARToolKit 之啟發於 2004 年提出。ARTag 強 調更複雜且更具效率的圖形處理及 影像辨識能力，其中最大特點在於 ARTag 具有自我檢查更正的能力，
可於標記被污損或遮住部份的情況 下還能正確辨識。ARTag 的唯一遺 憾在於其使用一種強韌的數位編碼 技術(Digital Encoding Method)辨識 標記，所以使用者僅能使用內建的 標記(共 1001 個以索引編號為基礎 之標記)供系統追蹤辨識用。
ARToolKi
tPlus 有標記式技術 C++ 由 Christian Doppler Laboratory 所開 發，是其所發展的 Handheld AR 計
11
套件名稱 技術類型 使用系統語言 套件說明
畫中之一部分，為免費且開放原始 碼。比之 ARToolKit 加強了模組化 概念並增加了類似於 ARTag 以編 號為基礎之標記。此外，
ARToolKitPlus 也加快了硬體的工作 速率，且將辨識門檻值(threshold)進 行自動化處理。但其官方釋出的程 式不完整、亦無使用說明，最後於 2006 年 6 月停止更新及維護。
NyARTool
Kit 有標記式技術 JAVA
一套基於 ARToolKit 所發展的 Java 函式庫，並提供 Java、C#、Android 等版本之下的虛擬工作平台，可讓 使用者在各種平台亦或是於智慧型 手機上開發擴增實境應用程式。
DART 有標記式技術 Macromedia Director
為一運行於 Macromedia Director 平 台的擴增實境工具，可讓使用者輕 易將 Flash 與 Director 軟體所製作的 內容結合並應用於擴增實境。
FLARTool
Kit 有標記式技術 Flash AS 3
以 ARToolKit 為基礎所發展的工 具，可讓使用者輕易將 Flash 軟體 所製作的內容結合並應用於擴增實 境。
PozARToo
lkit 有標記式技術 C++
以 ARToolKit 為基礎所發展的工 具，可讓使用者輕易將 Poser 軟體 所製作的內容結合並應用於擴增實 境。
Processing 無標記式技術 JAVA
可建立自己的辨識標記，但因使用 JAVA 語言，易使系統效能降低，
增加使用的限制。
D’Fusion 無標記式技術 自行開發語言
支援網路傳輸功能，影像辨識與繪 圖可使用不同軟體運算，含
D'fusionAR SDK，可撰寫硬體外掛 驅動程式。
12
套件名稱 技術類型 使用系統語言 套件說明
Unifeye SDK
有標記式與無
標記式技術 C#
同時支援標記式與無標記式技術，
可載入多個 AR 物件於畫面，與獨 立操作各物件。
資料整理自薛凱文(2009)、甘泰瑋(2009)及張孝嘉(2011)
隨著智慧型載具的普及與發展，陸續有些針對行動平台所開發的擴增實 境技術，表 2-3 為開發套件能支援的行動平台彙整。
表 2-3 行動裝置的擴增實境發展套件 行動平台
套件名稱 Android iPhone Symbian WM Java Unifeye Mobile ◎ ● ● ● ◎
Junaio ● ● ○ ○ ○
SREngine ○ ● ○ ○ ○
NyARToolKit ● ○ ○ ○ ● iPhoneARKit ○ ● ○ ○ ○ QualComm AR SDK ● ● ○ ○ ○
●表示支援 ◎表示陸續支援 ○表示不支援 資料整理自 http://jwill.pixnet.net/blog/post/25524976
本小節歸納出常見的擴增實境開發套件，擴增實境技術的應用起初是使 用桌上型電腦當作載具，透過外接的視訊攝影機來辨識圖卡，最常使用的套件 是 ARToolkit，可以開發簡易的擴增實境程式，但在操作時會受限於展示的環境，
使用者只能在視訊攝影機的範圍操作，之後擴增實境技術延伸至行動載具，針 對 iPhone 或 Android 系統平台開發的套件越來越多，辨識技術也從有標記式發 展到無標記式。
本研究是針對 IOS 系統平台開發擴增實境的應用程式，且需要使用無標 記式的辨識技術，因此選定 QualComm 公司開發的擴增實境套件 Vuforia，
Vuforia 不僅支援 IOS 系統平台，還使用無標記是辨識技術，而且可以透過 Unity3D 軟體的動作介面簡單的設定應用程式的互動功能，縮短應用程式的開發 時間。
第三節 互動介面與模式
互動介面是指使用者與電腦之間的互動，傳遞訊息、資料、符號等資訊 交流的一個介面環境。依照 Joan Bene 的看法，人機介面包含觀念的模式、表達
13
的語言、系統交互作用的語言、實作的軟硬體系統模式等四個項目，廣義的來 說，所謂介面是傳遞人與機器之間的所有資訊交流和控制活動。
Jakob Nielsen（1993）認為評估介面的使用性並非單一向度，而是有五個 效標所組成，敘述如下：
一、可學習性（learnability）：
系統介面應該容易學習，而且能讓使用者很快的操作系統或介面。
二、效率性（efficiency）：
系統介面能有效的使用，讓使用者一旦學會了，即可以很快發揮最高效能 的表現。
三、可記憶的（memorability）：
使用者在操作系統介面時容易記憶，即時經過一段時間沒有使用系統介面，
還能迅速的操作系統，不必重頭學起。
四、錯誤率（errors）：
系統介面應該有比較低的錯誤率發生，讓使用者操作時不會發生很多錯誤，
而且即使操作錯誤也可以輕易的克服問題。
五、滿意度（satisfaction）：
使用者在操作系統介面後，對系統介面的使用是感到愉悅或滿意的。
Graham(1999)認為互動是將所有形式的媒介整合成一個數位的方式呈 現，並允許使用者有一些程度的互動。而 Schimmel（1988）「互動」本身即是 回饋的表徵。互動即是一種雙向的溝通，而這種互動性的歷程是非線性的溝通 方式，訊息不但能立刻獲得回應，而且可以隨時提供回饋（黃清雲，1994）。
Borsook, T. K（1991）提出互動是雙向溝通的，在互動的過程中應該會有 回饋，並能提供不同的機會滿足每個人不同的需求，而且互動主要是發送者與 接收者的雙向溝通，因此提出了主要構成互動的六個要素，敘述如下：
一、立即回饋（immediacy of response）：
當使用者提出某項訊息要求時，互動式系統能立刻提供適切的訊息回饋給 使用者。
二、非線性資訊處理（non-sequential access information）：
能讓使用者依照自己的需求選擇系統資料庫中不同的資訊。
三、適應性（adaptability）：
系統能針對不同的使用者給予不同的資訊。
四、回饋（feedback）：
系統能針對個人的回應而給予該回應適當的回饋。
五、選擇權（options）：
14
使用者操作系統時，有充分的控制權力。
六、雙向溝通（bi-directionalcommunication）：
系統能提供各種訊息給使用者，同時使用者也才能表達意見及需求，彼此 雙方有良好的溝通管道。
本小節提出互動介面的評估項目與互動模式的元素，本研究將各項要點作 為應用程式開發的設計原則，讓使用者在操作時，能藉著應用程式的互動介面 與模式，透過感官與行動載具相互連結，達到互動的宗旨，讓使用者印象深刻。
也藉由評估要點評估應用程式的雛形，讓使用者在使用上能直覺且簡單的操作 應用程式。
第四節 智慧型載具擴增實境技術的相關應用
近年來擴增實境技術應用在智慧型載具的相關應用日漸增加，本研究針 對幾項案例的應用面、互動方式、辨識模式及功能面作探討。
一、Aurasma(2011)
將油墨印製的文宣轉變成互動影片，透過自然特徵追蹤辨識技術分析 iPhone 所拍攝的圖片，再透過資料傳輸後端資料庫進行影像比對，將符合該影 像的影片傳到螢幕上播放。如圖 2-7 所示。
圖 2-7 Aurasma App
二、Konstruct(2011)
透過聲音來產生互動，使用有標記式辨識技術(String 的 SDKs)辨識圖案，
由 iPhone 上的麥克風接收聲音，再由聲音轉換成立體的亂數影像，如圖 2-8。
此應用案例為混合實境的應用，圖像的辨識加上聲音的互動，構成了豐富的互 動模式。
15
圖 2-8Konstruct App
三、String™ Augmented Reality Showcase
String Labs Ltd 針對智慧型載具開發出擴增實境的套件，並開發 App 展示 了其套件多樣的互動功能，像是可針對物件的部件進行著色、可立即繪製圖案 或文字、可旋轉 3D 物件、可操作 3D 物件移動及可截取擴增實境影像圖片等功 能。
圖 2-9String Augmented Reality Showcase APP
四、Starbucks Cup Magic
星巴克將擴增實境技術結合聖誕商品所推出的應用程式，當消費者購買 其咖啡時，可透過 iPhone 的攝影鏡頭對準咖啡杯特別的圖案，就會出現滑冰選
16
手、松鼠、滑雪橇的男孩與狗、狐狸等虛擬動畫，讓消費者在享受咖啡時，也 能體驗互動的樂趣。
圖 2-10 Starbucks Cup Magic App
五、fiat street evo
Fiat 汽車製造商開發此應用程式讓客戶了解車輛的性能，當使用者透過 智慧型手機辨識到路上的交通號誌時，螢幕上便會出現 Fiat 公司設定的車型，
告訴消費者這輛車子的相關功能。例如當客戶辨識停車號誌，手機畫面就會出 現汽車的卓越剎車功能，藉由此方式讓消費者了解車子的性能而提高銷售量。
圖 2-11 Fiat Street Evo App
六、Historic New Orleans
Historic New Orleanss 能將舊城市的影像重疊在新程式的影像上面，所以 當使用者拿著智慧型手機拍攝城市時，應用程式會鎖定你所在的位置，比對資
17
料庫裡的舊照片，將以前城市的樣貌以半透明的方式與現在的城市疊合，讓使 用者能同時看到新舊城市的影像，是個具有歷史教育意義的應用程式。
圖 2-12 Historic New Orleans App
本小節將相關行動載具上的擴增實境應用程式進行分析，並比較各案例 的互動介面設計及互動模式的設計，表 2-4 為互動介面設計分析，內容有擴增 實境的應用、辨識類型、系統平台、媒體素材等。表 2-5 為互動模式分析，除 了擴增實境基本的互動方式移動、放置、旋轉之外，了解相關案例其他不同的 互動模式，作為本研究應用程式開發的參考。
表 2-4 互動介面設計分析
案例名稱 應用 辨識類型 系統平台 媒體素材 Aurasma 商業、展示 無標記式 IOS 影片 Konstruct 展示 有標記式 IOS 3D 物件
String 展示 無標記式 IOS 3D 物件 Starbucks
Cup Magic 商業 無標記式 IOS 3D 物件 fiat street evo 商業 無標記式 IOS
Andriod 3D 物件 Historic New
Orleans 旅遊 無標記式 IOS 圖片
18
表 2-5 互動模式分析
案例名稱 互動方式
放置 移動 旋轉 螢幕觸碰 聲音輸入 GPS 定位 Aurasma 支援 支援 支援 不支援 不支援 不支援 Konstruct 支援 支援 支援 不支援 支援 不支援 String 支援 支援 支援 支援 不支援 不支援 Starbucks
Cup Magic 支援 支援 支援 支援 不支援 不支援 fiat street evo 支援 支援 支援 不支援 不支援 不支援
Historic New
Orleans 支援 支援 支援 不支援 不支援 支援
19
第三章 系統架構與研究方法
本研究透過下列所述之研究方法、觀察與訪談法、以及研究流程等三節，
分別說明本研究的實施方法與步驟。
第一節 研究方法
本研究預期透過擴增實境的技術、行動載具的互動設計與擴增實境應用 程式的相關案例分析，探討擴增實境的技術應用於行動載具應用程式的開發，
提供不同的介面設計與互動模式。本研究採用系統需求分析、雛型開發試驗來 開發應用程式，反覆修正開發雛型之後，再以觀察法觀察使用者操作應用程式 的過程及訪談使用者操作之後的感受相互應用，最後分析與歸納出擴增實境技 術應用於行動載具的應用程式開發之結論與建議，研究方法內容敘述如下：
一、文獻回顧與分析
本研究採用文獻回顧、分析、蒐集與本研究相關的文獻資料。並針對擴 增實境的技術與發展、行動載具擴增實境之技術與套件的介紹與發展、擴增實 境應用程式的實例等文獻，統整與分析相關理論與應用，作為擴增實境技術運 用在型動載具應用程式開發的基礎。
二、雛型開發法
本研究經由文獻回顧及分析，開發實作上的需求與要點，將運用擴增實 境技術開發行動載具上的應用程式。本研究使用雛型開發來驗證，以雛型開發 進行實作雛型設計，藉由雛型開發的快速驗證需求、使用者參與度高、開發彈 性高、接受程度高等優點，進行開發的流程，最後完成本研究。
依據本研究提出幾項需求，來進行雛型的設計。
1. 使用行動載具的擴增實境套件開發應用程式。
2. 以 IOS 系統的智慧型載具為開發平台。
3. 開發多樣的互動功能及簡單直覺的介面設計，提供良好的互動體驗。
4. 結合生活化的應用開發應用程式。
20
圖 3-1 本研究雛型開發流程圖
本研究的雛型開發以林淑芬（1993）所提出的系統雛型發展法進行雛型 開發，分成系統規畫、需求分析、系統設計、建立雛型、評估雛型，本研究將 以這五個項目作為系統開發步驟，項目說明如下：
1.需求分析：分析應用程式所需要的功能，規畫相關需求。
2.系統設計：本研究預期以擴增實境技術結合行動載具開發應用程式。
3.建立雛型：透過雛型開發流程與步驟，以擴增實境技術結合行動載具 開發相關的應用程式應用案例。
4.評估雛型：透過觀察與訪談使用者的反應、回饋及意見來修正雛型。
雛型開發流程圖 3-2 如下所示。
需求分析
系統開發與設計
建立雛型
評估雛型
實作成果
主軸 面設 術以 與人 實作 饋與 圖，
本研究 軸，本研究 設計、硬體 以 Vuforia 擴 人機互動方 作完成後會 與建議，經
，雛型一為
究規畫三個雛 究將雛型內部 體配置及系統 擴增實境套 方向來開發 會讓使用者操 經反覆修改
為「手指足球 透過展示 以擴增實
圖 3- 雛型進行開 部分為五大 統測試。3D
件無標記式
，並使用 IO 操作，並觀
，直到完成 球」，雛型 示觀察使用者
見進 實境技術結合
設計 提出功能需
21
-2 雛型開發 開發，以擴增 大部分，分別 D 模型使用 式開發介面 OS 系統的智 觀察使用者的 成雛型。以下 型二為「變裝
評估雛型 者的反應，
進行雛型的修 建立雛型 合智慧型載
系統設計 計應用程式 需求分析 需要，規畫出
發流程 增實境結合 別為 3D 模型
3DMAX 及 圖卡，介面 智慧型載具 的操作過程 下為本研究 裝喬巴」，
，並訪談使 修正 載具實作出
腳本 出需求分析
合行動載具為 型製作、辨 及 Unity3D 製
面設計依據 具為展示平台 程及訪談使用 究兩項雛型設
，雛型三為 用者的意 應用程式
為雛型開發 辨識技術、介
製作，辨識 據應用案例性
台，系統雛 用者，提供 設計開發流 為「魔法海報
發為 介 識技
性質 雛型 供回 流程
報」。
互動模式
互動模式
圖 3
圖 3 評估 式：觸碰、移
Vu
評估 式：觸碰、移
Vu
3-3 雛型一
3-4 雛型二 使用者意見
介面 移動、旋轉、
uforia的無標 使用3DM
使用者意見 介面 移動、旋轉 uforia的無標
使用3DM
22
「手指足球
「變裝喬巴 完成雛型 系統測試 見，決定是 設計與硬體
、放置 辨識技術 標記式(Ma 3D模型製作 MAX及Unit
雛型一開發
完成雛型 系統測試 見，決定是 設計與硬體 轉、放置
辨識技術 標記式(Ma 3D模型製作 MAX及Unit
雛型二開發
球」開發流程
巴」開發流程 型
試
是否需要修改 體設備 術
arkerless)辨 作
ty3D製作 發
型 試
是否需要修改 體設備 術
arkerless)辨 作
ty3D製作 發
程圖
程圖 改雛型
iPhone及iP 辨識
改雛型 iPhone及 辨識
Pad
及iPad
一、
料的 動作 改之 確地 本研 Niel 重點 二、
卷，
字記
訪談
、觀察法：
觀察法 的歷程，是 作品的實際 之後再進行 地了解，在 研究採用直 lsen 提出的 點。
、訪談法：
訪談是
，在訪談的 記錄受訪者 本研究 談，引導受 互動模式
圖 3-5 第
法是指在自然 是在設計研究 際互動狀況 行評估是否完 在觀察時利用 直接觀察及實 的人機介面評
是受訪者以口 的過程中，訪 者的答覆，以 究於應用程式 受訪者針對主 評估 式：觸碰、
Vu
5 雛型三「
第二節
然的情境中 究中最普遍
，並且即時 完成預期成 用拍照、錄 實驗觀察觀 評估效標及
口述的方式 訪問者可以 以作為資料 式展示期間 主題進行深 估使用者意見
介面 移動、旋轉 uforia的無標
使用FFCod
23
AR 電影海 觀察法
中，透過感覺 遍的方法。阮 時的紀錄相關 成果。觀察者 錄影及錄音等 觀察使用者操 及 Borsook,T
式直接回答訪 以透過錄音或 料整理與分析 間，對操作完 深入陳述，訪 完成雛型 系統測試 見，決定是 面設計與硬體
轉、放置 辨識技術 標記式(Ma 3D模型製作 der轉檔及U
雛型三開發
海報」開發流 法與訪談法
覺器官及相 阮綠茵(2007 關問題與意 者必須要對 等儀器輔助 操作雛形，
.K 提出的互
訪問者的問 或錄影的方 析時參考。
完應用程式 訪談內容如 型
試
是否需要修改 體設備 術
arkerless)辨 作
Unity3D製作 發
流程圖 法
相關的工具去 7)提到藉由 意見，然後修 對觀察的主題 助，提供事後 觀察項目採 互動性評估
問題，受訪者 方式記錄訪談
式的使用者採 如表 3-1。
改雛型 iPhone及 辨識
作
去搜集研究 由觀察觀眾與
修改雛型，
題與目的有 後資料整理 採用 Jakob 估要素作為觀
者不需填寫 談過程，並
採用半結構 及iPad
究資 與互
修 有明 理，
觀察
寫問 並逐
構性
編號 1 2 3 4 5 6 7
8 9 10
11
號
請問使 2 請問使 請問使 4 請問使 請問使 6 請問使 請問使 最喜歡 請問使 請問使 0 請問使
性？
1 請問使
本研究
使用者在操 使用者在操 使用者在操 使用者在操 使用者在操 使用者在操 使用者在操 歡？
使用者在操 使用者在操 使用者覺得
使用者對這
究分成五個階
實驗與 研究
表 3-1 本研
作應用案例 作應用案例 作應用案例 作應用案例 作應用案例 作應用案例 作應用案例
作應用案例 作應用案例 使用行動載
次應用案例
第三節
階段，研究
圖 結
研
與測試 資
開發應 文獻資 探討相 研究 動機與目的
24
研究使用者 訪談內 例時，是否 例時，是否 例時，使用 例時，對整 例時，使用 例時，對應 例時，使用
例時，是否 例時，使用 載具，是否
例的互動方
節 研究
究流程如圖 3
3-6 研究流 結論與歸納階
結論 研究發展階 資料分析與歸
實作階段 應用程式架構 資料蒐集與歸 相關文獻與技 究概念發展 的
者訪談大綱 內容
會覺得應用 會覺得應用 的 3 張圖卡 體的應用程 的 3 張圖卡 用程式的互 的 3 張圖卡
會覺得應用 的 3 張圖卡 可以加強擴
式與介面設
究流程
3-2 流程圖所
流程 階段 階段
歸納 系
段
構與模型 歸納階段 技術分析 展階段
研究問題
用程式的介 用程式很難 卡中，哪一 程式滿意嗎 卡中，哪一 互動方式覺 卡中，哪一
用程式很有 卡中，哪一 擴增實境應
設計有什麼
所示。
系統評估 題界定
介面很複雜？
難操作？
一個最難操作 嗎？
一個你最滿意 覺得如何？
一個互動方式
有趣？
一個最有趣？
應用案例的互
麼建議？
？
作？
意？
式你
？ 互動
25
第四章 系統設計與實作
本研究將開發出三項實驗應用程式案例，分別為「手指足球」、
「變裝喬巴」及「魔術海報」，實驗應用案例建置使用 Qualcomm（高通公司）
所開發的 Vuforia 行動載具擴增實境套件，Vuforia 是針對行動載具所開發的應 用套件，是 Unity3D 軟體的外掛程式，內容包含了適合於行動載具擴增實境的 動作（Action），且使用無標記式的辨識技術，可以開發出符合本研究需求的應 用程式。其他軟體的部分會使用 3Ds Max2012 及 Unity3D 3.4.2 製作 3D 模型，用 Photoshop CS5 設計圖卡與應用程式介面，Xcode 4.3.2 設定應用程式的內容；硬 體的部分則需要使用 iPhone4 或是 iPad2 以上規格的行動載具，以下將有詳細的 介紹。
第一節 應用案例一：手指足球
一、設計概念
足球是一項很常見的運動項目，通常是用雙腳來進行競賽或遊戲，本研 究應用案例嘗試運用擴增實境的技術與互動方式，結合足球運動，讓使用者在 操作行動載具中的擴增時竟應用程式時，可以與螢幕畫面上的足球進行互動，
使用者只要透過手指觸碰足球，足球就能滾動，也可以多人一起操作，達到於 樂的效果。本應用案例透過趣味的操作方式及創新的互動模式呈現，讓使用者 留下深刻的印象。
二、3D 模型設計
手指足球的足球模型設計是以 3Ds Max 2012 軟體製作，再匯出到
Unity3D 使用，而因為模型的檔案格式有很多種，兩個軟體之間能相容的格式只 有 fbx 檔，因此在設計模型時，必須在 3Ds Max 2012 中把足球的材質、貼圖設 定完成，再匯出成通用的 fbx 檔，才能匯入 Unity3D 讀取使用。FBX 格式的檔 案是一種記錄 3D 模型與動畫的檔案格式，本來是一套 FilmBox 所使用的檔案格 式，後來 FBX 檔案格式變成了 AutoDesk 公司的 3D Studio Max、Maya、
MotionBuilder 互相專換資料的通用檔案格式。圖 4-1 及圖 4-2 為手指足球的模型 設計。
三
機互 球物 為
、互動介面
本研究 互動介面是 物件上，就
「手指足球
圖
面設計 究是運用圖卡 是利用 Vufor 就能透過行動 球」的互動示
圖 4-1 使用 3
圖 4-2 使用
卡（Marker ria 套件的虛 動載具的攝 示意圖。
26
3Ds Max 20
用 Unity3D
）為媒介進 虛擬按鍵技 攝影機辨識物
012 製作模型
讀取模型
進行人機介面 技術，透過軟
物件被碰觸 型
面設計，手 軟體設定將 觸的方向而滾
手指足球的人 將按鍵依附在
滾動。圖 4- 人 在足
-4
27
圖 4-3 手指足球圖卡設計
圖 4-4 「手指足球」的互動示意圖
「手指足球」的 Marker 是設計成一座迷你的足球場，使用者能在球場範 圍內用手指操控足球，周圍則設計了界線，當足球碰到界線時會反彈到場內，
表 4-1 為應用案例一軟硬體的細項，硬體載具 iPad2 及 iPhone4，作業系統為 iOS 使用 iPad 或 iPhone 感應圖卡
應用案例對應的圖卡
使用者可以任意移動位置
使用者操作行動載具
5.0 Vuf
四
動與
「手 用者
「手
互動
以上；軟體 foria 1.5 版本
U P
、互動模式
在擴增 與放置可以 手指足球」
者能與足球 手指足球」
使用
動步驟1：
當智慧型載
體則是使用 本。
軟體 3Ds Max20 Unity3D 3.4 Photoshop C Xcode 4.3.
Vuforia 1.5 式設計
實境的互動 以讓 3D 物件
除了運用了 球做觸碰的互 的互動步驟 表 用者操作情
載具啟動應
3Ds Max20
表 4-1 手
12 4.2 CS5
2 5
動模式中，
件有空間變化 了這三種基 互動，藉由 驟介紹
4-2 「手指 情形
應用程式拍攝
28
012、Unity3
手指足球軟硬
最基本的互 化，旋轉則 基本互動模式 由手指感受簡
指足球」的互
攝圖卡時，
3D、Xcode
硬體項目
iPad
互動模式是 則可以觀看
式之外，還 簡單又有趣
互動步驟介 行動
螢幕畫面會
4.3.2、Pho
硬體
d2 或 iPhon
是移動、放置 3D 物件 36 還結合了虛擬 趣的互動體驗
介紹
動載具顯示畫
會出現一顆
otoshop CS5
ne4
置及旋轉，
60 度的角度 擬按鍵，讓 驗。表 4-2 為
畫面
顆虛擬足球。
、
移 度。
讓使 為
。
互動 會由
互動 載具 不同
五
之外
檔這
fbx 以使
使用
動步驟2：
虛擬足球上 由碰觸點反
使用
動步驟3：
在互動作過 具自由移動 同的角度，
、互動應用
應用程 外，主要還 3D 模型 這個通用格
系統開 檔匯入，接 使用的格式
用者操作情
上有虛擬按 反方向滾動，
用者操作情
過程中，使 動視角，只要
也能隨時用
用程式設
程式的開發平 還是都在 Ma
型製作的部 格式，才能匯 開發整合的部 接著將設計 式，再透過 V
情形
按鍵，可以用 接觸到四
情形
使用者可以 要攝影鏡頭 用手指碰觸
設計
平台除了 3D ac OS 平台進
分，要由 3 匯入給 Unit 部分，以 U 計好的 Marke
Vuforia 1.5 將
29
用手指觸碰 四周的邊界則
自由的拿起 頭能辨識到圖 觸與足球互動
Ds Max 201 進行開發。
3Ds Max 20 ty3D 進行使 Unity3D 3.4.2 er 上傳至 Q 將 3D 模型
行動載
碰，當使用手 則會反彈。
行動
起圖卡任意擺 圖卡，圖卡 動。
2 必須在 W
12 將製作好 使用。
2 進行系統 Qualcomm 的 型與圖卡進行
載具顯示畫
手指碰觸足
動載具顯示畫
擺弄，或是 卡上的3D 模
Windows OS
好的 3D 模型
統整合，首先 的網站轉換 行連結，再
畫面
足球時，足球
畫面
是拿著智慧型 模型都能呈
S 製作 3D 模
型匯出成 fb
先要將足球 換成 Unity3D 再來就匯出 i
球
型 現
模型
bx
球的 D 可
iOS
30
的檔案格式，最後再由 Xcode 4.3.2 設定並傳輸至 iPad 或 iPhone 運作。如圖 4-2 手指足球整合示意圖。
圖 4-5 手指足球整合示意圖
Unity 3D
3Ds Max 2012匯出 fbx 檔
製作 Marker
安裝 Vuforia 1.5
設定 3D 模型足球的互動方式 及與圖卡的連結設定
匯入
匯出 iOS 格式
Xcode 應用程式設定
iPad 或 iPhone 運作應用程式
手指
步驟
當 3 Auto 步驟
使用 攝影 網站 My track 轉檔 Unit 步驟
指足球應用
驟 1：用 3D
3D 模型建立 odesk(*.FBX 驟 2：製作
用 Photoshop 影機在辨識 站(網址：ht Trackables kable，輸入 檔分析，最
ty3D 使用。
驟 3：安裝
程式的製作 表 Ds Max 2012
立完成時，
X)。
Marker 並上
p 設計 Mark 識時能比較有
ttps://ar.qual
建立一個 N 入 trackable 最後將給 Uni。
Vuforia 1.5
作流程如下 表 4-3 「手指
2 將足球 3D
將檔案匯出
上傳 Qualco
ker 的圖案 有效率。完
lcomm.at/qd
New Project的格式與尺 ity3D 的 Tr
31
下表 4-3 所示 指足球」應 D 模型匯出
出（Export
omm 的網站
，圖案最好 完成後另存為
devnet/sdk/io
，輸入新專 尺寸，然後
rackable Ass 示。
應用程式建置 出成 fbx 檔
），在檔案
站轉換格式
好有良好的對 為 JPG 檔，
os)，上傳時
專案名稱，上傳設計好 sets Package
置
案類型選擇
對比度與清 再上傳至 時必須先登入
在選擇 Cre 好的圖案，
e 檔案下載
清晰的線條 Qualcomm 的 入，接著在 eate a
經過線上的
，就可給
， 的 在
的
在 Q 用程 料夾 步驟 的連
啟動 這樣 Pack 的連 Data 增 V Virt 步驟
在 F
Qualcomm 的 程式的擴增 夾的路徑中 驟 4：匯入足 連結
動 Unity3D 樣才能使用
kage 及足球 連結。從 Pr
a 設定給 M VirtualButto tualButton 群 驟 5：用 Un
File 中點選
的網站(網址 時竟套件 v
，完成後就 足球模型，
，建立一個 Vuforia 擴 球模型，接下
roject 中新增 Marker，Ima
on 讓 3D 模型 群組起來。
nity3D 匯出
Build Settin
址：https://a vuforia-sdk- 就可以使用 再用 Unity
個新的專案 增實境的程 下來就可以 增 ARCame ageTarget 屬
型能有互動
出 iOS 格式檔
ng，Platform
32
ar.qualcomm
ios-1-5-8.zip 用套件了。y3D 設定 M
，建立時勾 程式庫。再 以開始設定 ra 及 Image 屬性中的 Da 動功能，最
檔
m 選擇 iOS
m.at/qdevnet/
p，接著將程
Marker 與 Vu
勾選 Vuforia- 再來匯入 Ma Marker 與 eTarget，在 ata 設定給 3 後將 3D 模
S，在 Player
/sdk/ios)下載
程式安裝到uforia 套件
-ios-1-5-9.un arker 的 Trac Vuforia 套件 在 ARCamera
3D 模型 soc 模型、Image
r Settings 中
載開發 iOS 到 Unity3D 資
AR 程式庫
nitypackage ckable Asset 件 AR 程式 a 屬性中的
ccer，接著新 eTarget 與
中設定要匯出 應 資
庫
， ts 式庫
新
出
iPad 步驟
將 U 之前 手機 步驟
應用 能。
ㄧ
愛馴 試用
d 或 iPhone 驟 6：用 Xc
Unity3D 輸出 前，藉由傳 機做測試。
驟 7：將應用
用程式傳至
。
、設計概念
「喬巴 馴鹿，是很 用擴增實境
的應用程式 code 設定應
出的.xcodep 傳輸線把 iPa
用程式傳至
至 iPad 或 iPh
第二節
念
巴」是日本暢 很受歡迎的角 境的技術與互
式，完成後 應用程式
proj 檔案打 ad 或 iPhone
至 iPad 或 iP
hone 後就可
節 應
暢銷漫畫「
角色，牠最 互動方式，
33
後按 Build 就
打開，轉換成 e 接上電腦
Phone 運作
可以測試「手
應用案例二
海賊王」裡 最大的特色是 搭配喬巴的
就能輸出了
成最新的 iO
，選插上的
手指足球」
二：變裝
裡其中的角 是牠頭上戴 的 3D 模型
。
OS5.1 版本 的 iOS Devic
擴增實境
裝喬巴
角色之一，外 戴的帽子。本
，讓喬巴能
，在測試 ru ce，就可傳
的互動功
外型相當的 本應用案例 能變裝，使用
un 傳至
的可 例嘗 用
34
者除了能看到人物不同視角的面貌，更能藉由虛擬按鍵來控制喬巴帽子的顏色，
讓喜愛喬巴的使用者有跟虛擬人物互動的感覺。
二、3D 模型設計
變裝喬巴的卡通人物模型是以 3Ds Max 2012 軟體製作，再匯出 FBX 檔給 Unity3D 使用。因為需要讓人物模型能變裝，所以使用 5 種不同顏色的材質貼圖 給模型使用，材質貼圖的設計是使用 Photoshop 針對人物帽子的部分變換藍、綠、
紫、黃等顏色，修改好之後分別存成 TGA 的圖片格式，就能一同匯進 Unity3D 來運用。圖 4-6 為變裝喬巴的模型設計，圖 4-7 為變裝喬巴模型的貼圖設計。
圖 4-6 變裝喬巴的模型設計
圖 4-7 變裝喬巴模型的貼圖設計
三、互動介面設計
變裝喬巴互動介面是以 Vuforia 套件的虛擬按鍵為基礎，在設計 Marker 時，設定虛擬按鍵的區塊範圍，只要攝影機辨識到有物體觸碰虛擬按鍵，就會 啟動虛擬按鍵設定好的動作去執行。
35
圖 4-8 變裝喬巴圖卡設計
變裝喬巴的 Marker 設計了 BLUE、GREEN、PURPLE 及 YELLOW 等四個 虛擬按鍵區塊，當我們觸碰到 BLUE 區塊，人物喬巴的帽子就會變藍色，觸碰 到 GREEN 區塊，人物喬巴的帽子就會變綠色，觸碰到 PURPLE 區塊，人物喬 巴的帽子就會變紫色，觸碰到 YELLOW 區塊，人物喬巴的帽子就會變黃色，如 圖 4-9 所示。圖 4-10 則為互動示意圖。
圖 4-9 變裝喬巴的四種帽子變化
36
圖 4-10「變裝喬巴」互動示意圖
本應用案例所使用的軟硬體技術與「手指足球」相同，但由於使用四個 虛擬按鍵，使用大螢幕的 iPad2 操作會有比較好的操作感及體驗效果。
表 4-4 變裝喬巴軟硬體項目
軟體 硬體
3Ds Max2012 Unity3D 3.4.2 Photoshop CS5
Xcode 4.3.2 Vuforia 1.5
iPad2 或 iPhone4
四、互動模式設計
本研究在「變裝喬巴」運用到的互動模式有圖卡的旋轉、放置、移動及 虛擬按鍵。圖卡的旋轉、放置、移動在擴增實境當中是一項很常用的互動模式，
使用者能夠透過轉動圖卡來改變虛擬 3D 物件的視角與深度；虛擬按鍵設計四 個選項，使用者能藉由碰觸按鍵改變虛擬 3D 物件的貼圖顏色。
綜合這些互動模式的擴增實境互動應用案例，詳細的互動步驟如下表 4-5 所示。
使用 iPad 或 iPhone 感應圖卡
應用案例對應的圖卡
使用者可以任意移動位置
使用者操作行動載具
互動
使用
動步驟1：
當智慧型載
使用
表 用者操作情
載具啟動應
用者操作情
表 4-5 「變裝 情形
應用程式拍攝
情形
37
裝喬巴」互
攝圖卡時，
互動步驟介紹 行動載
螢幕畫面會
行動載 紹
載具顯示畫
會出現人物
載具顯示畫 畫面
物「喬巴」。
畫面
。
