Web事業部実績紹介
Web事業部実績紹介
2013.03.15

初音ミクとドミノ・ピザのコラボをAR技術の観点からがっつり解説してみた

よっしー

どうも僕だよ!

知ってる!?知ってるあのこと!もう体験した!?体験したよね!?

あのこと!?決まってるだろ!
ドミノピザと初音ミクの夢のコラボキャンペーンだよ!

知らないといううつけものは、この公式サイトを一読しろ!
一読と言わず凝視しろ!

さらには、このコラボキャンペーンをやたらハイテンションで紹介する、
ドヤ顔のドミノピザのCEOの動画を100万回再生しろ!

domino_miku
Domino’s feat.初音ミク

このキャンペーンは、
AppStoreで配信されている、
ミクバージョンのドミノピザのiOSアプリからピザを注文すると、
ミク仕様の特性BOXに入ったピザが届く!

さらに、箱がミク仕様というだけではなく、

そのアプリでミク仕様のピザの箱をカメラで映すと、
アプリ上で、さも現実にそこにいるかのように、
ピザの箱の上で歌い踊る初音ミクのパフォーマンスが見られるってものさ!

ピザの箱の上に映し出されたミクは、さも現実世界にいるかのように、
アプリ上でいろんな角度から見ることが出来る!

miku_dance_front
前からも!

miku_dance_side
横からも!

miku_dance_back
後ろからも!

