Vision-based Game Class

本課程教材大全集

2014-07-01T14:41:00.011+08:00

互動視訊遊戲開發

基礎概念與理論闡述 - 投影片, 共十二單元。

單元一　擴增實境簡介

設計目標: 說明本課程名稱中的 ”互動視訊” 是以攝影機維互動介面，讓實境中的人可以透過攝影機和虛擬的物件互動，也就是在擴增實境中互動，讓同學可以確實了解課程目標。

摘要說明: 介紹什麼是實境、虛擬實境、擴增實境，並以電影或動畫情節為例子說明。

單元二　C++ Builder 程式設計基礎

設計目標: 因為本課程所使用的程式開發工具是 C++ Builder, 所以設計此單元, 讓同學可以認識 C++ Builder的開發環境, 完成後本單元後, 希望同學具備進行本課程實作教材的基本能力。

摘要說明: 介紹 C++ Builder 的歷史與特色、說明物件導向程式設計的基本觀念、講解開發視窗應用程式的主要工作, 並以實例說明 C++ Builder 的整合開發環境。

單元三　VFW 函式庫簡介

設計目標: 本課程使用微軟所提供最基礎的 Video For Window 函式庫進行視訊控制, 因此有必要設計此單元讓同學了解其主要功能。

摘要說明: 簡略說明微軟 Video For Window 函式庫的主要功能。

單元四　視訊擷取視窗與視訊裝置

設計目標:　希望同學可以體驗將攝影機拍攝內容顯示在自己開發的應用程式之中, 並不是一件困難的事, 引發同學的實作動機。

摘要說明: 如何透過VFW函式建立擷取視窗、連結視訊裝置並完成相關設定後, 將視訊內容顯示在視訊擷取視窗。[ 搭配實作教材 1 ]
說明視訊裝置驅動程式所扮演的角色為何? 如何透過 VFW函式獲知視訊裝置驅動程式所提供的功能? 如何改變視訊裝置的參數設定? [ 搭配實作教材 2 ]

單元五　靜態影像擷取

設計目標:　除了可以顯示畫面, 儲存靜態影像與動態視訊內容都是視訊裝置常提供的功能, 因此希望同學有能力可以實作這些常見功能。

摘要說明: 如何透過 VFW 函式擷取靜態影像並存成影像檔案。[ 搭配實作教材 3-A ]

單元六　錄影參數與錄影

設計目標: 儲存動態視訊內容是視訊裝置必提供的功能, 因此希望同學有能力可以實作此功能。

摘要說明: 如何透過 VFW 函式知道錄影參數為何? 如何改變攝影參數? 如何透過 VFW 函式錄影? [ 搭配實作教材 3-B,C ]

單元七　影像元件與視訊格式 (RGB24, YUY2)

設計目標: RGB24 與 YUY2 是目前最常見的兩種 USB 攝影機所提供的視訊格式, 要處理與分析視訊內容, 必須先對視訊儲存格式有所了解才行, 因此設計此單元, 希望同學可以至少掌握 2 種最常見的視訊格式。

摘要說明: 介紹 C++ Builder 影像元件與 2 種最常用的視訊格式 (RGB24、YUY2)、講解兩種格式的轉換公式與程式撰寫技巧。

單元八　預覽回呼函式 (Preview Callback Function)

設計目標: 希望同學了解回呼函式的程式設計技術, 了解透過預覽回呼函式可以做到視訊處理與分析。

摘要說明: 介紹回呼函式的基本概念與程式撰寫技巧、說明預覽回呼函式的傳遞參數意義、如何透過預覽回呼函式更改視訊擷取視窗之內容。[ 搭配實作教材 4-A,B,C,D ]

單元九　擴增實境實作 (Augmented Reality Implementation)

設計目標: 希望同學可以更深入了解擴增實境與簡單的動畫原理, 並有簡單實作經驗。

摘要說明: 介紹如何在視訊視窗放置不同圖片產生出各種虛擬物件、並講解如何撰寫程式產生虛擬物件會變化動作與移動位置的效果。[ 搭配實作教材 4-E,F ]

