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

前回はARブラウザjunaio、そしてコンテンツ作成のソフトウェアmetaio Creatorのダウンロードと基本的な使い方を説明しました。

プログラミングが出来なくても簡単!ARコンテンツの作り方【導入編】

よりリッチなコンテンツをARで表示する

いよいよ3DモデルをAR上で表現する方法を説明したいと思います。

今回の内容も九州先端科学技術研究所@Taka_Yoshinagaさんの勉強会で教えてもらったものになります。多謝々々!

metaio Creatorを使えばプログラミングを一行も書くことなく、簡単に3Dモデルを扱うことができます。

それでは早速作ってみましょう。

3DモデルをARで表現する。

マーカーは前回も使った下のものを使用して説明します。
マーカーの登録のしかたは前回の記事を参考にしてください。

sample_mark

表示させる3Dモデルはmetaio Creatorに用意されているものがあるので、今回はそれらのモデルを使いたいと思います。

Windowsの場合は下記のディレクトリに保存されているはずなので確認してください。

metaioインストール先のパス\metaio\Creator 3.0\examples\content\3D_Models

今回はpumpkin.md2という3Dモデルを使用します。うまく設定できると下の画像のように作成画面に3Dモデルが表示されます。

ar01

試しにこのパンプキンをARで表示してみましょう。

metaio Creator画面右側にある「Create」をクリックすると、下の画像のようなポップアップが開くのでコンテンツのアップロードを行います。

ar02

コンテンツのアップロードが完了するとQRコードが出てくるので、スマートフォンにインストールしてあるjunaioアプリでスキャンします。

ar03

ここまでの手順でjunaioにコンテンツがダウンロードされたはずです。

スマートフォンでjunaioを立ち上げたままカメラで当サイトの左に見えるキリンを覗き込んでみましょう。

下の画像のようにキリンの上にカボチャが表示されるはずです。簡単ですね!

ar09

ただ、ちょっとデフォルトのままだと小さくてインパクトに欠けるので、サイズを大きくしたり、カボチャの向きを修正してみたいと思います。

metaio Creatorの作成画面に戻って左サイドバーにある「3D」という部分をクリックしてください。

ar04

すると下の画像のようなオブジェクトの配置を編集するための軸が表示されます。これを緑軸や赤軸にひっぱるとマーカーに対するオブジェクトの表示位置が変更できます。

ar06

さらに水色の●をクリックすることで、オブジェクトの向き、大きさなども編集できるようになります。

ar07

ar08

各軸をごにょごにょ調整してオブジェクトを大きくしたり、正面を向けたりしてみます。

変更が済んだら、最初にやった手順と同じようにコンテンツのアップロード、junaioでQRコードのスキャン、カメラでマーカーを覗き込んでみましょう。

ar10

こんな感じでカボチャが大きくなりました!3Dモデルの編集も、ごく一部だけですがプログラミングいらずで簡単に行うことができます。

マーカーを使わずにARコンテンツを表示してみる!

さてここまでは特定の絵柄やマークを利用して、そのうえにARコンテンツを表示させてきました。

さらに発展させて、実際の空間を記憶させてAR表示させる方法を試してみましょう。

今まで使ってきたjunaioとmetaio Creatorに加え、metaio Toolboxというアプリが必要になります。app storeやGoogle playからスマートフォンにインストールしましょう。

今回はiOSデバイスを使って説明します。

metaiotoolbox

Android app on Google Play

早速metaio Toolboxを起動すると下のような画面になるので画像にしたがって先へ進みます。

ar11

ar12

すると下のようなスタンバイ画面になるので右上の再生ボタンをタップして空間のスキャニングを行います。

ar13

アプリがカメラから覗いた空間の特徴点をスキャニングして拾って3Dマップを作ってくれます。

スキャニングは少しコツがいるので成功するまでカメラを動かすスピードを変えたり工夫してみてください。そもそも特徴点が拾いにくい空間もあるのでスキャニング精度の向上に期待したいところです。

ar14

3Dマップの作成が成功すると下のようなサンプルモデルが表示されます。

要は空間の特徴点を集めた3DマップをマーカーにしてARコンテンツを表示させているという技術なのです。

作成した3Dマップをセーブするために右下のマークをタップしましょう。

ar15

下の画面になれば3Dマップの保存ができました。スマートフォンをPCにつなぎ、iTunesでiPhone内のapp>ファイル共有>ToolboxからファイルをPCに移すことができます。

また、下の画像のように3Dマップのファイルを添付してメールを送ることもできます。PCで3Dマップを受け取るならこちらのほうが簡単かもしれませんね。

ar16

早速作成した3Dマップをマーカーとして使用してみましょう。

ar17

これまでの手順と同じようにまずマーカーの設定から始めます。

