星期五, 6月 22, 2012

CAM Game Show 2012

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

時間: June 22, 2012
地點: S5131

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



1. 6/22 10:00 - 12:00

10:00 廖中裕
10:10 歐陽景明
10:20
10:30
10:40
10:50
11:00
11:10
11:20
11:30

2. 6/22 13:30 - 16:30

13:30
13:40
13:50
14:00
14:10
14:20
14:30
14:40
14:50
15:00
15:10


4. 6/24 12:00 - 13:00 麥當勞超值午餐



5. 6/24 13:00 - 13:30 票選活動

a. 最佳遊戲大獎

b. 創意獎

c. 美工獎

d. 音效獎

6. 6/24 13:30 - 14:00 課程心得分享與建議、改善

a. 關於教材內容、範例程式:

b. 關於作業、考試、指定閱讀:

c. 關於『期末專案、視訊程式夏令營暨成果展』之進行方式:

星期一, 6月 18, 2012

Week 19: 互動視訊遊戲開發營

2012S 互動視訊遊戲開發營
時間: 6/18-22, 9am-4pm
地點: S5131

星期二, 6月 05, 2012

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, 在進入下一個畫面時, 虛擬物件就不會顯示出來, 看起來就是虛擬物件因為被實體物件碰觸到而消失了。

星期六, 6月 02, 2012

Week 16: 差異偵測

1. 差異的定義

    要定義兩個數值的差異是非常直覺, 也非常簡單的, 只要將兩個數值相減即可。如果不在乎哪個値較大? 哪個値較小? 只要知道差異為何, 那麼就可以於相減後, 再取絕對値, 就可以了。

    要定義兩張影像之間的差異, 就必須先從影像的本質談起。基本上, 影像本身就是由許多像素排列成方陣型式所形成。因此, 兩張影像的差異, 就是指兩張影像相同位置的像素色彩値之間的差異。換句話說, 兩張影像的差異基本上就是由像素差異値所購成的一張影像。然而, 針對像素色彩値的表示或儲存方式, 則有不同的色彩模型可供選擇。因此, 針對不同的色彩模型, 差異影像的表示技巧也不相同。基本上, 差異影像的顯示方式, 都是差異値越小, 顯示出越暗的色彩値; 差異値越大, 則顯示出越亮的色彩値。

    本課程中的差異偵測指的是背景影像與每一個視訊畫面之間的差異, 因此, 透過預覽回呼函數, 便可以在預覽每個畫面之後, 即時計算預覽畫面與背景影像之間的差異, 而達到即時差異偵測的目的, 這也是所有智慧型監控系統的基本原理。

2. 差異影像的顯示與表示

    差異偵測主要是針對背景影像與視訊擷取視窗的畫面兩張影像比較, 將有差異的部分標示或顯示出來。顯示的方式依精細程度, 可分成下列三種方式:

    (1) 將色彩差異用彩色影像表示出來

         將色彩値三個分量的差異値分別計算, 然後分別用三個色彩分量表示之。例如, 在 RGB 色彩模型之下, 將紅色差異値儲存在差異影像的紅色分量之中, 將綠色差異値儲存在差異影像的綠色分量之中, 將藍色差異値儲存在差異影像的藍色分量之中。同理, 也可以在 YUV 色彩模型之下, 將 Y 差異値儲存在差異影像的 Y 分量之中, 將 U 差異値儲存在差異影像的 U 分量之中, 將 V 差異値儲存在差異影像的 V 分量之中。

    (2) 將色彩差異用黑白影像表示出來

         差異影像的像素色彩値只有黑色與白色兩種, 黑色表示此像素沒有產生差異, 或差異値很小; 白色表示此像素差異很大。至於差異値要多大才算大呢? 使用者可以依需求自行訂定。

在 RGB 色彩模行中, 每個色彩値都包含 R、G、B 三個色彩値, 因此可以將每個顏色視為三度空間中的一個點, 要比較兩個色彩之間的差異有多大, 最簡單的做法就是求在這個三度空間中, 2 個點的距離; 也就是歐幾里得距離(Euclidean distance)。在 YUV 色彩模型中的做法也是一樣, 差別在於三個色彩是 Y、U、V 而以, 同樣可以計算歐幾里得距離。

當視訊畫面中的某個位置的色彩値與背景影像相同位置的色彩値之間的歐幾里得距離超過一個特定的臨界值, 就將視訊畫面像素色彩値更改為白色; 否則, 就更改為黑點。

    (3) 將色彩差異以 8*8 區塊表示出來

         延續黑白影像表示法, 將差異影像以 8*8 區塊為單位, 當同一區塊之中, 白色像素超過一定數量 (例如一半 32), 整個區塊就定義為差異區塊, 整個區塊顯示為白色; 否則就視為非差異區塊, 整個區塊顯示為黑色。

3. 範例程式 Webcam Programming (5)

part C: 差異偵測

     本週要示範的是範例程式 Webcam Programming (5) 的第三個主題 - 差異偵測。