單元十　物件追蹤 (Object Tracking) 與雜訊處理 (Noise Reduction)

設計目標: 希望同學可以學會簡單地處理與分析視訊內容, 具備將來撰寫智慧型視訊監控的程式基礎。

摘要說明: 說明物件追蹤的基本原理、特定色彩(如膚色)的追蹤、背景影像之建立、色彩距離觀念、臨界值建立等常見物件追蹤技術、說明光影變化對視訊內容的影響及如何降低雜訊干擾。[ 搭配實作教材 5 ]

單元十一　擴增實境互動模式 (Interaction in Augmented Reality)

設計目標: 同學已經了解虛擬物件如何在視訊擷取視窗移動與變化動作, 也了解如何追蹤視訊擷取視窗中的實物, 結合上述兩項技術, 就可以利用兩項位置的判斷, 讓實物與虛擬物件在擴增實境中互動了。因此, 設計此單元讓同學實作擴增實境的互動模式。

摘要說明: 說明擴增實境互動模式 (透過視訊裝置與虛擬物件互動) 的基本原理與程式撰寫技巧並解說範例程式。[ 搭配實作教材 6-A, B ]

單元十二　視訊互動介面開發 (Vision-based User Interface Development)

設計目標: 讓同學瞭解透過鍵盤模擬技術, 可以將視訊互動介面用於其他的鍵盤類遊戲之中。

摘要說明: 說明如何撰寫程式將視訊裝置轉換成其他應用程式的互動介面並解說範例程式。

期末專案實作

設計目標: 希望藉著完成一項專案, 同學更熟悉課程內容, 達到可以靈活運用的程度。同時希望同學藉著上台發表成果的經驗, 培養對著一群人表達自己看法的能力。

摘要說明: 先介紹過去修課學長姐的優良作品, 最後讓同學發揮創意, 透過專案開發方式, 完成一個互動視訊遊戲專案並上台發表成果與展示作品。

實作手冊

1. 連結視訊裝置與視訊擷取視窗

a) 取得視訊裝置驅動程式的相關資訊
b) 將網路攝影機所擷取到的畫面放到視訊擷取視窗顯示出來
c) 更改視訊擷取視窗的大小

範例程式一

2. 視訊裝置驅動程式功能與視訊擷取視窗狀態

a) 取得視訊裝置驅動程式的效能
b) 開啟各種視訊參數對話盒
c) 取得視訊擷取視窗狀態

範例程式二

3. 靜態影像擷取與動態視訊錄影

a) 靜態影像擷取
b) 錄影參數之取得與設定
c) 錄影控制

範例程式三

4. 預覽回呼函數與產生虛擬物件

a) 預覽回呼函數之設定與關閉
b) 預覽回呼函數與視訊資料表頭結構
c) 將預覽畫面變成特定色調
d) YUY2格式的鏡射處理
e) 將單一顏色的長方塊放入視訊畫面中
f) 將圖片置入視訊擷取視窗之中

範例程式四

5. 色彩偵測與物件追蹤

a) 特定色彩之過濾
b) 利用預覽回呼函數建立背景影像
c) 差異偵測

範例程式五

6. 擴增實境互動模式

a) 消失互動方式
b) 兩種顯示模式

範例程式六

CAM GAME SHOW 2014

2014-06-30T19:21:00.003+08:00

期末專案工作坊
時間: June 23-27 2014, 9:00 AM - 16:00 PM
地點: S305

CAM Game Show 2014
互動視訊遊戲開發 - 期末專案成果發表會
時間: June 27, 2014
地點: S305

票選獎項

最佳遊戲大獎:

第一名: 王韋硯捕手接球

第二名: 蔡昀佑力的種類

第三名: 吳鍾昊敲兔子之視訊介面

最佳創意獎: 王韋硯捕手接球

最佳美工獎: 李雅晴互動鋼琴曲

最佳音效獎: 張智棠自製遊戲之視訊介面

Week 17: 擴增實境互動模式

2013-06-13T01:44:00.003+08:00

1.《單元十一擴增實境互動模式》

