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

Transcript

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

   View Slide

2. 2
   MC Open Lab. #1
   2018 年 06 月 27 日（水）
   Memberscareer t-kurita
   

   View Slide

3. 3
   AR
   

   View Slide

4. 4
   VR AR MR ？
   

   View Slide

5. 5
   VR と AR の違い
   Virtual Reality
   仮想 現実
   Augmented Reality
   拡張 現実
   Mixed Reality
   複合現実
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 10
    どころじゃない！
    

    View Slide

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」発表
    

    View Slide

12. 12
    Apps だけじゃない
    Javascript でも出来る！？
    

    View Slide

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

    View Slide

14. 14
    AR.js って何？
    

    View Slide

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

    View Slide

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

    View Slide

17. 17
    デモ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide