Wikitudeを使ったMonaca ARアプリについて

Monaca UG OSAKA #2 ~AR/VR特集！~ - connpass - https://monacaug.connpass.com/event/77859/

の発表資料です

Transcript

1. PAGE DAY 2018/02/16 X / 12 # MOONGIFT #MONACA_UG Wikitudeを使ったAR Monaca アプリについて
2. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 自己紹介 @goofmint fb.me/goofmint 中津川 篤司 MOONGIFT 代表取締役 オープンソース・ソフトウェアを毎日紹介 https://www.moongift.jp/ Monaca UG メンバー ニフクラ mobile backend エバンジェリスト
3. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 Wikitude ? 商用ARエンジン Cordova に強い = Monaca に強い
 その他 Unity / Titanium / Xamarin / iOS / Android 日本ではグレープシティ社が販売、サポート
4. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 対応しているARの種類 インスタントトラッキング 物体認識 画像認識 ロケーション
5. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 画像認識 画像ターゲットを登録 その画像ターゲットをカメラで写す マーカー（3Dモデル/HTML/テキスト/動画など）を表示 データはアプリ内部、またはクラウド認識
6. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 ロケーション 位置情報を指定 デバイスをその方向に向ける マーカー（3Dモデル/HTML/テキスト/動画など）を表示 データはローカル認識のみ
7. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 物体認識 動画からターゲットを生成 オブジェクトを認識してマーカーを表示 ローカルまたはクラウドのみ
8. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16
9. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 インスタントトラッキング
10. 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
11. 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 を統合
12. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 認識オブジェクトについて FBX をWikitude 3D Encoderで変換 Wikitude Studio (クラウド) でトラッカーを作成
13. 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');
14. 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"} ); },
15. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=“Content-Type" content="text/html; charset=UTF-8"> <script src="https://wikitude.com/libs/architect.js"></script> <script src="js/ade.js"></script> <script src="js/ar.js"></script> </head> <body> </body> </html> Monacaでの使い方 3
16. 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
17. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16
18. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 コード https://github.com/goofmint/Wikitude2DTrackingDemo
19. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 まとめ WikitudeはJavaScriptでARが実現できます (要Cordovaプラグ イン) 最新版では ARKit / AR Core も利用できます 表示できるのは 3D / 画像 / HTML / 動画 お値段は…Webで！