2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VFXをAR化する (VFXGraph×ARCore)

Last updated at Posted at 2024-03-27

はじめに

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

目標

無題の動画 ‐ Clipchampで作成 (3).gif

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

前提環境

  • Unityバージョン: 2022.3.18f1
  • デバック端末: Pixel 4a(5G)

手順目次

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

手順詳細

新規URPプロジェクトの作成

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

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

デバック端末の接続

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

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

ビルド設定

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

  1. Unityエディター内のメニューから「File > Build Settings...」を選択します。
  2. Platform で「Android」を選択し、「Switch Platform」ボタンをクリックしてプラットフォームを変更します。
  3. Run Device のドロップダウンメニューから、接続したデバック端末の名前を選択します。端末名がプルダウンメニューに表示されない場合は、「Refresh」ボタンをクリックして端末リストを更新してください。
    スクリーンショット 2024-03-27 122737.png

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

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

  1. Unityエディターの上部メニューから「Window > Package Manager」を選択します。
  2. Package Managerウィンドウで「Unity Registry」を選択します。
  3. 検索バーに「AR」と入力し、表示される結果から以下のパッケージを探します。
    (今回は必要なパッケージを揃えたFeatures欄から一括でインストールします)
    スクリーンショット 2024-03-27 122737.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」としています。



  2. (自分で決めたAsset名)_Renderer」を選択し、「Renderer Features」のセクションで新しいRenderer Featureを追加します。

  3. ドロップダウンメニューから「AR Background Renderer Feature」を選択して追加します。これにより、ARアプリケーションでの背景のレンダリングが適切に行われるようになります。



プロジェクト設定の調整

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

Graphicsの設定

  1. Edit > Project Settings > Graphics」を選択します。
  2. Scriptable Render Pipeline Settings」の項目で、ドロップダウンメニューから先ほど作成した「URP_AR」アセットを選択して設定します。
    スクリーンショット 2024-03-27 123911.png

Qualityの設定

  1. Edit > Project Settings > Quality」を選択します。
    2.クオリティレベルをBalancedに変更します。
  2. クオリティレベルの「Rendering」セクションで、「Scriptable Render Pipeline Settings」を「URP_AR」に設定します。
    スクリーンショット 2024-03-27 131320.png

XR Plugin Managementの設定

  1. Edit > Project Settings > XR Plugin Management」を選択します。
  2. Android」タブで「ARCore」にチェックを入れます。
    スクリーンショット 2024-03-27 1スクリーンショット 2024-03-27 124717.png 24636.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
    スクリーンショット 2024-03-27 124901.png

AR機能の確認

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

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

ARdemo.gif

ビルドが成功し、アプリケーションがデバイス上で正常に起動したら、配置したオブジェクトが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
スクリーンショット 2024-03-27 134412.png

Post-Processingの適用

  1. Hierarchy ビューで、XR Origin コンポーネントに含まれるMain Cameraオブジェクトを選択します。
  2. Inspector ビュー内のCamera コンポーネントを見つけ、Rendering セクションを展開します。
  3. Post-Processing オプションにチェックを入れます。スクリーンショット 2024-03-27 134908.png

VFXGraphの作成

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

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

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

まとめ

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

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

参考リンク

2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?