uzimARuの開発

ネタ始動のWebXRアプリ開発
https://github.com/ttak0422/uzimARu22

後日談
https://medium.com/@bgdaewalkman/lt%E3%81%A7webar%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A9%B1%E3%81%97%E3%81%9F-a954a364dbf4

Transcript

1. uzimARuの開発 tak(@bgdaewalkman)
2. はなすこと • 自己紹介 • 今回作ったもの • 技術的な話 ◦ 最近のWebXR(特にAR)の開発環境 ◦ threejsとwebxr api ◦ DOM Overray ◦ 発展的なハック • まとめ WebXR布教
3. 自己紹介 tak(@bgdaewalkman) 所属: 広島大学大学院(21卒) HiCoder 推し: F# xr VTuber
4. 今回作ったもの uzimARu • ネタ駆動開発 • うじまる君を召喚する WebARコンテンツ • WebXR APIを利用した 実践的サンプルアプリ https://github.com/ttak0422/uzimARu22
5. 今回作ったもの Android 普通のGoogle Chromeで動作します(要flag, ) iOS 動かないです...
6. 今回作ったもの Android ... iOS WebXR Viewerで動作しました。 ※テクスチャの表示が荒い バグか調査中
7. 技術的な話 - 最近のWebXR(特にAR)の開発環境 2017~2018 - WebARonARKit, WebARonARCore 独自の拡張がされたthree.ar.jsを使う。 専用ブラウザが必要なのでiOSだと開発者、利用者が ブラウザのビルドから頑張る必要あり。(Webとは...) - Mozilla/WebXR API(旧) XR APIを利用。やはり専用ブラウザが必要。 比較的安定。
8. 技術的な話 - 最近のWebXR(特にAR)の開発環境 2019- - 8th Wall JSとWebGLでSLAMが実装されたARエンジン。 初めはsafariのみサポートだった。高機能。 ユーザに使ってもらうには$99/month(高い；；)。
9. 2019- - WebXR Device API WebVR APIの後継 Editor's draft とりあえずこれ感 技術的な話 - DOM Overray https://immersive-web.github.io/webxr/
10. 技術的な話 - threejsとwebxr api
11. WebXR APIを使った開発では工夫をしないと 2D要素の表示ができない。 技術的な話 - DOM Overray WebXR DOM Overlay for Handheld AR DesignSketch(https://docs.google.com/document/d/e/2PACX-1vRpXB5wX1R1QRzniysT5J1LhLQ XAE5OMPX0kQiY-ozv8LsdsP22nf3mDyV6F8G92O_m0qAWMswLqOHT/pub)
12. 使うのは簡単。 技術的な話 - DOM Overray
13. 技術的な話 - 発展的なハック threejsのgeometryのサイズ1は 現実の1mに対応する。 推しを召喚予定でしたが、 切り抜くのが大変だったので、 詫びうじまるくん(1m)の画像を用意しました。
14. まとめ WebXRはいいぞ