拡張現実感(Augmented Reality:AR)という言葉を聞いてどんなものを思い浮かべますか? 風景にケータイをかざすとそこにCGのキャラクタが見えたり,建物の説明書きが見えたりというイメージでしょうか. 本書では,現実に情報を重ねるだけでなく,その一歩先である「実世界とのフィジカルなインタラクション」というところにフォーカスしました. 具体的には,センサで計測した情報をARで提示したり,ARを介してカメラ画像に写っている家電をコントロールしたりということができる内容になっています. 本書では,Processingとのファーストコンタクトを終えた人がARを作りたい!という野望をかなえられるように, ARToolKit,Arduino,Twitter,Kinect,AR.Droneなどのさまざまな道具を連携させる方法を解説しています. また,それらを組み合わせた応用例のレシピも紹介しています. AR関連の小ネタもたくさん盛り込みましたので,読み物としてもお楽しみください.
本書を読んで,あなたの妄想をカタチにしてください.そして面白い作品ができたらぜひご一報ください.
(最終更新日:2012年4月8日)
|
各種リンク
|
|
ソースコード
本書掲載のソースコードです.使用している画像ファイルやパターンファイルも同梱していますが, フォントファイル(*.vlw)については同梱していませんのでご自分で作成してください.
- AR-ProgrammingBook.zip (303KB)
読者の声
大木さん(@Ohki)が書評&製作記事を書いてくださいました! ありがとうございます! (ソースコードはこちら)
(随時追加します!)
正誤情報
- P.129 リスト4.5 TwittARのプログラム
マーカ上に重畳されたCGが消えずに画面上に残り続けるバグがあります.draw()関数の中の cam.read(); の次の行に background(0); を追加してください.
void draw() { if (cam.available()==false) return; // カメラの用意ができていないときは処理をしない cam.read(); // カメラ画像の読み込み background(0); // 画面の初期化 ←これを追加! imageMode(CORNER); // 画像の原点を左上にする
Q&A
- 「外部ライブラリの導入の仕方」(P.33)で説明されている「ライブラリ名を冠したフォルダ」ってどういう意味ですか?
- フォントはどうやって設定するのですか?
- WindowsでCaptureを使うプログラムがうまく動作しないのですが,どうすれば?
- obj形式の3DモデルをARで表示するにはどうしたらいいですか?
- CGが実物体の陰に隠れた状態を表現するにはどうしたらいいですか?
- 何か面白そうな素材はありませんか?
「外部ライブラリの導入の仕方」(P.33)で説明されている「ライブラリ名を冠したフォルダ」ってどういう意味ですか?
Processingのライブラリはjarという形式のファイルで提供されています. このjarファイルが入っているlibraryフォルダの1つ上の階層のフォルダはjarファイルと同じ名前でなくてはいけません. つまり,「ライブラリ名を冠したフォルダ」とはjarと同じ名前のフォルダという意味です(もちろん拡張子の「.jar」は除きます). これについての詳しい解説は How to Install a Contributed Library - Processing にあります.
外部ライブラリの多くは,バージョン名がzipファイルの名前に含まれた状態で配布されています. 解凍時にでてきたフォルダの名前にバージョン名などが含まれていてjarファイルの名前と異なる場合には,フォルダ名を修正する必要があります.
例えばNyAR4psgの場合,配布されているzipファイルを解凍すると「nyar4psg-1.1.6」という感じのフォルダ名になりますが,これを「nyar4psg」と修正する必要があります. SourceForgeやGitHubで配布されているライブラリではこういうことが良くあるので注意してください.ちなみに大文字小文字は区別されないようです.
フォントはどうやって設定するのですか?
本書で紹介しているいくつかのプログラムでは,フォントを設定するためにvlwファイルをロードしています.これについて補足説明します.
- vlwファイルを作る方法
Processingのメニューの「Tools」→「Create Font...」を選択します.フォントデータを作成するウィンドウが表示されますので, フォントの種類とサイズを選びます.OKボタンを押すと,編集中のソースコードがある場所に「data」というフォルダが自動的に作られ, その中にvlw形式のファイルが生成されます.「Characters...」をクリックするとより詳細なオプションを選べます. 日本語も使いたいときは「All Characters」にチェックを入れますが,ファイルの作成に時間がかかるので注意してください.
- vlwファイルを使わない方法
createFont()という関数を使えば,vlwファイルをロードせずに,コンピュータにインストールされているフォントを直接指定できます. たとえば,以下のようなコードを書きます.
PFont myFont; void setup() { size(350, 200); myFont = createFont("HGSSoeiKakugothicUB", 40); textFont(myFont); } void draw() { background(0); text("ARプログラミング", 10, height/2); }
WindowsでCaptureを使うプログラムがうまく動作しないのですが,どうすれば?
いくつかの選択肢があります.以下を参考にしてください.
- WinVDIGを使う
これが一般的な方法です.QuickTimeの最新版とWinVDIGの1.01をダウンロードしてインストールします. ProcessingのCaptureはQuickTimeを用いてビデオ入力を扱っています.WinVDIGはWindowsにおけるビデオ入力(DirectShow)をQuickTimeに渡す役割を担っています. WinVDIGは1.01が安定して動作することが確認されており,それ以降のバージョンでは正常に動作しないことがあります. WinVDIGのビデオ圧縮処理によって画像が不鮮明になる場合があります.
- GSVideoを使う
GSVideoはProcessing用のビデオ入出力ライブラリです. 「Capture」を「GSCapture」に置き換える程度の改変で済みます. .start()というキャプチャ開始のメソッドを呼ぶのをお忘れなく. GSVideoを使った最も簡単なキャプチャのプログラムを以下に示します.
import codeanticode.gsvideo.*; GSCapture cam; void setup() { size(640, 480); cam = new GSCapture(this, width, height); cam.start(); } void draw() { if (cam.available() == true) { cam.read(); image(cam, 0, 0); } }
- JMyronを使う
JMyronは色トラッキングやBlob検出を行うための動画像処理ライブラリです. カメラからのビデオ入力を扱う機能も含まれています. コード的にちょっとだけ癖がありますが,動作は軽く,綺麗な画像が取れるので個人的におすすめです. JMyronでPImage型の画像データを取得したい場合は以下のようなコードを書きます.
import JMyron.*; JMyron m; PImage img; void setup() { size(640,480); m = new JMyron(); // JMyronの初期化 m.start(width, height); // キャプチャのスタート img = new PImage(width, height); // 画像の初期化 } void draw(){ m.update(); // カメラの更新 m.imageCopy(img.pixels); // PImage型の変数への画像データのコピー img.updatePixels(); // PImageのピクセルデータの更新 image(img, 0, 0); // 画像の描画 }
obj形式の3DモデルをARで表示するにはどうしたらいいですか?
obj形式の3Dモデルを表示するためのライブラリとしてOBJ Loader (saitoobjloader)があります. このライブラリをダウンロードしてインストールしてください. OBJ LoaderとNyAR4psgを組み合わせて,マーカの上に3Dモデルを表示するサンプルプログラムを以下に示します. cassini.objはOBJ Loaderに同梱されている土星探査機のモデルデータです.
import jp.nyatla.nyar4psg.*; // ARToolKit import processing.video.*; // ビデオライブラリ import saito.objloader.*; // objローダ Capture cam; // キャプチャ MultiMarker ar; // ARマーカに関する処理をするオブジェクト int id; // マーカに割り当てられるID番号 OBJModel model; // 3Dモデル void setup() { size(640, 480, P3D); // ARをやるための準備 cam = new Capture(this, width, height); ar = new MultiMarker(this, width, height, "camera_para.dat", NyAR4PsgConfig.CONFIG_PSG); id = ar.addARMarker("patt.hiro", 60); // 3Dモデルの準備 model = new OBJModel(this, "cassini.obj", "absolute", TRIANGLES); model.scale(5); model.translateToCenter(); noStroke(); } void draw() { if (cam.available() == false) return; // カメラの準備ができてないときは何もしない cam.read(); // カメラ画像の読み込み background(0); // 画面の初期化 ar.drawBackground(cam); // 背景画像の描画 ar.detect(cam); // マーカ認識 lights(); // ライティング if (ar.isExistMarker(id)) { ar.beginTransform(id); translate(0, 0, 15); // 3Dオブジェクトの表示位置の調整 model.draw(); // 3Dオブジェクトの描画 ar.endTransform(); } }
CGが実物体の陰に隠れた状態を表現するにはどうしたらいいですか?
重畳したいCGを描くときに,一緒に実物体と同形状のCGを描くことによって,実物体によってCGの一部が隠れて見えない状態を作ることができます. 実物体の形状があらかじめわかっているときは,そのCGモデルを用意しておき,ARマーカを使って実物体と同位置に重ねます. 詳しいやり方を以下で解説しています. Processingでオクルージョン表現のあるARを作る
Kinectがあれば,実空間の凹凸形状を計測して,CGの隠れ表現に使うことができます.これについては後日紹介します.
何か面白そうな素材はありませんか?
なんという無茶振り! 面白いものを見つけ次第追加します.
- Perfume
Perfumeのモーションキャプチャデータ(およびBGM)とそれを再生するためのサンプルプログラムが Perfume official global website で公開されています. Processing版のソースコードもあるので,この素材を活用されてはいかがでしょう? BVH形式のモーション定義ファイルのローダもProcessingで書かれているので,いろいろと使い道がありそうです.
- お手軽プロジェクションマッピング
動画ファイルが1個あればできる簡単なプロジェクションマッピングのやり方を紹介します.
Processingで手抜きプロジェクションマッピング
- Googleマップから画像を取得する
Googleマップにアクセスして地図画像や航空写真を取得するライブラリがあります.ブログで解説を書きました.
Processingでお手軽にGoogleマップから画像を取得する