VFXをAR化する (VFXGraph×ARCore)

# はじめに

本記事では、VFXGraphを用いて作成したビジュアルエフェクト（VFX）を拡張現実（AR）上で表示する方法について詳しく説明します。大まかな流れはAR環境からVFXの環境構築の順番で行います。

## 目標
![無題の動画 ‐ Clipchampで作成 (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/a9a85258-0980-b60c-b4d6-b7f95f8d1158.gif)

本記事では、太陽のようなVFXをAR化します。
マーカーの実装は別途記事で紹介します。
## 前提環境

- **Unityバージョン:** 2022.3.18f1
- **デバック端末:** Pixel 4a(5G)
## 手順目次

1. [新規URPプロジェクトの作成](#新規urpプロジェクトの作成)
2. [デバック端末の接続](#デバック端末の接続)
3. [ビルド設定](#ビルド設定)
4. [ARパッケージのインストール](#arパッケージのインストール)
5. [URPアセットの作成](#urpアセットの作成)
6. [プロジェクト設定の調整](#プロジェクト設定の調整)
7. [AR機能の確認](#ar機能の確認)
8. [VFXGraphパッケージのインストール](#vfxgraphパッケージのインストール) 
9. [VFXGraphの作成](#vfxgraphの作成)
10. [ビルドの実行](#ビルドの実行)

## 手順詳細
### 新規URPプロジェクトの作成

1. **Unity Hub** を開きます。
2. 「**New project**」を選択し、「**3D (URP)**」プロジェクトを作成します。

ビルトインの3Dプロジェクトでも同様の操作は可能ですが、今回は手間を省くために初めからURPを使用して進めます。

### デバック端末の接続

USBデバッグを有効にするためには、事前に端末で開発者向けオプションを有効にする必要があります。この設定方法については、以下のサイトが参考になります。

https://bluebirdofoz.hatenablog.com/entry/2023/06/08/081937

USBデバッグが有効になっていることを確認した後、デバック端末をPCに接続してUnityから認識できるようにします。

### ビルド設定
ビルド設定を行う際は、以下の手順に従ってください。

1. Unityエディター内のメニューから「**File** > **Build Settings...**」を選択します。
2. **Platform** で「**Android**」を選択し、「**Switch Platform**」ボタンをクリックしてプラットフォームを変更します。
3. **Run Device** のドロップダウンメニューから、接続したデバック端末の名前を選択します。端末名がプルダウンメニューに表示されない場合は、「**Refresh**」ボタンをクリックして端末リストを更新してください。
![スクリーンショット 2024-03-27 122737.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/7863e8e3-67e9-41ae-87c7-83a6bfd2efbe.png)

### ARパッケージのインストール

AR機能をプロジェクトに追加するには、必要なAR関連のパッケージをインストールする必要があります。以下の手順でパッケージをインストールしてください。

1. Unityエディターの上部メニューから「**Window** > **Package Manager**」を選択します。
2. Package Managerウィンドウで「**Unity Registry**」を選択します。
3. 検索バーに「**AR**」と入力し、表示される結果から以下のパッケージを探します。
（今回は必要なパッケージを揃えたFeatures欄から一括でインストールします）
![スクリーンショット 2024-03-27 122737.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/bc200a6e-4272-227b-9803-6a9d7443b360.png)
4. 必要なパッケージを選択し、「**Install**」ボタンをクリックしてインストールを開始します。

※ここで必要なパッケージは以下になるのでここでインストールしても大丈夫です
- **AR Foundation**
- **ARCore XR Plugin** (Google ARCore XR Pluginとも呼ばれる)



### URPアセットの作成
以下の手順でURPアセットを作成してください。


1. **Asset** フォルダ内で右クリックし、「**Create** > **Rendering** > **Universal Render Pipeline** > **Pipeline Asset (Forward Renderer)**」の順に選択して、URPアセットを作成します。
この例ではファイル名を「**URP_AR**」としています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/391157fa-2ee1-d78d-de5c-48e452c39712.png"><br><br><br>


2. 「**(自分で決めたAsset名)_Renderer**」を選択し、「**Renderer Features**」のセクションで新しいRenderer Featureを追加します。<br>
3. ドロップダウンメニューから「**AR Background Renderer Feature**」を選択して追加します。これにより、ARアプリケーションでの背景のレンダリングが適切に行われるようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/8ef3a826-8193-2d9e-5ed8-15cf700e3ca1.png"><br><br><br>

### プロジェクト設定の調整

プロジェクトのグラフィックスとAR機能を最適化するために、以下のプロジェクト設定の調整が必要です。

#### Graphicsの設定

1. 「**Edit** > **Project Settings** > **Graphics**」を選択します。
2. 「**Scriptable Render Pipeline Settings**」の項目で、ドロップダウンメニューから先ほど作成した「**URP_AR**」アセットを選択して設定します。
![スクリーンショット 2024-03-27 123911.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/8d561927-3a5a-1513-85d0-01c13fb26cd9.png)


#### Qualityの設定

1. 「**Edit** > **Project Settings** > **Quality**」を選択します。
2.クオリティレベルをBalancedに変更します。 
3. クオリティレベルの「**Rendering**」セクションで、「**Scriptable Render Pipeline Settings**」を「**URP_AR**」に設定します。
![スクリーンショット 2024-03-27 131320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/36945672-d6bf-2fda-c46b-d0a7173abec4.png)



#### XR Plugin Managementの設定

1. 「**Edit** > **Project Settings** > **XR Plugin Management**」を選択します。
2. 「**Android**」タブで「**ARCore**」にチェックを入れます。
![スクリーンショット 2024-03-27 1![スクリーンショット 2024-03-27 124717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/51634e5a-3159-782c-3835-5e9e736dcb3e.png)
24636.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/4d1cc927-62ae-367a-32fa-41c85b8aecad.png)
#### Player設定

1. 「**Edit** > **Project Settings** > **Player**」を選択します。
2. 「**Other Settings**」で、「**Auto Graphics API**」のチェックを外します。
3. 「**Graphics APIs for Android**」のリストから「**Vulkan**」を選択し、「**-**」ボタンをクリックして削除します。
4. 「**Minimum API Level**」を「**API Level 27**」以上に設定します。
5. 「**Scripting Backend**」を「**Mono**」から「**IL2CPP**」に変更します。
6. 「**Target Architectures**」の「**ARM64**」にチェックを入れます。
![スクリーンショット 2024-03-27 124717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/eb06175c-1969-0090-9f9f-1caeee99b550.png)
![スクリーンショット 2024-03-27 124901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/22fee0b5-b753-c380-282d-b2eaaeb45c46.png)


### AR機能の確認

ここまでの設定を終えたら、実際にAR環境が正しく機能するかを確認します。以下の手順に従って、簡単なARシーンを構築し、デバイス上での動作をテストしてください。

1. **Hierarchy** ビューで右クリックし、「**+**」タブを選択してから「**XR** > **AR Session**」と「**XR** > **XR Origin**」をプロジェクトに追加します。これにより、ARセッションの管理とARコンテンツの原点が設定されます。
2. シーンに適当なオブジェクトを配置します。例えば、キューブや球体などのシンプルな3Dオブジェクトを使うと良いでしょう。配置したオブジェクトが大きすぎる場合は、サイズを適宜調整してください。
3. Unityエディターのメニューから「**File** > **Build And Run**」を選択します。これにより、現在の設定でアプリケーションがビルドされ、接続されているデバイス上で直接実行されます。


![ARdemo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/b5433834-75ba-5e2a-b983-52dd8d0f8fac.gif)<br>

ビルドが成功し、アプリケーションがデバイス上で正常に起動したら、配置したオブジェクトがAR空間内に表示されるかを確認できたら、次はVFXGraphの環境構築を行います。

### VFXGraphパッケージのインストール

AR環境にビジュアルエフェクト（VFX）を追加するためには、Visual Effect Graphパッケージをインストールする必要があります。また、エフェクトに更にリアリティを加えるためには、Post-Processingパッケージの導入も推奨されます。以下の手順でこれらのパッケージをインストールしてください。

#### Visual Effect Graphのインストール

1. Unityエディターの上部メニューから「**Window** > **Package Manager**」を選択します。
2. Package Managerウィンドウで「**Unity Registry**」を選択します。
3. 検索バーに「**Visual Effect Graph**」と入力し、表示される結果からVisual Effect Graphパッケージを選択します。
4. 「**Install**」ボタンをクリックしてインストールを開始します。

#### Post-Processingのインストール

1. 同じくPackage Managerウィンドウの「**Unity Registry**」から、「**post-processing**」を検索します。
2. 検索結果からPost-Processingパッケージを選択し、「**Install**」ボタンでインストールを行います。

![スクリーンショット 2024-03-27 133632.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/40c9bafa-3f30-1eea-f557-b6f151df2989.png)
![スクリーンショット 2024-03-27 134412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/85b44431-15d8-53be-8979-ee3d07426a4a.png)


#### Post-Processingの適用

1. **Hierarchy** ビューで、**XR Origin** コンポーネントに含まれる**Main Camera**オブジェクトを選択します。
2. **Inspector** ビュー内の**Camera** コンポーネントを見つけ、**Rendering** セクションを展開します。
3. **Post-Processing** オプションにチェックを入れます。![スクリーンショット 2024-03-27 134908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/296e93ee-fffe-c9ba-192c-7632dbb47505.png)

### VFXGraphの作成

これまでの設定で、VFXをAR環境に統合する準備が整いました。ここでは、実際にVisual Effect Graphを使用してVFXを作成し、シーンに配置する手順を説明します。今回は、太陽のような光を放つVFXを例に取ります。

ちなみに、VFXGraphのNodeなどの基本概念についてまとめてるので、参考になれば幸いです。

https://qiita.com/_Nats_/items/00f32e8cea9d51c2c30c
#### VFXの作成

1. **Asset Folder** 内で右クリックし、「**Create** > **Visual Effect** > **Visual Effect Graph**」の順に進み、新しいVisual Effect Graphアセットを作成します。
2. 作成したVisual Effect GraphアセットをダブルクリックしてGraphエディタを開きます。
3. エディタ内で、既存のノードを全て選択し、削除します。
4. グラフ内の空白の部分で右クリックし、「**Create Node** > **System** > **Simple Swarm Particle System**」を選択し、新しいパーティクルシステムノードを追加します。

#### VFXをシーンに配置

1. **Project** ウィンドウから作成した「SunVFX」アセットを選択し、**Hierarchy** ビューへドラッグ＆ドロップしてシーンに追加します。
2. シーンに追加されたVFXオブジェクトを選択し、**Inspector** ウィンドウでサイズや他のパラメータを適宜調整します。

##### 注意点

- サイズを変更するとパラメータの調整によっては、VFXの形状や挙動が大きく変わる場合があります。

### ビルドの実行

VFXの配置と設定が完了した後、最終的にプロジェクトをビルドし、実際のデバイス上でARアプリケーションとして動作することを確認します。ビルドと実行のプロセスは、AR機能の確認時と同様です。

1. Unityエディターの上部メニューから「**File** > **Build And Run**」を選択します。
2. 「**Build And Run**」を選択することで、Unityがプロジェクトのビルドプロセスを開始し、ビルドが成功すると自動的に接続されているデバイス上でアプリケーションを起動します。

#### ビルド時の注意点

- デバイスがPCにUSBで正しく接続されていることを確認してください。
- 開発者向けオプションとUSBデバッグがデバイス上で有効になっていることを確認してください。

## 完成
![ARVFX.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/cf7115b5-cbd6-2447-ab61-a5d4b64c9e82.gif)

### まとめ

　この記事を通じて、VFXGraphを使用して作成したビジュアルエフェクトをAR（拡張現実）環境に統合する方法について詳しく説明しました。
　これらの手順を実践することで、読者はリアルタイムで変化する魅力的なビジュアルエフェクトを現実世界に織り交ぜるARアプリケーションを開発できます。
この記事が、皆さんのARアプリケーション開発の一助となれば幸いです。

（改善点、問題点ございましたらご一報いただければ幸いです。）

## 参考リンク
https://note.com/npaka/n/n1f078c30eb40

https://qiita.com/Aster_ideatech/items/fa843c6ab0c11b610c27


https://bluebirdofoz.hatenablog.com/entry/2023/06/08/081937

https://shibuya24.info/entry/urp-vfxgraph-start