insidear tokyo 2013: junaio workshop
Post on 09-May-2015
4.216 Views
Preview:
TRANSCRIPT
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
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
1. INTRODUCTION
junaioの画面構成
© 2012 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 3
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
1.1 junaioの画面構成
• OpenGL + HTMLのレイヤー • AREL (JavaScript + XML)によるコンテンツ記述
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 4
3Dモデルやムービーなどの コンテンツ(XML)
HTML5表示:UI表示など
JavaScriptによるコンテンツ制御(arelライブラリ)
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
1.2 metaio Creatorで出力されるもの
• XML – トラッキングタイプ、トラッキングファイルの指定 – 3Dモデル、ムービーなどの配置情報
• JavaScript – ARシーンの制御 – Google Analyticsのログ制御
• HTML – コンテンツ記述に必要なJavaScriptのインポート – <body>は空
© 2012 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 5
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2. MODIFICATION OF CREATOR CONTENTS
metaio Creatorコンテンツの修正(おもにJavaScript)
© 2012 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 6
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.1 Creatorとその出力
© 2012 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 7
修正対象
I Love ARマーカー上の metaiomanコンテンツを My Serverへアップロード
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.2 Creatorコンテンツの修正方法
• metaio Creatorでコンテンツを作成する • 「My Server」へアップロードする • チャンネルのローカルにダウンロードする • logic.jsの修正 • logic.jsのアップロード
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 8
注意点:metaio Creatorでコンテンツを再アップロードすると、logic.jsは上書きされます。 →バックアップを取っておく
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3 Modification Examples
• Base Contentsを書き換えて機能を追加する • JavaScriptの追加
– ジェスチャー – アニメーション
• JavaScriptの置き換え – カメラボタン
• Google Maps TIPS – ルート表示 – マップ表示
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 9
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.1 Base Contents
• I Love ARマーカー上のmetaioman – “idle”アニメーションのループ – 拡大縮小などはできない
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 10
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.2 ジェスチャーの追加
• モデルの拡大縮小、移動などが可能 • logic.jsに2行追加するだけで実現可能
– arel.sceneReadyに追加する • arel.GestureHandlerを使用
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 11
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.2 ジェスチャーの追加(結果)
• ピンチイン/ピンチアウトで拡大縮小 • ドラッグで移動
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 12
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.3 アニメーションの追加
• metaio Creatorではタップ時のアニメーションは 一つしか指定できない
– displayed: idle (loop) – clicked: show_down
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 13
びっくりした後 固まってしまう
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.3 アニメーションの追加(コード)
• logic.jsを修正 – shock_down → shock_up → idle (loop) – handleObjectCallbacksを修正
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 14
中略 ONANIMATIONENDED の処理を加える
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.3 アニメーションの追加(結果)
• びっくりした後もとに戻る – shock_down → shock_up →
idle (loop)
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 15
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.4 カメラボタンの追加
• junaioはshareScreenボタンを持っている – カメラロールへの保存 – Facebook – Twitter
• 追加の仕方 – dev.junaio.comで追加
• 問題点 – ボタンデザインが固定 – Cloud App, SDK Appでは使えない
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 16
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.4 カメラボタンの追加
• UI Designerでボタンを追加してからJavaScriptを書き換える
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 17
仮に www.replace.me への リンクとしてボタンを作成する
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.4 カメラボタンの作成
• logic.jsの修正 – handleObjectCallbacksの書き換え
• www.replace.meへのリンク部分を削除 • 代わりに arel.Scene.shareScreenshot() を挿入 • arel.Scene.shareScreenshot(true) とすると直接保存
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 18
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.4 カメラボタンの作成(結果)
• オリジナルアイコンで実装
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 19
補足:スクリーンショット内にアイコンを 出したくない場合はHTMLで実装します
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.5 Google Maps TIPS
• Webリンクの形でGoogle Mapを表示可能 – JavaScriptの編集は必要なし
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 20
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
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)
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 21
iOSの場合、httpだとSafariが起動してしまう
Location BasedコンテンツをPHPで記述 するときにも、この書き方で記述する
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
2.3.5 Google Map TIPS (結果)
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 22
ルート表示
マップ表示
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3. NON GLUE CONTENTS (WITHOUT METAIO CREATOR)
ARELによるコンテンツ作成
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 23
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1 metaio Creatorでは作れないもの
• Location Based – 緯度経度を指定したPOI (Point Of Interest)を配置す
るコンテンツ • 360度パノラマコンテンツ
– パノラマ写真さえあれば、ほとんどチュートリアルが そのまま使える
• HTML連携メニュー – HTMLコンテンツと連携することも可能。Webデザイ
ナーとのタイアップ?
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 24
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1.1 フルスクリプティングのAREL
• Augmented Reality Experience Language – 新のjunaio 4.0から導入されたコンテンツ記述
• PHP – 主に静的なシーン構成を記述する(メイン部分)
• HTML5 – 追加のGUIコンポーネント部分を記述する
• JavaScript – シーンの動作部分を記述する
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 25
• 対象物にかざすように ダイアログを出す(JavaScript, HTML5)
• マーカーにかざしたときに 対象物を表示(PHP)
• クリックしたときに アニメーションを実行(JavaScript)
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1.2 ARELコンテンツの記述
• シーンの記述と動作の記述に別れている
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 26
/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
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1.3 ARELコンテンツの構成
• このツリー構造をサーバーにアップロードする
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 27
JavaScript部分とHTML5部分を書く
junaioのJavaScriptクラス定義(いじらない)
junaioコンテンツのエントリーポイント(基本的にいじらない)
コンテンツ表示に必要な画像やムービー、 マーカー定義などを置く(フォルダ作成する)
junaioのPHPクラス定義(いじらない) ※現時点では一部不具合のため書き換えが必要
PHP部分を書く
※以後のスライドでは、この階層を / で表します
(拡張子はPHP)
この階層は、PHPではWWW_ROOTと定義されています
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1.4 現バージョンでの既知の問題
• ARELはいくつか注意点がある – iPhoneとAndroidで挙動が違う部分がある
• トラッキングの追随性、ジャイロの感度など • 公開コンテンツは必ずiOS/Androidの両方で確認必須
– 日本語が文字化けする場合がある • 回避方法
– /library/arel_xmlhelper.class.phpの516行目を編集する
※ポップアップボタン名に日本語を使うときは、 utf8_encode()メソッドを指定する
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 28
コメントアウト
追加
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1.5 コンテンツ作成の流れ
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 29
チャンネルの登録 ARELファイルの編集
サーバーへアップロード 確認(Validate)
問題あり
OK
素材の準備
実機で確認
・開発環境には、PHPモジュールをインストールした Eclipseをおすすめします。 ・その他自前のサーバーと、アップロードするためのFTPクライアント、 dev.junaio.comでのチャンネル作成などが必要となります
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.1.6 Eclipseでの編集画面
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 30
• PHP部分ではAPIの補完が使える
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.2 Location Basedコンテンツ
– 東京スカイツリー&東京タワー (SkytreeAREL) • 空間上にエアタグを表示 • エアタグをクリックするとポップアップ表示
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 31
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.2.1 Location Basedチャンネルの登録
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 32
自前サーバーのアップロード先(コールバックURL)
Location Based informationはYesを選択
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.2.2 SkytreeARELのファイル構成
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 33
テンプレートのまま修正なし
resourcesフォルダを作成
Location Basedコンテンツの記述
この階層は、PHPではWWW_ROOTと定義されています
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
src/searc.phpの構造(抜粋)
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 34
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)
アイコン (地図表示)
サムネイル
トラッキングファイルなし
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
位置情報の検索
– 位置情報は(緯度, 経度, 高度)を指定します • 高度は現在のところゼロを指定する
– 緯度経度を調べる方法 • 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進法)
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 35
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.3 360°パノラマコンテンツ
• 作成Fujisoft360コンテンツ – 富士ソフトビル1Fの風景のパノラマをジャイロで表示
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 36
表示用パノラマ写真
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
Fujisoft360のファイル構成
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 37
AR表示素材(パノラマ画像表示用) ・360_new.md2(パノラマ用ポリゴンデータ) ・IMG_0666.JPG(パノラマ写真)
シーンの記述 (PHP) ・360パノラマの指定
パノラマ 写真
この階層は、PHPではWWW_ROOTと定義されています
パノラマ写真はiPhone アプリで撮影します
パノラマ用コンテンツは、このテンプレートの 写真だけを差し替えて再利用します
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
パノラマ写真の撮影
• iPhoneアプリ「Microsoft Photosynth」を使用
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 38
https://itunes.apple.com/jp/app/photosynth/id430065256?mt=8
起動画面 撮影中 一覧から選択 カメラロールへ保存
保存された写真は4096 x 2048ピクセルですが、 junaioでは、半分の2048x1024ピクセルにリサイズして使用します
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
/src/search.phpの構造
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 39
//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と 写真のファイル名だけ
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.4 オリジナルメニュー
• HTMLでオリジナルメニューを作ることが可能 – metaio Creatorでマーカーだけ定義したチャンネルを
作成する – html/index.htmlを編集する – チャンネルへのリンクは arel.Scene.switchChannel
を呼び出す。
© 2013 CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 40
<a href="javascript:arel.Scene.switchChannel(XXXXXX)"><img src=”button.png/></a>
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
3.4 オリジナルメニューの例
• 観光案内ちらしARサンプル – http://www.cybernet.co.jp/ar-vr/
documents/products/csc-ar/sightseeing.pdf
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 41
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
まとめ
• metaio Creatorコンテンツの機能拡張 – JavaScriptの追加や修正を行うことで可能
• ジェスチャの追加 • アニメーションの追加 • カメラボタンの追加
– Google Map TIPS • ルート表示 • マップ表示
• NON GLUE Contents – metaio Creatorでは作れないチャンネル – PHPを使って作る方法を紹介
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 42
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
追加情報
• 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
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 43
弊社からmetaio Creatorを購入されたお客様は30% offで受講できます
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
Q&A and Coffee Break
• 次のセッション、請うご期待 – Matthias Greiner’s session
• junaio channel submission guideline/checklist • junaio future roadmap
© 2013CYBERNET SYSTEMS CO.,LTD. All Rights Reserved. 44
Copyright © 2013 CYBERNET SYSTEMS CO.,LTD. All rights reserved.
top related