insideAR Tokyo 2014 - Tips for AR scenario creation via Metaio Creator and Junaio - Workshop

junaioでARコンテンツを開発する際の

metaio Creator使用のヒント

2014-07-08

1

目次

０．パノラマ記念撮影

１．junaioについて

２．metaio Creatorの役割

３．metaio Creatorの機能

４．AREL Editing

５．パノラマチャンネルの作成

６．おわりに

７．Creatorのライセンス

１．記念撮影したパノラマ写真は「ワークショップ360」という名前のチャンネルでpublicにします。また、同コンテンツは、「insideARTokyo2014Workshop360.arp」というファイルを見てください。２．うちわのグラバー園のコンテンツは「uchiwa_mock02.arp」というファイルを見てください。

2

１．junaioについて

3

1.1 junaio

metaio社製のARブラウザアプリです。

デベロッパー登録をすると、自作のARコンテンツを公開でき，junaioアプリで楽しむことができます。

※対応機種 iOS/Android

http://dev.junaio.com/

-AREL-

PHP

HTML5

JavaScript

ARコンテンツ

サーバー

ARコンテンツ作成者

junaio

junaioチャンネルやコンテンツの構築、サーバーへのアップロードをCreatorがやってくれる

4

1.2 junaioで作れるAR

2種類のARが作れます

Location-based AR GLUE (image-based) AR

GPSや磁気コンパスをセンシングに用いて特定の場所（緯度，経度，高度）にコンテンツを配置できます．

任意のイメージ画像を登録して，その画像上にコンテンツを表示できます．

CreatorではGLUEコンテンツを取り扱えます。

5

1.3 metaio developer/junaioアカウント

metaio製品を利用するには、開発者アカウント登録（無料）が必要です。

アカウントはjunaioアカウントと共通です。

6

1.4 ARELについて

Augmented Reality Experience Language

junaio 4.0から導入されたコンテンツ記述

metaio製品間でのコンテンツ互換を実現している

• PHP

– 主に静的なシーン構成を記述する

• HTML5

– 追加のGUIコンポーネント部分を記述する

• JavaScript

– シーンの動作部分を記述する

• クリックしたときに

アニメーションを実行(JavaScript)

• マーカーにかざしたときに

対象物を表示(PHP)

• 対象物にかざすように

ダイアログを出す（JavaScript, HTML5)

7

２．metaio Creatorの役割

8

2.1 metaio Creatorとは

ARコンテンツを簡単な操作で作成できるPCのアプリケーション

1.0

2.0

3.0

9

2.2 metaio Creatorの位置

metaio CreatorはARコンテンツの基本的な構築を行い、metaioの各AR製品による開発を手助けする様々なファイルを生成できます。

Creator

metaio server My server junaioサーバ

(Channel管理)

metaio SDK App

metaio Cloud Plugin App

ネット

PC App

junaio

Tracking File

AREL Files

AREL AREL Channel情報

プロジェクト

プロジェクト

+AREL

実行モジュール+AREL

10

2.3 入手方法

dev.metaio.comからダウンロードできる。

metaio developer アカウントのlogin

ダウンロード

metaio Developerアカウントのない人

metaio Developerアカウントのある人

11

2.4 動作仕様

OS:

- Windows Vista / Windows 7 / Windows 8 (32-bit and 64-bit)

- Mac OS X 10.7, 10.8

CPU: 1.7GHz以上のDual core (Quad core推奨)

グラフィックスカード: OpenGL 2.0 以上に対応したもの

メモリ: 2 GB(4 GB推奨)

12

３．metaio Creatorの機能

13

3.1 画面説明

シナリオ編集領域

ツールバー

リソースバー

UI Designer

トラッキング登録

プレビュー

アップロード

14

3.2 ログインとサーバー設定

<My serverの必要条件>

PHP５.3以上（最新推奨），FTPが使用可能

Dom拡張モジュールが使えること

インターネット上の公開サーバー（イントラ不可）

– GoogleのHPサービスはダメ

– レンタルサーバもしくは自作

ロリポップ、お名前.comの共有サーバ、など

15

3.3 マーカーの登録

マーカーの登録

16

3.4 (3Dモデル/画像/音)

3Dモデル

画像音

テクスチャ動画

