AR工具系列 I：Camera

上次小秀了一段擴增實境的影片，發現大家好像對這主題很有興趣。所以打算規劃一系列的AR教學，讓大家能夠輕鬆入門。

Argumented Reality，簡稱AR，中文翻譯為擴增實境。和虛擬實境不同的地方在於，虛擬實境是在螢幕上呈現一個完全由軟體建構出來的世界。而擴增實境則是在螢幕顯示的真實世界上加入一些虛擬的資訊。舉個簡單的例子，如果各位有個二三十歳以上，應該看過七龍珠這個漫畫或卡通。裡面很多人都會在左眼或右眼掛上一個可以顯示對方戰鬥力的儀器，這個儀器的背景是真實世界，但是當它對準某個敵人時，則會顯示對方的戰鬥力和其它數值（如果戰鬥力太高，還會爆炸XD）。

除了這個，像是魔鬼終結者那些機器人看到的影像，或者戰鬥機飛行員的螢幕畫面，這些都可以算是一種擴增實境。

簡易的擴增實境，只要有個攝影機顯示真實畫面，然後利用程式把一些資訊疊在這個畫面上就好了。但如果要更有實用價值，則必需考慮到攝影機與真實世界的相對位置。

判斷攝影機與真實世界相對位置的方法，簡單來說可以分成兩大類：

1. 影像辨識處理：這種方法是把攝影機看到的影像抓進程式裡做計算，每一個frame算一次，藉以判別現在相機和真實世界的位置。它的好處是，只要有相機就可以計算，而且非常精確。缺點在於，像iPhone這種CPU不是很強的機器，每計算一個frame需要的時間很長，結果實際上看起來就有點lag。此外，為了判別相機的相對移動，通常還需要一個參考用的圖案。程式根據該圖示在畫面中的相對位置，才能計算出相機的移動，實用性就大大被限制住了。上面的影片是ARToolkit這套開發工具在iPhone上的實測畫面。可以看到虛擬的畫面很精準的疊在真實世界中的圖示上，只是說畫面實在有些lag。當然這個問題隨著iPhone硬體的更新，會逐漸好轉。這一段影片就比較神奇了，這是由國外大學開發的一個稱為Parallel Tracking and Mapping的技術。基本上它也是影像處理，只是它不需要額外的參考圖示，程式本身會去找出畫面中屬於平面的部份，再進行相對位置的計算。他們有開放Source Code，如果有興趣可以去看看。不過code本身不是寫給iPhone用的，而且他們也明講code仍屬開發階段。我抓下來看過了，光要了解內容可能就要不少時間，如果還要讓iPhone可以用，那就….囧囧囧
2. 姿態位置感測器：和上述方法不同，這種方法主要利用的是其它搭配的姿態感測器，用來判斷攝影機與真實世界的相對位置。以iPhone為例，GPS可以用來得知攝影機在地圖上的哪個位置，磁力計則提供水平旋轉時的角度，加速度計則用來計算攝影機的仰角或傾角。此種方法因為不需要影像判識，所以比較不會受限於CPU的能力。相反的，因為仰賴的是其它週邊的感測器，因此這些感測器的精確度就影響了整體定位上的表現。在iPhone上利用這些感測器作為攝影機姿態的判別，精確度確實是比用影像判識的方法差上一截。如果各位手上有iPhone 3GS，可以試試看。把它水平的放在桌上，打開內建的指南針程式，待它靜止後，記住北方的方向。接著，快速的把iPhone水平旋轉90或180度，然後….指南針的北方和剛剛一樣嗎？　囧

上面說了這麼多，除了簡單介紹一下擴增實境是幹什麼的外，主要是要充版面（誤）。好啦～開玩笑的。從上面的簡介可以知道，擴增實境的重點，就是把實際畫面呈現在螢幕上，並把虛擬物件疊在畫面上。所以今天就來說明一下在iPhone上要如何打開攝影機，並把物件疊在上面。

在iPhone上要開啟攝影機，我們要使用的類別是UIImagePickerController，相關程式碼如下：

UIImagePickerController* imagePicker =
[[UIImagePickerController alloc] init];
imagePicker.delegate = self;
imagePicker.navigationBarHidden = YES;
imagePicker.toolbarHidden = YES;
imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;
imagePicker.showsCameraControls = NO;
imagePicker.cameraOverlayView = the view you want to attach;

首先先建立一個UIIMagePickerController的物件，接著把delegate指到你想指的地方，然後如果不想要navigationbar和toolbar的話，記得把它們關掉。在sourceType的部份，設定為IImagePickerControllerSourceTypeCamera，因為UIImagePickerController除了提供相機供能外，相片圖庫也是由它提供。接著則是把最底下有快門按鈕的工具列也關掉。最後最重要的一件事，把想要疊在螢幕上的物件（必須為UIView）設定給cameraOverlayView，這樣該物件就會出現在攝影機的畫面上了。
另外，因為剛剛把相機底下含快門按鈕的工具列給關了，所以畫面顯示的時候，底下會留下一段黑色的橫條，不是很好看。所以我們要把相機顯示的畫面放大一點，讓它填滿整個螢幕。

float bandWidth = 54;
float screenHeight = 480;
float zoomFactor = screenHeight / (screenHeight - bandWidth);

imagePicker.cameraViewTransform = CGAffineTransformScale(imagePicker.cameraViewTransform, zoomFactor, zoomFactor);

工具列的高度大約是54pixel，所以把相機畫面的寬和高各放大約1.13倍，就會填滿整個螢幕了。

最後，我們要把剛剛建立的UIImagePickerController物件叫出來。如果剛剛的UIImagePickerController是寫在某個UIViewController裡面，那麼只要把UIImagePickerController用modal view的方式叫出來就可以了。

[self presentModalViewController:imagePicker animated:NO];

OK!大功告成，這次就先講到這裡囉～

（咦？沒了？教學的部份有點短說＠＠還好前面有寫些東西充版面ＸＤ…）