Page 1

東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

Metaio Creator による AR(拡張現実)コンテンツの制作 簡易チュートリアル(201407 版)

学習の順序 1)Junaio のアカウントの取得と metaio Creator の入手・インストール 2)metaio Creator によるコンテンツ制作 ⇒プレーヤーによる PC 上での確認 ★ PC(Windows / MacOS)での公開・展示の場合はここまでで実現可能 ★ モバイル端末での公開を前提とする場合は以下に進む 3)端末(iOS、Android)への junaio のインストール 4)metaio Creator+metaio Cloud のアカウント登録(1.のアカウントを使用) 5)コンテンツのアップロード ⇒端末での閲覧

Metaio Creator / metaio Cloud / junaio の関係 3D モデル、写真、動画等の素材

Windows / Mac

専用 AR ブラウザ

junaio で閲覧

コンテンツを管理・公開する クラウド(サーバ)

ネイティブ・アプリとして公開 コンテンツの編集

専用プレーヤでの動作確認

独自サーバ Metaio SDK、Android SDK、Xcode 等の環境が必要

p.0


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

1.AR コンテンツの体験:junaio を使ってみる junaio(ジュナイオ)とは metaio 社が提供する iPhone、Android デバイス向けの AR 環境を提供するための無償 AR ブラウザ。(国内取扱 い:サイバネット社)

>ダウンロード 下の QR コードで直接アクセス

または Apple Store、Google Play で「junaio」検索。

>junaio の起動

Welcome to junaio 等のメッセージ表示の後、デフォルトのアプリケーションが読み込まれ、左の図のような地理情報が表示される。

QR コードによって目的のコンテンツを 置くサーバの URL にアクセスし、デー タをダウンロードする。 DL が終了したら、次ページのマーカー 画像(「トラッカブル」と呼ぶ)にカメ ラを向ける。 3DCG が表示されれば成功。

p.1


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

junaio の特徴 junaio 自体は AR 表示用のブラウザで、ネイティブ・アプリではない。web ブラウザとホームページとの関係と同じように、自身の コンテンツを作ってインターネット上に公開し、ユーザーはそれをダウンロードして閲覧する。 また、上のデフォルトアプリ以外の公開コンテンツを、画面左上の虫眼鏡のアイコンから検索できる。

p.2


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

2.junaio アカウントの取得 >junaio のアカウント作成 junaio のコンテンツ開発にはアカウントが必要。 ★アカウント登録をしないと、metaio Creator で制作したコンテンツをモバイル用に公開できない(PC でのプレビューのみ) 。 ただし、無料登録で公開できるコンテンツは2つまで。metaio Creator の編集機能にも制約がある。 開発者登録用サイト

http://dev.junaio.com/

Free Developer Signup をクリック

SignUp 後、登録したメールアドレスに確認のメールが届く。 エラー等のメッセージなければアカウント作成完了

パスワード等メモ 管理に注意

p.3


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>My Channels の管理 junaio コンテンツは Metaio 社のクラウド・サーバー(無償/有償)上に保管されるので、その内容を自己管理する必要が生じるなあ いがある。 junaio ではサーバー上の個々のコンテンツを「チャンネル channel」と呼んでいる。 無償登録では、同時に 2 つのチャンネルしか保管・公開することができない。

開発者登録用サイト

http://dev.junaio.com/

>登録アカウント情報を入力

My Channel の管理画面

QR コードの画像を生成

チャンネルの公開:英文のコメントを加えること。公開可否のメールが2.3日後に。

チャンネル情報の編集:チャンネル名の変更、説明文の記述、アイコンの変更など チャンネルの削除

p.4


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

3.AR コンテンツ作成ツール metaio Creator:ダウンロードとインストール >Metaio Creator のダウンロードとインストール MetaioCreator は AR コンテンツの作成に使用するオーサリング・ソフトウェア。 Metaio 社のサイト

http://www.metaio.com/products/creator/

からダウンロード

メールアドレス(アカウント登録時と別でもよい) 、国、Windows / Mac の別

を記入

ダウンロード完了後、通常のソフトと同様にインストール

