Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Atsushi Nakatsugawa
PRO
February 19, 2018
Technology
0
2.7k

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

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

の発表資料です

Atsushi Nakatsugawa
PRO

February 19, 2018
Tweet

More Decks by Atsushi Nakatsugawa

See All by Atsushi Nakatsugawa
DevRelファーストステップ
moongift
PRO
0
23
DevRelのフォーカス領域の変化とコンテンツのあり方
moongift
PRO
0
59
SendGrid + Googleスプレッドシートによる簡単Webサイト構築
moongift
PRO
0
350
コストを下げた動画作成テクニックの紹介
moongift
PRO
0
170
テックブログを分析して分かった始めるコツ・続けるコツ
moongift
PRO
8
3.6k
DevRelが失敗する企業の特徴とその対策
moongift
PRO
2
420
DevRel Regional Characteristics
moongift
PRO
0
10
月100本以上ブログ記事を書いて通して学んだ記事のアイディアの出し方
moongift
PRO
0
420
Google I/O 2021 Recap
moongift
PRO
1
58

Other Decks in Technology

See All in Technology
Databricks におけるデータエンジニアリング
databricksjapan
0
370
社内勉強会運営のコツ
senoo
6
1.1k
NgRx Signal Store
rainerhahnekamp
0
110
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
プロデザ！ BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
強みを伸ばすキャリアデザイン
yug1224
0
200
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.5k
【SORACOM UG】SIM Deep Dive セキュアエレメント編
soracom
PRO
0
250
Google Cloud の AI を支える裏側のインフラを垣間見る！
maroon1st
0
120
SREとその組織類型
tatsuo48
8
1.5k
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
1
610
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Visualization
eitanlees
135
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Making Projects Easy
brettharned
108
5.5k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
How to name files
jennybc
64
92k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
RailsConf 2023
tenderlove
2
530

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で！