第3回 ARコンテンツを作ろう：ARコンテンツを作ってみる�@

今回はまずはじめに表示する素材を手に入れやすい写真やビデオ映像を事前に用意した絵(マーカ)に重ねあわせる方法について解説します。

当記事では以下の「AR SCREEN」と書かれた画像をマーカとして使用し、桜の画像を表示する仮想物体として使用しますのでダウンロードしておいてください。




【画像をAR表示する】
まずはじめに前回インストールしたmetaio Creatorを起動しましょう。



すると下図のウィンドウが表示されます。
続いて画面下方の○で囲んである部分をクリックしてください。



すると下のようなウィンドウが表示されるので、一番左のImage Trackingを選択して[OK]ボタンをクリックしてください。この操作はマーカを選択することを意味します。今回はAR SCREENと書かれた画像を選択してください。



読み込まれた画像は下図のようにウィンドウ中心と下方に表示されます。下方のマーカ画像の下に表示される★はマーカとしての適切度を表しています。
あまり特徴のない絵はマーカに向かず星が表示されない場合もありますので自身でマーカを作って登録する場合には★が2つ以上表示されるように絵柄を工夫してください。

続いて画面右側の○で囲んだ部分をクリックしてください。
ファイル選択用のダイアログが表示されるので、最初にダウンロードした桜の画像を選択してください。すると画面中央に画像が追加されます。



ここで下図の○で囲んだ部分がNew Channelになっていることを確認して、Createボタンをクリックしてください。するとCreate new AR Channelというウィンドウが表示されるのでchannel nameのところに好きな名称を入力してください。(本記事ではAR_Screenと入力)



そのあと、createボタンをクリックすると作成したコンテンツがサーバーにアップロードされます。少し時間がかかりますが、アップロードが終わったら自動でQRコードが表示されるのでそれまで待ちましょう。
続いて、QRコードが表示されたらタブレットやスマホにインストールしたjunaioを起動してこれを撮影してください。
するとデータのダウンロードが始まります。これが終わったらAR SCREENと書かれた画像(マーカ)をモニタに表示するか印刷するかしてカメラをかざしてみてください。
下図のように写真がマーカ上に重ね合わされていれば成功です。



表示される画像の大きさや位置がマーカに対して不自然な場合はmetaio Creatorで編集することもできますので微調整などを行ってみてください。その後、Uploadボタンをクリックしてアップロード終了まで待てば情報の更新は完了です。



今回はこちらで作成した画像を使用しましたがマーカには雑誌の表紙やポスター、さらに宅配ピザのパッケージなども使用できます。是非、色々と試してください。

【コンテンツの保存と削除】

保存を行う際にはウィンドウ左上の[File]→[Save project]をクリックしてください。ファイル保存ダイアログが表示されるので保存場所と名前を指定して保存してください。



ちなみにコンテンツの削除を行う場合にはQRコード左にあるコンボボックスから削除したいプロジェクトを選択した後に(i)ボタンをクリックしてください。新たに表示されたウィンドウ右下のDelete this channelをクリックすれば削除できます。




【動画のAR表示】

同じ要領で動画をマーカに重ねて表示しましょう。ここまで作ってきたものを使いまわすためまずはmetaio Creatorの編集画面上から桜の画像を削除しましょう。
続いて下図の○で囲んだボタンをクリックして動画を選択してください。
本記事では例としてこちらの映像を使用しています。



動画が追加されたら先ほどと同様にサイズの調整をしてアップロードを行ってください。再度、QRコードを撮影して情報のダウンロードを行いマーカにカメラをかざすと今度は動画が表示されるはずです。




今回はここまでです。次回は3DのCGを重ねあわせてみましょう。

目次に戻る

http://vizyoshinaga.sblo.jp/article/67835484.html第3回 ARコンテンツを作ろう：ARコンテンツを作ってみる�@

Comments

はじめまして。田中と申します。突然のコメントでもうしわけありません。ブログを読ませていただき、ＡＲコンテンツに興味が出てきて勢いでmetaio creatorを購入しました。早速、使用しました。チャンネル作成も無事終了し、マイサーバー（コアサーバー）にアップロードしました。そして、QRコードにかざしてみると、「チャンネル提供者は何のコンテンツも返しませんでした」と表示され、アップしたコンテンツが現れません。そこで、ご教示いただきたいことですが、アップロード時の何か気をつけるべき点とかあるのでしょうか？よろしくお願いいたします。

Posted by 田中　司 at 2013年10月27日 06:17

はじめまして！
ARをやろうとして　色々探し、遂にここへ辿り着きました(^^)
メチャメチャ参考にさせて頂き、
無事、作成にこぎつけました。

もっと色々できそうなので、試したいと思います。
ありがとうございます。

Posted by mmh at 2013年12月27日 12:38

mmhさん
記事をご覧いただきありがとうございます。
参考になれば幸いです。もし面白いものが出来たらぜひ見せてください！

Posted by yoshinaga at 2014年01月07日 15:25

あけましておめでとうございます。
お陰様で無事年賀状に搭載出来ました！
どれだけ見てもらえたかは微妙ですが…^_^;
ありがとうございました！
次は、
名刺にでも展開しようと思います！

Posted by mmh at 2014年01月08日 22:56

名刺も良いですね。
私の知り合いでもmetaioCreatorの使い方を覚えて名刺や自社のブランドマークにARを仕込んだ人がいますよ〜。

Posted by yoshinaga at 2014年01月09日 12:32

素晴らしい説明ありがとうございます。
さっそく作ってみました。
質問なのですが
一つの紙に，二つのマーカーを設置して，それぞれのARを出したいのですが（同時でなくて大丈夫です）切り替えなしに，表示させることは可能でしょうか？ご指導お願いします。

Posted by okamoto at 2014年07月03日 18:04

ありがとうございます。
metaioCreator無料版では2つまでマーカーを登録することができるので、ご質問された内容は可能かと思います。
http://youtu.be/Cq-YxTSzz2A

Posted by yoshinaga at 2014年07月03日 18:20

こんばんわ突然コメント失礼します！
いつもサイトのほうで勉強させていただいております！
とてもわかりやすくて私でもここまでできるのかと
自分でも思ってしまいました（笑）
質問したいことがありコメントさせていただきました。無料版でのマーカー登録を２つしたのですが
これは消せるのでしょうか？
以前登録したもので今回別なもので使いたいのですが…
ご指導お願いします

Posted by at 2014年09月16日 02:00

metaioCreatorで不要なマーカーを削除して、再度アップロードを行えば可能です。

Posted by yoshinaga at 2014年09月16日 10:02