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

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

Transcript

1. Unityマンが A-Frameさわってみて 感じた共通点とか
2. 自己紹介 ながみね @KzoNag Unityマン XR/インタラクティブ/モバイル 2
3. 0.はじめに
4. 4 つくってみた
5. シェイクジェスチャー スマホ＆マーカー型のARではマーカーが見切れてしまいがち。 マーカー上にコンテンツ表示してシェイクで切り替えれば解決するのでは！？ コンセプト WebAR AR名刺を試してもらうときにアプリDL必須だとハードル高い。 カメラ→QR認識→ブラウザ起動ですぐに見れるとスムーズだよね！ 5 A-Frame + AR.js
6. HTML/JavaScriptあんまり分からんけど A-Frameはけっこう分かりやすかった （Unityとの共通点） ▪ 構造 ▪ スクリプト 6
7. 1.構造
8. ❏ VR向けWebフレームワーク ❏ HTMLで記述でき導入が容易 ❏ three.jsベース ❏ Entity-Component-Systemアーキテクチャ A-Frame 8 A-Frame Introduction : https://aframe.io/docs/0.9.0/introduction/
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
10. 10 Unity2018で導入された Entity-Component-System A-Frameの Entity-Component-System
11. 11 Unityの普通のコンポーネント指向 A-Frameの Entity-Component-System
12. Unity 12
13. A-Frame 13 <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7 <a-sky color="#ECECEC"></a-sky> </a-scene> https://aframe.io/docs/0.9.0/introduction/html-and-primitives.html <a-box> のようなタグは 使いやすいように別名を 付けてラップしたもの
14. entityとcomponent 14 https://aframe.io/docs/0.9.0/introduction/html-and-primitives.html <a-box color="red" width="3"></a-box> <a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity> entity component
15. 構造の共通点 15 GameObject / Entity Component Component Component
16. 2.スクリプト
17. 17 スクリプトを書いてComponentを実装 独自の機能を作りたい
18. Unity 18 using UnityEngine; public class Test : MonoBehaviour { void Start() { } void OnDestroy() { } void Update() { } } 最初に1度実行される 最後に1度実行される 定期的に実行される
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に相当することに注意
20. スクリプトの共通点 特定のタイミングで実行される関数を実装する ❏ 最初 ❏ 最後 ❏ 定期的 ❏ (変化時) 20
21. まとめ
22. まとめ ▪ A-FrameはUnityマンとしても入りやすいと思う ▪ だがしかし結局JavaScript分からん ▪ シェイクジェスチャーは精度・遅延が厳しいか ▪ A-Frameは良さそう！（2回目） 22
23. Thank you!
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