VRChat内でARアプリのUI/UXを 研究できるか検証してみた in xR Tech Tokyo #11

Transcript

1. VRChat಺ͰARΞϓϦͷUI/UXΛ
   ݚڀͰ͖Δ͔ݕূͯ͠Έͨ
   MESON COO
   AR͓͡͞Μ
   

   View Slide

2. AR͓͡͞Μ (খྛ༎थ)
   TwitterͰARͷ͋Ε͜ΕΛᄁ͍ͯ·͢
   ֶੜ࣌୅͸ωοτϫʔΫͱ͔ιϑτ΢ΣΞ޻ֶΛݚڀ
   ͓͡͞Μ͚ͩͲ27ࡀ
   @AR_Ojisan
   

   View Slide

3. ࠓ೔ͷ͓୊
   VRChatͷதͰARΞϓϦΛ࡞ͬͯΈͯ
   ಘΒΕͨ஌ݟͳͲΛ঺հ͠·͢
   

   View Slide

4. ฐࣾͷ໨ඪ
   ฐࣾMESON͸ARελϯμʔυ࣌୅ʹ
   େ͖͘উෛͰ͖Δࣄۀ࡞ΓΛ໨ࢦ͍ͯ͠Δ
   

   View Slide

5. ARΞϓϦͷUI/UXͷݚڀ
   ARͷ৽͍ٕ͠ज़΍SDKͳͲ͸೔ຊͰ΋࿩୊ʹ্͕ͬͯΔ͕
   UI/UXΛݚڀ͍ͯ͠Δͱ͜Ζͬͯ·ͩ࿩୊ʹ্͕Βͳ͍
   

   View Slide

6. ւ֎ͩͱࣄྫ͕ݟΒΕΔ
   

   View Slide

7. ฐࣾͰ΋ARΞϓϦͷUI/UXΛݚڀ͕͍ͨ͠
   
   

   View Slide

8. 
   ݱঢ়݁ߏ໰୊͕ଟ͍
   

   View Slide

9. ໰୊఺(1)
   ARάϥεߴ͍໰୊
   

   View Slide

10. ໰୊఺(2)
    ·ͩͦΜͳʹARάϥε࣋ͬͯΔϢʔβʔ͍ͳ͍໰୊
    ग़య: IDC
    

    View Slide

11. ໰୊఺(3)
    ·ͩ·ͩཧ૝ͷARʹ͸ԕ͍໰୊
    ཧ૝ ݱ࣮
    

    View Slide

12. ໰୊఺(4)
    εϚϗARͱάϥεARͷମݧҧ͍͗͢໰୊
    

    View Slide

13. Ϣʔβʔ͕͍ͬͺ͍͍ͯɺ
    ARͷϋʔυతͳ੍໿Λड͚ͳ͍Ͱɺ
    ҆ՁʹάϥεARΞϓϦ͕࡞ΕΔ
    ͦΜͳཧ૝ᷭ͸ͳ͍ͷͩΖ͏͔ʁ
    
    

    View Slide

14. ฐࣾ୅දͱVRChatͰձٞͯ͠Δ࣌ͷ͜ͱ…
    ฐࣾ୅ද
    

    View Slide

15. ฐࣾ୅දͱVRChatͰձٞͯ͠Δ࣌ͷ͜ͱ…
    VRChatͬͯεϚϗͱ͔ͳ͍͔Β
    ߹ྲྀΊͬͪΌ໘౗ͩΑͳ
    ฐࣾ୅ද
    

    View Slide

16. View Slide

17. ARΞϓϦγϛϡϨʔλʔ in VRChat
    ϓϩδΣΫτ࢝ಈ
    

    View Slide

18. ຊϓϩδΣΫτͷϝϦοτ(1)
    ARάϥε࣮࣭ແྉ
    

    View Slide

19. ཧ૝ͷARΛγϛϡϨʔτͰ͖Δ
    ຊϓϩδΣΫτͷϝϦοτ(2)
    ࢹ໺֯޿͍ʂ ؀ڥೝࣝͰ͖Δʂ
    

    View Slide

20. ʮੜ׆ʯ͍ͯ͠ΔϢʔβʔ͕͍ͬͺ͍͍Δ
    ຊϓϩδΣΫτͷϝϦοτ(3)
    → ϝοηϯδϟʔ΍SNSͳͲ૒ํ޲ίϛϡχέʔγϣϯΞϓϦΛ࡞ΕΔ
    

    View Slide