2.《單元十二視訊互動介面開發》

3. 實驗教材六與範例程式六。

Week 16: 物件追蹤與雜訊處理

2013-06-06T09:36:00.001+08:00

1.《單元十物件追蹤與雜訊處理》

2. 實驗教材五與範例程式五。

Week 15: 擴增實境實作

2013-05-30T10:13:00.001+08:00

1.《單元九擴增實境實作》

2. 實驗教材四與範例程式四。

3. 作業: 替視訊畫面加上相框

Week 14: 預覽回呼函式

2013-05-30T10:09:00.001+08:00

1.《單元八預覽回呼函式》

2. 實驗教材四與範例程式四。

3. 作業: 將視訊畫面改成特定色彩模式

Week 13: 預覽回呼函式

2013-05-16T09:38:00.003+08:00

1.《單元七影像元件與視訊格式》

2.《單元八預覽回呼函式》

3. 實驗教材四與範例程式四。

Week 12: 影像元件與視訊格式

2013-05-09T10:03:00.002+08:00

1.《單元七影像元件與視訊格式》

2. 請同學於下星期前完成實驗教材三,
　並將實驗結果上傳至 YouTube 與課程作業部落格。

Week 11: 錄影參數與錄影控制

2013-05-02T09:58:00.000+08:00

1. 《單元六錄影參數與錄影控制》

2. 實驗教材三與範例程式三

3. 參考資料:

4. 請同學於下星期前完成實驗教材三。

Week 10: 靜態影像擷取

2013-04-25T10:43:00.000+08:00

1. 《單元五靜態影像擷取》

2. 《單元六錄影參數與錄影控制》

3. 實驗教材三與範例程式三

Week 8: 視訊驅動程式與視訊擷取視窗

2013-04-11T11:54:00.000+08:00

1. 《單元四視訊裝置與視訊擷取視窗》pp.24-55

2. 實驗教材二與範例程式二

Week 7: 春假放假一次

2013-04-11T11:51:00.001+08:00

請同學放假在家把實驗教材一的程式撰寫完成, 可以嗎?
我們的進度因為放假 2 次有些慢,
實驗教材在課堂上做, 會讓進度更慢,
拜託大家了!

Week 6: 連結視訊裝置與視訊擷取視窗

2013-03-28T09:42:00.003+08:00

1. 《單元三 Video For Windows 函式庫簡介》

2. 《單元四視訊裝置與視訊擷取視窗》

3. 實驗教材一與範例程式

4. 期中考考試範圍《單元一 ~ 四》
( Week 7 春假, 只剩下 Week 8 一次上課 )

Week 4: C++ Builder 程式設計基礎

2013-03-14T12:05:00.001+08:00

1.《單元二　C++ Builder 程式設計基礎》

2. 範例程式: [Dropbox Link]

Week 3: C++ Builder 程式設計基礎

2013-03-07T19:51:00.003+08:00

1.《單元二　C++ Builder 程式設計基礎》

Week 1: 擴增實境

2013-02-22T02:15:00.001+08:00

1. 課程簡介

2. 《單元一擴增實境》

Week 19: 期末專案成果發表會

2013-01-22T00:00:00.003+08:00

CAM Game Show 2012F

Week 19: 期末專案成果發表會前夕

2013-01-21T23:58:00.001+08:00

Week 19: 期末專案開發營

2013-01-21T23:55:00.001+08:00

日期: 2013/1/14-17
時間: 9:00 - 16:00
地點: S5131

Week 16 & 18: 期末專案開發

2012-12-24T23:26:00.000+08:00

請同學開始構思、撰寫期末專案!

Week 17, 12/31 連續假日放假一天!
Week 18, 1/6 補上課!
Week 19, 1/14-18 期末專案開發營!

　　　　　　2013/1/18 10:00 期末專案成果發表!

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

2012-12-17T11:03:00.002+08:00

1. 擴增實境(augmented reality)

PPT: 01-Augmented Reality

延伸閱讀:
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 14: 差異偵測實作

2012-12-10T10:56:00.000+08:00