フルスクリーン動画

Youtubeリンク

ボタン

URLジャンプ

他のjunaioチャンネルへジャンプ

SNSリンク（facebook/Google+/Twitter）

360パノラマ

カレンダーイベント

17

3.5 PCでのPreview

PCにwebカメラをつないで、ARのプレビューが行えます。

18

3.6 junaioチャンネルの作成

19

3.7 Google Analytics

Google AnalyticsのIDを入力すると、チャンネルのログが取れます。

20

3.8 Create an App

作った内容を反映させたAppを出力できます。

・Cloud App : 設定したチャンネルにアクセスするmetaio Cloud plugin用アプリのプロジェクト

（※iOS : x-codeでビルドを行う/Android : Eclipseでビルドを行う）

・SDK App : 作成した内容が実装されたmetaio SDKネイティブアプリのプロジェクト

（※iOS : x-codeでビルドを行う/Android : Eclipseでビルドを行う）

・Desktop App : PCの実行ファイル（Windows : exe / Mac OS : app）

※実行にはwebカメラが必要です。

21

3.9 トラッキングファイルの出力

登録したトラッキング情報（イメージマーカーや3dmap）はトラッキングファイルに出力できます。

作ったトラッキングファイルはjunaioやmetaio SDKにロードして利用できます。

ファイルはzip形式で保存されます。解凍するとxml

ファイルが入っています。

zipのままロードして利用できますが、編集されたい場合はこのxmlを変更することもできます。

22

3.10 Instant Tracking(2D/3D)

マーカーが無くても、その場でイメージトラッキングやSLAMを行うInstant Trackingを実装できます。

2D

3D 2D + 重力

3D + 重力

23

3.11 Face Tracking

顔認識ができます（但し、ベータ版）。

24

3.12 3D Object Tracking

平面のマーカーではなく、3次元物体を認識し追跡します。特徴点を登録する方法と、3Dモデルを登録する方法（ベータ版）があります。

25

４．AREL Editing

4.1 AREL editer

• イベント動作等をCreatorの中からJavaScriptで記述できます

© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 26

イベントの例

（3Dモデルの場合）

・タップはじめ

・タップおわり

・アニメーション始まり

・アニメーション終了

・モデル表示

・モデル非表示

4.2 スクリーンキャプチャ


4.3 アニメーション切り替え


4.4 かざす度に表示モデルを切り替える


Global Script Pattern 1（マーカーのところ）

4.5 タップアクション


4.6 マーカーを外れても、表示されるテクスチャ動画


32

５．パノラマチャンネルの作成

5.1 パノラマコンテンツ


• マーカートラッキングをすっ飛ばして、パノラマを表示

「ワークショップ360」というチャンネル名でpublicにします。

34

６．おわりに

35

6.1 metaio日本語フォーラム

http://metaio.r-cms.biz/bbs_list/

36

6.2 metaio Helpdesk

http://helpdesk.metaio.com/

37

6.3 ドキュメント情報

http://dev.metaio.com/creator/

38

6.4 Q&A

製品・購入に関するお問い合わせ

[email protected]

ご注意

metaio Creatorは本日時点の仕様に基づいた内容をご紹介しました。

今後内容や振る舞いが変更される場合があります。

39

７．Creatorのライセンス

40

7.1 ライセンスについて

metaio CreatorのライセンスはPC一台あたりに固定して登録されます。

また、ライセンスの所有者は、metaio/junaioアカウントに関連付けられます。

購入するとアクティベーションキー（文字コード）がもらえますので、それを入力します。

ライセンスを登録したPCであれば、そのPCで動作するCreatorにおいて、ライセンス所有者以外のアカウントでログインしなおしても、フル機能で利用できます。

41

7.2 アクティベーション

アクティベーションを行うには、PCをインターネットに接続する必要があります。

※セキュリティが効いていると、正常にアクティベートできない場合がありますので、

ご注意ください。

またライセンスを追加したいmetaio/junaioアカウントでloginする必要があります。

insideAR Tokyo 2014 - Tips for AR scenario creation via Metaio Creator and Junaio - Workshop

Presentations & Public Speaking

Transcript of insideAR Tokyo 2014 - Tips for AR scenario creation via Metaio Creator and Junaio - Workshop