>MetaioCreator の起動確認とアカウント情報の設定 「メニュー」>「Settings」:ダイアログが現れる。

junaio のアカウント取得で登録した E-mail アドレスとパスワードを入力。

編集画面の構成

p.5


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

4.コンテンツ編集:3DCG の場合

>metaio Creator を起動

>トラッカブル(マーカーの配置場所)の画像を選択

をクリック

・左端の「Image Tracking」を選択して「OK」ボタン。(この操作はトラッキング方法の選択を意味する)

※5 種類のトラッキング技術 ・画像ファイル選択用のダイアログが表示される。準備した jpeg 画像(

)を選択。

・読み込まれた画像は下図のようにウィンドウ中央とトラッカブルに表示される。 ・トラッカブルの下に表示される黄色の★印はトラッキングマーカとしての適切度を表わす。特徴的な要素が少ない絵はマーカーと して不向き。2 つ以上表示されるように絵柄などを工夫すること。

p.6


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>トラッカブルのプロパティ

マーカー認識の閾(0.3 0.8) 初期値:0.7

カメラの画角がマーカーからはずれても 表示を持続する SLAM 機能を使う ★マーカーがひとつのときだけ可能

モバイルのセンサによる補正を可能にする

トラッキングが一時的に外れた場合 その時点での表示状態を維持する時間 ※単位:フレーム数

同時に認識できるマーカーの数

同時にトラキングできるマーカーの数

p.7


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>コンテンツ(ここでは3D オブジェクト)の選択

をクリック

ファイル選択ダイアログが表示されるので(

選択した3D オブジェクトが編集画面上に表示されたら

)を選ぶ。

ボタンをクリック。

「metaio AREL player」が別ウィンドウに起動

>マーカーの画像を印刷した紙をカメラに向ける・・・

PC に接続している Web カメラの選択

>プロジェクトの保存

※オブジェクトや画像等使用するコンテンツと同じ階層に

p.8


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

5.コンテンツの編集:リソースの空間配置操作 >三面図の切り替えによる確認 ●平面

●側面

●正面

●傾斜

●伸縮

>操作要素の切り替え ●移動

>プロパティ調整 オブジェクトを右マウスボタン・クリック

Properties を選択

サイズ変更時の比率の固定

Copy:オブジェクトを複製 Paste:オブジェクトを同一マーカー上に貼り付け

コンテンツの可視/不可視

Replace:オブジェクトを置き換え

Delete:オブジェクトを削除

Properties:プロパティ・パネルを開く

モデルに陰影をつける

.fbx と.dae のみ 床面に影を落とす

p.9


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

6.junaio(モバイル実機)による動作確認 完成、または制作途上のコンテンツの動作を、モバイルの実機で確認するため、metaio 社のクラウド・サーバーへデータ(AR コンテン ツで構成される web ページであり、自立したアプリケーションではない)をアップロード。 そのデータ=ページをモバイルで閲覧する。 Junaio ではそのページ(プロジェクト)を「channel」と呼ぶ。 無償のデモ版では同時に2つのチャンネルを保存・管理・公開できる。 無償のデモ版では両チャンネルあわせて100MB の容量がサーバー側で設定されている。

>「Create」ボタンをクリックして、チャンネルの内容を記入

Chanel Name は 必ず半角英数で 必須ではないが、 制作者の氏名などをメモ

オリジナルのアイコン を使用するとき

metaio server

アップロード開始 アップロードに成功すると、チャンネルの URL が QR コードで表示される

QR コードの画像を保存しておくよとい

>モバイル側で junaio

を起動 「スキャン」をクリックするとカメラが起動 上の QR コードにカメラを向ける QR の認識に成功すると、その ULR に自動的にアクセスし準備が整う チャンネル用のマーカーにカメラを向けるとコンテンツの表示が始まる

