HoloLens 2が破壊するMixed RealityのUI/UX ~HoloLens 2が体現する次世代のUI/UXとは？~

2019/07/27(土)
Kobe HoloLens ミートアップ vol.1
@神戸デジタル・ラボ 登壇資料です！

Transcript

1. © 2019 Kobe Digital Labo Inc. All Rights Reser ved . K o b e H o l o L e n s ミ ー ト ア ッ プ v o l . 1 セ ッ シ ョ ン 登 壇 資 料 H o l o L e n s 2 が 破 壊 す る M i x e d R e a l i t y の U I / U X ～ H o l o L e n s 2 が 体 現 す る 次 世 代 の U I / U X と は ？ ～ F u t o H o r i o / K o b e D i g i t a l L a b o I n c .
2. ・ 堀 尾 風 仁 ・ @ F u t o _ H o r i o ・ 神 戸 デ ジ タ ル ・ ラ ボ ・ 新 事 業 創 造 係 M R 班 班 長 ・ デ ベ ロ ッ パ ー ズ サ ミ ッ ト 2 0 1 9 ( 冬 ) 登 壇 ポ ス ト ・ ス マ ホ 時 代 に 向 け た U X 最 適 化 → https://codezine.jp/article/detail/11433 A B O U T M E
3. M i x e d R e a l i t y U I / U X の 研 究 開 発 ( R & D ) 国内最大手フォントメーカーのモリサワ様とMR空間におけるフォントの視認性を共同研究 ( 1 ) フ ォ ン ト の 視 認 性 と デ ザ イ ン 性 ( 2 ) フ ォ ン ト が ユ ー ザ ー に 与 え る 影 響 、 U X ( ユ ー ザ ー 体 験 ) の 違 い に つ い て C o m p u t e x 2 0 1 8 @ 台 北 , 台 湾
4. K D L が A R に 取 り 組 む キ ッ カ ケ と な っ た ス マ ー ト グ ラ ス ( 2 0 1 5 ) ARrowNavi 日 本 製 ス マ ー ト グ ラ ス Te l e p a t hy Wa l ke r を 活 用 し た ナ ビ ア プ リ
5. © 2019 Kobe Digital Labo Inc. All Rights Reserved . D i s p l a y A s s i s t a n t C r e a t i v e D e s i g n X 展 示 会 向 け ア プ リ ケ ー シ ョ ン @ C o m p u t e x 2 0 1 8 デ ザ イ ナ ー 向 け ア プ リ ケ ー シ ョ ン @ I n t e r B E E 2 0 1 8 K D L 開 発 事 例 ( 概 要 )
6. M i c r o s o f t M i x e d R e a l i t y パ ー ト ナ ー プ ロ グ ラ ム ( M R P P ) 認 定 資 格 取 得 ( 2 0 1 8 / 0 7 ) ※ 日本国内に26社のパートナーが存在
7. 本 日 の お 話 す る こ と / A g e n d a (1 ) MR Dev Days & Microsoft Build 2 0 1 9 で 体 感 し た Ho lo L en s 2 / 2 5 min (2 ) HT K → MRT Kv 2 へ の ポ ーテ ィ ング Tips / 2 0 min (3 ) Ho lo L en s 2 で ど う 変 わる UI /UX ？ / 5 min
8. 本 日 の お 話 す る こ と / A g e n d a (1 ) MR Dev Days & Microsoft Build 2019 で 体 感 し た Ho lo L en s 2 / 2 5 min (2 ) HT K → MRT Kv2 へ の ポ ー テ ィン グ Tips / 2 0 min (3 ) Ho lo L en s 2 で ど う 変 わる UI /UX ？ / 5 min
11. M i c r o s o f t B u i l d i n g s 9 2 - ど ん な 場 所 ？ https://japan.cnet.com/article/35140105/
12. M R D e v D a y s ー 世 界 か ら 約 4 0 0 名 の エ ン ジ ニ ア が 集 ま る 8時半スタートなのに、8時の時点でこの熱気！ 世界が注目する Microsoft HoloLens 2 恐るべし！
13. M i c r o s o f t H o l o L e n s 2 / H a n d s O n 実 物 は 非 常 に 、 い や と て も 、 、 、 本 当 に 最 高 で し た 。
15. HoloLens HoloLens 2
19. E y e T r a c k i n g / 視 線 追 跡 で 可 能 に な る 操 作 圧倒的未来、、だが、現代人は慣れるのに時間が必要
20. E y e T a r g e t i n g / 視 線 の 向 き で オ ブ ジ ェ ク ト を 指 定 頭を振らずオブジェクトを選択することが可能に (Eye-gaze != Head Gaze)
24. M R T K v 2 ー H a n d I n t e r a c t i o n s C r a s h C o u r s e HoloLens 2 発表時にデモをしていた Julia さん による 講演
25. M R T K v 2 ー イ ン タ ラ ク シ ョ ン 部 分 で の 取 り 組 み 約3年前から新たな [ Hand Interaction ] のカタチを模索してきた
26. M R T K v 2 ー 新 し い U I / U X と は ？ ユーザーが自然なカタチで仮想オブジェクトとインタラクション可能に
27. M R T K v 2 ー 3 つ の コ ン ポ ー ネ ン ト MRTKv2 / HoloLens 2 では 3つの操作方法が存在
28. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ https://docs.microsoft.com/en-us/windows/mixed-reality/direct-manipulation Visual (視覚) と Audio (聴覚) で触覚を補う / Proximity Light (近接光)
29. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ https://docs.microsoft.com/en-us/windows/mixed-reality/direct-manipulation 仮想オブジェクトの機能を視覚的に知らせる / Affordance (環境が動物に与える意味)
30. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ https://blogos.com/article/31798/ yより画像を引用。
31. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ https://docs.microsoft.com/en-us/windows/mixed-reality/direct-manipulation 物理世界と同じ動作で仮想オブジェクトを操作 / Instinctual Gestures (直観的な操作)
32. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ https://docs.microsoft.com/en-us/windows/mixed-reality/direct-manipulation 遠くにあるオブジェクトは、Hand Ray にて操作可能 ( CGまでの距離 50cm 閾値 – 腕の長さ基準 )
33. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ https://docs.microsoft.com/en-us/windows/mixed-reality/direct-manipulation 2D 画面の操作は、スマートフォンと同等のUXを実現
34. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ ※ 注 意 点 https://www.youtube.com/watch?v=c1CZsqwnWtM Julia さん 指5本でピアノ弾いてる！
35. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ ※ 注 意 点 あれ 指1本でしか弾けない!? H a n d I n t e r a c t i o n E x a m p l e
36. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ ※ 注 意 点 https://docs.microsoft.com/en-us/windows/mixed-reality/direct-manipulation 指の衝突判定は人差し指のみ ( 理由 : 触覚がないため意図しない動作が多発 )
37. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ ※ 注 意 点 ただし、指5本認識していない という訳ではない。 理論上、個別に実装は可能！ ( 右手、左手、表裏を認識可能 )
38. M R T K v 2 ー ど の よ う に 没 入 感 の 高 い U I / U X を 実 現 し た の か ？ ※ 注 意 点 https://twitter.com/tcmicka/status/1149385047624974336 H a n d B a s e d M e n u E x a m p l e 左手 / 右手 を裏返すとハンドメニューを表示することが可能
39. M R T K v 2 ー 実 機 無 い 状 況 で の 検 証 方 法 ( U n i t y E d i t o r ) [W] 前進 [S] 後退 [A] 左に進む [D] 右に進む [ Shift ] 左手表示 [ Space ] 右手表示 & [ 左クリック ] Grasp (掴む) & [Q] 右回転 [E] 左回転 [R] 上回転 [F] 下回転
40. M i x e d R e a l i t y グ ロ ー バ ル 市 場 動 向 に つ い て 全世界におけるMR市場動向、地域の市場特性等を解説
41. M i x e d R e a l i t y グ ロ ー バ ル 市 場 動 向 に つ い て 2020年から2023年にかけて、市場規模が約8倍に伸びるとの予測
42. M a q u t t e – M R プ ロ ト タ イ ピ ン グ ツ ー ル VR空間の中でMRアプリケーションのデザインが可能 / 社内ツールとして開発された
43. M a q u t t e – サ ー ビ ス ロ ゴ の 検 討 サービスロゴは約30種類作った / プロダクト愛が凄い
44. M a q u t t e – ラ イ ブ デ ザ イ ン プレゼン中にいきなりライブデザイン始まる / 絵になるデザイン姿
45. M a q u t t e – P R 動 画 帰ったら宣伝してとのことなので、PRします！
46. 本 日 の お 話 す る こ と / A g e n d a (1 ) MR Dev Days & Microsoft Build 2 0 1 9 で 体 感 し た Ho lo L en s 2 / 2 5 min (2 ) HT K → MRTKv 2 へ の ポ ーテ ィ ング Tips / 2 0 min (3 ) Ho lo L en s 2 で ど う 変 わる UI /UX ？ / 5 min
47. M R T K v 2 / M i x e d R e a l i t y To o l k i t - U n i t y v 2 . 0 . 0 - R C 2 . 1 https://github.com/microsoft/MixedRealityToolkit-Unity Microsoft が主導する オープンソースプロジェクト。 MRアプリケーションの開発を 加速させるコンポーネント群 &サンプルが無償で公開されています
48. M R T K v 2 / M i x e d R e a l i t y T o o l k i t - U n i t y v 2 . 0 . 0 - R C 2 . 1 開発に有用なビルディングブロックがサンプルとして試せます。 H a n d I n t e r a c t i o n E x a m p l e
49. M R T K v 2 / M i x e d R e a l i t y To o l k i t - U n i t y v 2 . 0 . 0 - R C 2 . 1 https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Contributing/Roadmap.html RC ( Release Candidate:リリース候補版 ) / ロードマップでは7月中に正式リリース ( ※OpenVRにも対応 )
50. G e t t i n g y o u r e x i s t i n g a p p l i c a t i o n r e a d y f o r H o l o L e n s 2 https://docs.microsoft.com/en-us/windows/mixed-reality/mrtk-porting-guide
51. U p d a t e / I n s t a l l C h e c k L i s t https://docs.microsoft.com/en-us/windows/mixed-reality/install-the-tools 約1週間前に 公式ドキュメントが 更新されていた Visual Studio 2019 ( 16.1 or higher ) ※ GitHub の Requirement はそのまま。
52. U n i t y 2 0 1 8 . 4 ( L T S ) v s U n i t y 2 0 1 9 https://github.com/MicrosoftDocs/mixed-reality/commit/6865bfba6f67fb292351e6881a9b28304591ff79 基本的には、Unity 2018.4.x ( LTS ) を推奨 / ARM64ビルドを試したい場合は、Unity 2019.1+ を使用 ( ※ GitHub上では、Unity 2018.4.x が Required となっている。)
53. U n i t y : S c r i p t i n g B a c k e n d 設 定 ( . N E T → I L 2 C P P ) Unity 2019.1+ より スクリプティングバックエンド .NET が廃止される ( REMOVE ) → 公式ドキュメントでは、.NET から IL2CPP への変更を推奨。 ※ ただし、IL2CPP にするとUnityからVisual Studioへのビルド時間が長くなる [ Player Settings ] > [ Other Settings ] https://docs.microsoft.com/en-us/windows/mixed-reality/recommended-settings-for-unity
54. U n i t y : S c r i p t i n g B a c k e n d 設 定 ( . N E T → I L 2 C P P ) ビ ル ド 時 間 最 適 化 https://docs.unity3d.com/Manual/IL2CPP-OptimizingBuildTimes.html (1) 差分ビルド ( ビルド時に前回ビルド時と同一フォルダを選択する ) (2) プロジェクトフォルダをウィルス対策ソフト対象から除外する (3) プロジェクトフォルダをSSDに保存
55. U n i t y 設 定 最 適 化 : D e p t h B u f f e r S h a r i n g ( 深 度 バ ッ フ ァ の 共 有 ) https://ja.wikipedia.org/wiki/Z%E3%83%90%E3%83%83%E3%83%95%E3%82%A1 Depth Buffer U n i t y メ イ ン カ メ ラ か ら の 深 度 ( 0 ～ 1 で 表 現 )
56. U n i t y 設 定 最 適 化 : D e p t h B u f f e r S h a r i n g ( 深 度 バ ッ フ ァ の 共 有 ) [ P l a y e r S e t t i n g s ] > [ X R S e t t i n g s ] > [ E n a b l e D e p t h B u f f e r S h a r i n g ] か ら 設 定 可 能 Windows へ Depth Buffer を共有することで、ビジュアル品質を向上させることが可能 (16-bit depth) https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-porting-guide Z フ ァ イ テ ィ ン グ : 深 度 情 報 ( D e p t h B u f f e r ) の 精 度 が 低 く 描 画 時 に チ ラ つ き が 発 生 す る 現 象
57. M R T K v 2 / U n i t y E d i t o r ヒ エ ラ ル キ ー 構 成 旧 : HTK ( HoloToolkit ) 新 : MRTK ( Mixed Reality Toolkit ) バージョンアップで、シンプルで分かりやすいヒエラルキー構成に
58. M R T K v 2 / 3 D ア イ コ ン を 小 さ く す る 方 法 ( 水 色 の 表 示 ) 開発時にオブジェクトが見えない、、という問題もこの設定で一発解消 タブ[Gizmos]を選択 → [3D Icons]を最小設定に 設定変更前 設定変更後
59. M R T K v 2 / H T K 2 0 1 7 → M R T K v 2 https://microsoft.github.io/MixedRealityToolkitUnity/Documentation/HTKToMRTKPortingGuide.html HTK 2017 ( HoloToolkit ) → MRTK v2 ( Mixed Reality Toolkit ) インタフェース &イベントマッピングの変更 → 既存のスクリプトへの変更対応が必要
60. M i x e d R e a l i t y To o l k i t P r o f i l e プロファイルを使って、Mixed Reality アプリケーションの設定が可能に ※ MRTKv2 の中には、8つのプロファイルが存在
61. D i a g n o s t i c s / ア プ リ ケ ー シ ョ ン 診 断 メモリ使用率 ( CPU ) や、FPSなどを簡単に計測することが可能
62. ハ ン ド ト ラ ッ キ ン グ の 可 視 化 / H a n d T r a c k i n g https://microsoft.github.io/MixedRealityToolkitUnity/Documentation/InputSystem/HandTracking.html H a n d J o i n t V i s u a l i z a t i o n を 有 効 化 し た 状 態 ( S h i f t + 左 ク リ ッ ク で ) H a n d M e s h V i s u a l i z a t i o n を 有 効 化 し た 状 態 ( U n i t y E d i t o r 上 で は 動 作 せ ず )
63. U n i t y + M R T K v 2 ビ ル ド し た ら エ ラ ー 出 る 問 題 Unity上でエラーは出ているが、ビルド自体は正常に終了してる模様 【 エラー内容 】 Reference Rewriter found some errors while running with command "--target=Temp¥StagingArea¥Data¥ Managed¥Assembly-CSharp.dll …
64. U n i t y + M R T K v 2 ビ ル ド し た ら エ ラ ー 出 る 問 題 https://stackoverflow.com/questions/55916016/problem-building-unity-project-with-mrtk-v2-rc1 Unity ビルドシステム側のバグ 経験則として、 “Build Succeeded”と表示されて 正常に動作しているので、 アウトプット先のフォルダを 確認してみてください。
65. E y e T r a c k i n g / 視 線 追 跡 を 使 用 す る 場 合 の 留 意 点 https://microsoft.github.io/MixedRealityToolkitUnity/Documentation/EyeTracking/EyeTracking_BasicSetup.html Visual Studio 2017上での作業 Package.appxmanifest 機能タブより「視線入力」 Capability 設定を追加する
66. M R T K v 2 S t a n d a r d S h a d e r MRTKv2 には数多くのShader (描画方法を記述するプログラム) が含まれている https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/README_MRTKStandardShader.html
67. M R T K v 2 S t a n d a r d S h a d e r / H o v e r L i g h t 仮想オブジェクトに Hover (ホバー) した際にライトを当てる設定 ポ イ ン タ ー : 衝 突 な し 光 無 し ポ イ ン タ ー : 衝 突 あ り 光 有 り
68. M R T K v 2 S t a n d a r d S h a d e r / P r o x i m i t y L i g h t ( 近 接 光 ) 仮想オブジェクトに近づいた際に光を当てる設定 P r o x i m i t y L i g h t 手 が 遠 い 時 : 光 無 し P r o x i m i t y L i g h t 手 が 近 い 時 : 光 有 り
69. M R T K v 2 / T o o l t i p s T o o l t i p P r e f a b I n s p e c t o r 上 か ら To o l t i p の 向 き 、 挙 動 を 設 定 可 能 https://github.com/microsoft/MixedRealityToolkit-Unity/blob/mrtk_release/Documentation/README_Tooltip.md
70. 本 日 の お 話 す る こ と / A g e n d a (1 ) MR Dev Days & Microsoft Build 2 0 1 9 で 体 感 し た Ho lo L en s 2 / 2 5 min (2 ) HT K → MRTKv 2 へ の ポ ーテ ィ ング Tips / 2 0 min (3 ) Ho lo L en s 2 で ど う 変 わる UI /UX ？ / 5 min
71. 破 壊 さ れ た M i x e d R e a l i t y U I / U X ー ユ ー ザ ー と オ ブ ジ ェ ク ト の 距 離 H T K 2 0 1 7 ( H o l o T o o l k i t ) → H o l o L e n s ( 1 s t g e n 向 け ) N e a r C l i p 0 . 8 5 m 推 奨 M R T K v 2 ( M i x e d R e a l i t y To o l k i t ) → H o l o L e n s 2 向 け ( プ ロ フ ァ イ ル 使 用 時 ) N e a r C l i p 0 . 1 0 m 推 奨 ※ こ れ ま で 近 く の オ ブ ジ ェ ク ト は 描 画 せ ず 、 視 野 角 に よ る 見 切 れ 等 に 対 応 し て い た 仮想オブジェクトを表現できる範囲が広がった ( 視野角向上 + ハンドトラッキング )
72. 破 壊 さ れ た M i x e d R e a l i t y U I / U X ー ユ ー ザ ー と オ ブ ジ ェ ク ト の 距 離 H o l o L e n s ( 1 s t g e n ) → 近 く に あ る と 操 作 し に く い ( H e a d - G a z e + A i r Ta p ) H o l o L e n s 2 → 近 く に 無 い と 操 作 し に く い ! ? ( To u c h & P r e s s ) ボ タ ン 配 置 ( 位 置 )
73. 0 . 7 5 m に 生 ま れ た 大 き な 溝 ( N e a r C l i p ) H o l o L e n s ( 1 s t g e n ) と H o l o L e n s 2 U I / U X の 共 通 使 用 は 難 し そ う
74. Thanks. 関 西 ( 神 戸 ) で H o l o L e n s 開 発 を 盛 り 上 げ る べ く 一 緒 に 頑 張 り ま し ょ う ！