Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VRにおけるUI設計
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
donabe
December 11, 2021
Programming
160
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
VRにおけるUI設計
VRの最大の敵である「酔い」に対抗すべくVRにおけるUIについてまとめてみました。
donabe
December 11, 2021
More Decks by donabe
See All by donabe
Unityがマルチプラット フォームビルドできる理由は? よく聞くIL2CPPって? 調べてみました!
donabe3
0
36
ハッカソン請負人の 開発ルーティンを紹介!
donabe3
0
88
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
370
OutOfRange 【プロトスプリントリーグ】
donabe3
0
110
Unityで都市開発シミュレーションゲーム開発をしてみよう
donabe3
0
500
現実 VS バーチャルのマルチプレイゲームを作ろう
donabe3
0
220
Speech to Textureで 思い通りに世界を改変しよう
donabe3
0
43
院試までなにやったか
donabe3
0
53
XR Interaction toolkit & XRHands & Passthrough API で MR 開発
donabe3
0
300
Other Decks in Programming
See All in Programming
Swift愛好会100回記念 第1回を振り返る
jollyjoester
0
120
Gmail/Google DriveをトリガーにAIエージェントを動かそう! / Run AI agents with Gmail/Google Drive as triggers!
har1101
3
470
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
akase244
0
120
ソフトウェアラスタライザ
fadis
1
790
AWS DevOps Agentで インシデント対応をAIに任せたい
honmarkhunt
6
2.2k
in-process GraphQL のすすめ #ginzajs
izumin5210
4
1.5k
Pythonの実行はどこまで賢くなったのか? CPythonとPyPyから見る最適化のしくみ
curekoshimizu
4
2.8k
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
mazrean
0
130
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
pkmiya
0
140
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
slashnephy
0
220
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
120
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
wat
0
670
Featured
See All Featured
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.6k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
230
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
530
Facilitating Awesome Meetings
lara
57
7.1k
The Invisible Side of Design
smashingmag
301
52k
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
500
Making the Leap to Tech Lead
cromwellryan
135
10k
How to Talk to Developers About Accessibility
jct
2
540
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
600
Designing Experiences People Love
moore
143
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Transcript
VRにおける UI設計 土鍋
自己紹介 • 土鍋 • 学部二年 • A-PxL(VR部)代表 • Twitter:@donadonadonabe •
普段はUnityでVRゲームを作ってます • IoTもちょっぴりかじってます→
VRにおける最大の敵とは なんでしょうか??
それは「酔い」です
VR酔いによる影響 • 酔ってしまってゲームに集中できない • 長時間プレイできない • VRは酔っちゃうからもうやらないとなってしまう… →VRコンテンツを作るものとして 「酔い対策」は必須!!
原因 • 平衡感覚と視覚情報の不一致 (空を飛んでいるのに椅子に座っている) • 現実の感覚との著しい違い (解像度が低い、カクつく)
対策 • 視野角の確保 • 遅延をなくす • リフレッシュレート • 解像度を上げる •
トラッキング方法 • VR空間の移動方法 • 急な動作をなくす • VR向けのUI • などなど
対策 • 視野角の確保 • 遅延をなくす • リフレッシュレート • 解像度を上げる •
トラッキング方法 • VR空間の移動方法 • 急な動作をなくす • VR向けのUI • などなど HMDの性能による。 基本的にコンテンツを作る人は関与できない。
VRにおけるUI設計の重要性 • 一番は酔い対策 • VRに慣れていない人でもすぐに理解できる • 次の動きを予測させる (急な動作が演出上必要な際などに利用できる)
UIの完成度が高いゲーム 「Half Life Alyx」
Half Life Alyxから学ぶ VRにおけるUI設計において意識すべき点 • 目線にUIを固定しない →意識がUIに集中した状態で周りの景色が動くとすごく酔う →ゆっくり視線を追従するor空間、手に固定 • 距離(近すぎず遠すぎず)
• サイズ(小さすぎでかすぎ)
Half Life Alyxから学ぶ VRにおけるUI設計において意識すべき点 • オブジェクトに埋まらない →常にオブジェクトの前に • 階層(ネスト)を深くしない →特にVRだとUI操作が増えるのは良くない
• 初心者でもわかりやすく • かっこよく!ロマン叶える!
実際に意識しながらゲームを作ってみた (未完成) • UIも楽しいものにしたい! • かっこよく出現するUI • 初めてプレイする人にも優しく • VRでしかできない体験を!!
→視点に追従する常に表示するUI(HPなど) →手を広げて自由な大きさで開けるメニュー
デモ
詰まったところ • UI向けのTransformがあるので すが、これが曲者 • 3Dゲーム内で2Dを扱う • VRのようにCanvasをすべて World Spaceものでは座標系を
考える際にかなり複雑になる。 • 解像度等もUIと3D空間とで 別々で調整が面倒くさい。
ベクトルとクォータニオン(四元数) • 三次元座標にベクトルを用いるのはさすがに慣れたが、 クオータニオンはまだ慣れない。 • インスペクターではオイラー角のrotationがscriptでは quaternion制御
まとめ • テクスチャやエフェクト、アニメーションをこだわれば良くなり そう。 • バグが大量にあるので修正必須
参考資料 • 実際にデザインしてみる!VRアプリのUIデザインを作るプロセス • クォータニオン (Quaternion) を総整理! ~ 三次元物体の回転と姿勢を鮮 やかに扱う
~ • [Unity][C# Script] 回転を自在にあやつろう。 • 【Unity】2つのベクトル間の角度を求める • RectTransform
ご清聴ありがとうございました