1. 範例程式 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) 區塊差異影像

Week 13: 差異偵測的原理

2012-12-03T10:54:00.000+08:00

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), 整個區塊就定義為差異區塊, 整個區塊顯示為白色; 否則就視為非差異區塊, 整個區塊顯示為黑色。

Week 12: 物件追蹤的技術

2012-11-26T15:11:00.001+08:00

1. 特定色彩之過濾

    a. YUV 色彩模型: Y 表亮度, 與光線強弱有關, UV 表色彩, 與物件本身色彩有關。

    b. 膚色: 90 < U < 120 且 120 < V < 150 　延伸閱讀: 猜拳機 (國立中山大學電機系曹文潔碩士論文)

2. 背景相減法: 透過視訊畫面與背景影像的相減, 可以得知物件出現於視訊擷取視窗的位置。

    a. 如何利用預覽回呼函數建立背景影像?

    [背景影像的相關理論]

在攝影機不動的情況下拍攝靜物, 照理說, 連續兩個畫面(frame)應該是完全一樣的; 然而, 寫程式分析, 卻發現兩張畫面看起來一樣, 實際上卻有稍稍不同, 色彩值因為光線變化 (也許是因為光源閃爍, 或是空氣中的灰塵影響。), 讓不同畫面中, 相同位置的色彩值產生細微的不同。

假設在沒有雜訊的情況下,　我們所拍攝到的色彩值是 F(i,j)
第 k 個畫面的位置 (i,j) 上, 雜訊的函數為 Xk(i,j),

假設我們所擷取到的色彩值為 Fk(i,j), 因此,

Fk(i,j) = F(i,j) + Xk(i,j)

如果我們取連續 30 個畫面色彩值之總和,

F1(i,j) + F2(i,j) + ... + F30(i,j)
= [F(i,j) + X1(i,j)] + [F(i,j) + X2(i,j)] + ... + [F(i,j) + X30(i,j)]
= 30 F(i,j) + [ X1(i,j) + X2(i,j) + ... + X30(i,j) ]

如果雜訊的平均值是 0, 即

X1(i,j) + X2(i,j) + ... + X30(i,j) = 0　

再將上述式子除以 30 求平均, 那麼我們就可以得到 F(i,j)。

3. 範例程式 Webcam Programming (5)

範例程式 Webcam Programming (5) 的主題是物件追蹤, 換句話說, 就是如果在視訊畫面中, 出現了我們要追蹤的物件, 我們必須要能的知道物件出現的位置為何?

同樣地, 我們把範例程式 Webcam Programming (5) 分成三個小主題, 分別如下:

part A: 特定色彩之過濾
part B: 利用預覽回呼函數建立背景影像
part C: 差異偵測

我們在範例程式 Webcam Programming (5) 的 Preview Callback Function 功能列中, 建立了 Skin Color Detection、Background、Difference Detection 等 3 個功能, 分別對應到上述的三個小主題。圖 5-A-1 顯示了所建立的 Preview Callback Function 功能列。

圖 5-A-1

part A: 特定色彩之過濾

由於顏色是與 U、V 相關, 因此我們宣告了 4 個變數, 用來表示所要追蹤的顏色範圍。宣告指令如下:

int iMinU = 90, iMaxU = 120;
int iMinV = 120, iMaxV = 150;

然後, 在 Capture Window　分頁中, 我們新增了 4 個 TEdit 元件, 提供給使用者修改 U、V 色彩値的上界與下界。圖 5-A-2 顯示了新增的 4 個 TEdit 元件。當使用者改變了 TEdit 元件的値 (Text Property), 在事件處理程序中, 只要使用 StrToIntDef 函式, 就可以將 Text Property 由 string 資料型態轉換成 int 資料型態, 再設定成 U、V 色彩値的上界或下界。

圖 5-A-2

將色彩範圍設定為 90 < U < 120 且 120 < V < 150, 當像素點色彩滿足此範圍, 就將其像素色彩値改成綠色模式 ( Y 値保留不變, U、V 設定為綠色 ), 圖 5-A-3 則是顯示執行結果, 似乎很多不是膚色的區域都被標示成綠色模式了。

