Slide 1
Slide 1 text
PAGE
DAY 2018/02/16 X / 12
# MOONGIFT #MONACA_UG
Wikitudeを使ったAR Monaca
アプリについて
Slide 2
Slide 2 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
自己紹介
@goofmint
fb.me/goofmint
中津川 篤司
MOONGIFT 代表取締役
オープンソース・ソフトウェアを毎日紹介
https://www.moongift.jp/
Monaca UG メンバー
ニフクラ mobile backend エバンジェリスト
Slide 3
Slide 3 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
Wikitude ?
商用ARエンジン
Cordova に強い = Monaca に強い
その他 Unity / Titanium / Xamarin / iOS / Android
日本ではグレープシティ社が販売、サポート
Slide 4
Slide 4 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
対応しているARの種類
インスタントトラッキング
物体認識
画像認識 ロケーション
Slide 5
Slide 5 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
画像認識
画像ターゲットを登録
その画像ターゲットをカメラで写す
マーカー（3Dモデル/HTML/テキスト/動画など）を表示
データはアプリ内部、またはクラウド認識
Slide 6
Slide 6 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
ロケーション
位置情報を指定
デバイスをその方向に向ける
マーカー（3Dモデル/HTML/テキスト/動画など）を表示
データはローカル認識のみ
Slide 7
Slide 7 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
物体認識
動画からターゲットを生成
オブジェクトを認識してマーカーを表示
ローカルまたはクラウドのみ
Slide 8
Slide 8 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
Slide 9
Slide 9 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
インスタントトラッキング
Slide 10
Slide 10 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
デモ
http://www.wikitude.com/external/doc/samples/fire_truck/
http://docs.grapecity.com/help/wikitude/wikitude-sdk-ios/targetimages.html
Slide 11
Slide 11 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
マーカーレスARについて
ARKit (iOS) / AR Core (Android) が統合されています
元々はSLAM (Simultaneous localization and mapping)
を開発
SMART = ARKit / AR Core / SLAM を統合
Slide 12
Slide 12 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
認識オブジェクトについて
FBX をWikitude 3D Encoderで変換
Wikitude Studio (クラウド) でトラッカーを作成
Slide 13
Slide 13 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
Monacaでの使い方 1
app.wikitudePlugin = cordova.require(
“com.wikitude.phonegap.WikitudePlugin.WikitudePlugin"
);
app.wikitudePlugin.isDeviceSupported(
app.onDeviceSupported,
app.onDeviceNotSupported,
[“2d_tracking"]
);
app.receivedEvent('deviceready');
Slide 14
Slide 14 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
Monacaでの使い方 2
onDeviceSupported: function() {
app.wikitudePlugin.loadARchitectWorld(
app.onARExperienceLoadedSuccessful,
app.onARExperienceLoadError,
“www/ar.html",
[ “2d_tracking"],
{“camera_position": "back"} );
},
Slide 15
Slide 15 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
Monacaでの使い方 3
Slide 16
Slide 16 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
// 作成したWTCファイルをトラッカーに設定
var tracker = new AR.ClientTracker("assets/tracker.wtc");
// 表示する3Dモデルを指定
var modelDragon = new AR.Model("assets/dragon_floating.wt3", {
// 表示する大きさの指定
scale: { x: 0.0007, y: 0.0007, z: 0.0007 },
// 表示位置の調整
translate: { x: 0.0, y: 0.0, z: 0.0 },
// 3Dオブジェクトの角度調整
rotate: { roll: 25, tilt: -100.0, }
});
// 2つの情報を設定
var trackable = new AR.Trackable2DObject(
tracker, "*", {
drawables: {
cam: [modelDragon]
},
}
);
Monacaでの使い方 4
Slide 17
Slide 17 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
Slide 18
Slide 18 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
コード
https://github.com/goofmint/Wikitude2DTrackingDemo
Slide 19
Slide 19 text
PAGE X / 18
# MOONGIFT #MONACA_UG DAY 2018/02/16
まとめ
WikitudeはJavaScriptでARが実現できます (要Cordovaプラグ
イン)
最新版では ARKit / AR Core も利用できます
表示できるのは 3D / 画像 / HTML / 動画
お値段は…Webで！