Immersive Stream For XRのテンプレートプロジェクトを触ってみよう


# はじめに

Google Cloud（以下、GCP）が提供する Immersive Stream For XR（以下、is4xr）をみなさん活用していますでしょうか。is4xrの概要や仕組みについては、[こちら](https://qiita.com/1kjwk1/items/ed4f2d9683924cf2e375)の記事をご覧ください。

前回の記事では説明をスキップした、is4xr向けにGoogleが用意しているUnreal Engine（以下、UE）のテンプレートプロジェクトを実際にローカルPCで触りながら中身を簡単に紹介したいと思います。

UE自体が初心者の方向けの内容となっておりますので、紹介している内容に誤認や間違いなどがあれば教えてください。
私自身もWEBアプリケーション、インフラ系をメインとしたエンジニアですのでUE自体は初心者に近いです。一緒に勉強しましょう！

# テンプレートプロジェクトとは

is4xrをより簡単に利用するために、必要な機能をテンプレートとして実装したUEプロジェクトになります。Googleが公式でgithubで公開しているものです。Readmeにはかなり詳しく説明が記載されていますので、UEに詳しい方などはそちらを確認ください。

https://github.com/GoogleCloudPlatform/immersive-stream-for-xr-templates

![1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/036cf671-8d05-a284-a75e-61a35fb50861.png)


is4xrではUEプロジェクトをクラウドレンダリングで利用するために様々な処理を行っています（詳細が公開されているわけではないのでおそらくです）。それらに必要な処理が事前に実装されているものとなっており、ここをベースに開発することでより早く開発を進めることができます。

:::note info
テンプレートプロジェクトを使わずに開発されたUEプロジェクトをis4xrで動かしてみたい方向けには、is4xrで必要な機能のみインテグレーションする手順も[Readme](https://github.com/GoogleCloudPlatform/immersive-stream-for-xr-templates?tab=readme-ov-file#unreal-minimal-integration)内に追加されましたのでそちらを参考にチャレンジしてみてください。
:::


# ローカルPCの準備

クイックスタートの`Before you begin`を見ると以下のように書かれています。

![スクリーンショット 2024-06-12 15.57.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/2bdfa78e-96ba-0d19-585e-01f496db8776.png)

最小スペックとして、windowsかつGPUなども必要と書かれていて、そもそも諦めてしまいそうになりますが、実際には性能が足りなくても、macでもとりあえず動かすことはできます。今回はmacで確認します。
参考までに、Unreal Editor自体のmacの推奨スペックは[こちら](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/hardware-and-software-specifications-for-unreal-engine?application_version=5.3)。

https://cloud.google.com/immersive-stream/xr/docs/quickstart



## 今回のローカルPCのスペック

- Model: MacBook Pro 14-inch, Nov 2023
- Chip: Apple M3
- Memory: 24 GB
- OS: macOS 14.4


## Unreal Enginの準備

UE向けに用意されたプロジェクトとなるため、ローカルPCにUEをダウンロードしてインストールします。公式のダウンロードページの通りインストールします。

https://www.unrealengine.com/ja/download

- Epic Gamesのアカウントを作成します
- Epic Game Lancherをインストールします
- Unreal Engineをインストールします（5.3.2）

:::note
現在の最新バージョンは`5.3.2`に対応しています。
継続的な開発運用を進めるにあたってバージョンについては気をつける点などがありますが別の記事で紹介します。
:::



# テンプレートプロジェクトを触ってみよう

ローカルPCの準備が完了したので実際にテンプレートプロジェクトを開いて、中身の構成や用意されたデモをどのように動かすかなど簡単に紹介します。

## テンプレートプロジェクトのダウンロード

テンプレートプロジェクトをダウンロードします。

https://github.com/GoogleCloudPlatform/immersive-stream-for-xr-templates

## テンプレートプロジェクトの起動

テンプレートプロジェクト内のフォルダ`Unreal_Template_Project`がテンプレートプロジェクトになります。フォルダ内の`XR_Template.uproject`をダブルクリックします。

![スクリーンショット 2024-06-13 16.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/73d2795a-0502-1c9d-7eef-b67531cfabbb.png)

Unreal Editorが開くのを待ちます。スペックによって時間は様々です。


![スクリーンショット 2024-06-13 16.05.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/be86f842-b60c-3bc4-8dd3-92584224e491.png)

こんな画面がひらけば成功です。

![スクリーンショット 2024-06-14 11.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/2e718ba0-e82c-e205-2445-e65792c84c47.png)

画面上部の再生ボタンで再生して操作してみましょう。

![スクリーンショット 2024-06-13 16.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/d1bfb83a-d4cf-5f18-562e-f41fc2def924.png)


## テンプレートプロジェクトの中身について

起動時にはメインレベルの`ISXR_Main`というレベルが表示されます。画面右のアウトライナーでテンプレートとして実装されているアクタを確認することができます。いくつか重要なアクタや実装について紹介します。

今回でてくるUE用語を簡単に記載します。

|言葉  |意味  |
|---|---|
|レベル|ゲームの１つの空間（ワールド、マップ等）を指します。|
|アクタ|レベルに配置するオブジェクトの総称です。色々なアクタがあります。|
|ポーン  |操作などの制御が可能なアクタです。|
|ブループリント  |グラフティカルなUIでプログラミングするツールです。|
|EventBeginPlay|ゲーム開始時に発生するイベントです。|

### ISXR_Init

is4xrで動作するためのコアな機能や処理が含まれたアクタです。消すとis4xrで動かなくなります。
既存プロジェクトにインテグレーションする場合も、このアクタは必ず必要でメインレベルに配置して`EventBeginPlay`でこのアクタ内のブループリントが動くようにする必要があります。


- URLアクセス時に適切なレベルにマッピングします
- クラウド側のインスタンスとの接続の制御も行っていそうです
- etc...

アウトライナーから`ISXR_Initを編集`をクリックするとブループリントが開きます。`EventBeginPlay`でレベルのマッピング等の処理を行って再生されます。

![スクリーンショット 2024-06-14 11.32.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/1ab054fc-fd29-1787-ca9b-95f8cf2cd966.png)


### ISXR_3D_Pawn

is4xrでWEBブラウザからのタップやスワイプなどの操作がクラウド上のインスタンスと連動するカメラのポーンです。

- １つの点を中心に360度旋回するorbitカメラです
- 詳細のパラメータからピンチインなどのスピードや最大最小の距離などを調整できます
- ユーザのカメラ操作が不要な場合はこのカメラを使う必要はありません。例えば、シーケンサーを使ってcine cameraアクタで演出側カメラを自動で操作制御をするような場合などは別途カメラを追加します


![スクリーンショット 2024-06-14 11.30.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/ff81e987-04c1-cc37-1d9c-dd3893ad77a2.png)


### UI関連

体験時に前面に表示されるUIです。これはアクタではなく、UIフォルダにウィジェットブループリントとして用意されています。UI機能を使うことでWEBブラウザ上でのボタンタップなどでの制御が可能です

All -> Content -> UI -> を開きます

![スクリーンショット 2024-06-14 19.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/b48478db-2be7-ead9-ecca-283ba6c5d7d8.png)

`Main_UI`は、実際の画面に表示されるウィジェット部分です。

![スクリーンショット 2024-06-14 19.28.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/bc40fb2e-9199-d623-d4d3-8a31b40129c8.png)

`ISXR_HUD`は、`EventBeginPlay`でUIを表示したり、WEBブラウザ上での回転を検知して見た目を調整する機能などが実装されたブループリントです。

![スクリーンショット 2024-06-14 19.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/95b318bf-71be-96fb-678c-ea0bee711691.png)


## デモアプリケーションの動きを確認しよう

メインレベルとは別にデモ用のレベルが用意されているので動かしてみます。

- コンテンツブラウザが開いていない場合はメニューのウィンドウからコンテンツブラウザを開きます
- All -> Content -> Demos -> Featuresを開きます
- `Features_Demo`というレベルがあるのでダブルクリックします
- 選択したレベルの内容に切り替わります

![スクリーンショット 2024-06-14 11.42.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/b31f6bda-ef77-08c5-1d9f-1d18b43c918c.png)

画面上部の再生ボタンで再生してみます。

![スクリーンショット 2024-06-14 11.42.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/0842aaef-4698-2e26-5677-3ddf752ea281.png)

Featuresから他のものを選択することで他のレベルのデモに切り替わります。車や家の中のリッチなデモを体験できます。内部的には、All -> Content -> Demos -> Autos/Spacesにある各レベルに切り替えています。

![スクリーンショット 2024-06-14 11.43.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/7e631d75-6cf6-8673-c0a7-5eb5fc87f537.png)

# おまけ

is4xr上でWEBブラウザからのアクセス時にレベルを切り替える方法です。
`ISXR_Init`にはURLアクセス時のURLパラメータを取得してレベルを切り替える機能が備わっているため、`Link Generator Tool`でURLを作成する際に`Asset ID`を`Features_Demo:Session_ID:000`とすることでUEプロジェクト内での実装を変更せずにデモをそのまま利用できます。素晴らしい仕組みですね。

![スクリーンショット 2024-06-14 11.16.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/514b8cf9-df20-ecb3-afdc-ae3cea17cf64.png)

リッチなデモもクラウドレンダリングで遅延なく動作する様子を見ることができます。

![is4xr_2_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/21641a33-9d31-3758-86c0-4db3b930f3c7.png)

# おわりに

今回はis4xrのテンプレートプロジェクトをローカルPCで開き中身について簡単に紹介しました。
デモとして作り込まれているようなリッチなものをいきなり作るのは中々難しいですが、次回は用意されたテンプレートにアセットなどを追加したりしながらis4xr上で動作を確認したいと思います。