insideAR Tokyo 2013: Junaio Workshop

junaio開発ワークショップ

サイバネットシステム株式会社: 西岡大祐 metaio GmbH: Matthias Greiner

2013年7月23日富士ソフトビルアキバプラザ

Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.

Table of Contents

•  Introduction –  junaioの画面構造 –  JavaScriptにより制御

•  Modification of Creator contents –  metaio Creatorが出力するファイル構成 –  修正方法 –  修正例

•  ジェスチャ追加、連続アニメーション追加 •  独自カメラボタン、Google Map表示

•  Non GLUE contents –  metaio Creatorで作成できないタイプ –  フルスクリプティング記述 –  サンプル

•  Location Based •  360度パノラマ •  HTMLメニュー

–  Q&A and Coffee Break –  Matthias’s session

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

junaioチャンネル例: 360度パノラマコンテンツ Audi Q3


1. INTRODUCTION

junaioの画面構成

© 2012 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 3


1.1 junaioの画面構成

•  OpenGL + HTMLのレイヤー •  AREL (JavaScript + XML)によるコンテンツ記述


3Dモデルやムービーなどのコンテンツ(XML)

HTML5表示：UI表示など

JavaScriptによるコンテンツ制御（arelライブラリ）


1.2 metaio Creatorで出力されるもの

•  XML –  トラッキングタイプ、トラッキングファイルの指定 –  3Dモデル、ムービーなどの配置情報

•  JavaScript –  ARシーンの制御 –  Google Analyticsのログ制御

•  HTML –  コンテンツ記述に必要なJavaScriptのインポート –  <body>は空



2. MODIFICATION OF CREATOR CONTENTS

metaio Creatorコンテンツの修正（おもにJavaScript）



2.1 Creatorとその出力


修正対象

I Love ARマーカー上の metaiomanコンテンツを My Serverへアップロード


2.2 Creatorコンテンツの修正方法

•  metaio Creatorでコンテンツを作成する •  「My Server」へアップロードする •  チャンネルのローカルにダウンロードする •  logic.jsの修正 •  logic.jsのアップロード


注意点：metaio Creatorでコンテンツを再アップロードすると、logic.jsは上書きされます。 →バックアップを取っておく


2.3 Modification Examples

•  Base Contentsを書き換えて機能を追加する •  JavaScriptの追加

–  ジェスチャー –  アニメーション

•  JavaScriptの置き換え –  カメラボタン

•  Google Maps TIPS –  ルート表示 –  マップ表示



2.3.1 Base Contents

•  I Love ARマーカー上のmetaioman –  “idle”アニメーションのループ –  拡大縮小などはできない



2.3.2 ジェスチャーの追加

•  モデルの拡大縮小、移動などが可能 •  logic.jsに2行追加するだけで実現可能

–  arel.sceneReadyに追加する •  arel.GestureHandlerを使用



2.3.2 ジェスチャーの追加（結果）

•  ピンチイン/ピンチアウトで拡大縮小 •  ドラッグで移動



2.3.3 アニメーションの追加

•  metaio Creatorではタップ時のアニメーションは一つしか指定できない

–  displayed: idle (loop) –  clicked: show_down


びっくりした後固まってしまう


2.3.3 アニメーションの追加（コード）

•  logic.jsを修正 –  shock_down → shock_up → idle (loop) –  handleObjectCallbacksを修正


中略 ONANIMATIONENDED の処理を加える


2.3.3 アニメーションの追加（結果）

•  びっくりした後もとに戻る –  shock_down → shock_up →

idle (loop)



2.3.4 カメラボタンの追加

•  junaioはshareScreenボタンを持っている –  カメラロールへの保存 –  Facebook –  Twitter

•  追加の仕方 –  dev.junaio.comで追加

•  問題点 –  ボタンデザインが固定 –  Cloud App, SDK Appでは使えない



2.3.4 カメラボタンの追加

•  UI Designerでボタンを追加してからJavaScriptを書き換える


仮に www.replace.me へのリンクとしてボタンを作成する


2.3.4 カメラボタンの作成

•  logic.jsの修正 –  handleObjectCallbacksの書き換え

•  www.replace.meへのリンク部分を削除 •  代わりに arel.Scene.shareScreenshot() を挿入 •  arel.Scene.shareScreenshot(true) とすると直接保存



2.3.4 カメラボタンの作成（結果）

•  オリジナルアイコンで実装


補足：スクリーンショット内にアイコンを出したくない場合はHTMLで実装します


2.3.5 Google Maps TIPS

•  Webリンクの形でGoogle Mapを表示可能 –  JavaScriptの編集は必要なし



2.3.5 Google Maps TIPS

•  リンクの指定方法 –  ルート案内表示

•  https://maps.google.com/maps?daddr=35.710058,139.810718

