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

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

Atsushi Nakatsugawa
PRO
February 19, 2018
Technology
0
2.8k

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
18
DevRelの始め方
moongift
PRO
3
520
マンガで分かるDevRelオンライン
moongift
PRO
0
110
DevRel Online with Manga
moongift
PRO
0
65
DevRel 4コマ
moongift
PRO
0
100
DevRel 4 panel Manga
moongift
PRO
0
62
DevRelの基礎〜開発者マーケティング〜
moongift
PRO
0
25
DevRelの基礎〜DevX（開発者体験）〜
moongift
PRO
0
35
DevRelの基礎「DevRelの重要性」
moongift
PRO
0
37

Other Decks in Technology

See All in Technology
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
100
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.7k
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
650
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
AGIについてChatGPTに聞いてみた
blueb
0
130
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
140
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
480

Featured

See All Featured
Faster Mobile Websites
deanohume
305
30k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
A Philosophy of Restraint
colly
203
16k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Making Projects Easy
brettharned
115
5.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Automating Front-end Workflow
addyosmani
1366
200k

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