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

Microsoft Mesh に学ぶ Mixed Reality の気持ちの良い UX とは? ーMRTK v2.7.3 で実験してみた

Microsoft Mesh に学ぶ Mixed Reality の気持ちの良い UX とは? ーMRTK v2.7.3 で実験してみた

Kobe HoloLens ミートアップ vol.5 - 春休みスペシャル

Microsoft Mesh に学ぶ
Mixed Reality の気持ちの良い UX とは?
ーMRTK v2.7.3 で実験してみた

登壇で使用した資料となります。

堀尾風仁 Futo Horio

March 23, 2022
Tweet

More Decks by 堀尾風仁 Futo Horio

Other Decks in Technology

Transcript

  1. 神 戸 デ ジ タ ル ・ ラ ボ
    新 事 業 創 造 係 堀 尾 風 仁
    K o b e H o l o L e n s ミ ー ト ア ッ プ v o l . 5
    Microsoft Mesh に学ぶ
    Mixed Reality の気持ち良い UX とは?
    -MRTK v2.7.3 で実験しみてた

    View Slide

  2. 堀 尾 風 仁
    株 式 会 社 神 戸 デ ジ タ ル ・ ラ ボ
    コ ミ ュ ニ テ ィ 運 営
    ・ A R K O B E
    ・ A z u r e T e c h L a b .
    M i c r o s o f t M V P
    f o r W i n d o w s D e v e l o p m e n t
    ( 2 0 2 0 - 2 0 2 2 )
    Twitter アカウント
    @Futo_Horio

    View Slide

  3. Microsoft Mesh とは
    h t t p s : / / w w w . y o u t u b e . c o m / w a t c h ? v = l h K n 9 m j y _ Q M
    Microsoft Mesh ハンズオンデモ | 協調的な複合現実体験を提供する新しいプラットフォーム
    H o l o L e n s や P C か ら M i x e d R e a l i t y 空 間 へ ダ イ ブ し て 、 ホ ロ グ ラ フ ィ ッ ク を 共 有 し な が ら コ ミ ュ ニ ケ ー シ ョ ン が 可 能
    P u b l i c P r e v i e w
    アバターで相手の動きをリアルに感じることができたり、
    クラウドレンダリングで容量の大きなモデルも表示できる

    View Slide

  4. 気持ち良いユーザー体験 を言語化したい
    UX (User Experience)

    View Slide

  5. ( ユ ー ザ ー の 動 作 に 対 し て ) 周 囲 の 環 境 が 反 応 ( 変 化 ) 、 変 化 量 を 知 覚 し て 意 味 理 解 す る こ と
    動 作
    ( 2 ) 意 味 理 解
    世 界 ( 物 理 世 界 と デ ジ タ ル 世 界 )
    ( 1 ) 変 化 の 知 覚
    ( 視 覚 ・ 聴 覚 ・ 嗅 覚 ・ 味 覚 ・ 触 覚 )
    まず ユーザー体験 を言語化してみる

    環境 (場所)
    コンピューター
    ユ ー ザ ー 自 身 周 囲 の 環 境
    アクション
    反応 (変化)
    フィードバック

    View Slide

  6. 周 囲 の 環 境 の 変 化 が 自 分 の 期 待 し た 内 容 だ っ た か ど う か ( ユ ー ザ ー の 主 観 に 依 存 す る )
    動 作
    ( 2 ) 意 味 理 解
    世 界 ( 物 理 世 界 と デ ジ タ ル 世 界 )
    ( 1 ) 変 化 の 知 覚
    ( 視 覚 ・ 聴 覚 ・ 嗅 覚 ・ 味 覚 ・ 触 覚 )
    では 気持ち良い とは何か?

    環境 (場所)
    コンピューター
    ユ ー ザ ー 自 身 周 囲 の 環 境
    アクション
    反応 (変化)
    フィードバック

    View Slide

  7. Mixed Reality に対するユーザーの期待値
    AR (拡張現実)
    VR (仮想現実)
    ホログラフィック (デジタルコンテンツ) と
    物理世界が自然に近いカタチで融合している体験 かつ 目的達成
    物理世界の存在を忘れ、
    完全にデジタル世界へ入り込んでいる体験 かつ 目的達成
    ※ 当たり前だけど、AR と VR で気持ちの良い UX は異なる
    ※ ユーザー体験という名称の通り、人それぞれ気持ち良さを感じる部分は異なる

    View Slide

  8. Mixed Reality を構成する要素
    h t t p s : / / d o c s . m i c r o s o f t . c o m / j a - j p / w i n d o w s / m i x e d - r e a l i t y / d i s c o v e r / m i x e d - r e a l i t y # e n v i r o n m e n t a l - i n p u t - a n d - p e r c e p t i o n
    E n v i r o n m e n t
    環 境
    H u m a n
    人 間
    C o m p u t e r
    コ ン ピ ュ ー タ ー
    M i x e d
    R e a l i t y
    C o n v e n t i o n a l
    R e a l i t y
    H u m a n
    C o m p u t e r
    I n t e r a c t i o n
    P e r c e p t i o n
    Mixed Reality とは

    View Slide

  9. 体 験
    Mixed Reality コンテンツの UX 構成要素 (ver 0.1.0)
    Environment Human Computer
    環 境 の 広 さ ( 体 積 )
    環 境 光 ( 照 度 )
    環 境 材 質
    エ ッ ジ ク ラ ウ ド
    U X
    U X
    ホ ロ グ ラ ム の 安 定 化
    U X
    頭 ( H e a d )
    視 線 ( E y e )
    手 ( H a n d )
    音 声 ( V o i c e )
    ネ ッ ト ワ ー ク
    ( 通 信 速 度 )
    デ ー タ ス ト ア
    レ ン ダ リ ン グ
    シ ェ ア リ ン グ
    物 理 環 境 の
    セ ン シ ン グ
    A I ( 人 工 知 能 )
    I n t e r a c t i o n ( 3 つ の 要 素 が 相 互 作 用 す る 状 態 )
    物 理 環 境
    ( ど こ で )
    操 作 性 コ ミ ュ ニ ケ ー シ ョ ン
    体 験 人 数
    ( だ れ と )
    [ 1 人 / 複 数 ]
    [ 同 期 / 非 同 期 ]
    体 験 場 所 ・ 時 間
    近 接
    遠 隔
    体 験 時 間
    ( い つ )
    ( ど の く ら い )
    デ バ イ ス メ ン テ
    コ ン ト ロ ー ラ ー
    ( C o n t r o l l e r )
    イ ン タ ラ ク シ ョ ン の 可 能 性 を 広 げ る
    ホ ロ グ ラ フ ィ ッ ク
    色 、 ラ イ ト 、 素 材
    ス ケ ー ル
    タ イ ポ グ ラ フ ィ
    サ ウ ン ド

    View Slide

  10. 体 験
    Mixed Reality コンテンツの UX 構成要素 (ver 0.1.0)
    Environment Human Computer
    環 境 の 広 さ ( 体 積 )
    環 境 光 ( 照 度 )
    環 境 材 質
    エ ッ ジ ク ラ ウ ド
    U X
    U X
    ホ ロ グ ラ ム の 安 定 化
    U X
    頭 ( H e a d )
    視 線 ( E y e )
    手 ( H a n d )
    音 声 ( V o i c e )
    ネ ッ ト ワ ー ク
    ( 通 信 速 度 )
    デ ー タ ス ト ア
    レ ン ダ リ ン グ
    シ ェ ア リ ン グ
    物 理 環 境 の
    セ ン シ ン グ
    A I ( 人 工 知 能 )
    I n t e r a c t i o n ( 3 つ の 要 素 が 相 互 作 用 す る 状 態 )
    操 作 性 コ ミ ュ ニ ケ ー シ ョ ン
    体 験 人 数
    ( だ れ と )
    [ 1 人 / 複 数 ]
    [ 同 期 / 非 同 期 ]
    体 験 場 所 ・ 時 間
    近 接
    遠 隔
    デ バ イ ス メ ン テ
    コ ン ト ロ ー ラ ー
    ( C o n t r o l l e r )
    イ ン タ ラ ク シ ョ ン の 可 能 性 を 広 げ る
    ホ ロ グ ラ フ ィ ッ ク
    色 、 ラ イ ト 、 素 材
    ス ケ ー ル
    タ イ ポ グ ラ フ ィ
    サ ウ ン ド
    こ の 資 料 で 説 明 す る 領 域
    物 理 環 境
    ( ど こ で )
    体 験 時 間
    ( い つ )
    ( ど の く ら い )

    View Slide

  11. Microsoft Mesh から 気持ち良い UX を学ぶ

    View Slide

  12. Microsoft Mesh 気持ち良い UX ポイント
    3 D モ デ ル の 操 作 ア ク シ ョ ン
    他 の ユ ー ザ ー と ア バ タ ー で コ ミ ュ ニ ケ ー シ ョ ン が 可 能 ( シ ェ ア リ ン グ )
    ク ラ ウ ド レ ン ダ リ ン グ で 容 量 の 大 き な モ デ ル を 表 示
    サ イ ン イ ン 時
    ア プ リ 起 動 時
    メ ニ ュ ー 表 示 切 り 替 え 時
    コ ン テ ン ツ 体 験 時
    チュートリアル表示
    サインイン時のアニメーションとサウンド
    メニューのホバーアクション
    メニュー表示切り替え時のアニメーション
    体験時間
    0 (m)
    15 (m)
    etc ..

    View Slide

  13. Microsoft Mesh 気持ち良いUX ポイント(1)
    ハ ン ド メ ニ ュ ー と 空 間 に 配 置 す る メ ニ ュ ー で
    ア イ コ ン を 注 視 す る と 、 ボ タ ン の ラ ベ ル が 表 示 さ れ る
    ラ ベ ル 表 示 は フ ェ ー ド イ ン / ア ウ ト 効 果 も . .

    View Slide

  14. Microsoft Mesh 気持ち良いUX ポイント②
    サ イ ン イ ン 完 了 時 に パ ー テ ィ ク ル と 効 果 音 で
    ス ペ ー ス へ の ダ イ ブ を 表 現 し て い る ( 没 入 感 U P )
    ス テ ー ジ が ス ケ ー ル ア ッ プ と 同 時 に 色 が 濃 く な っ て い る

    View Slide

  15. Microsoft Mesh 気持ち良いUX ポイント③
    空 間 に 配 置 す る メ ニ ュ ー の ボ タ ン を 押 す と 、
    詳 細 メ ニ ュ ー が ア ニ メ ー シ ョ ン 付 き で 表 示 さ れ る

    View Slide

  16. Microsoft Mesh 気持ち良いUX ポイント④
    ア イ ト ラ ッ キ ン グ で 、 操 作 可 能 な オ ブ ジ ェ ク ト で あ る こ と を ユ ー ザ ー に 伝 え て い る
    ( ハ ン ド レ イ が オ フ に な っ て い る )

    View Slide

  17. Microsoft Mesh 気持ち良いUX ポイント⑤
    音 (BGM + 効果音)

    View Slide

  18. MRTK ( Mixed Reality Toolkit ) とは
    MR アプリケーション開発を加速させる ツール や UX ビルディングブロック を提供するオープンソースプロジェクト ( 最新版 : v2.7.3 )
    ・ クロスプラットフォームの入力システム、3次元空間のインタラクションやUI を提供
    ・ ラピッドプロトタイピングの実現 : Unity Editor シミュレーションですぐに変更を確認
    ・ 幅広いプラットフォームをサポート ( eg OpenXR, WinMR, Oculus, Mobile )
    ・ Unity, Unreal 各ゲームエンジン向けのプロジェクトが用意されている
    ( ※ 今回は MRTK-Unity を使用 )
    ・ MIT ライセンス での提供 ( 商用利用可能 )
    https://github.com/microsoft/MixedRealityToolkit-Unity

    View Slide

  19. https://docs.microsoft.com/ja-jp/windows/mixed-reality/design/app-patterns-landingpage
    一般的なコントロールと動作

    View Slide

  20. MRTK v3
    https://www.youtube.com/watch?v=aN38B9HL_sI
    2022/1/18(火)Tokyo HoloLens ミートアップ vol 29 HoloLens日本上陸五周年記念!
    現在、新しいバージョンの MRTK v3 の開発が進んでいます。
    詳しい内容は、YouTube のアーカイブ動画をご覧ください

    View Slide

  21. MRTK v3 ロードマップ
    https://www.youtube.com/watch?v=aN38B9HL_sI
    2022/1/18(火)Tokyo HoloLens ミートアップ vol 29 HoloLens日本上陸五周年記念!
    今年1月に開催された Tokyo HoloLens ミートアップの Yoon さんの発表で開発情報の共有がありました。
    開発中 パブリックプレビュー リリース
    現在 (2022年1月) 2022年春~夏頃 未定
    ・UX ビルディングブロックのポーティング
    ・内部バリデーション
    ・パフォーマンス分析
    ・OpenXR と XRI (XR Interaction Tool)
    上に構築される新しいアーキテクチャ
    ・新しい Mixed Reality デザイン言語
    ・独立したサブシステム
    ・UIテーマシステム
    ・データバインディング
    ・ナビゲーターコレクション
    ・ボルメティックレイアウトツール
    ・入力シミュレーション向上
    ・コア UX ビルディングブロック

    View Slide

  22. Microsoft Mesh ライクな UX を実験してみた(1)
    E y e T r a c k i n g を 使 用 し て メ ニ ュ ー ラ ベ ル の 表 示 / 非 表 示 を 試 し て み た

    View Slide

  23. Eye Tracking を有効にする(1)
    M i x e d R e a l i t y T o o l k i t > I n p u t > I n p u t D a t a P r o v i d e r を 展 開 す る
    Input Data Provider に
    ・OpenXR XRSDK Device Manager
    ・OpenXR XRSDK Eye Gaze Provider
    が登録されていることを確認する
    ※ Unity Editor で アイトラッキングを検証する場合は、Input Data Providers > Input Simulation Service > Eye Gaze Simulation を設定する必要がある

    View Slide

  24. Eye Tracking を有効にする(2)
    M i x e d R e a l i t y T o o l k i t > I n p u t > P o i n t e r s を 展 開 す る
    Gaze Settings の設定を変更する
    ・Gaze Cursor Prefab を EyeGazeCursor に変更
    ・IsEyeTrackingEnabled にチェックを入れる

    View Slide

  25. Eye Tracking を有効にする(3)
    P r o j e c t S e t t i n g s > X R P l u g - i n M a n a g e m e n t > O p e n X R を 開 く
    Interaction Profiles に
    ・Eye Gaze Interaction Profile を追加する

    View Slide

  26. ハンドメニューを追加する
    M R T K . E x a m p l e s に 含 ま れ る H a n d M e n u _ S m a l l _ H i d e O n H a n d D r o p . p r e f a b を シ ー ン に 追 加 す る
    手の平を返すジェスチャーで表示されるハンドメニュー
    (手を下げると、メニューも非表示となる)
    シ ー ン ビ ュ ー
    ゲ ー ム ビ ュ ー ( 再 生 時 )

    View Slide

  27. ボタンラベル α値をフェードイン/アウトするスクリプトを準備する
    イベント時に呼び出すためのメソッドを実装
    ・FadeIn() / FadeOut()
    ゲームオブジェクトが有効になった時
    ・ラベルの文字カラーα値を 0 (透明) にする
    メンバー変数を作成する

    View Slide

  28. ボタンラベル α値をフェードイン/アウトするスクリプトを準備する
    コルーチン : fadeInLabel() を実装する
    ・遅延させる (duration)
    ・10フレームでフェードイン (α値: 1)
    コルーチン : fadeOutLabel() を実装する
    ・遅延させる (duration)
    ・10フレームでフェードアウト (α値: 0)

    View Slide

  29. Eye Tracking で ラベル を 表示/非表示 する
    PressableButton へアタッチして、ラベルオブジェクトを設定する
    EyeTrackingTarget を追加して、メソッドを登録する
    ヒエラルキービュー
    P r e s s a b l e B u t t o n に 必 要 な コ ン ポ ー ネ ン ト を ア タ ッ チ す る
    オブジェクトを見た時、FadeIn() 発火
    オブジェクト以外を見た時、FadeOut() 発火

    View Slide

  30. M e s h ラ イ ク な メ ニ ュ ー の 表 示 切 り 替 え 時 の ア ニ メ ー シ ョ ン を 実 装 し て み ま し た
    Microsoft Mesh ライクな UX を実験してみた(2)

    View Slide

  31. 気持ちの良いアニメーションをトレースする
    気 持 ち の 良 い ア ニ メ ー シ ョ ン を 因 数 分 解 す る
    ・メニューボタンを押す ・チュートリアル表示が表示される
    (アニメーション開始)
    ・少し小さいスケール ( 0.7~0.8 )
    ・X軸 Rotate : 0 度
    ・チュートリアルが表示される
    (アニメーション終了)
    ・スケールの拡大
    ・X軸 Rotate : 30度
    ・元のメニュー画面は少し暗く、
    位置も後ろに移動している
    時間軸

    View Slide

  32. アニメーションさせたいメニューを準備する
    今 回 は ア ニ メ ー シ ョ ン を 付 け る こ と が メ イ ン な の で 、 適 当 に メ ニ ュ ー を 作 成

    View Slide

  33. アニメーションさせたいメニューを準備する
    同 じ メ ニ ュ ー を 2 枚 、 準 備 す る
    z軸は 0.05 程度ずらしておく

    View Slide

  34. アニメーションクリップを準備する
    W i n d o w s > A n i m a t i o n > A n i m a t i o n で ア ニ メ ー シ ョ ン ク リ ッ プ を 作 成 し ま す

    View Slide

  35. アニメーションクリップを準備する
    ア ニ メ ー シ ョ ン を 作 成 し た ゲ ー ム オ ブ ジ ェ ク ト を 選 択 し た 状 態 で 、C r e a t e ボ タ ン を 押 し ま す

    View Slide

  36. アニメーションクリップを準備する (奥側)
    各 メ ニ ュ ー ご と に ア ニ メ ー シ ョ ン を 用 意 す る ( 初 期 表 示 さ れ て い る メ ニ ュ ー)
    0秒
    0.05秒
    メニューをz軸後方に移動させつつ、バックプレートの色を暗くする

    View Slide

  37. アニメーションクリップを準備する (手前)
    各 メ ニ ュ ー ご と に ア ニ メ ー シ ョ ン を 用 意 す る ( 初 期 表 示 さ れ て い る メ ニ ュ ー)
    0.00秒 0.15秒 0.20秒
    スケール 80%程度 回転とスケールをさせながら、
    Y軸上方へ移動
    Y軸上方へ移動した分、
    Y軸下方へ戻す

    View Slide

  38. Animator コンポーネントを追加する
    さ き ほ ど 作 成 し た ア ニ メ ー シ ョ ン ク リ ッ プ を A n i m a t o r コ ン ポ ー ネ ン ト を 使 用 し て 制 御 し ま す

    View Slide

  39. Animator コンポーネントを追加する
    A n i m a t o r タ ブ で ス テ ー タ ス に 紐 づ く 、 ア ニ メ ー シ ョ ン 処 理 を 追 加 す る
    アニメーションなし
    アニメーション再生
    アニメーション逆再生
    ※ スピードを -1 に設定

    View Slide

  40. ボタンへアクションを追加する
    ボ タ ン の I n t e r a c t a b l e コ ン ポ ー ネ ン ト の O n C l i c k ( ) ト リ ガ ー に A n i m a t o r . P l a y を 登 録 す る
    Animator.Play (string : ステート名)

    View Slide

  41. 実験してみて感じたこと
    (1) アニメーションのチューニングは想像以上に難しい (これまでにない表現なので)
    (2) アニメーションで同じ場所にボタンのあるメニューを被せると、ご操作につながる可能性がある..
    (3) アイトラッキングのデータを瞬時に UI に反映すると、目障りになるので、
    ある程度の遅延処理 (duration) を入れた方が良い
    (4) アニメーションも大事だが、効果音 (SE) とセットで取り組まないと気持ち良さの向上は頭打ちになる
    (5) アイトラッキングでラベルを表示/非表示の処理はユーザーが処理に困った場合
    (注視した場合) のみ有効になるので、普段必要がない情報の見せ方として凄く良い実装例でした
    (6) Animator を使えば色んな種類のアニメーションをステータスごとに使い分け可能
    (7) 気持ちの良い体験というのは緻密に計算されつくされた実装の賜物だと再認識

    View Slide

  42. (まとめ) Mixed Reality における 気持ち良い UX とは
    体験を通じて ユーザー の
    目的達成に貢献すること
    MR特有の体験であること
    体験プロセスが人間が知覚可能な変化
    (グラデーション) を伴っていること

    View Slide

  43. Thanks
    やっぱり Microsoft Mesh は最高だった
    Twitter アカウント
    @Futo_Horio

    View Slide