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

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

 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

F5367e6dde42dda84768b5b145c12eef?s=128

Masataka Yoshida

July 20, 2018
Tweet

More Decks by Masataka Yoshida

Other Decks in Programming

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ができちゃう!