Web技術(AR.js)でARを実現する夢を見た

【サポーターズCoLab主催】あえてジャンル不問の大LT大会 - サポーターズCoLab
https://supporterzcolab.com/event/461/?utm_campaign=event_reminder&utm_source=notifications&utm_medium=email&utm_content=detail_btn

Transcript

1. Web技術(AR.js)でARを実現 する夢を見た 7月20日(金) サポーターズCoLab主催　あえてジャンル不問の大LT大会 Masataka Yoshida
2. 株式会社オープンストリーム PHP, Python, HTML/CSS/JS, AWS, CakePHP, Vue.js, C, Java, Objective-C, Jenkins, 
 ドキュメント(Excel)…
 
 手元のパソコンで目に見えるものを作るのが
 楽しい！
 今はTwitterを分析しています 吉田 匡孝 そろそろフロントエンドのお仕事したいです
 そろそろフロントエンドのお仕事したいです… よしだ　まさたか
3. https://twitter.com/AR_Ojisan/status/1017341164641370112
4. Webページ作るだけで
5. 壺が置ける ❌アプリのビルド ❌アプリの登録・審査 ❌ アプリのインストール
6. そんなWeb技術でARを実現
7. Webの技術でARを実装 3Dを表示するthree.jsと
 ARCore(Android) / ARKit(iOS) 
 を結びつけるライブラリ …そのほかにもあるかも three.ar.js AR.js WebでVRを実現するA-Frameと WebGL, WebRTCを用いてARを 実現するライブラリ
8. Webの技術でARを実装 普段使うブラウザからARCore, ARKitを呼び出せないため、
 実験用のブラウザの
 インストールが必要 …そのほかにもあるかも three.ar.js AR.js WebGL(3D), WebRTC(カメラ)
 のみのため、普段使うブラウザ からARを体験できる
9. AR.jsで実装
10. AR.jsで実装 スクリプトの読み込み オブジェクトファイル・マテリアルの指定 マーカーと表示させるオブジェクトの設定 オブジェクトを映すカメラを配置(オブジェクト表示に必要)
11. モデルの設定 OBJ(*.obj) glTF(*.gltf) a-asset-item でファイルを指定して a-obj-model で配置 a-gltf-model でファイルを指定して a-gltf-model で配置
12. モデルのダウンロード ダウンロードしたモデルを使う際はライセンスを確認すること “Water truck transport pub remi” by Robert Mark is licensed under CC BY https://poly.google.com/view/9FsAlGltIgZ ダウンロード可能なモデルは
 「ダウンロード」のボタンが表示
 される Google Poly(https://poly.google.com/)
13. モデルのダウンロード A-Frame(http://aframe.io/)
 -> DOCS -> 3D Models
 -> Where to Find Models などなど ダウンロードしたモデルを使う際はライセンスを確認すること
14. ARを表示するには? Google Chromeの場合、セキュリティのため
 カメラが https, 127.0.0.1(localhost)などに制限 されている Prefer Secure Origins For Powerful New Features - The Chromium Projects
 https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for- powerful-new-features パソコンで表示する スマートフォンで表示する Node.jsのhttp-serverなどで localhostからHTMLファイルに
 アクセスできるようにする BitBaloonなどでhttpsから HTMLファイルにアクセス
 できるようにする
15. できた！！ “Water truck transport pub remi” by Robert Mark is licensed under CC BY https://poly.google.com/view/9FsAlGltIgZ
16. AR.js, A-Frame, three.js AR.js A-Frame “Water truck transport pub remi” by Robert Mark is licensed under CC BY https://poly.google.com/view/9FsAlGltIgZ マーカーの検出
 マーカーに沿ったモデルの制御
 を担当 モデルの表示を担当
 3Dを表示するthree.jsを 内包している
17. AR.jsのマーカーレスAR AR.js Supports Tango on A-Frame too! – ARjs – Medium https://medium.com/arjs/ar-js-supports-tango-on-a-frame-too-2c098de4df34 2017/8/8現在、Tango(ARCore)対応スマートフォンで
 AR.jsのマーカーレスARをサポートしている
18. さっきのARは??
19. iOS 12のAR Quick Look モデル(USDZ)ファイルを開いたときの
 AR Quick Lookという機能で
 マーカーがなくても壺が置けたりする
20. まとめ よくありそうな「お菓子の箱に付いたマーカーをかざしてキャラク ターを出してみよう」とするユースケースなら、
 AR.jsを使うことでiOS/Androidアプリを作る必要が無さそう AR.js でWebARを実現すること自体には1日もかからない マーカレスARを「簡単に」実現するにはARCore, ARKitに期待 iOS 12ならモデルにリンクを貼るだけでマーカレスARができちゃう！