21. ݱ࣮ੈքͰͷARΞϓϦϓϥοτϑΥʔϜΛ
    VRChat಺ͰઌճΓͯ͠ߏங͢Δ
    কདྷతͳߏ૝
    ARάϥεͷϋʔυͷ੍໿͕ղܾ͞Εͨ࣌ʹ
    طʹߏஙͨ͠ΞϓϦ΍UI/UXΛݱ࣮ੈքʹస༻
    

    View Slide

22. Tinder in VRChat v1
    

    View Slide

23. ࣾ಺͔Βग़ͨϑΟʔυόοΫ
    ਖ਼໘ʹΞϓϦબ୒ը໘ग़Δͷ͸अຐͰ͸ʁ
    Ϣʔβʔબ୒͸टճ͞ͳ͍ͱ͍͚ͳ͍ͷ͸ͪΐͬͱ໘౗
    Ϛονϯάͨ͠ਓͷҐஔΛϚοϓʹग़͍ͨ͠
    

    View Slide

24. Tinder in VRChat v2
    

    View Slide

25. ࢓૊Έ(1)
    άϥεʹOnInteract TriggerΛઃఆ͢Δ
    AutoCamΛඇΞΫςΟϒͰεςʔδ֎ʹઃஔ
    → άϥεͷTriggerͰΞΫςΟϒ
    

    View Slide

26. ࢓૊Έ(2)
    ΞϓϦͷը໘ߏ੒Λ֤UIຖʹάϧʔϐϯά
    

    View Slide

27. ࢓૊Έ(3)
    ࣍ͷը໘දࣔ͢ΔτϦΨʔΛOnInteractͰൃՐͤ͞Δͱ
    άϧʔϓຖΞΫςΟϒ/ඇΞΫςΟϒΛ੾ΓସΘΔ
    

    View Slide

28. ৄ͘͠͸noteͰʂ
    https://note.mu/sretks/n/n381b5e087f12
    

    View Slide

29. ग़དྷͨ͜ͱ
    άϥε޲͚ͷARΞϓϦͷUIΛݚڀ͢Δ౔୆͸࡞Εͨ
    → ΞϓϦͷબ୒ը໘΍ΞϓϦࣗମͷUIͳͲΛ࣮ݧతʹ࣮૷
    → ഑෍Ͱ͖ΔΑ͏ͳܗʹ͢Ε͹ϑΟʔυόοΫΛಘͳ͕Β
    վળͰ͖Δ
    

    View Slide

30. ग़དྷͳ͔ͬͨ͜ͱ(1)
    γʔϯ಺ͷ৘ใΛม਺ͱͯ͠ѻ͏ํ๏͕Ϧαʔν͖͠Εͳ͔ͬͨ
    → ֎෦؀ڥͷೝࣝػೳͳͲΛγϛϡϨʔτͰ͖ͳ͍
    → ୭͔Θ͔Δਓ͍ͨΒڭ͍͑ͯͩ͘͞
    

    View Slide

31. ग़དྷͳ͔ͬͨ͜ͱ(2)
    ֎෦APIܦ༝ͷ৘ใΛγʔϯ಺ʹ൓ө͢Δํ๏͕ݟ͔ͭΒͳ͔ͬͨ
    → ֎෦৘ใΛѻ͑Δखஈ͕WebPanelʹ੍ݶ͞ΕΔ
    → WebPanelࢯɺಥવͷࢮ…
    

    View Slide

32. ݁࿦
    VRͰARΞϓϦͷγϛϡϨʔτ͢Δͷ͸ྑͦ͞͏
    VRChat΋γϛϡϨʔτ؀ڥͱͯ͠Ϣʔβʔ΋͍Δͷ
    ͰΞϓϦͷ࣮ݧͷ৔ͱͯ͠΋ྑͦ͞͏
    ͨͩVRChat಺ͷࣗ༝౓ͷ੍໿͕ڧ͍ͨΊɺVRChat
    ଆ੍͕໿Λ؇Ίͯ͘Εͳ͍ͱ೉͍͠ɻɻɻ
    

    View Slide

33. Special Thanks!!
    VRChatʹؔ͢ΔΞυόΠε͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    VoxelKei͞Μ ϒλδΤϯ͞Μ ϠϚγλ͞Μ ௶૔͞Μ
    

    View Slide

34. AR/VR੍࡞ελδΦ࢝Ί·ͨ͠
    AR/VRࣄۀͷίϯηϓτϝΠΩϯά
    AR/VRΛ׆༻ͨ͠ΞϓϦ΍ιϦϡʔγϣϯ։ൃ
    AR/VRʹ͓͚ΔUI/UXσβΠϯͷఏҊ
    

    View Slide

35. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide

36. View Slide