Introducing WebAR using awe.js

2017/02/07 Meguro.es #8 で発表した資料の【公開版】です。
https://meguroes.connpass.com/event/47839/

Transcript

1. Introducing WebAR using awe.js 2017/02/07 Maguro.es #8 @ikkou
2. ICE BREAK Do you know difference between VR, AR and MR? 2017/02/07 Maguro.es #8 @ikkou 2
3. MR って何？AR とどう違うの？ ということを調べたり考えたり議論 した結果を図にまとめてみました。 どうですかね・・？ ちなみにAlex Kipman の示したMR はこちらの 記事を参照https://t.co/ywjHCE0p4g pic.twitter.com/ePuUREAg33 — Haramakoto (@xxxxMakoto) 2017 年2 月2 日 “ “ © 2017 Haramakoto (@xxxxMakoto) - https://twitter.com/xxxxMakoto/status/827026315177971712 3
4. © 2017 Haramakoto (@xxxxMakoto) - https://twitter.com/xxxxMakoto/status/827026315177971712 4
5. $whoami 目黒のとある企業で働いています Events Planner JavaScript における event ではなくリアルのイベント "Meguro.es" の立ち上げ 最近はもっぱら "VR Tech Tokyo" に注力 但し、 所属企業はVR 関連業務を行なっていません Virtual Reality Engineer a.k.a VR おじさん Front-end Engineer のようなもの 2017/02/07 Maguro.es #8 @ikkou 5
6. これまでWebVR のことばかり話してきましたが 今回はWebAR について、 とりわけスマホ端末に おけるモバイルWebAR の実現について話します 2017/02/07 Maguro.es #8 @ikkou 6
7. What's AR AR = Augmented Reality = 拡張現実感 いわゆるAR マー カー を使うことだけがAR ではない セカイカメラ、 覚えていますか？ Pokémon GO のAR モー ド、 試しましたよね？ 『Pokémon GO はAR ではない』 という見方もあります Google Project Tango はGoogle によるAR 技術 国内展開の始まった Microsoft HoloLens はAR でMR を実現する 多くのVR クラスタもHoloLens を購入、 盛り上がりを見せている 2017/02/07 Maguro.es #8 @ikkou 7
8. What's WebAR? ウェブブラウザで実現するブラウザベー スのAR をWebAR と定義 VR 元年と呼ばれた2016 年にはWebVR 関連の情報が増加 いくつかの場でWebVR を紹介してきました How to enjoy Web VR Introducing WebVR API 1.0 & A-Frame Updates #gotandajs WebVR の現状確認@Japan VR Fest 開発者会 2017/02 現在、 対してWebAR はと言うと検索結果に表示されるのは Argumented Reality ではないAR ばかり、 まだ盛り上がっていない!? 2017/02/07 Maguro.es #8 @ikkou 8
9. How to develop WebAR A-Frame をはじめとしてWebVR を簡単に実現するライブラリがあるように WebAR を実現するJavaScript ライブラリがいくつか存在しています JSARToolKit 元はC のARToolKit →Java のNyARToolKit →Flash のFLARToolKit js-aruco 元はOpenCV をベー スにしたC++ のArUco argon.js using Argon4 後述するiOS の課題を解決するために専用アプリが用意されている 2017/02/07 Maguro.es #8 @ikkou 9
10. MediaDevices.getUserMedia() スマホ端末におけるAR 的な行為を考えたとき、 背面カメラを経由し てリアルをキャプチャすることを可能にするWeb API 前身のNavigator.getUserMedia メソッドは既にDeprecated スマホ端末での実装状況は進んでいない cf.MDN Gecko エンジンのFirefox Mobile 36+ とFirefox OS のみ対応 iOS のFirefox Mobile はWebKit エンジンなので動作しない 実質的にはAndroid 版Firefox Mobile のみに対応 argon.js はiOS アプリからネイティブAPI にアクセスすることで対応 2017/02/07 Maguro.es #8 @ikkou 10
11. Develop WebAR using awe.js 2017/02/07 Maguro.es #8 @ikkou 11
12. Intro 元々 は "The jQuery for the Augmented Web" 最近のアップデー ト後 "Virtual & Augmented Reality On the web, On any device" WebAR だけではなくWebVR もスコー プとなりargon.js と同じ道へ 2017/02/07 Maguro.es #8 @ikkou 12
13. What's awe.js Add a 360° photo or video background Add 3D objects, images or videos Add interactivity Location based AR (GPS の位置情報を基にしたAR≒Pokémon GO) Marker based AR (AR マー カー を基にしたAR) Oculus Rift, Leap Motion, Google Glass 対応なども……!! 今回はAR っぽさのあるMarker based AR の使い方を紹介します 2017/02/07 Maguro.es #8 @ikkou 13
14. Demo - Marker based AR サンプルとして用意されている awe.js/examples/marker_ar/ を使用 いい感じにJSARToolKit を使えるようにお膳立てされている 使いたいマー カー と表示させたい画像を選ぶだけ 色々 お膳立てされているので.obj と.mtl の読み込みも簡単 2017/02/07 Maguro.es #8 @ikkou 14
15. Usage - shape https://github.com/awe-media/awe.js/wiki/basic-shapes-example awe.pois.add({ id:'jsartoolkit_marker_10', position: { x:0, y:0, z:0 }, visible awe.projections.add({ id:'marker_projection_1', geometry: { shape: 'cube', x:50, y:50, z:50 }, position: { x:0, y:0, z:0 }, rotation: { x:0, y:0, z:180 }, material:{ type: 'phong', color: 0xFFFFFF }, texture: { path: 'marker-meguro.es.png' }, visible: false, }, { poi_id: 'jsartoolkit_marker_10' }); 2017/02/07 Maguro.es #8 @ikkou 15
16. Usage - .obj & .mtl awe.pois.add({ id:'jsartoolkit_marker_64', position: { x:0, y:0, z:0 }, visible awe.projections.add({ id:'marker_projection_5', geometry: { path: 'miku.obj' }, material: { path: 'miku.mtl' }, position: { x: 0, y: 0, z: 0 }, rotation: { x: 270, y: 360, z: 0 }, scale: { x: 30, y: 30, z: 30 }, }, { poi_id: 'jsartoolkit_marker_64' }); 2017/02/07 Maguro.es #8 @ikkou 16
17. Conclusion awe.js を使ってWebAR を試すことができる MediaDevices.getUserMedia() のハー ドルがある 現時点ではWebAR は実用的ではない Phab2 Pro を買ってモバイルAR を試行する方が手っ取り早そう WebAR に夢を見つつ当面はWebVR を継続的に試行していく気持ち 2017/02/07 Maguro.es #8 @ikkou 17
18. 良き WebAR ライフを！ 2017/02/07 Maguro.es #8 @ikkou 18