火曜日, 7月 22, 2025
火曜日, 7月 22, 2025
- Advertisment -
ホームニューステックニュースベータ版 Unity 6.2 で UI Toolkit + World Space による VR 入力システムを構築する
テックニュース

ベータ版 Unity 6.2 で UI Toolkit + World Space による VR 入力システムを構築する

インモビ運営局
By インモビ運営局
0
0


はじめに

本記事では、UI Toolkit を使って VR 空間で入力可能な World Space な UI を実現するための手順を解説します。

Unity には、従来の Unity UI (通称 : uGUI) とは別に、 UI Toolkit と呼ばれる、 HTML, CSS ライクな構文で UI を構築するシステムがあります。

従来の方法と比較したときの、最大のメリットは、UIをコードで管理できる点です。
これにより、親オブジェクトが変わることによるレイアウト崩れなどが発生しなくなり、可搬性が大幅に上がります。そして、ベクターで描画されるため、従来のUIよりも軽いと言われています。

また、コーディング AI との親和性も高いです。
uGUI は 高度な MCP がないと、AI に作成してもらうことが不可能でした。
UI Toolkit で使う UXML ( HTML の Unity 版)と USS(CSS の Unity 版)はどちらもコードなので、AIに生成してもらうことが可能です。そして、Web 出身の人間であれば、特に USS はかなりそのままなので、持っている知識そのまま使って、非常に早く仕上げることが可能です。

2D と 3D

これまでの UI Toolkit は 2D のゲームでしか使うことが出来ませんでした。
作成できるものが、Web の技術を使った平面の UI なので、当然と言えば当然なのですが。

2D の公式サンプル

公式サンプル

遂に、Unity 6.2で、UI Toolkitを使用して、3D環境でのWorld Space にも UIを設置できるようになりました。
いままで Canvas を使って作っていたもは、ほぼ全て UI Toolkit でも実装できます。
そして、2025年6月30日のアップデートで、VR での入力にも対応できるようになりました。

3D の公式サンプル

公式サンプル

環境

執筆時点での環境は以下の通りです

  • Unity: 6.2 beta9
  • OpenXR Plugin: 1.15.0
  • XR Interaction Toolkit: 3.2.0

プロジェクト準備

1. VR パッケージのインストール

Unity では、VR開発に必要なパッケージがセットになった「VR」フィーチャーが提供されています。

  • Window > Package Manager > Feature Sets > VR を選択してインストール

このVRパッケージには以下が含まれます：

  • Oculus XR Plugin
  • OpenXR
  • XR Interaction Toolkit

Package ManagerのVRフィーチャー選択画面

2. サンプルシーンのインポート

本バージョンから、UI Toolkit + Wordls Space でのサンプルが追加されました。
以下、このサンプルをもとに解説していきます。

  • XR Interaction Toolkit > Samples > World Space UIをインポート

Samplesインポート画面

インポートされるサンプルは、公式ドキュメントXR Interaction ToolkitのWorld Space UI Toolkitの内容を実装したものです。
本記事では詳細は省略していますので、より詳しく知りたい方は、このドキュメントを読んでみてください。

サンプルシーン

DemoSceneで確認できること

DemoScene.unityを開くと、UI ToolkitとuGUIの比較デモが体験できます：

DemoScene

  • 右側: 従来のuGUIで作られたボタンやスクロールなどのUI
  • 左側: 同じ機能をUI Toolkitで実装したもの

自分のシーンで必要なコンポーネント

サンプルには色々な Gameobject があるのですが、必要なコンポーネントは以下の4つです

DemoSceneのヒエラルキー

  1. XR Origin (XR Rig) – VRシステムの基盤
  2. XR UI Toolkit Manager – VR環境でのUI Toolkit管理
  3. Panel Input Configuration – World Space UI入力設定
  4. EventSystem – UI入力イベントシステム

各コンポーネントの詳細解説

1. XR Origin (XR Rig)

VRシステム全体の基盤となるコンポーネントです。

XR Rig

サンプルだと、移動用の Locomotion など、多くの Child Object がありますが、
UI Toolkit の操作に必須なのは以下のものだけです：

  • Main Camera: VRカメラ
  • Left/Right Controller: VRコントローラー
  • Near-Far Interactor: UI操作用のインタラクター

以下、それぞれの役割と、どのような設定が必須なのかを説明していきます。

Near-Far Interactorの設定

Near-Far Interactorのインスペクター画面

重要な設定項目：

  • UI Interaction: ✓ 有効にする
  • UI Press Input/UI Scroll Input: Input Actionsを設定 (サンプルでは設定済み)

2. XR UI Toolkit Manager

特に設定することはありません。
このコンポーネントをシーンに配置すれば、
VR入力を UI Toolkitへの入力と変換するシステムを有効化してくれます。

3. Panel Input Configuration

Panel Input Configurationのインスペクター画面

