Week 17: 擴增實境之互動模式

1. 擴增實境(augmented reality)

    要了解什麼擴增實境, 可以先從什麼是實境(reality)、什麼是虛擬實境(virtual reality)開始。

    實境本身所指的就是我們所處的真實環境。在真實環境中, 我們憑藉著五官來感受所處的真實環境中的各種狀況, 用眼睛看到一朵美麗的玫瑰, 用鼻子聞到為玫瑰花所散發出的香氣, 用手碰觸, 一不小心可能會被玫瑰枝條上的細針刺痛。

而虛擬實境所指的就是一個用各種科技, 所建立的虛擬空間, 在這個虛擬環境之中, 一樣讓你用眼睛看到玫瑰花, 用鼻子聞到玫瑰花香, 你一不小心, 也同樣會讓你有針刺的感受。

電影 駭客任務 中的故事, 可以說是虛擬實境最極端的例子, 大多數的人處在母體(matrix)所建立的虛擬世界之中而完全不知。以目前科技發展的程度來看, 要建立電影中的虛擬實境, 還是有一堆困難, 無法單靠想像力克服的。



了解了什麼是實境與虛擬實境後, 回到課程要探討的主題 - 擴增實境。擴增實境介於實境與虛擬實境之間, 在我們所處的實境之中, 混合了虛擬的元素, 真實與虛擬同時呈現在一個空間, 以可以產生互動。

日本電視動畫 電腦線圈 所描述的故事就是闗於擴增實境的未來想像。在動畫故事中, 主角透過特製的眼鏡, 看見在虛擬世界中的寵物, 並與之互動。主角並沒有被抽離真實生活之中, 而只是將虛擬的寵物加進生活之中, 整合了真實與虛擬, 這就是擴增實境。



本課程透過網路攝影機(webcam)拍攝我們所處的實境, 並將其顯示於視訊擷取視窗之中, 接著在視訊擷取視窗置入虛擬的物件, 而達到將實境與虛擬物件整合在擴增實境的目的, 如圖 6-A-1 所示。


圖 6-A-1 整合虛擬龍珠與實景的視訊擷取視窗。



延伸閱讀:
a. 維基百科條目: 虛擬實境
b. 科學人雜誌(2002年): 擴增實境 - 虛擬與實境的無限延伸

2. 互動模式

    本課程所涵蓋的互動模式包含下列二類:
a. 擴增實境之互動模式
b. 其他應用程式的互動視訊介面

a. 擴增實境之互動模式

在互動之前, 首先要定義兩個互動的主體: 實境所追蹤的物件(簡稱實境物件)與虛擬物件, 而兩個物件在視訊擷取視窗中的位置, 則是互動的基礎。例如: 在 和虛擬斑點壁虎互動 的影片之中, 實境物件為畫面中出現的手, 虛擬物件則是班點壁虎。班點壁虎出現在視訊擷取視窗的右上方, 實境物件則從左邊慢慢靠近, 當兩個物件碰觸在一起(位置重疊)時, 則啟動互動處理程序 - 讓班點壁虎消失。



另外一種簡單的互動是發出聽定的聲音。2011S 課程成果展 黃泓清 - 虛擬鋼琴 作品就是將虛擬鍵盤放置於視訊擷取視窗的上方, 當實境物件碰觸到虛擬鍵盤的不同琴鍵時, 發出特定聲音, 而完成了這項作品。



C++ Builder 函式: 如何撥放一段 WAV 聲音檔


b. 其他應用程式的互動視訊介面



在湯姆克魯斯所主演的關鍵報告中, 湯姆克魯斯帶著特殊手套, 藉著手勢操縱, 流覽資料庫的影片計錄 (預告片 1 分 52 秒處)。



電影中特殊手套上的藍光可以讓手指追蹤變成一個穩定的操控介面, 而這也是本課程的第二類互動模式, 透過追蹤視訊擷取視窗中的差異變化, 做為其他應用程式的互動視訊介面。



2009S 課程, 黃國維的作品 - Virtual Joystick, 則是可以用來進行賽車遊戲的控制介面, 取代了原先的搖桿介面。