圖 5-A-3

part B: 利用預覽回呼函數建立背景影像

首先, 我們必須宣告兩個陣列, 一個用來儲存背景影像, 另一個則是作為累加影像之用。

unsigned char ucBackground[480][640][3];
int iTemp[480][640][3];

在程式尚未進入預覽回呼函數之前, 必須對上述陣列進行初始值設定, 並將 iFrameCounter 設定為 0。然後, 設定(打開)預覽回呼函式為 FrameCallbackBackgroundYUY2。

進入預覽回呼程序之後, 首先累加 iFrameCounter, 接著程式主要分成兩個部份:
情況(1) iFrameCounter 小於等於 30;
情況(2) iFrameCounter 大於 30 (其實就是等於 31 )。

情況(1) 的主要工作是累加影像色彩值到 iTemp 陣列之中, 在累加之前, 必須先將 YUY2 資料流中的 macro-pixel 的 YUYV 轉換回 RGB 色彩值。值得一提的是轉回 RGB 色彩值時, 可能會發生溢位(overflow)的情況, 即 RGB 色彩值超過 255 或小於 0, 必須強制 RGB 色彩值在 0 與 255 的範圍之間(clipping)。

情況(2) 的主要工作是將累加陣列中的值除以 30 , 求取平均值, 即為所建立的背景影像, 並將背景影像的色彩值放到imBackground 影像元件的記憶體之中( 透過 ScanLine Property 得知每一列的起始記憶體位址 )。最後, 使用影像元件的 Refresh() Method 就可以在 imBackground 看到所建立的背景影像了, 如圖 5-B-1。

圖 5-B-1 背景影像 ( 30 個畫面平均 )

圖 5-B-1 是利用回呼函數連續擷取 30 個畫面相加後, 再計算平均値所得到的背景影像。圖 5-B-2 則是用 GrabFrame 函數擷取單張畫面, 再用 File Save DIB 存檔的影像。兩張圖片相差不大, 這是由於環境光線穩定的緣故, 若是使用會閃爍的光源, 差異就會比較明顯。

圖 5-B-2 擷取單一畫框存檔

延伸思考: 針對 YUY2 格式的網路攝影機, 是否可以直接在 YUV 色彩模式中累加取平均值後, 得到 YUV 模式的背景影像? 若是需要在 C++ Builder 的影像元件中顯示, 可以再從 YUV 轉成 RGB 存到影像元件的記憶體!

根據理論推導與寫程式實驗發現, 確實是可以直接計算 YUV 色彩模型的平均影像, 用來當作背景影像。

將兩種方式分別得到的背景影像相減, 取絕對植後, 在影像元件中顯示出來, 確實呈現了一張很黑的畫面, 如圖 5-B-3 所示。但仔細分析其中的色彩値, 並非完全為 0, 最大値誤差值為 2, 如圖 5-B-3 所呈現的在座標 (270, 303) 的像素點, 其 RGB 色彩値為 (1, 1, 2), 表示兩張背景影像在座標 (270, 303) 色彩値中, 紅色相差 1, 綠色相差 1, 藍色相差 2。這些誤差是電腦本身在浮點資料表示的本來就有所極限所引發的截斷誤差(truncation error), 加上在計算上的四捨五入的捨入誤差(rounding error) 所造成。

圖 5-B-3 YUY2 格式攝影機用兩種方式分別計算背景影像, 再將兩張影像相減所的到的差異影像。

Week 11: 將圖片置入視訊擷取視窗之中 (2)

2012-11-19T15:37:00.002+08:00

1. 範例程式 Webcam Programming (4)

part D: 透過預覽回呼函數將圖片置入視訊擷取視窗之中

2009S 的課程中, 我花了很多時間在網路上找龍珠的圖片, 最後終於在伊莉討論區的這張圖中找到, 如圖 4-D-1。

圖 4-D-1