p.10


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>Create 後のエラー表示について アップロードの途中で以下のような警告が表示される場合がある。 作成したコンテンツのサイズが、サーバーで許容された容量(2 つの合計=100MB)を超えたことが原因の大半。 ※ただし、New channel で create し、設定した名前がプルダウンメニューに表示された場合は、web の my channel の管理画面で QR コードの表示が可 能になっていることがある。 ※この作業では、同時に、ブラウザで My channel のページにログインして管理画面を開き、状況をモニタリングするとよい。 不要な channel が残っているときは、管理画面から削除する。 ※現状では、100MB の限度内であっても、Creator 側のアップロードや削除の操作が channel の数に正しく反映されないことがある。 「Setting」での Cloud space の残量表示

>チャンネルの管理

・新規にチャンネルを作成 ・サーバ上の既存チャンネル名1 ・サーバ上の既存チャンネル名2 ※無償では2つまで

チャンネルの削除

Chanel name を変更するときは必ず半角英数で

p.11


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

7.コンテンツ編集:

画像配置とそのプロパティ

コンテンツの可視/不可視

p.12


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

8.コンテンツ編集:

動画(スクリーン内表示)配置とそのプロパティ

動画(mp4)の画質選択

※3g2 形式に自動変換される

★無償アカウントで使用できるサーバーの容量は 100MB 動画ファイルのサイズに留意すること 可視/不可視

ループ再生

参考:オンラインのファイル形式変換サービス(登録制、最大100MB)

http://www.online-convert.com/

★動画の再生制御ボタンを加える AREL Script の global script に以下の 6 行を加え、オブジェクトの setVisibility 関数を使えるようにする 2 つの関数 を定義する。

fu nc tion show Pla yBu tto n( flag) { b u t ton 1 .s e tVi s i b i l i t y( fla g , fl a g , f la g ) ; } fu nc tion show Pause Bu tton( fla g){ b u t ton 2 .s e tVi s i b i l i t y( fla g , fl a g , f la g ) ;

p.13


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

} 1.

Scenario の冒頭 scenario.onLoaded 関数へ、2 つのボタンを隠すため以下の 2 行を加える。

// こ の オ ブ ジ ェ ク ト が ロ ー ド さ れ た ら 実 行 sce nar io .on Loa ded = fu nc tion () { sh ow Pla yBu tton( fa ls e) ;c sh ow Paus eBu tto n( fa lse ); }; 2.

The play button which is named as button1 in my case will get the following code for playing the video when the button is clicked.

b u t ton 1 .onTo uc h S tar te d = func t io n ( ) { vide o1 .p lay() ; }; The pause button will be used for pausing the video.

b u t ton 2 .onTo uc h S tar te d = func t io n ( ) { vide o1 .p ause () ; }; 3.

動画のステータスに応じて、ボタンの可視/不可視をトリガーする。すなわち、動画が再生中 は一時停止ボタンを可視に、停止中は不可視にする。 加 え て 、 認 識 中 の 動 画 を 一 時 停 止 に す る 。 Video に 以 下 の ス ク リ プ ト を 。

// 動 画 の 再 生 が 開 始 し た ら 実 行 vide o1 .o n Pla ye d = func tion () { sh ow Pla yBu tton( fa ls e) ; sh ow Paus eBu tto n( tru e) ; }; // 動 画 の 再 生 が 一 時 停 止 に な っ た ら 実 行 v i de o1 .o n Pa us ed = f unc t io n ( ) { sh ow Pla yBu tton( tr ue) ; sh ow Paus eBu tto n( fa lse ); }; // 動 画 の 再 生 が 最 後 ま で き た ら 実 行 / / O N M O V IE E N D ED の イ ベ ン ト に 対 し て 実 行 vide o1 .o nMo vie End ed = func tion ( ) { sh ow Pla yBu tton( tr ue) ; sh ow Paus eBu tto n( fa lse ); }; // こ の オ ブ ジ ェ ク ト が 可 視 に な っ た ら 実 行 / / O N V I S I BL E の イ ベ ン ト に 対 し て 以 下 の 3 行 を vide o1 .o n Visible = func tion () { th is .p ause () ; sh ow Pla yBu tton( tr ue) ; sh ow Paus eBu tto n( fa lse ); };

p.14


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

9.コンテンツ編集:

動画(フルスクリーン表示)配置とそのプロパティ 動画(mp4)の画質選択 ・リソースの画質のまま ・スマートフォン用 ・タブレット用 ・フルハイビジョン ★無償アカウントで使用できるサーバーの容量は 100MB 動画ファイルのサイズに留意すること

Followup Action: 動画の再生後に起こすアクション Play a fullscreen video 動画ファイルをフルスクリーンで再生 Play a YouTube video

URL 指定:YouTube 動画をブラウザで再生

Open a hyperlink

Web ページの URL 指定:ブラウザで閲覧

Open a junaio channel

別の junaio チャンネルを DL

Add a Calender Event

カレンダーを表示 未検証 Play an audio file 音声ファイル(mp3)を再生

p.15


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

10.コンテンツ編集:

音声配置とそのプロパティ

p.16


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

11.コンテンツ編集:

YouTube 再生とそのプロパティ

============================== 参考:YouTube プレーヤのカスタマイズを手軽に行えるサイトの例

http://sobolev.us/yt/

各動画に固有の ID

★HTML5 に設定 以下 パラメータ調整 を行う

パラメータ調整と表示確認を行ったうえ、埋め込み用コードから以下のように URL だけを抽出し、上のプロパテ ィで Linked video のフィールドに貼り付け。★最後のダブルクォーク

に注意

http://youtube.com/embed/4cm5AqWlqus?autoplay=1&cc_load_policy=1&vq=large&iv_loa d_policy=3&loop=1&theme=light" width="560" height="345" frameborder="0" allowfullscreen="

p.17


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

12.AR コンテンツ編集:

ボタン・インタラクションとそのプロパティ

Play a fullscreen video 動画ファイルをフルスクリーンで再生 Play a YouTube video

URL 指定:YouTube 動画をブラウザで再生

Open a hyperlink

Web ページの URL 指定:ブラウザで閲覧

Open a junaio channel

別の junaio チャンネルを DL

Add a Calender Event

カレンダーを表示 Play an audio file 音声ファイル(mp3)を再生

p.18


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

13.コンテンツ編集:

Facebook ボタン設置とそのプロパティ

未検証

p.19


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

14.コンテンツ編集:

Google+ボタン設置とそのプロパティ

未検証

p.20


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

15.コンテンツ編集:

Twitter ボタン設置とそのプロパティ

未検証

p.21


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

16.コンテンツ編集:

カレンダー設置とそのプロパティ

p.22


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

17.コンテンツ編集:

junaio チャンネル設置とそのプロパティ

未検証

p.23


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

18.コンテンツ編集:

360°設置とそのプロパティ

未検証

p.24


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

19.Instant tracking インスタント・トラッキング

画像等の平面的なマーカを用いず、モバイルのカメラでとらえた特定の場所(環境)の事物の配置関係(3 次元空間に展開する特徴点の 集合)をマーカーとして用いるト

>InstantTraking をクリック。

編集画面にも同様のグリッドが表示される。

>リソースを配置 リソース(ここでは 3DCG のモデル)を配置すると、カメラ起動と停止のボタンを含む下のような表示に切り替わるので、それらを ドラッグしてレイアウト決定。

>再度 InstantTracking をクリック。 モデルの配置状態を確認し、グリッドの面に対して適切なサイズ、位置、傾きになるよう調整する。

>いったん metaio server に登録し、実機で挙動を確認。 このままでは、モデルが横向きになったり姿勢が不安定になる。

p.25


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>InstantTraking のプロパティを開く

初期設定では「Use instant tracking」のみが選ばれているが、「Use instant tracking with SLAM extension and gravity sensor」を選択。

これによって実機が内蔵する加速度センサからの情報でモデルの向きが補正される。

>補足:モデルの Properties を開き、 「Allow dragging and rotation of this model」にチェック 実機でのドラッグやピンチイン/アウトが可能になる

p.26


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

20.Environment tracking 環境トラッキング

画像等の平面的なマーカーを用いず、モバイルのカメラでとらえた特定の場所(環境)の事物の配置関係(3 次元空間に展開する特徴点 の集合)をマーカーとして用いるトラッキング技術。実世界に存在する物体がマーカーになる。