もちろん、ロ、ローアングルからだって!(*´д`*)ハアハア
※画像自粛

まるで現実世界に存在するかのようなミクのパフォーマンスを楽しめるのだ!

今回は、さも現実世界に存在するかのようにミクを映し出す技術の仕組みを、
なぜかCGエンジニアエキスパートの資格を持つこの僕が、
ドミノピザのCEOばりのハイテンションで、
ご説明かつご解説しようではないか!

ピザの箱の上で歌い踊るミクはARという技術で実現されている!

結論から言うと、このピザの箱の上で自由に歌い踊るミクは、
AR(拡張現実感)という技術を用いて実現されている!

AR!最近よくきくよねAR!よくみるよねAR!
特に最近はニンテンドー3DSやPSVitaのような、
携帯ゲーム機でよく使われてるから、
ゲーマーにはおなじみの技術だよ!

簡単に、どんなことが出来るのかというと、
携帯とかゲーム機についてるカメラで、
特定のマーカーを映すと、そのマーカー上に、
3Dモデルが出現するという技術だよ!

まずは3DCGが生成される仕組みを学ぼう!

では、ARがどんな仕組みで実現されてるかを学ぶ前に、
基礎知識として、3DのCGはどうやって生成されてるかを、
簡単かつ簡潔にご説明しようではないか!

超簡単に説明すると、ミクとかマリオのような3Dモデルを、
3D空間上に設置したカメラでパシャっと写真撮影した画像が、
3DCGの正体だ!

miku_ar_1

詳しくは、3Dモデルはポリゴンという3次元座標の集合体で出来ていて、
ポリゴンの頂点が、撮影した2次元の画像中の、
どの座標に位置するか計算することによって、
3DCGを生成している!

ちなみに、3Dモデルから3DCGを生成することを、
レンダリングという!

ARを理解する上で重要なのは、3DCGを生成する際には、
3次元空間上にカメラを配置して、
そのカメラで3Dモデルを撮影したものが、
3DCGになるということに注目してくれ!

つまり、3Dモデルと同じく、カメラも3次元上で、
位置(座標)や向き、傾きと言ったパラメタを持っていて、
そのパラメタをもとにCGが生成されているということだ!

これ、重要だから覚えておいてね!

AR(拡張現実感)のしくみとは?

じゃあさじゃあさ!

現実世界のカメラの位置とかのパラメタと、マーカーの位置を同じにして、
カメラで撮った画像の上にリアルタイムに3Dモデルをレンダリングしたら、
合成写真みたいに、マーカーの上に3Dモデルを表示できんじゃない?

まさにそうなのだ!

ARはマーカーの位置を基準とした現実世界のカメラの位置と、
3Dモデルを基準とした3DCGを生成するカメラの位置を一致させ、
リアルタイムに画像合成することによって、
あたかも3Dモデルが現実の世界とリンクしているかのように見せているのだ!

仕組みが分かっちゃえば、
基本概念は単純な手法であることがおわかりだと思う!

でも、カメラの座標ってどうやって求めんのよ!

それは、3DCGをレンダリングするときの逆演算をするのだ!

3DCGを描画するときには、2次元の画像の座標を未知として計算したが、
3D空間上の座標と、2次元の画像の座標がわかっていれば、
カメラの位置や向き、傾きなどのパラメタは逆算で計算できるという寸法だ!

miku_ar_2

miku_ar_3

ARをもう少し詳しく解説してみる!(補足)

この項目はもう少し突っ込んだ説明になるので、
読むのがめんどい人はスルーしてくれ!

この章だけだぞ!
絶対だぞ!

ちなみに、2次元画像から3次元の座標を割り出そうと思うと、
複数毎の画像が必要で、
異なる画像上で3次元空間上の同じ箇所の座標がひもづいている必要がある。

人間が二つの目で立体を認識しているのは、両眼視差といって、
異なる位置からの画像をもとに立体を認識している。

同様に、コンピュータ上で2次元の画像から3次元空間を認識しようと思うと、
複数毎の画像が必要であることと、
異なる画像上で、3次元空間上の同じ箇所がひもづいている必要がある。

ではどうやって異なる複数毎の画像上で、
同一箇所と分かっている座標を導きだすのかというと。

特徴的な図形をパターン認識で画像認識し、
それぞれの画像上から同一の図形を抽出して、その特徴となる箇所、
例えば、四角い図形の頂点とか、格子状の直線の交点とか、
そういったものをパターン認識で識別して、
複数画像で同一のポイントを結びつけている。

でも、携帯のカメラ、ひとつしかないよ!
どうやって複数の画像を取得するんだYOー!

いい質問だ!

それは、時間差のある画像を比較するのだ!

マーカーが動かないことを前提とすると、
複数の画像間でカメラ側が相対的に動くことになる。

すなわち、時間差のある別角度からの複数毎の画像を比較すれば、
複数画像でカメラの相対位置などのパラメタを求めることが出来るのだ!

これ以上は難しい話になりすぎるので、
説明はひかえる!

【追記】
マーカーを使う場合とか、平面空間が既知の場合は単一の画像でも逆算可能とのご指摘をいただいた!マーカーを使わないで、空間情報が未知の自然画像から特徴点を抽出する場合は複数画像でトラッキングが必要!だから、今回のミクのARは単一画像でやっていると予想される!ご指摘サンクス!

ピザの箱に隠されたマーカーをさらけ出す!

でも、ドミノピザの箱にそれっぽいマーカーなんかないじゃない!
どういうこと!?これどういうことなのよ!

そう。ドミノピザの箱のすばらしいところは、
マーカーを絵となじませて、巧みに隠しているところだ!

実はマーカーは、QRコードのような四角いマーカーである必要はない!

要は、空間平面を識別するための座標(特徴点)と、
方向を識別するための識別情報があればよい!

試しに、ドミノピザの箱を写真で映して、
赤色だけの世界で2値化して見てみようではないか!

miku_box_front

miku_box_front_r

miku_box_back

miku_box_back_r

見えたか!
見えたか隠れたマーカーが!

きっと、格子状になった直線がマーカーになっていることが推測できる!
直線のような単純な図形はパターン認識でも識別しやすいのだ!

他にも、向きを検出するために、
左右非対称のマーカーが必要なんだけど、
これはどこにあるか微妙だな。
ドミノピザのロゴあたりをマーカーにしてるのか、
格子状の直線の交点の数は左右で非対称だから、
その数で割り出しているのかもしれない。

あくまで推測ね!推測!
ARのパフォーマンスを見れる箱の種類は複数あるみたいだから、
おのおの別の図形をパターン認識してるのかな!

まとめ

今回は、ドミノピザと初音ミクの夢のコラボで実現した、
ピザの箱の上で歌い踊るミクのパフォーマンスで使われている、
AR(拡張現実感)という技術をハイテンションに解説したよ!

簡単にその仕組みをまとめるとこうだ!
・カメラで撮影されたマーカーから特定の座標を認識する!
・認識した画像上の座標をもとに、マーカーからの相対位置として、
3次元空間上のカメラの位置や向きなどのパラメタを求める!
・求めたカメラの位置をもとに、モバイル端末で撮影した画像上に、
リアルタイムに3Dモデルを描画する!
・現実空間と連動したように3Dモデルが画面上に描画される!

今回は謎に包まれたAR技術の概要と、その仕組み、
さらにはドミノピザの箱に隠された秘密まで踏み込んじゃったよ!

しかし、最大の謎は、CGエンジニアである僕が、
なぜWeb業界にいるのかだ!

だれか教えてくれ!
特にフォトショとかイラレのスクリプト組んでるってわけでも、
JSでパーティクルエフェクトとか書いてるわけでもないんだ!
なんでここにいるんだ僕は!

なんでだろう。
気がついたらここにいた!
結局はノリと勢いだと思うよ!

あと、お前字きたねーよという反応をお待ちしている。
僕の字の汚さは象形文字ばりに解析不可能と定評がある。

ぜひ年月をかけて解読してほしい。

なぜARが普及しだしたのか(補足)

最後に、補足だけど、
なんで近年、ARが一般に浸透しだしたのかについて、
書いとこうと思うよ!

ちょっと難しいので読み飛ばしたい人は読み飛ばしてくれ。
この章だけだぞ!この章だけだからな!

AR自体は昔からある技術ではあるが、
基本概念は単純でも、内部処理的には結構重いことをやっているのだ!

手順をもうちょっと深めにまとめると、
・カメラでARのマーカーを撮影する。
・画像を加工して2値画像を生成する。
・マーカーをパターン認識で抽出する。
・マーカー上の特徴点を抽出する。
・複数の画像上で、3次元空間上で同じ位置にある特徴点をひもづける。
・逆演算でカメラの位置や向き、傾きなどのパラメタを算出する。
・そのカメラを使って3Dモデルをレンダリングする。
・リアルタイムに実写と合成して画面に表示する。

上で何を言ってるのかわからなくても、
コンピュータで立体を認識しようと思うと、
結構大変なことがお分かりだと思う!

近年、携帯端末を中心にARが普及しだしたのは、
ARと携帯端末の相性の良さと、
携帯端末でも上記のような重い処理をリアルタイムに処理できるだけ、
携帯端末の性能が急速に向上したのがあると思う!

数年前までは、デスクトップ上で同じことをやろうとしても、
スペックが追いつかず処理落ちするという状況で、
携帯端末になんてとても乗せられない状況だった!

それが、たった数年でここまで普及するようになったのだから、
現在の携帯端末の性能の向上には脱帽する限りだね!

たぶん、これから、処理速度の関係で日の目を浴びてなかった技術が、
クライアントサイドの端末のリッチ化でどんどん出てくると思うの!

いろいろ面白い技術が出てくると思うから、
楽しみだよね!

関係ないけど、この前、小腹がすいたので、
コンピ二で小さめのピザを買ったら、ペット用って書いてありました。
あるんだね!ペット用のピザ!最近のペットってすごいグルメなんだね!
めっちゃ固かった。

【追記】
この記事についていろいろ指摘してくれた友人がやってる研究!今後はARのマーカーを、CGの上塗りではなく、画像補完でカメラ画像からリアルタイムに消して、本当に現実空間にとけ込ませたARとかも実用化されるかも!ほんまホットでおもろい研究してるわー!
河合紀彦 (Norihiko Kawai) のホームページ
※このページの下の方にデモ動画がのってるよ!

 

Modeled by ままま / HARDLOVE / okp
(C)ANGEL Project
(C)Crypton Future Medea,INC. www.piapro.net