アラタナエンジニアブログ

aratana Engineer's Blog

こいつ・・・動くぞ・・!!AR(拡張現実)技術で飛び出すぬり絵を作ってみた!!

f:id:tabibits:20150127170805j:plain

皆さんこんにちは。 お正月モードも終わりすっかり仕事モードに切り替わったハズの永井です。
今回は1月にアラタナで催された「ぬり絵が飛び出す!!ARコンテンツ作成勉強会 in 宮崎」についてレポートしたいと思います。

身近になってきたARブラウザJunaio

福岡で大人気のAR勉強会を主催者そのまま宮崎にお招きする当イベントも、今回で宮崎開催3回目となりました。
この勉強会ではお馴染みとなったARを簡単に体験できるツールがJunaioです。

このJunaio、最近では結構身近なところでも使われるようになりました。
例えばこれ、今年の宮崎県民手帳。
ここにもJunaioの技術が使われています。

宮崎の県民手帳が「AR」搭載のハイテク仕様! みやざき犬もいるぞ - Jタウンネット宮崎県

他にも、「これは、すごいっ!」と思った使用例を紹介します。
このAR勉強会にも熊本県よりお越しくださっている後藤一人さんからいただいた年賀状。

f:id:tabibits:20150127170707j:plain

見た目は普通の年賀状のようですが、これにスマホをかざすとムービーが流れだします。

ちょっとカクカクに動いてるように見えるけど、実際はスムーズに動いてます。
このようなARがJunaioを使うと簡単に作れちゃうんですね!すごい!

勉強会スタート

それでは早速、勉強会のスタートです。

f:id:tabibits:20150127170713j:plain

今回の課題は、自分で塗った絵をスマホにかざすとARとして立体的に表示されるというもの。
昨年はこの手の商用コンテンツが話題になりましたが、この原理を学びながらJunaioで作ってみようというものです。
なかなか贅沢な内容ですよね。
楽しみです。

まず最初にJunaioの仕組み、MetaioCreatorのユーザー登録、使い方などの説明からです。
内容は、講師を務めていただいた吉永さん、越水さんのブログにも詳しく書かれています。

第2回 ARコンテンツを作ろう:コンテンツ作成ツール~metaio Creator~ - 雑記ノート

プログラミングが出来なくても簡単!ARコンテンツの作り方【実践編】 - キリンブログ

このMetaioCreatorを使えば、ノンプログラミングでもARが作れちゃうんですよね。
ホント、ARの敷居が低くなったと実感します。

f:id:tabibits:20150127170721j:plain

ではでは、基礎がわかったところで本題に入ります。
下のようなぬり絵が立体的に表示されるコンテンツを作ります。
今回は原理を理解しやすくするため、3Dの立体モデルでなく2Dの平面モデルのサンプルを準備していただきました。

簡単に解説すると、次の手順で飛び出すぬり絵を実現しています。

  1. マーカー(ビー玉写真)を元に、ぬり絵(みやざき犬)の位置を計算し写真撮影する。
  2. 撮影したぬり絵の余白をマスク処理して透過PNGファイルを作成する。
  3. 透過PNGファイルをJunaio管理サーバーにアップロードし、テクスチャファイルとして保存する。
  4. テクスチャファイルを3Dモデルに貼り付けて表示する。

JunaioはARブラウザと呼ばれるように、HTMLやJavaScriptとの親和性が非常に高く、上記1〜3の工程はJavaScriptスクリーンショットcanvas操作で実装、工程4もJunaioのAPIを呼び出すだけでできます。

arel.Scene.removeObject("nurie");
//3Dモデル(nurie)を作成。
var nurie=new arel.Object.Model3D(
    "nurie",
    "http://example.com/hoge/nurie.obj",  //3Dファイル
    "http://example.com/hoge/nurie.png"   //テクスチャファイル
);
nurie.setTranslation(new arel.Vector3D(0,-40,30)); //位置
nurie.setScale(new arel.Vector3D(80,80,80)); //サイズ
arel.Scene.addObject(nurie);//ARシーンに追加

このコンテンツ作成にはPHPとHTML+CSS+JavaScriptを使用しましたが、プログラミングはひとつひとつ丁寧に教えていただけるので、初心者の方でも安心して作成できました。

f:id:tabibits:20150127170726j:plain

勉強の後はピザとビールで未来を語ろう

そういう訳で今回の勉強会、5時間の長丁場でした。皆さん本当にお疲れ様でした!
疲れた頭を休めるためにも、勉強会が終わった後はピザとビールで乾杯です。

f:id:tabibits:20150127170736j:plain

うーん、クリエイターが集まると話題が尽きないですね。
いろいろな話題で盛り上がるなか、吉永さん作成のARコンテンツお披露目会。
幽体離脱(!?)など、言葉ではなかなか伝えられない体験をさせてもらいました!

最後になりましたが、福岡よりお越しくださいました吉永さん、松本さん、越水さん、岩崎さん、今回もとてもおもしろい沢山の体験を有難うございました!!

過去のARイベントの様子はこちら
未来はすぐそこ!AR(拡張現実)を体験してきました!
コピペでできる!AR(拡張現実)勉強会に参加しました!