>専用アプリ metaioToolbox(無料)のダウンロードとインストール GooglePlay の場合

>metaioToolbox の起動

・・・利用条件許諾の可否に対して OK 「3D Maps」を選択

Configuration(Optional)を選択

Gravity Alignment: ON

対象との距離選択

p.27


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>カメラ起動ボタン Start を押す

>認識スタートボタン

をクリック

モバイル端末を横方向に動かすように促すアニメーションが表示されるので、この動きにならって、対象となる空間にカメラを向けて ゆっくり左右に振る。 特徴点の認識に成功すると、画面上に複数の赤い点が表示される。

の表示が出たら認識失敗

を押してやり直し

成功を意味する「飛行機の 3DCG」が画面上方に現れるが、そのままカメラを動かし続けると点がさらに増える。

の数値が増えなくなったら、Save

をクリックしてデータを保存。

p.28


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>ホームボタン

で戻る

必要に応じてファイル名を編集

>3D Map(環境マーカー情報)のシェア 取得した情報を metaio Creator で使用するための方法

1.ファイルストレージへ転送、メールで送付

をクリック・・・3 つの手段から選択

※メールで送る場合(Gmail)

2.PC へ直接転送 ★Android の場合 USB ケーブルで Windows PC と接続し、ファイルの共有が可能な環境をつくる(Android 端末の機種に適した ADB ドライバ ーが PC にインストールされている必要がある)。Android の内部ストレージから特徴点ファイル(ファイル名.creator3dmap) をデスクトップや任意のフォルダに保存.。 ファイルの階層:sdcard / metaio / toolbox / maps/ 注意:3D Map は、拡張子が各々.3dmap と .creator3dmap 、2 つのファイルがセットになっているので、ともに保 存すること。

★iPhone / iPad の場合 同様に Mac と USB ケーブルで接続し、iTunes を起動。 iTune のファイル共有を表示。ToolBox を選択した後、特徴点ファイルをデスクトップや任意のフォルダに保存.。

p.29


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

>metaioCreator を起動 使用するトラッキング技術の種類を Environmental Tracking に切り替える

>先に保存した 3D Mapから、拡張子が .creator3dmap のファイルを選ぶ 赤い点と写真がいくつか表示される。

>リソース(ここでは 3D モデル)の読み込み

上の表示状態では、モバイル端末のカメラで実際にオブジェクトがどのように表示されるか想像しづらい。 編集領域内に表示されている現場の写真画像をクリック。 (隠れているときは、マウスホイールの操作でズームアウト/イン) 現場でカメラから眺めたときの特徴点とオブジェクトとの位置関係が表示される。

p.30


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

画面下方の「<」と「>」をクリックすることで、周囲の状況も見ることができる。

画面左下の

をクリックして 3 次元の表示に戻ることもできる。

p.31


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

補足1:Adobe Flash によるアルファチャンネルつき動画(flv)の作成 >ステージサイズを 1980×1020 に設定

試案

★最終出力での画質低下を想定

>ムービーの完成後 「ファイル」>「書き出し」>「ビデオを書き出し」

✔ ✔

・ステージをアルファチャンネル (透明領域)化する ・Media Encoder から出力

★CreativeCloud では Media Encorder が自動的に起動するが、以前のバージョンでは、いったん「アルファチャンネル付 QuickTime」として書き出し、Media Encorder を手動で起動したうえで以下の作業を継続する。 >Media Encorder が自動的に起動

クリックして「書き出し設定」へ

p.32


東京造形大学 メディアデザイン専攻領域 メディアデザイン基礎演習 A(1 年・前期)配布資料

「書き出し設定」

「FLV」を選択

クリックして保存先とファイル名

アルファチャンネルをエンコード

品質「最高」を選択

最高レンダリング品質 予想ファイルサイズを確認

エンコード開始

>metaio Creator で動画のリソースとして配置し表示を確認 編集画面では不透明(黒)

Player では透明

p.33

Metaio 日本語チュートリアル 略 201407  
Advertisement