2010S 課程成果展 呂誌軒 - 控制地球 的作品, 就屬於這一類型的互動介面。藉著追蹤視訊擷取視窗中的差異, 來取帶 Google Earth 原先使用的滑鼠介面。



2010S 課程成果展, 張凱傑 - 「戰鬥吧！忍者貓！」同樣屬於這一類互動介面, 在視訊中劃定 9 個特定區域, 分別觸發不同的鍵盤控制, 因此, 這個作品是用視訊互動介面來取代原先的鍵盤控制。

上述三個作品都獲得了當年度課程成果展的票選最佳遊戲大獎, 剛好是分別取代搖桿、滑鼠、鍵盤等控制介面。


3. 範例程式 Webcam Programming (6)

part A: 擴增實境互動模式

在擴增實境之中, 如何與虛擬出來的物件互動, 是本課程的核心技術之一。透過 Webcam Programming (4) 的 part D 的範例程式, 可以將虛擬的圖片放進視訊擷取視窗之中。加上 Webcam Programming (5) 的 part C 的範例程式, 我們可以知道視訊擷取視窗的最新畫面與背景畫面之間的差異, 而這個差異所代表的正是實境物件的位置, 也是要進行互動的主角知一。因此, 只要將本課程 Webcam Programming (4) 與 (5) 整合起來, 就可以做到在擴增實境之中, 與虛擬物件互動的目的。

最簡單的互動處理程序就是讓虛擬物件消失不見。在範例程式 Webcam Programming (6) 之中, 我們宣告一個布林變數 bObjectOnFrame 來代表虛擬物件是否該出現在視訊擷取視窗之中。

bool bObjectOnFrame = true;

初始値設為 true, 表示開始時, 虛擬物件是出現的。在預覽回呼函數之中, 只要判斷 bObjectOnFrame 的直為 true, 就顯示虛擬物件, 否則就不顯示。因此, 在互動處理程序之中, 只要將 bObjectOnFrame 設為 false, 在進入下一個畫面時, 虛擬物件就不會顯示出來, 看起來就是虛擬物件因為被實體物件碰觸到而消失了。

Week 17: 互動的兩個模式

1. AR mode:



W17-SP

2. interface mode:

MSDN: 以程式碼模擬滑鼠和鍵盤事件

a. 真人版洛克人大挑戰



專題初審文件

b. CAM Game Show 2009: 黃國維作品 - Virtual Joystick





膚色偵測 膚色範圍 (90 < Cb < 120、120 < Cr < 150)

相關論文: 猜拳機 (國立中山大學電機系 曹文潔 碩士論文)

c. CAM Game Show 2010: 呂誌軒作品 - 控制地球




3. 2011 互動視訊程式開發夏令營

地點: S5131
時間: 6/20 - 24 9:00 - 16:00

4. CAM Game Show 2011
互動視訊遊戲開發 - 期末專案成果發表會

地點: S5131

每位同學成果展式: 報告 4 分鐘, 程式展示 4 分鐘。
含: 書面報告及 Youtube 2分鐘影片。

a. 分成三個階段成果發表: (6/22下午抽籤決定報告時段)

1. 6/23 10:00 - 12:00
2. 6/23 13:30 - 16:30
3. 6/24 10:00 - 12:00

b. 6/24 成果展結束後, 麥當勞套餐。

Week 13: 如何透過視訊與虛擬物件互動

繼上週討論如何使用回呼函數來進行視訊監控後, 本週所要討論的主題就是如何透過視訊與虛擬物件互動。

這邊提到的虛擬物件, 指的就是透過第九週所學會的技巧 (如何在視訊擷取視窗中添加物件), 我們在視訊擷取視窗中所添加的虛擬物件。

首先, 我們要準備要和我們互動的虛擬物件, 本週我打算使用 facebook 上的小遊戲 Zoo World 中的畫的非常可愛的小動物們。
　
　　　
　
我利用 Photoshop 將斑點壁虎裁剪下來, 並將白色背景修改成純白色(255, 255, 255), 並存成 SpottedGecko.bmp 檔, 如下圖:
　
　　　　　

將背景色設成純白色的好處有二:

　1) 如果我們要將圖片顯示在 Form 上, 只要將影像物件的屬性 Transparent 設成 true, 這樣子在程式執行時, 背景色就不會被顯示出來。

　　　

　下圖就是程式執行時, 影像 SpottedGecko.bmp 白色的背景並不會顯示出來...
　　
　　　

　2) 當我們要將 SpottedGecko.bmp 的影像放進視訊擷取視窗時, 我們就可以使用 if 判斷指令, 當色彩不等於為純白色 (255, 255, 255) 時, 我們才去修改緩衝區記憶體中的資料。
　
假設, 我們要將 SpottedGecko.bmp 這張影像放到視訊擷取視窗的 ( iObjectTop, iObjectLeft ) 位置上, 影像的高、寬, 分別為 iObjectHeight, iObjectWidth。

因此, 視訊擷取視窗的座標範圍在 ( iObjectTop, iObjectLeft, iObjectTop+iObjectHeight, iObjectLeft+iObjectWidth) 這個矩形範圍中時, 擷取視窗的視訊資料通通都要改成 SpottedGecko.bmp 影像色彩資料。

範例程式 VGC-2010S-SP15.txt

　　　
　
既然, 我們已經把虛擬的斑點壁虎放到視訊擷取視窗中, 接下來要考慮的問題就是如何透過網路攝影機來互動呢 ?

最簡單的一種互動方式就是當有人碰觸到虛擬物件時, 虛擬物件就消失不見!

首先, 我們用一個布林變數 bool bObjectOnFrame 來表示虛擬物件該不該出現在視訊擷取視窗中。在回呼函數中, 我們是否要去修改緩衝區記憶體中的視訊畫面資料, 完全取決於 bObjectOnFrame 的值是 true? 還是 false ?

因此, 在範例程式 VGC-2010S-SP15.txt 中, 我們只要簡單地在修改緩衝區記憶體之前加入關於 bObjectOnFrame 的判斷式即可。另外, 我們新增一個按鈕, 來手動修改 bObjectOnFrame 的值, 讓虛擬物件消失, 或是重現。

範例程式 VGC-2010S-SP16.txt

接下來, 當我們發現有人碰觸到虛擬物件, 只要將 bObjectOnFrame 設定為 false, 便可以讓虛擬物件在下一個畫面中消失。

　　

為了消除雜訊的干擾, 在上星期的課程中, 我們將視訊監控以 8*8 大小的區塊為單位, 當區塊中的白點總數超過一半 (>31) 時, 整個區塊都輸出成白色區塊, 如下圖。　

　　

從 另外一種角度思考, 其實就是把整個畫面縮小成 40*30 的大小來監控, 這樣那些小雜訊就縮小到完全沒有影響了, 如下圖。

　　

同樣的道理, 視訊擷取視窗應該也要縮小成 40*30 大小來考慮如何互動才對...

　　
　
為了方便同學思考, 我們將上面的縮圖放大,

　　

原先, 虛擬斑點壁虎出現在視訊擷取視窗的座標範圍是 ( iObjectTop, iObjectLeft, iObjectTop+iObjectHeight, iObjectLeft+iObjectWidth), 此時, 我們要重新換算為在縮圖中的座標範圍。我們用 (iBlockTop1, iBlockLeft1) 來表示虛擬斑點壁虎在縮圖中的左上角座標, 另外用 (iBlockTop2, iBlockLeft2) 來表示虛擬斑點壁虎在縮圖中的右下角座標。

　iBlockTop1 = iObjectTop / 8;
　iBlockLeft1 = iObjectLeft / 8;
　iBlockTop2 = (iObjectTop + iObjectHeight) / 8;
　iBlockLeft2 = (iObjectLeft + iObjectWidth) / 8;
　
因此, 當有某一區塊 (m,n) 落在 (iBlockTop1, iBlockLeft1) 與 (iBlockTop2, iBlockLeft2) 所圍起來的矩形之中時, 便表示要將 bObjectOnFrame 這個變數設定為 false, 這樣, 虛擬物件就會從下一個畫面中消失, 達到我們所要進行的互動效果。


範例程式 VGC-2010S-SP17.txt
　

　

互動式街頭廣告

New Interactive Window



應該會讓人印象深刻吧!