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

Masataka Yoshida

July 20, 2018
Tweet

More Decks by Masataka Yoshida

Other Decks in Programming

Transcript

  1. 株式会社オープンストリーム PHP, Python, HTML/CSS/JS, AWS, CakePHP, Vue.js, C, Java, Objective-C,

    Jenkins, 
 ドキュメント(Excel)…
 
 手元のパソコンで目に見えるものを作るのが
 楽しい!
 今はTwitterを分析しています 吉田 匡孝 そろそろフロントエンドのお仕事したいです
 そろそろフロントエンドのお仕事したいです… よしだ まさたか
  2. モデルのダウンロード ダウンロードしたモデルを使う際はライセンスを確認すること “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/)
  3. モデルのダウンロード A-Frame(http://aframe.io/)
 -> DOCS -> 3D Models
 -> Where to

    Find Models などなど ダウンロードしたモデルを使う際はライセンスを確認すること
  4. 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ファイルにアクセス
 できるようにする
  5. できた!! “Water truck transport pub remi” by Robert Mark is

    licensed under CC BY https://poly.google.com/view/9FsAlGltIgZ
  6. 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を 内包している
  7. 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をサポートしている