UnityマンがA-Frameさわってみて感じた共通点とか

2019/3/20開催のXRミーティングでの発表資料

Transcript

1. Unityマンが
   A-Frameさわってみて
   感じた共通点とか
   

   View Slide

2. 自己紹介
   ながみね
   @KzoNag
   Unityマン
   XR/インタラクティブ/モバイル
   2
   

   View Slide

3. 0.はじめに
   

   View Slide

4. 4
   つくってみた
   

   View Slide

5. シェイクジェスチャー
   スマホ＆マーカー型のARではマーカーが見切れてしまいがち。
   マーカー上にコンテンツ表示してシェイクで切り替えれば解決するのでは！？
   コンセプト
   WebAR
   AR名刺を試してもらうときにアプリDL必須だとハードル高い。
   カメラ→QR認識→ブラウザ起動ですぐに見れるとスムーズだよね！
   5
   A-Frame + AR.js
   

   View Slide

6. HTML/JavaScriptあんまり分からんけど
   A-Frameはけっこう分かりやすかった
   （Unityとの共通点）
   ▪ 構造
   ▪ スクリプト
   6
   

   View Slide

7. 1.構造
   

   View Slide

8. ❏ VR向けWebフレームワーク
   ❏ HTMLで記述でき導入が容易
   ❏ three.jsベース
   ❏ Entity-Component-Systemアーキテクチャ
   A-Frame
   8 A-Frame Introduction : https://aframe.io/docs/0.9.0/introduction/
   

   View Slide

9. Entity-Component-System
   “ECS architecture is a common and desirable
   pattern in 3D and game development that
   follows the composition over inheritance
   and hierarchy principle.”
   9
   “A well-known game engine implementing
   ECS is Unity.”
   A-Frame Entity-Component-System :
   https://aframe.io/docs/0.9.0/introduction/entity-component-system.html
   

   View Slide

10. 10
    Unity2018で導入された
    Entity-Component-System
    A-Frameの
    Entity-Component-System
    

    View Slide

11. 11
    Unityの普通のコンポーネント指向
    A-Frameの
    Entity-Component-System
    

    View Slide

12. Unity
    12
    

    View Slide

13. A-Frame
    13
    
    
    
    
    
    
    https://aframe.io/docs/0.9.0/introduction/html-and-primitives.html
    のようなタグは
    使いやすいように別名を
    付けてラップしたもの
    

    View Slide

14. entityとcomponent
    14 https://aframe.io/docs/0.9.0/introduction/html-and-primitives.html
    
    material="color: red">
    entity
    component
    

    View Slide

15. 構造の共通点
    15
    GameObject / Entity
    Component
    Component
    Component
    

    View Slide

16. 2.スクリプト
    

    View Slide

17. 17
    スクリプトを書いてComponentを実装
    独自の機能を作りたい
    

    View Slide

18. Unity
    18
    using UnityEngine;
    public class Test : MonoBehaviour
    {
    void Start()
    {
    }
    void OnDestroy()
    {
    }
    void Update()
    {
    }
    }
    最初に1度実行される
    最後に1度実行される
    定期的に実行される
    

    View Slide

19. A-Frame
    19
    AFRAME.registerComponent('foo', {
    schema: {
    bar: {type: 'number'},
    baz: {type: 'string'}
    },
    init: function () {
    },
    update: function () {
    },
    remove: function () {
    },
    tick: function (time, timeDelta) {
    }
    });
    最初に1度実行される
    データ更新が
    あったら実行される
    最後に1度実行される
    定期的に実行される
    ※UnityのUpdateは
    　A-Frameでは
    　updateではなく
    　tickに相当することに注意
    

    View Slide

20. スクリプトの共通点
    特定のタイミングで実行される関数を実装する
    ❏ 最初
    ❏ 最後
    ❏ 定期的
    ❏ (変化時)
    20
    

    View Slide

21. まとめ
    

    View Slide

22. まとめ
    ▪ A-FrameはUnityマンとしても入りやすいと思う
    ▪ だがしかし結局JavaScript分からん
    ▪ シェイクジェスチャーは精度・遅延が厳しいか
    ▪ A-Frameは良さそう！（2回目）
    22
    

    View Slide

23. Thank you!
    

    View Slide

24. CREDITS
    Special thanks to all the people who made
    and released these awesome resources for
    free:
    ▪ Presentation template by SlidesCarnival
    ▪ Photographs by Unsplash
    24
    

    View Slide