艾伯特電通股份有限公司與德霖技術學院 產學合作研究計畫成果報告 擴增實境下互動式動畫人物之研究 計畫編號 : 德研 ( 資工 )10503 計畫類別 : 研究類 服務類執行期間 : 民國 105 年 1 月 16 日起至民國 105 年 7 月 31 日執行單位 : 德霖技術學院資訊工程系合作廠商 : 艾伯特電通股份有限公司計畫主持人 : 臧意周助理教授共同主持人 : 計畫參與人員 : 本成果報告包括以下附件 : 結案報告一式二份 :13 頁 計畫執行相關圖片與說明 中華民國 105 年 8 月 15 日 1
擴增實境下互動式動畫人物之研究 研究摘要 (500 字以內 ): 本計畫提出利用 Unity 3D 引擎及其插件 Vuforia 的技術及功能, 結合 3D Maya Flash, 來實作完成擴增實境下互動式人物製作 現代社會中, 科技越來越發達, 擴增實境的運用也越來越多元, 而許多廠商或業者, 漸漸地也有需求朝向利用這項技術來擴展他們的商品的趨勢, 如館場中物品的導覽, 並能幫助這些業者來讓他們的商品製造話題性, 使顧客能更有新鮮感 本研究主要目的是實作開發擴增實境 (AR), 透過手機或平板的鏡頭, 以及 AR 技術, 使動畫呈現在實物平台上, 讓使用者可以輕鬆 愉快的享受擴增實境所帶來的感官樂趣 關鍵詞 : 擴增實境 互動 故事 3D 動畫 Abstract Keywords: 2
一 前言 近年來遊戲產業蓬勃發展, 許多遊戲公司花大量的金錢與時間, 做出了許多超擬真的 3D 人物 場景, 來吸引遊戲玩家去嘗試所做出的遊戲, 看到那些華麗逼真的舞台, 而我們開始有了製作擴增實境 (AR) 的念頭, 於是便開始找尋製作擴增實境的軟體 ; 主題設定為我最愛的宮崎駿動畫人物 現代社會中, 科技越來越發達, 擴增實境的運用也越來越多元, 許多廠商或業者, 漸漸地也利用這項技術來擴展他們的商品, 並幫助這些業者來讓他們的商品製造話題性, 讓顧客有新鮮感 本研究主要目的是實作開發擴增實境 (AR), 透過手機或平板的鏡頭, 以及 AR 技術, 使動畫呈現在實物平台上, 讓使用者可以輕鬆 愉快的享受擴增實境所帶來的樂趣 二 文獻探討 ( 一 ) 虛擬實境虛擬實境 (Virtual Reality, 簡稱 VR)[1], 也稱人工環境, 是利用電腦模擬產生一個三度空間的虛擬世界, 提供使用者關於視覺 聽覺 觸覺等感官的模擬, 讓使用者如同身歷其境一般, 可以及時 沒有限制地觀察三度空間內的事物 使用者進行位置移動時, 電腦可以立即進行複雜的運算, 將精確的三維世界影像傳回產生臨場感 該技術整合了電腦圖形 電腦仿真 人工智慧 感應 顯示及網路並列處理等技術的最新發展成果, 是一種由電腦技術輔助生成的高技術模擬系統 現在的大部分虛擬實境技術都是視覺體驗, 一般是通過電腦螢幕 特殊顯示裝置 或立體顯示裝置獲得的, 不過一些仿真中還包含了其他的感覺處理, 比如從音響 3
和耳機中獲得聲音效果 在一些高階的觸覺系統中還包含了觸覺資訊, 也叫作力反饋, 在醫學和遊戲領域有這樣的應用 人們與虛擬環境相互要麼通過使用標準裝置例如一套鍵盤與滑鼠, 要麼通過仿真裝置例如一隻有線手套, 要麼通過情景手臂和 / 或全方位踏車 虛擬環境是可以是和現實世界類似的, 例如, 飛行仿真和作戰訓練, 也可以和現實世界有明顯差異, 如虛擬實境遊戲等 ( 二 ) 擴增實境擴增實境 (Augmented Reality, 簡稱 AR)[2,3] 是一種實地計算攝影機影像的位置及角度, 並加上相應圖像的技術 這種技術目的是在螢幕上把虛擬世界套在現實世界進行互動, 提供現實中無法直接獲知的訊息 但是, 更深層次來講, 這種訊息實際上又讓每個人眼中的世界更加多樣性 擴增實境的定義 :(1) 虛擬物與現實結合 (2) 即時性互動 (3) 三度空間 它是一種結合虛擬化技術再來觀察世界的方式 也就是說,AR 能將互動技術拿來應用在真實世界中, 在我們每天接觸的環境中, 加上新的互動體驗 AR 不把人的感官抽離, 不企圖切斷人跟真實世界的關連性 ; 相反的, 它依附在真實世界裡, 再額外加上一些資訊 一些互動 一些感官經驗 這個方法讓我們在生活上省掉了架構新世界的苦功, 而且更容易融入既有的環境, 也更容易解決日常生活當中的大小問題 例如購買衣服時, 不需要換裝, 就可以透過 AR 呈現試穿的感覺, 以及是否合身, 又或者是購買彩妝時, 透過 AR 即可呈現彩妝的顏色效果 三 研究架構 ( 一 ) 製作環境 1 Autodesk Maya 2014 4
Maya [4] 3D 動畫 建模 模擬和彩現軟體, 提供美工人員完整的創意工具集 這些工具提供了一個起點, 可實現您在建模 動畫 照明和視覺特效方面的願景 Maya 支援 Windows Mac OS X Linux 作業系統, 提供了功能強大的建模 模擬 動畫 材質 布料 骨架 鏡頭追蹤與合成功能, 支援 NVIDIA PhysX 物理引擎 AMD Bullet Physics 物理引擎, 製作動畫時需要的許多效果, 皆可直接透過 Maya 完成, 而不需要仰賴其他外掛程式 它能對 3D 模型進行非常細緻的修改, 如進入點 線 面選項 在遊戲人物製作 場景的建立 圖片及動畫材質貼圖上都能發揮很好的效果 建模功能與選單相當優秀能夠創造出非常高品質的 3D 模型 Maya 運用在電影工業與遊戲設計的實例相當多, 可以在許多電影發現 Maya 參與製作的特效鏡頭, 包括 The Avengers ( 復仇者聯盟 ) 少年 Pi 的奇幻漂流 The Hobbit:An Unexpected Journey ( 哈比人的意外旅程 ) Transformers ( 變形金剛 ) Avatar ( 阿凡達 ) The Lord of the Rings ( 魔戒 ) Jurassic Park ( 侏羅紀公園 ) Harry Potter ( 哈利波特 ) Kung Fu Panda ( 功夫熊貓 ) 等系列電影的製作 而遊戲設計方面包括 Final Fantasy ( 最終幻想 ) Resident Evil 5 ( 惡靈古堡 5) 等 2 Adobe Flash CS5.5 Flash[5] 是多媒體動畫與互動式應用程式的製作軟體, 您可以使用 Flash 製作網路動畫, 並加入聲音 影像 視訊, 提供豐富的視聽覺效果 藉由 Flash 5
提供的 ActionScript 程式語言, 您也可以開發適用於網際網路的應用程式 由於 Flash 動畫使用向量圖形格式, 因此檔案的體積非常小, 透過網際網路播放 Flash 製作的動畫時, 採用串流的資料傳輸方式, 因此只需要很短的等候時間 此外, Flash 支援點陣圖形與視訊的匯入, 透過先進的編碼技術可將動畫壓縮為體積極小的檔案 現在已經有超過 99% 以上的平台支援 Flash 動畫, 使用 Flash 製作的動畫在大部份的電腦都可以正常播放, 因為 Flash 屬於開放的標準格式, 相容於 Internet Explorer Firefox Google Chrome Opera Netscape Navigator 等網頁瀏覽器 Flash ActionScript 3.0 的腳本編寫功能超越了早期版本 它目的在方便創建有大型數據集和可重用程式碼的複雜應用程序 AS 3.0 程式碼的執行速度可比舊式程式碼快 10 倍 Flash 除了可以發佈成 SWF HTML GIF 影像檔, 也可以發佈在 Windows, Mac OS 和 Android 平台上運作執行 所以 Flash 是一個不錯的跨平台動畫製作軟體工具 3 Metaio Creator Metaio Creator[6] 這套製作 AR 軟體的工具, 簡易式 AR 增強現實編輯器, 支持 ios,android 和 Windows PC Metaio Creator 軟體擁有全圖形操作界面, 使用拖曳式操作, 即可創建複雜的 AR 增強現實內容, 不需要開發者有任何編程基礎 6
Metaio Creator 軟體支持傳統的圖片識別, 也支持最新的三維物體與三維環 境識別 Metaio Creator 的發佈環境有兩種 :(1) 發佈到 AR 瀏覽器 ( 魔眼 -Junaio) (2) 發佈成自己定制的 App 4 Eclipse Eclipse[7] 是由 Open Source Community 所創建的開發軟體, 並被廣泛地使用在許多不同的領域 是著名的跨平台開源整合式開發環境 (IDE), 作為 Java 應用程式與 Android App 的開發環境 Eclipse 的外掛模組機制是輕型軟體元件化架構 在富客戶機平台上,Eclipse 使用外掛模組來提供所有的附加功能, 例如支援 Java 以外的其他語言 已有的分離的外掛模組已經能夠支援 C/C++ (CDT) PHP Perl Ruby,Python telnet 和資料庫開發 外掛模組架構能夠支援將任意的擴充功能加入到現有環境中, 例如配置管理, 而決不僅僅限於支援各種程式語言 5 Vuforia Vuforia[8] 原本是由高通 (Qualcomm) 公司提供的擴增實境平台, 提供 Unity 遊戲引擎的外掛程式, 製作完成的 APK 檔可置於 ios 與 Android 行動裝置平台 目前市面上的 AR 開發工具有 ARToolKit Unifeye 等軟體, 不過授權價格昂貴, 而 Vuforia 可以免費下載, 只有使用進階的功能與服務才需要另外支付費用 7
( 二 ) 系統開發流程圖本系統開發製作的流程圖如圖 6 所示, 先設計所需 2D 及 3D 人物模型, 接著製作人物的動畫, 將完成的人物動畫匯入至擴增實境的軟體工具內, 完成手機或平板電腦辨識的圖案, 最後達成呈現擴增實境的效果 四 系統實作系統以 Unity 3D 可插件之 Vuforia 為實作的開發引擎, 並結合 Maya Flash 等 3D 2D 動畫設計軟體來製作系統, 安裝 APK 檔於擴增實境眼鏡 平板電腦 手機等並開啟, 鏡頭對著辨識圖, 則螢幕會呈現出擴增實境效果 ( 同一個時間只能辨識一個圖案 ) 將底圖列印出來效果也會相同 實際完成操作展示如下, 圖 7 為自製的辨識底圖 1, 圖 8 為辨識的底圖 2 圖 9 是當鏡頭照底圖 1 時呈現一個我們製作會擺頭動作的 3D 人物模型 圖 10 則是當鏡頭照底圖 2 龍貓時, 會呈現一隻龍貓轉圈並且跳躍起來 圖 11 是當鏡頭照底圖 2 小女孩時, 會呈現此小女孩看著龍貓跑進 跑出洞穴的動作 圖 12 是鏡頭照底圖 2 飛機時, 會呈現飛機在飛行的畫面 另外我們完成的擴增實境還有 : 鏡頭照底圖 2 飛機, 會呈現飛機在飛行 鏡頭照底圖 2 機器人, 會呈現機器人跳躍起來並擺動手腳 鏡頭照底圖 2 情侶, 會呈現情侶親吻動作 鏡頭照底圖 2 魔女, 會呈現魔女騎掃帚飛行 8
五 結論透過互動式的擴增實境技術, 除了可以觀賞動畫故事外, 還可親身體會擴增實境所帶來不一樣的互動樂趣與感受, 它不僅只是一個故事的敘述, 還可以藉由使用者選擇不同模式的人物故事, 體驗到多種不同的經驗與感受 參考文獻 [1] 虛擬實境 ( 維基百科 ) https://zh.wikipedia.org/wiki/%e8%99%9a%e6%8b%9f%e7%8e%b0%e5%ae%9e [2] 擴增實境 ( 維基百科 ) https://zh.wikipedia.org/wiki/%e6%93%b4%e5%a2%9e%e5%af%a6%e5%a2%83 [3] 擴增實境介紹與應用於數位學習環境分析 ( 數位典藏電子報 ) http://newsletter.teldap.tw/news/insightreportcontent.php?nid=2876&lid=341 [4] Maya 教學 (CG 數位學習網 ) http://www.cg.com.tw/maya/content/maya_intro.asp [5] Flash 軟體 (CG 數位學習網 ) http://www.cg.com.tw/flash/content/flash_001.asp [6] Metaio Creator( 中文教學網站 ) http://dev.arinchina.com/120wz/ar5232/5232/1 [7] Eclipse 簡介與教學 ( 台大計算機及資訊網路中心電子報 ) http://www.cc.ntu.edu.tw/chinese/epaper/0020/20120320_2003.html [8] Vuforia 教學 (CG 數位學習網 ) http://www.cg.com.tw/vuforia/content/index.asp 9
圖 1 Autodesk Maya 2014 圖 2 Adobe Flash CS5.5 圖 3 Metaio Creator 圖 4 Eclipse 10
圖 5 Vuforia 圖 6 系統製作開發流程圖 圖 7 辨識的底圖 1 11
圖 8 辨識的底圖 2 圖 9 鏡頭照底圖 1 則呈現一個會擺頭的 3D 人物模型 12
圖 10 鏡頭照底圖 2 龍貓會呈現一隻龍貓轉圈並且跳起來 圖 11 鏡頭照底圖 2 小女孩會呈現小女孩看著龍貓進出洞穴 圖 12 鏡頭照底圖 2 飛機會呈現飛機在飛行 13