Apple Vision Proを紐解く： 3D UIの可能性と制約

2023年8月7日 12:10

Takramの野見山です。Apple Vision Proの発売に向けて、ビデオセッションやドキュメントを見て準備を進めています。
今回はvisionOSのデモをシミュレーターで動かしながら、3D UIの可能性と制約について考察したことをまとめます。

1. 実空間のコンテクストを拡張する

visionOSは「Window」「Volume」「Space」の3要素で構成されます。Windowは画面要素、Volumeは3Dモデルを表示する要素、Spaceは空間を満たす要素になります。

すべての要素は実空間にアンカリング（固定配置）されます。WindowやVolumeだけでなく、Spaceの要素もそのサイズ次第で実空間にアンカリングされます。

ソファーから離れると没入空間の外へ、ソファーに座ると没入空間の内に戻ります。「座ってくつろぐ場所」であるソファーに没入空間が添えられたことで、ソファーはまるでシアターのようになります。

このように実空間のコンテクストにUIを添えて、いかに体験を拡張するかがデザインを考えるときのポイントになると感じました。
ほかにも「料理を作る場所」であるキッチンに、シェフの手元を映したレッスン動画を添えれば、きっとそこは料理スタジオに変わるはずです。

なお最初のソファーのデモのコードを見ると、球体メッシュの内側にテクスチャーを貼って空間を作るというシンプルな実装でした。

material.color = .init(texture: .init(texture))
self.components.set(ModelComponent(
    mesh: .generateSphere(radius: 1E3),
    materials: [material]
))
self.scale *= .init(x: -1, y: 1, z: 1)

2. 2Dインタフェースに奥行きを足す

visionOSではWindowを生成するとき、高さと幅に加えて奥行き方向のサイズも指定します。これにより平面的な要素と立体的な要素を同時に扱えるようになりました。インタフェースは2Dか3Dかの2択ではなく、2.5Dという新たな選択肢が増えました。

なお、3DモデルにCollisionコンポーネントとInputTargetコンポーネントを付与すると、ちょっとだけ動かせるようになります。

「せっかくなら3Dの方が魅力的じゃん！」となりそうですが、必ずしも3Dインタフェースの方が優れているとは限りません。
たとえば、一覧性や操作性は2Dインタフェースのほうが優れています。アイテムを並べて比較するときやポインティングして選択するときも、2Dのほうが簡単にできます。2Dと3Dの長所をいかに組み合わせるかが、新しい体験を生むために重要になりそうです。

奥行きのエフェクト

インタラクション時に奥行き方向のエフェクトを加えられるようになりました。たとえばアプリ一覧では、要素にポインター（視線）を合わせると、背景色が変わるだけでなく、アイコンが複数レイヤーに分かれて手前に飛び出ます。またスクロールアウトするコンテンツは、ブラーがかかって奥に消えていきます。

色やサイズの変化に加えて、このような奥行き方向のエフェクトはインタラクションを認知するためのサポートになりそうです。特にVision Proではビデオパススルーの映像のうえにUIを描画するため、画面がごちゃごちゃして見えます。そのような状況下でもインタラクションを適切に認知できるように、奥行き方向のエフェクトを適宜取り入れるのがよさそうです。

なお公式ドキュメントにもありますが、3Dエフェクトのやりすぎは注意です。別アングルから見たときに破綻するリスクや、3Dモデルの操作中に画面に干渉するリスクなどを考慮する必要があります。

3. 実在感と没入感を行き来する

visionOSの最大の魅力は、アプリの体験のなかで実空間とバーチャル空間を行き来できるところです。どのように実空間にいるユーザをスムーズにバーチャル空間に導いてキーモーメント（最も印象深い体験）を作るか、またどのようにバーチャル空間のユーザを実空間に導くかが大切になります。

ではどのように実在感や没入感を制御するのか。ビデオパススルーを有効にするかどうかだけでなく、いくつか抑えるべき要点がありそうなので以下にまとめます。

まず実在感を出す方法について。
ウィンドウは近くに小さく表示するとよさそうです。実空間を超えるサイズのウィンドウは、ウィンドウに付いているハイライトやシャドーなど、実空間の手がかりが見えづらい印象がありました。

またオブジェクトベースのオーディオを用いて、実在する場所から直接音が鳴っているような印象を与えるのも有効だと思いました。壁裏の音が聞き取りづらくなるなど、物理的な影響を考慮したオーディオエンジンPHASEもvisionOSで利用できるみたいです。

続いて没入感を出す方法について。
一般的にはウィンドウや空間を大きく表示して、視野角の大部分を満たすのが有効です。オーディオも同様、ユーザのまわりを取り囲むように再生すると没入感が高まります。
なお、visionOSではImmersive SpaceのスタイルをProgressiveに設定することで、空間がどれくらい取り囲むのかの調整をユーザに任せることができます。

気をつけたいポイント

visionOSのオクルージョン

オクルージョンとは、手前のオブジェクトによって背後のオブジェクトが隠されることを指します。visionOSでいま一歩かもと思ったのが、実はこのオクルージョンでした。

例えば、奥のウィンドウにフォーカスが当たったとき、重なった手前のウィンドウが隠されます。PCならフォーカスしたウィンドウが手前にくるのは慣れ親しんだ挙動ですが、3D空間で見るとインタラクション時に手前の薄いウィンドウに干渉しそうでややストレスに感じました。

ほかにも、実空間の壁や物体のオクルージョンは基本無視されます。ウィンドウの操作中や自身の移動中はオクルージョンが有効になるため、認識した実空間を意図的に無視しているようです。

実空間を無視するのは、狭い空間でも大きな画面を利用できるための仕様だと思うのですが、このように奥行き方向の前後関係が度々無視されると、ウィンドウの実在感が薄れてしまうと感じました。「あれ？さっきまで近くにあったよね？」「これって向こうの空間に置いたものだっけ？」ということが多発しそうです。もしかしたら両眼視差のある実機ならあまり気にならないのかもしれないですが、少なくともシミュレーター上ではそのように感じました。

他のアプリの存在

Shared Spaceでは、自分の開発したアプリだけでなく、他のアプリも同時に立ち上がります。好きなだけ大きな画面を作りたくなるところですが、上記のオクルージョンの癖を踏まえると、ウィンドウの重複は極力避けたいところです。アプリを設計するときは、画面をできるだけ小さくできないか考える必要があると思いました。

また複数のアプリがあるときに、アプリの要素が散らかって混ざるリスクも感じました。複数の要素を展開するときは、要素間の関係性を意識させる工夫が必要そうです。たとえば大きな動画の手前に小さなコントロールを表示したり、3Dモデルにウィンドウを追随させたりする工夫が考えられます。

大きな動画の手前にコントロール（引用：Principles of spatial design）

まとめ

以上、visionOSのデモを触りながら、3D UIの可能性と制約についてあれこれ考察しました。今後はSharePlayなど、複数人での共同作業体験や、環境のコンテクストを共有する方法などを深掘っていきたいと思います。

なおVision Proが発表された翌日に収録したPodcastはこちらです。興味あればぜひ。
https://cast.takram.com/podcast/applevisionpro

この記事が気に入ったらサポートをしてみませんか？