在示範的程式之中, 差異影像是透過預覽回呼函式直接顯示在視訊擷取視窗之中。顯示的方式分成彩色影像、黑白影像、及 8*8 區塊等三個不同的顯示方式。因此, 我們在 MainMunu 的 Preview Callback Function | Difference Detection 功能列中, 新增 Color、Binary、8*8 Block 等三項子功能, 如圖 5-C-1 所顯示。


圖 5-C-1

特別提醒同學, 本學期的範例程式是以 YUY2 為主, 同學應先確定自己使用的網路攝影機的格式為何? 若與 YUY2 不同, 應對範例程式做適當的改寫, 才能正確地執行程式。

(1) 將色彩差異用彩色影像表示出來

    早期的網路攝影機大多是以 RGB 色彩模型來處理畫面中的像素色彩, 最近兩年, 修課同學新購的網路攝影機幾乎都是以 YUV 色彩模型, 尤其是以 YUY2 格式將畫面傳入緩衝區記憶體之中。RGB 格視的網路攝影機要直接在視訊擷取視窗中顯示差異影像的做法非常簡單, 只要兩張影像相同位置的 R、G、B 三個色彩値分別相減, 取絕對値後, 再分別放進緩衝區記憶體的正確位址即可。

然而, 在 YUV 色彩模型中, 純黑色的 YUV 色彩表示法為 (16, 128, 128)。因此, 當 Y 値的差異値計算出來後, 必須取絕對値, 使其為正値後, 再加上 16 即可; 由於黑色的 Y, U 値均為 128, 當差異値為負値時, 就顯示比 128 小的情況即可。因此, 當 U, V 色彩的差異値計算出來後, 並不需要使用絕對値函數, 可以直接將差異値加上 128 後, 顯示出來即可。

實驗一: 晚上做的實驗, 光原來自天花板吊燈及桌上左邊的檯燈!



圖 5-C-2 先取得背景影像。



圖 5-C-3 特南克斯進入了!



圖 5-C-4 差異偵測的實驗結果!

實驗二: 早上做的實驗! 光原來自右邊窗戶的自然光!



圖 5-C-5 先取得背景影像。



圖 5-C-6 光線似乎很強, 特南克斯的臉好白!



圖 5-C-7 差異偵測的實驗結果。特南克斯的影子使得悟空顯示出來了! 其實, 仔細看, 比克也隱約看的出來!

(2) 將色彩差異用黑白影像表示出來

為了讓使用者在執行階段也可以更改 iThreshold 的設定, 以便在不同光源環境下, 進行不同臨界值的實驗, 新增一個 TEdit 元件, 如圖 5-C-8。並利用 StrToIntDef 函式, 將使用者輸入的臨界值, 設定給 iThreshold 變數。


圖 5-C-8 新增的 TEdit 元件位於 Capture Window 分頁的右下角。

圖 5-C-9 為在視訊擷取視窗顯示黑白差異影像的情況, 圖 9(a) - 9(g) 分別為設定不同的臨界值 iThreshold 所呈現的實驗結果。從圖 5-C-9 中, 我們可以觀察到當臨界值設定越小, 則差異點(白色像素)越多; 反之, 臨界值設定越大, 差異點則越少。


圖 5-C-9(a) iThreshold = 800


圖 5-C-9(b) iThreshold = 1000


圖 5-C-9(c) iThreshold = 1200


圖 5-C-9(d) iThreshold = 1400


圖 5-C-9(e) iThreshold = 1600


圖 5-C-9(f) iThreshold = 1800


圖 5-C-9(g) iThreshold = 2000

(3) 將色彩差異以 8*8 區塊表示出來

在預覽回呼函式 FrameCallbackDifferenceBlockYUY2 中, 視訊擷取視窗的緩衝區記憶體總共被掃描了 2 次 (2 Pass)。第 1 次掃描的主要目的是計算色彩差異與累計區塊中的高差異像素的總數;  第 2 次掃描的目的則是顯示差異區塊, 每個像素是否要顯示為白色則必須看此像素所屬的區塊, 累計總和是否超過一半, 否則就顯示為黑色。

圖 5-C-10 為差異偵測 (1) ~(3) 的完整實驗。圖 10(a) 與 10(b) 分別為背景影像與視訊擷取視窗的畫面。


圖 5-C-10(a) 背景影像


圖 5-C-10(b) 視訊畫面 - 特南克斯進入!

背景影像與視訊擷取畫面最主要的差別在於多了一個公仔  - 特南克斯, 除此之外, 由於光源是桌面左邊的檯燈, 因此在花盆上還產生下了影子, 從圖 5-C-10(c) 的彩色差異影像中也可以看出主要差異有 2 處。


圖 5-C-10(c) 彩色差異影像

將每個像素 Y、U、V 的差異値分別平方後相加, 如果大於臨界值 1600, 就將視訊畫面變成白點, 而且在累加區塊陣列中加 1, 記錄目前區塊的白點總數。圖 5-C-10 是視訊擷取視窗所呈現的黑白差異影像。


圖 5-C-10(d) 黑白差異影像 iThreshold = 1600

最後, 將視訊擷取視窗更改為區塊差異影像, 只要該區塊中, 有超過一半以上的點是差異點(白點), 就將該區塊設定為差異區塊, 整個區塊顯示成白色, 如圖 5-C-10(e)。


圖 5-C-10(e) 區塊差異影像