World Space UIの入力設定を管理します。重要な設定：

  • Process World Space Input: ✓ 有効
  • Interaction Layers: UI
  • Max Interaction Distance: 3（参考値。UIとの距離によって調整）
  • Default Event Camera Is Main Camera: ✓ 有効
  • Panel Input Redirection: No input redirection（Event Systemとの干渉を防ぐため）

4. EventSystem

Unityの入力システムの基盤となります。EventSystemには2つの重要なコンポーネントがアタッチされています：

Event System

  • UI Toolkit入力イベントの処理を担当
  • Event CamerasにVRメインカメラを明示的に設定
    Event System

XR UI Input Module

XR環境でのUI入力を処理する専用モジュールです：

  • Send Pointer Hover To Parent: ✓ 有効（親要素へのホバーイベント伝播）
  • Bypass UI Toolkit Events: × 無効
    XR UI Input Module
    XR UI Input ModuleはXR環境でのUI操作を最適化し、VRコントローラーからの入力をUnityのUI Toolkitが理解できる形式に変換します。このモジュールがないと、VRコントローラーでのUI操作は正常に動作しません。
構成の詳細

基本構成

GameObject (MessageWindowController等):
├── Transform (world space position)
├── UIDocument (UI Toolkit用)
├── Collider (UI入力用、必須)
├── XRSimpleInteractable (Poke Interaction用、オプション)
├── XRPokeFilter (Poke Interaction用、オプション)
└── Layer: UI

システム構成

Scene:
├── XR Origin (XR Rig)
│   ├── XR UI Input Module
│   ├── Event System
│   └── PanelInputConfiguration
└── MessageWindowController (UIDocument)

Poke Interaction（オプション）

手やコントローラーで直接UI要素に触れて操作する機能：

  • XRSimpleInteractable: Poke操作を有効化
  • XRPokeFilter: Poke操作の詳細制御
  • より直感的なVR操作を実現

自作の UI で試す (おまけ)

サンプルを参考に、簡単なメッセージウィンドウを作って、ボタンを押すサンプルを作ってみました。

UXMLファイルの作成

MessageWindow.uxml

ui:UXML xmlns:ui="UnityEngine.UIElements">
    Style src="MessageWindow.uss" />
    ui:VisualElement name="root" class="message-window">
        ui:Label text="タイトル" name="Title" class="message-window__title" />
        ui:Label text="メッセージ内容がここに表示されます。" name="Content" class="message-window__content" />
        ui:VisualElement class="message-window__button-container">
            ui:Button text="ボタンテキスト" name="GeneralButton" class="message-window__button" />
        ui:VisualElement>
    ui:VisualElement>
ui:UXML>

C#スクリプトでの制御

MessageWindowController.cs

using UnityEngine;
using UnityEngine.UIElements;

public class MessageWindowController : MonoBehaviour
{
    [SerializeField] private UIDocument uiDocument;
    
    private Button generalButton;
    private Label titleLabel;
    private Label contentLabel;
    
    void Start()
    {
        
        var root = uiDocument.rootVisualElement;
        generalButton = root.QButton>("GeneralButton");
        titleLabel = root.QLabel>("Title");
        contentLabel = root.QLabel>("Content");
        
        
        if (generalButton != null)
        {
            generalButton.clicked += OnButtonClicked;
        }
    }
    
    private void OnButtonClicked()
    {
        Debug.Log("VRボタンがクリックされました！");
        
        
        contentLabel.text = $"ボタンが押されました: {Time.time:F2}秒";
    }
    
    public void SetMessage(string title, string content)
    {
        if (titleLabel != null) titleLabel.text = title;
        if (contentLabel != null) contentLabel.text = content;
    }
}

World Space UIの配置

UIDocumentコンポーネントの設定

😛ここにUIDocumentコンポーネントの設定画面のスクリーンショットを追加

  1. Panel Settings: World Space用のPanel Settingsを作成
  2. Source Asset: 作成したUXMLファイルを設定

Panel Settingsの作成

Panel Settings

Assets > Create > UI Toolkit > Panel Settings Asset

重要な設定：

  • Render Mode: World Space
  • World Space Layer: Default
  • Collider Update Mode: Match 3-D bounding box
  • Collider Is Trigger: ✓
  • Scale Mode: Constant Pixel Size
  • Pixels Per Unit: 100-200（参考値。大きいほどUIが小さく表示される）
  • Reference Sprite Pixels per Unit: 100
UIDocumentの詳細設定

UIDocumentのWorld-Space Dimensionsの設定画面

Sort Order: 0

World-Space Dimensions:
  Size Mode: Fixed
  Width: 200px (参考値。VR環境では小さめに)
  Height: 120px (参考値。VR環境では小さめに)
  Pivot Reference Size: Bounding Box
  Pivot: Center

Transform設定

Position: (0, 0, 2-3) 
Rotation: (0, 0, 0)
Scale: (1, 1, 1)

Box Collider設定

Is Trigger: ✓ (推奨)
Center: (0, 0, 0)
Size: UIのサイズに合わせて自動調整

トラブルシューティング