–  地図表示 •  https://maps.google.com/maps?z=17&t=m&q=loc:

35.710058+139.810718 –  z: ズームレベル (1-20) –  t: 表示タイプ（m:マップ、k:衛星写真、h:ハイブリッド、

p:地勢表示、e: Google Earth）


iOSの場合、httpだとSafariが起動してしまう

Location BasedコンテンツをPHPで記述するときにも、この書き方で記述する


2.3.5 Google Map TIPS (結果）


ルート表示

マップ表示


3. NON GLUE CONTENTS (WITHOUT METAIO CREATOR)

ARELによるコンテンツ作成



3.1 metaio Creatorでは作れないもの

•  Location Based –  緯度経度を指定したPOI (Point Of Interest)を配置す

るコンテンツ •  360度パノラマコンテンツ

–  パノラマ写真さえあれば、ほとんどチュートリアルがそのまま使える

•  HTML連携メニュー –  HTMLコンテンツと連携することも可能。Webデザイ

ナーとのタイアップ？



3.1.1 フルスクリプティングのAREL

•  Augmented Reality Experience Language –  新のjunaio 4.0から導入されたコンテンツ記述

•  PHP –  主に静的なシーン構成を記述する（メイン部分）

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

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


•  対象物にかざすようにダイアログを出す（JavaScript, HTML5)

•  マーカーにかざしたときに対象物を表示(PHP)

•  クリックしたときにアニメーションを実行(JavaScript)


3.1.2 ARELコンテンツの記述

•  シーンの記述と動作の記述に別れている


