Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

AR_Ojisan
August 26, 2018
230

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

AR_Ojisan

August 26, 2018
Tweet

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