然後用 Photoshop 把龍珠擷取出來, 並且, 將四星龍珠, 一一修改成下列一星至七星龍珠。由於龍珠圖片中, 左上及右下各有一塊白色區域, 因此若背景色設定為白色, 將來將龍珠放進視訊時, 這兩塊白色區域就會也一併變成背景, 無法呈現出來, 因此, 我們將背景色改成純紅色。如圖 4-D-2。

圖 4-D-2

接著, 新增一個 TImage 元件到 Capture Window 分頁之中, 如圖 4-D-3。

圖 4-D-3

並將其 Name Property 改為 imDragonBall4, 然後點選兩下 Property Picture, 開啟如圖 4-D-4 的畫面, 並按 Button Load... 將四星龍珠讀取進來。

圖 4-D-4

最後, 按下 Button OK 之後, 就會呈現圖 4-D-5 的畫面, 四星龍珠已經顯示在影像元件 imDragonBall4 之中了。

圖 4-D-5

如果繼續將影像元件 imDragonBall4 的 Property Transparent 設定為 true, 這時四星龍珠圖片的背景色 - 紅色, 就不會顯示出來, 如圖 4-D-6。

圖 4-D-6

將影像載入(Load)之後, 還必須先將影像的色彩資料用陣列儲存起來備用。因此, 必須宣告一個四維陣列, 來儲存七顆龍珠的色彩資料。

unsigned char ucDragonBallRGB[7][50][50][3];
unsigned char ucDragonBallYUV[7][50][50][3];

然後將色彩讀取到陣列的程式, 寫在功能表 preview callback function | Object | Image 的事件處理程序中, 如圖 4-D-7 的功能表。詳見範例程式 Webcam Programming (4), 程式中比較特殊的指令是 ScanLine[j]。透過 ScanLine 的位址, 可以將存在影像元件的像素色彩値讀取出來, 放到預先宣告的陣列 ucDragonBallRGB 之中。然後再將其轉換成 YUV 色彩値存入與先宣告的 ucDragonBallYUV 陣列之中。

圖 4-D-7

在預覽回呼函數 FrameCallBackImage 要注意的是: 只要介於座標 (iObjectX1, iObjectY1) 與 (iObjectX2, iObjectY2) 之間的區域就要置入龍珠圖片, 但龍珠圖片的背景區域必須忽略, 無須置入。如此, 就可以完成將龍珠圖片放進視訊擷取視窗了, 如圖 4-D-8。

圖 4-D-8

接下來, 要示範的是: 無須更改預覽回呼函數, 就可以隨使用者的設定, 變換在視訊擷取視窗的圖片的程式寫法。先將七顆龍珠的圖片, 放到視訊擷取視窗的分頁之中, 然後宣告一個變數來儲存使用者所選定的龍珠編號。

int iDragonBallID;

當使用者選定了某顆龍珠, 只要將變數 iDragonBallID 改成使用者所選定的編號即可。然後將預覽回呼函數 FrameCallBackImage 中, 原先寫定的値, 用變數取代, 這樣就可以讓使用者隨時改變要顯示的龍珠了, 如圖 4-D-9。

圖 4-D-9

延伸思考: 如何讓龍珠動起來?

4. 作業三(a) : 為你的視訊製作一個美麗的畫框, 如圖 4-D-10。

Step 1: 製作一張 640*480 的畫框 bmp 影像, 並選定特定顏色為顯示視訊區域之特定顏色。

Step 2: 在 C++ Builder 新增一個 TImage 影像元件, 並將畫框影像載入影像元件之中。

Step 3: 宣告一個陣列作為存放影像色彩值之用。

Step 4: 在設定預覽回呼函數之前, 將影像色彩值讀入陣列之中。

Step 5: 撰寫預覽回呼函數

提醒: 視訊大小與畫框大小目前是一樣大的, 因此只要去判斷畫框的顏色是否為特定顏色即可, 只要是特定顏色, 就顯示視訊內容, 否則, 則顯示畫框內容。

圖 4-D-10

作業 : 將視訊擷取視窗設定成特定色調, 如棕色色調的復古模式, 藍色色調的海洋模式, 綠色色調的大自然模式...等等。