マーカー設定のダイアログがあらわれたら一番右のEnvironment Trackingを選択してOKをクリックします。

ar18

ファイル選択のウィンドウが開くので先ほどスマートフォンからPCに移した3Dマップファイルを選択しましょう。

すると下の画像のように作成した3Dマップが表示されます。今度はARで表示させるモデルを選びます。今回は前にやったようにパンプキンのモデルを選びます。

ar19

モデルを選択してあげると下の画像のように画面に表示されます。

ar20

ちょっと3Dマップ上の位置関係が把握しずらいですが、とりあえずARで見てみましょう。

以前にARコンテンツを作成した時と同様、コンテンツをアップロードして現れるQRコードをスマートフォンのjunaioでスキャンします。

3Dマップをマーカーに、パンプキンを3Dモデルにしたコンテンツがスマートフォンにダウンロードされます。

全て済んだら先ほど3Dマップを作成した場所をカメラで覗いてみましょう。

ar21

じゃーん!パンプキンが仲間になりたそうにこっちをみている!

これらが全て無料で作成できます!HTMLやCSSも表示できる!

全くプログラミングを行うことなく、空間認識によるARコンテンツが作成できました!
マーカーを使うことなく3DモデルのARコンテンツが無料で作れるなんて驚きではないでしょうか。

ぶっちゃけ、もっと突き詰めてオリジナルのコンテンツを作ろうとすると3Dモデル作成の技術も必要になるのでハードルはかなり上がるんですけどね。。。

しかしやり方によってHTMLやCSSで表現したオブジェクトも表示できるので、Web制作をしている方なら色々応用してコンテンツを作れる分野でもあります。

そこらへんの方法はまた別の機会にまとめようと思います。

前回と同様、九州先端科学技術研究所@Taka_Yoshinagaさんのブログを参考にさせて頂いてます。ありがとうございます!

第4回 ARコンテンツを作ろう:ARコンテンツを作ってみる②
第5回 マーカーレスAR

たまーに@Taka_Yoshinagaさんと有志を集めてARコンテンツ作成の勉強会を開催しているのでご興味あればお知らせください!

プログラミングが出来なくても簡単!ARコンテンツの作り方【導入編】

九州先端科学技術研究所(通称ISIT)にお勤めしている@Taka_Yoshinagaさんとご縁があって、ARコンテンツの作り方についてあれこれ教えてもらいました。

「え!こんな簡単にARってつくれちゃうわけ!?」と驚くことが多かったので誰かに伝えたくなりました。

何回かにわけて公開しますが今回はタイトル通り、プログラミングの知識がなくてもAR技術を使ったコンテンツが簡単に作れますよという内容です。

しかも使用するツールは全て無料。こんなノウハウを惜しみなく教えてくれるなんて、ありがとう@Taka_Yoshinagaさん、すごいよISIT、さすが先端科学研究所というだけあります!

さて、さっそく本題に入ります。

ARブラウザのインストール

インターネットを見るときはIEやChromeなどのブラウザを通してコンテンツを閲覧します。

ARコンテンツを見る場合にはARブラウザが必要なので、今回はjunaioというARブラウザをインストールします。

junaio

Android app on Google Play
よく使われるARコンテンツって専用アプリにコンテンツごと含まれていると思うのですけど、junaioはブラウザ(閲覧ソフトウェア)なのでコンテンツ自体はQRコードを使ってダウンロードします。

この辺は実際使ってみてもらうとわかりますが、いちいちコンテンツごとにアプリをインストールする手間がなくなります。

junaioはブラウザであると同時にARコンテンツのプラットフォームと考えることもできますね。

インストールが完了してjunaioを立ち上げるとチュートリアルが始まるので進めるかスキップしてください。

デフォルトの表示では位置情報を利用したARコンテンツが表示されるはずです。さっそくほかのARコンテンツを読み込んでみましょう。

junaio_start

画面右上に見える「scan」アイコンをタップして下のQRコードをスキャンしてください。うまくいくとコンテンツのダウンロードが始まります。

ar_sample01

ここでダウンロードされるのは大まかに説明すると次の2つのデータです。

  • 「このマークに反応してコンテンツを表示しますよ」というマーカー情報
  • 「コンテンツの形、位置、内容や動き」をまとめたコンテンツデータ

ではコンテンツのダウンロードが済んだらjunaioを起動したまま下の画像にカメラを向けてみてください。

ar_sample02

どうでしょうか?次の画像のようにメタイオマンが表示されたはずです。

metaioman

このようにjunaioというARブラウザで簡単にARコンテンツを利用できます。他にもjunainoの操作画面左上にある検索メニューから、ネットに登録されているコンテンツをたくさん利用できるので試してみてください。

次は実際に自分でARコンテンツを作ってみましょう。

