🦔

【Unity】シーンロード中にカクつかずに画像を表示する(MetaQuest/PICO)

2023/11/09に公開

はじめに

こんにちは、まつさこ です。

この記事では、UnityVRアプリのシーン遷移中に、カクつくことなくHMDに任意の画像を表示する方法を紹介します。
MetaQuest、PICOそれぞれでの方法を紹介します。

記事執筆当時(2023年11月)の情報から更新される可能性があるので、最新の情報は各プラットフォームの公式ドキュメントを参照ください。

開発環境

筆者の開発環境は以下です。

  • Unity 2021.3.5f1
  • Rider 2023.2.3
  • Oculus Integration v41
  • PICO Integration v2.3.4

実装方法

各プラットフォームのSDKに、Overlay といった名前のクラスが用意されています。そのクラスをコンポーネントとしてシーンに配置することで、HMDの映像に指定した画像が文字通り 「オーバーレイする」 という仕組みです。

シーン遷移中のフレーム落ちを「オーバーレイさせた画像で隠す」というのが、ここで実際にやっていることです。プラットフォームごとにクラスを紹介します。

OVROverlay(Oculus Integration)

OVROverlay.cs をコンポーネントとしてオブジェクトにアタッチし、シーンに配置することで動作します。コンポーネントのチェックのつけ外しで、ランタイムで表示のオンオフを制御できます。

Overlay Shape

  • Quad
  • Cylinder
  • Cubemap

などなど、様々な画像スタイルのオプションがあるようです。開発しているコンテンツに適したものを選択しましょう。

右目と左目で別々の画像を設定できるので、工夫次第では視差を作って立体的なオーバーレイ画像にすることもできるかもしれません。

その他様々なパラメータの使い方は、公式ドキュメントを参照ください。
VRコンポジターレイヤーを使用する | Oculus

PXR_Overlay(PICO Integration)

コンセプトは、Oculusの OVROverlay と同じです。PXR_Overlay.cs をコンポーネントとしてオブジェクトにアタッチし、シーンに配置することで動作します。

こちらも詳細な使用方法は公式ドキュメントを参照ください。
PXR_OverLay Class Reference

デモプロジェクトもGithubにあるようです。
Overlay-Demo-UnityXR - Github

(おまけ)オーバーレイ画像をアニメーションさせる

先述の OVROverlay および PXR_Overlay のスクリーンショットで、Dynamic Texture という項目にチェックが入っている、あるいは Texture Type が Dynamic に設定されていることに気づいたでしょうか。

本来静止画であれば Static でいいのですが、Dynamic にすることで動的にオーバーレイテクスチャを切り替えることが出来ます。その機能を利用し、オーバーレイ画像を一定時間ごとに変更させてパラパラ漫画のようにアニメーションさせることが出来たので、簡単に紹介します。

MetaQuest向けの OVROverlay を使用する方で解説します。

スクリプトの作成

テクスチャをパラパラさせるためのスクリプトを作成します。UniRxを使用し、指定した秒数ごとにパラパラと画像を差し替える実装をしました。

using System;
using UniRx;
using UnityEngine;


public class QuestLoadingImageChanger : MonoBehaviour
{
    [SerializeField] OVROverlay _overlay;
    [SerializeField] Texture[] _textures;
    [SerializeField] float _intervalSec = 0.5f;
    int count = 0;

    void Start()
    {
        //intervalSec秒ごとにSubscribe()内の処理を実行
        Observable.Interval(TimeSpan.FromSeconds(_intervalSec))
                    .Subscribe(x =>
                        {
                            //_textures配列の長さを超えるまでcountを加算し超えたらリセット
                            count++;
                            if (count >= _textures.Length)
                            {
                                count = 0;
                            }

                            //オーバーレイテクスチャに画像を設定
                            _overlay.textures = new[] { _textures[count], _textures[count] };
                        }
                    ).AddTo(gameObject);
    }
}

ゲームオブジェクトへの適用

スクリプトをゲームオブジェクトにアタッチし、 _overlayOVROverlay をアタッチします。
_textures 配列にパラパラさせたい画像を上から順番に入れることで、 _intervalSec 秒ごとにパラパラ表示され、配列の最後まで行ったらはじめに戻ってループします。

これで、シーンロード中も退屈せずに画面をにぎやかにすることが出来ます。

まとめ

この記事では、UnityVRアプリにおいて、シーン遷移中にカクつくことなく任意の画像を表示する方法を紹介しました。
多くのゲームでは、シーンロード中にお役立ちTipsを表示したりなど、ユーザーを飽きさせない工夫が施されています。VRコンテンツでも、この方法を活用してユーザーを飽きさせない工夫をしていきたいですね!

読んでくださりありがとうございました🤗

Discussion