/src/search.php（シーンの記述）・トラッキングファイルの指定（GLUEの場合）・オブジェクトの定義　　・3Dオブジェクト　　・ムービーテクスチャ　　・エアタグ(Location Basedの場合）【記述の例】・トラッキングデータ（マーカー1,2,3）・obj1: マーカー1で3Dオブジェクト表示・obj2: マーカー2でムービーテクスチャ表示

/html/arel/index.php（動作の記述） ※中身はJavaScript + CSS + HTML ※JavaScriptだけを /html/arel/js/logic.jsと別に　記述することもある・オブジェクトの動作を定義・GUI部品の表示【記述の例】・なにも表示されていないときにガイドを表示・マーカー1検知で3Dモデルのアニメーション実行・マーカー2検知でムービーテクスチャを再生・マーカー2ロストでムービーテクスチャ停止・マーカー3検知でフルスクリーンムービー　を再生

協調してARコンテンツを表示

JS

PHP


3.1.3 ARELコンテンツの構成

•  このツリー構造をサーバーにアップロードする


JavaScript部分とHTML5部分を書く

junaioのJavaScriptクラス定義（いじらない）

junaioコンテンツのエントリーポイント（基本的にいじらない）

コンテンツ表示に必要な画像やムービー、マーカー定義などを置く（フォルダ作成する）

junaioのPHPクラス定義（いじらない） ※現時点では一部不具合のため書き換えが必要

PHP部分を書く

※以後のスライドでは、この階層を / で表します

（拡張子はPHP）

この階層は、PHPではWWW_ROOTと定義されています


3.1.4 現バージョンでの既知の問題

•  ARELはいくつか注意点がある –  iPhoneとAndroidで挙動が違う部分がある

•  トラッキングの追随性、ジャイロの感度など •  公開コンテンツは必ずiOS/Androidの両方で確認必須

–  日本語が文字化けする場合がある •  回避方法

–  /library/arel_xmlhelper.class.phpの516行目を編集する

※ポップアップボタン名に日本語を使うときは、 utf8_encode()メソッドを指定する


コメントアウト

追加


3.1.5 コンテンツ作成の流れ


チャンネルの登録 ARELファイルの編集

サーバーへアップロード確認（Validate）

問題あり

ＯＫ

素材の準備

実機で確認

・開発環境には、PHPモジュールをインストールした　Eclipseをおすすめします。・その他自前のサーバーと、アップロードするためのFTPクライアント、　dev.junaio.comでのチャンネル作成などが必要となります


3.1.6 Eclipseでの編集画面


•  PHP部分ではAPIの補完が使える


3.2 Location Basedコンテンツ

–  東京スカイツリー＆東京タワー (SkytreeAREL) •  空間上にエアタグを表示 •  エアタグをクリックするとポップアップ表示



3.2.1 Location Basedチャンネルの登録


自前サーバーのアップロード先（コールバックURL）

Location Based informationはYesを選択


3.2.2 SkytreeARELのファイル構成


テンプレートのまま修正なし

resourcesフォルダを作成

Location Basedコンテンツの記述



src/searc.phpの構造（抜粋）


ArelXMLHelper::start(NULL, WWW_ROOT . "/arel/index.php"); $oObject = ArelXMLHelper::createLocationBasedPOI(

"1", //id "東京タワー", //title array(35.65861,139.745447,0), //location WWW_ROOT . "/resources/tokyotowerthumb.png", //thumb WWW_ROOT . "/resources/tokyotowericon.png", //icon “■Address\n東京都港区芝公園4丁目2-8（以下略）", array( array(utf8_encode("ホームページ"), "urlButton", "http://www.tokyotower.co.jp/index.html"), array(utf8_encode("写真(Wikipedia)"), "pictButton", WWW_ROOT . "/resources/tokyotower.jpg"), array(utf8_encode("電話"), "phoneButton", "tel:03-3433-5111"), array(utf8_encode("地図"), "mapButton", "http://maps.google.com/maps?daddr=35.65861,139.745447") )

); ArelXMLHelper::outputObject($oObject); ArelXMLHelper::end();

緯度, 経度, 高度(0)

アイコン（地図表示）

サムネイル

トラッキングファイルなし


位置情報の検索

–  位置情報は(緯度, 経度, 高度）を指定します •  高度は現在のところゼロを指定する

–  緯度経度を調べる方法 •  Webサービス（住所から検索）

–  http://www.geocoding.jp •  Google Earth

–  60進法からの変換が必要【例】 34°41’17.54”（60進法） = 34 + 41 * (1/60) +

17.54 * (1/ (60*60)) = 34.68820556（10進法）



3.3 360°パノラマコンテンツ

•  作成Fujisoft360コンテンツ –  富士ソフトビル1Fの風景のパノラマをジャイロで表示


表示用パノラマ写真


Fujisoft360のファイル構成


AR表示素材（パノラマ画像表示用）・360_new.md2（パノラマ用ポリゴンデータ）・IMG_0666.JPG（パノラマ写真）

シーンの記述 (PHP) ・360パノラマの指定

パノラマ写真


パノラマ写真はiPhone アプリで撮影します

パノラマ用コンテンツは、このテンプレートの写真だけを差し替えて再利用します


パノラマ写真の撮影

•  iPhoneアプリ「Microsoft Photosynth」を使用


https://itunes.apple.com/jp/app/photosynth/id430065256?mt=8

起動画面撮影中一覧から選択カメラロールへ保存

保存された写真は4096 x 2048ピクセルですが、 junaioでは、半分の2048x1024ピクセルにリサイズして使用します


/src/search.phpの構造


//start output ArelXMLHelper::start(NULL, WWW_ROOT . "/arel/index.php"); //Output your objects here! $oObject = ArelXMLHelper::create360Object(

"Fujisoft", //ID WWW_ROOT . "/resources/360_new.md2", //model WWW_ROOT . "/resources/IMG_0666.JPG", //texture array(0,0,-1500), //translation array(40000,40000,40000), //scale new ArelRotation(ArelRotation::ROTATION_EULERDEG, array(90,0,0)) //rotation );

ArelXMLHelper::outputObject($oObject);

//end the output ArelXMLHelper::end();

変更箇所はIDと写真のファイル名だけ


3.4 オリジナルメニュー

•  HTMLでオリジナルメニューを作ることが可能 –  metaio Creatorでマーカーだけ定義したチャンネルを

作成する –  html/index.htmlを編集する –  チャンネルへのリンクは arel.Scene.switchChannel

を呼び出す。


<a href="javascript:arel.Scene.switchChannel(XXXXXX)"><img src=”button.png/></a>


3.4 オリジナルメニューの例

•  観光案内ちらしARサンプル –  http://www.cybernet.co.jp/ar-vr/

documents/products/csc-ar/sightseeing.pdf



まとめ

•  metaio Creatorコンテンツの機能拡張 –  JavaScriptの追加や修正を行うことで可能

•  ジェスチャの追加 •  アニメーションの追加 •  カメラボタンの追加

–  Google Map TIPS •  ルート表示 •  マップ表示

•  NON GLUE Contents –  metaio Creatorでは作れないチャンネル –  ＰＨＰを使って作る方法を紹介



追加情報

•  junaio Quickstarts –  https://dev.metaio.com/junaio/quickstarts/

•  metaio AREL JavaScript resources –  http://dev.junaio.com/arel/documentationArelJS/

•  サイバネットjunaio紹介ページ –  http://www.cybernet.co.jp/ar-vr/products/metaio/junaio/

•  サイバネットjunaio入門コース –  http://www.cybernet.co.jp/ar-vr/seminar_event/seminar/

junaio_entry.html


弊社からmetaio Creatorを購入されたお客様は30% offで受講できます


Q&A and Coffee Break

•  次のセッション、請うご期待 –  Matthias Greiner’s session

•  junaio channel submission guideline/checklist •  junaio future roadmap



Technology

insideAR Tokyo 2013: Junaio Workshop