Web上で軽快に動作するオープンソースのARツール「AR.js」で遊んでみた!

31959fb2d8d72f6cbf96a13e17107ff8?s=47 kurita
December 26, 2018
1.5k

 Web上で軽快に動作するオープンソースのARツール「AR.js」で遊んでみた!

Web上で軽快に動作するオープンソースのARツール「AR.js」で遊んでみた!
https://memberscareer.connpass.com/event/90672/
VR AR MR ?
VR と AR の違い

2017年 8月29日
GoogleがAndroid向けのARフレームワーク「ARCore」を発表

2018年 6月5日
Apple、ARアプリをさらにダイナミックにプラットフォーム、「ARKit 2」を発表

Apps だけじゃないJavascript でも出来る!?

「AR.js」って何?
Learning Three.js の創業者であるアレクサンドラが、2017年3月に、米国VRメディアの「UPLoadVR」にて、「AR.js」の詳細を公表

@mc_kurita
https://twitter.com/mc_kurita

31959fb2d8d72f6cbf96a13e17107ff8?s=128

kurita

December 26, 2018
Tweet

Transcript

  1. 1 Web上で軽快に動作する オープンソースARツール 「AR.js」で遊んでみた!

  2. 2 MC Open Lab. #1 2018 年 06 月 27

    日(水) Memberscareer t-kurita
  3. 3 AR

  4. 4 VR AR MR ?

  5. 5 VR と AR の違い Virtual Reality 仮想 現実 Augmented

    Reality 拡張 現実 Mixed Reality 複合現実
  6. 6 2017年 8月29日 GoogleがAndroid向けの ARフレームワーク「ARCore」を発表

  7. 7 2018年 6月5日 Apple、ARアプリをさらに ダイナミックにプラットフォーム、「ARKit 2」を発表

  8. 8 Introducing ARCore https://youtu.be/ttdPqly4OF8

  9. 9 ARCore: Augmented Images https://youtu.be/uDs9rd7yD0I

  10. 10 どころじゃない!

  11. 11 AR の 戦い 2017年8月29日 ARフレームワーク「ARCore」発表 Pixel、Android OS 7.0以降 Galaxy

    S8 2014年 Tango 発表(2018年 終了) 2017年9月20日 iOS11標準搭載のAR機能「ARKit」発表 2017年12月20日 ポケモンGO「AR+」機能ついに「ARKit」対応 HoloLens 2015.01 2018年 Tango サポート終了 2018年6月5日 さらにダイナミックなiOS12対応「ARKit2」発表
  12. 12 Apps だけじゃない Javascript でも出来る!?

  13. 13 「AR.js」で遊んでみた!

  14. 14 AR.js って何?

  15. 15 「AR.js」って何? Learning Three.js の創業者であるアレクサ ンドラが、2017年3月に、米国VRメディアの 「UPLoadVR」にて、「AR.js」の詳細を公表 「AR.js」 とは、ARアプリケーションを容易に製作するための ARライブラリ(フレームワーク)です!

  16. 16 「AR.js」の特徴 「AR.js」はGitHub(ギット・ハブ)上に公開されており、 オープンソースでインストール不要、軽量かつ高速に動作して面 倒な環境構築の手間が省けられることが特徴。 誰でも気軽にAR体験ができたり、 javascript の基礎や応用を知ってい る人は、オリジナルアプリを開発する ことができます。

  17. 17 デモ

  18. 18 レシピ AR.js(Web上で軽量・高速に動作するARツール) Three.js (WebGLの高度な技術を使えるライブラリ) ARToolKit (ARアプリを実現するC言語ライブラリ)

  19. 19 JSが映像を解析する 解析(デバッグ表示) 動画・カメラ映像を解析

  20. 20 barcode をリアルタイムに Tracking いくつあっても、斜めでも解析できる

  21. 21 カメラに写った barcode に AR

  22. 22 複数の 3Dモデル を barcode に

  23. 23 複数の 3Dモデル を barcode に 複雑な3Dモデルでも!

  24. 24 人の顔 も JS で Tracking できる Debug画面

  25. 25 つまり「Face ID」「アニメ文字」的なことが

  26. 26 カメラアプリで面白いもの作れそう!

  27. 27 ご静聴ありがとうございました