ARコンテンツを作る準備をする

ARコンテンツを作る前に、junaioへのアカウント登録と、ARコンテンツを作るためのソフトウェアmetaio Creatorをインストールが必要です。

それぞれの登録・インストール方法については下記サイトを参照してください。

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

metaio Creatorインストールしてから、junaioのアカウントと連携させるのを忘れないようにしましょう。

ARコンテンツを作ってみよう!

まずはマーカーを登録する。

今回はカメラをマーカーにかざすと画像がARで表示されるという基本的なコンテンツを作ってみたいと思います。
前ステップでインストールしたmetaio Creatorを起動してください。

metaio01

metaio Creatorが立ち上がったら上の画像の丸印のとこをクリックしてください。

metaio02

この画面が出たら「Image Tracking」を選択して「OK」をクリックします。

ファイル選択のダイアログが開くのでマーカーにしたい画像を選びましょう。今回はサンプルのマーカー用画像を用意しているので使ってください。

マーカー画像のサンプルはこちら

画像の登録が済むと画面下のほうにマーカーが表示されます。

metaio03

表示されるコンテンツを追加

metaio10

画像の丸印をつけた部分をクリックしてください。

ファイル選択用のダイアログが開くので画像を選択してください。すると画面に選択した画像が追加されます。今回はサンプル画像を用意したので使ってみてください。

サンプル画像はこちら

画像の登録がすむとmetaio Creatorの画面でAR表示される画像が確認できます。次はこのデータをサーバにアップしましょう。

metaio04

作成画面にあるプルダウンが「New Channel」になっていることを確認して、「Createボタン」をクリックしてください。

metaio05

こういうダイアログが開くので適当に名前を付けましょう。今回はAR_testとしました。他の項目は空欄で構いません。
コンテンツに名前をつけてcreateボタンをクリックするとコンテンツデータがサーバにアップされます。

metaio06

少し時間がかかりますが、アップロードが終われば作成したコンテンツの登録が完了です!

作ったARコンテンツを実際に見てみる

metaio Creatorにデータアップロードが済むとQRコードが表示されます。

metaio07

それではスマホ、またはタブレットでjunaioを起動してこのQRコードをスキャンしましょう。データのダウンロードが始まります。

コンテンツのダウンロードが終わったら当サイトの左側にいるキリンさんにカメラをかざしてみてください。

下の画像のように表示されれば成功です!

ar_kirinblog

コンテンツ表示のサイズや位置を調整したいときはmetaio Creatorで編集できます。修正をしたらUploadボタンでサーバにアップしなおせばOKです。

コンテンツの登録は同じ要領でできますのでお好きな画像で試してみてください。

ARコンテンツを残したり、消したりする

コンテンツを保存するときはmetaio Creator左上メニューのFile→Save projectを選択します。ダイアログが開くので保存場所と名前を指定すれば保存されます。

metaio08

コンテンツの削除をするときはQRコード付近のプルダウンで対象のプロジェクトを選択して(i)ボタンをクリックしてください。開いたウィンドウのDelete this channelで削除ができます。

動画コンテンツもARに出来る!

metaio Creatorでは画像以外にも音声ファイルや動画ファイルなどを利用したコンテンツも作成できます。

動画を登録するときは下の画像のようにビデオアイコンをクリックしてファイルを選択します。

metaio09

基本的な流れはこれまでと変わらないので、下記の流れを踏まえて登録していきましょう。

マーカーの登録

表示されるコンテンツの追加

データのアップロード

junaioでQRコードをスキャン

カメラをかざして表示

どうでしょうか?動画がAR上で再生されますね。

お手軽にARコンテンツが作れた!

ここまでで思ったより簡単にARコンテンツが作れることがわかってもらえたと思います。

ツールを使えばパソコンとスマホだけで気軽にAR制作の世界へ入っていけます。

こんな便利なツールがあったなんて。。。
教えて頂いた@Taka_Yoshinagaさんありがとうございます。

というか今回の記事も下記の@Taka_Yoshinagaさんのブログを参考にさせて頂き、ほとんど内容かぶっているのですよね。。。もちろんきちんと許可はとってから公開します。

第1回 ARコンテンツを作ろう:junaioを使ってみる
第2回 ARコンテンツを作ろう:コンテンツ作成ツール~metaio Creator~
第3回 ARコンテンツを作ろう:ARコンテンツを作ってみる①

ISITでは今回紹介したAR技術の他にも多岐にわたる先端研究を行っています。興味があれば@Taka_Yoshinagaさんにコンタクトをとってみてください。

Leap motionやKinectを利用した研究などもされてるみたい。テクノロジー好きの方は退屈しないと思います!

ARコンテンツ作成については【実践編】へ続きます!