自作のサンプルを実装中に、私がハマった箇所をまとめておきます。

問題と原因

ボタンが反応しない

(原因1) 必須コンポーネントの不足
EventSystem、XR UI Toolkit Manager、Panel Input Configuration がシーンに存在するか確認してください。

(原因2) Panel Input Configuration の Max Interaction Distanceが小さすぎる
この数値よりも、UI と Player が離れていると、UI が反応しません。
Max Interaction Distance を大きくするか、UI を近づけてください。
UI のサイズ変更には、Pixels Per Unit や World-Space Dimensions を調整してください。

(原因3) Near-Far Interactor の UI Interaction が無効になっている
Near-Far Interactor の UI Interaction を有効化してください。

(原因4) XR Ray Interactor を使っている
XR Interaction Toolkit 3.2 時点では、XR Ray Interactor は UI Toolkit Document と互換性がありません。この制限により、従来のレーザーポインタースタイルの操作はサポートされていません。UI Toolkitでは、Near-Far InteractorまたはXR Poke Interactorのみが対応しています。

(原因5) XR UI Input Module の Bypass UI Toolkit Events が enable になっている
Bypass UI Toolkit Events という設定がオンになっていると、通常のUI Toolkitイベントハンドリングが Event System を通じてバイパスされます。この設定は、XR 環境で UI Toolkit との互換性に問題が発生した場合のワークアラウンドとして提供されていますが、通常の UI Toolkit 操作では無効にしておく必要があります。
具体的には、以下のようになっていればOKです。

Bypass UI Toolkit Events: ✗ OFF
Enable XR Input: ✓
Enable Mouse Input: ✓
Enable Touch Input: ✓
Enable Gamepad Input: ✓

Bypass UI Toolkit Eventsの設定

Input Actionsエラー

(原因) XR UI Toolkit Manager の Input Actions未設定が原因です。適切なInput Action Referencesを設定してください。

座標計算エラー（Screen position out of view frustum）

症状: 異常に大きな負の座標値が表示される

Screen position out of view frustum (screen pos -340282346638528859811704183484516925440.000000, -340282346638528859811704183484516925440.000000)

(原因) XR Interaction Toolkit 3.2.0-pre.1（プレリリース版）とUnity 6の互換性問題
XR Interaction Toolkit 3.2.0以降にアップグレードすることで解消されます

Packages/manifest.json

"com.unity.xr.interaction.toolkit": "3.2.0"

VR環境での推奨設定値

レイヤー設定 
MessageWindowController:
  Layer: UI

PanelInputConfiguration:
  Interaction Layers: Default, UI

XR Ray Interactor:
  Interaction Layer Mask: UI (含める)

その他メモ

実装中にメモしたことを残してしておきます。
誰かの役に立てば。

パフォーマンス最適化

Interaction Layers設定: 不要なレイヤーでのRaycast処理を避ける

初期状態では、UI Document は default レイヤーに作られます。
Layer

そして、Interaction Layers も Everything になっています。
Interaction Layers

これだと、全ての Game Object に対してチェックが走り、パフォーマンスが良くありません。

UI Document, Interaction Layers をどちらも UI (もしくは、それに準ずるもの)にすることをお勧めします。

Max Interaction Distance: 適切な距離制限でパフォーマンス向上

Max Interaction Distance

デフォルトだと、Max Interaction Distance はInfinity(無限)になっています。
どこまでもオブジェクト衝突がないかチェックが走るので、パフォーマンスがよくありません。
プレーヤーがUIを操作する位置を想定して、適切な値を設定しましょう。

ただし、この値を小さくし過ぎると、UIを操作できなくなってしまうので、余裕をもって値を
設定してください。
例えば、プレーヤーと UI が 5 離れて操作する想定ならば、7~8 くらいの値を設定することをお勧めします。

XR Interaction Toolkit 3.2.0 での制限

ScrollViewの制限

  • ScrollViewは現在、ハンドル（スクロールバー）経由でのみスクロール可能
  • テキストエリアを直接ドラッグしてのスクロールは未対応
  • コントローラーのサムスティックでのスクロールは将来実装予定
  • 参照: Creating World Space UI Toolkit Panel

Colliderの必須性

  • UI ToolkitのWorld Space UIには、UIDocumentと並んでColliderが必須
  • ColliderがないとVRコントローラーでの入力を受け付けません
  • 参照: Known limitations

参考資料



Source link

Views: 0

前の記事
「龍涎香」：マッコウクジラの貴殿香の秘密！
次の記事
「学生ローン借金者、投票意欲UP！」
RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -

ABOUT US

inmobilexion（インモビ）は、動画・ニュース・サイト紹介を中心に、信頼性の高い情報をわかりやすくお届けする情報プラットフォームです。 「in-mobile」×造語の"〜xion"から生まれたインモビは、厳選・接続・導線など多様な意味を内包しながら、次世代の情報体験を提案します。

Contact us: [email protected]

FOLLOW US

© インモビ by inmobilexion.com