Apple Vision Pro ですりガラスのUI背景を作成する方法

3行で要約

• Polyspatial 2.0.0-pre.9 以降からすりガラスエフェクトを Unity アプリで使用可能に
• 作成は ShaderGraph -> PoliSpatial Background Blur を利用
• UI 背景用途意外にも利用可能

はじめに

Graffity で Unity エンジニア兼テクニカルアーティストとして働いている Muraishi です。

Unity を使って Apple Vision Pro のアプリを作成する際、長らく、あの特徴的なすりガラスの見た目の UI は SwiftUI を利用しないと出来ませんでした。

ですので、UGUI による自由な UI 開発となると、どうしても他のアプリとのトンマナを合わせることが難しかった部分がありましたが、Polyspatial 2.0.0-pre.9 以降に、Shader Graph を利用して、あの特徴的な UI 背景を作成することが可能になりました。

今回の記事は、Apple Vision Pro ですりガラスのUI背景を作成する方法をご紹介します。

Shader Graph ノード全体図

作成方法

1. UI 用画像に下のような、すりガラスの濃い部分を黒に着色したものを用意します。

2. Create -> Shader Graph -> URP -> Sprite Unlit Shader Graph で、Shader Graph 用シェーダーを作成します。

3. Graph Inspector から、Alpha Clipping にチェックを入れます（後に説明する PoliSpatial Background Blur が半透明に対応してないため）。

4. UI テクスチャ用の Texture 2D プロパティを用意し、Node Settings の Reference を _MainTex とします（UGUI の Image コンポーネントの Source Image から画像を参照するため）。

5. Sample Texture 2D ノードと、PoliSpatial Background Blur ノードを作成し、それらを Add ノードで繋いで Base Color, Alpha にそれぞれ接続します。

6. 作成したシェーダーを参照したマテリアルを用意し、UI背景用の Image コンポーネントに使用テキストと一緒にバインドします。

7. Unity 側では概要内容はプレビュー出来ませんので Play To Device などで 表示内容を確認します。

補足

• Shader Graph 内でノードとして独立していますので、 UI だけではなく、例えば 3D モデルなどにも適用可能です（左: Lit, 右: Unlit）。