ARCANA Meetup#26 in cluster.

1. A-Frameで作った
ギャラリーのお話
2017/06/22
ARCANA Meetup #26@cluster.
スタジオアルカナ
遠藤勝也
1

2. 自己紹介
• 遠藤勝也
• スタジオアルカナ
R&D, フロントエンド
• Javascript(A-Frameなど),
Processing,
openFrameworks, Cinder
• インタラクション, UI/UX
2

3. お話しする内容
3

4. お話しする内容
WebVRのUIについて
4

5. HMDを使った
VRのためのUI
5

6. 専用コントローラ
http://www.icaros.net/
6

7. 専用コントローラ
https://www.kickstarter.com/projects/katvr/kat-walk-a-
new-virtual-reality-locomotion-device
7

8. 専用コントローラ
https://www.vive.com/jp/
8

9. 専用コントローラ
https://www.leapmotion.com/product/vr/#113
9

10. 専用コントローラ
http://amzn.asia/aN18FCG
10

11. 視点によるカーソル
https://blog.getfove.com/
11

12. 視点によるカーソル
https://aframe.io/examples/showcase/360-image-
gallery/
12

13. 価格(2017/06/18)
• Icaros
¥978,284(€7,900)
• HTC Vive
¥107,784
• KAT WALK
¥88,425($799)
• FOVE 0 $599
¥66,291
• Leapmotion
¥9,959($89.99)
• Popskyコントローラ
¥920
• PS VR(参考)
¥53,978
13

14. 一般の人が買うには
少し高い……
14

15. 価格
場所
PS VR
15

16. 価格
場所
PS VR
16

17. PS VR
価格
場所
17
これ！

18. 視点によるカーソルを使った
インタラクション
• メリット
• 特殊な機材を必要としない
• デメリット
• 素早い入力ができない
• 頭部の運動が激しくなる
18

19. 視点によるカーソルを使った
インタラクション
• メリット
• 特殊な機材を必要としない
• デメリット
• 素早い入力ができない
• 頭部の運動が激しくなる 解消したい!!
19

20. A-Frameで作った
ギャラリーを例に考えてみた
20

21. VRギャラリー要件
• WebVRを使って複数の位置から撮影した
部屋の内装を鑑賞できる
• 部屋の情報は
画像以外(天球写真の位置関係など)はない
• 操作中にHMDは外さない
21

22. 案1
22

23. メニューアイコン
上方には常にメニューアイコンがある
23

24. メニューアイコン
上方には常にメニューアイコンがある
24

25. メニューアイコン
上方には常にメニューアイコンがある
25

26. ギャラリー
メニューアイコンを注視すると下にギャラリーが広がる
26

27. ギャラリー
クローズアイコンは追随するが、ギャラリーは固定
27

28. ギャラリー
クローズアイコンは追随するが、ギャラリーは固定
28

29. 移動
ギャラリーの画像に注視すると、その位置に移動する
アクティブな画像と非アクティブな画像の違いがわかる
29

30. 閉じる
クローズアイコンに注視するとギャラリーが消える
30

31. 案2
31

32. メニューアイコン
案1と同じ
32

33. ギャラリー
メニューアイコンを注視すると、
アイコンが消えてギャラリーが広がる
33

34. 移動&閉じる
画像を注視するとその位置に移動して、
再びメニューアイコンが出てくる
34

35. まとめ
35

36. 素早い操作
案1の方は連続して切り替えられる
36

37. 素早い操作
案2で同じようにしようとするとアイコンが画像
とかぶる
37

38. 頭部の運動
メニューから画像までの距離が短い
(過度な頭部の運動はVR酔いの原因)
38

39. おわりに
• WebVRは手軽に触れるので、そこから浸透させたい
• そのためには手軽で使いやすいUIを
考える必要があると思う
• iOS11からWebRTCに対応するみたいなので、
背面カメラを使ったインタラクションも可能になるかも
39

40. 40