生成AIで3Dモデルを作成してImmersive Stream For XRで確認する



# はじめに

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

今回は前回の記事でUnrealEngine（以下、UE）のテンプレートプロジェクトが触れるようになったため、ここに3Dモデルを配置する変更を加えてis4xrに実際にデプロイして確認します。

といっても3Dモデルをお持ちでない方も多いと思います。１つの方法として、3Dデータの共有サイトであるSketchfabなどでダウンロードするなどがありますが、今回はGenieというサービスを使って生成AIで3Dモデルを作成して利用してみたいと思います。

https://sketchfab.com/


UE自体の部分は私も初心者に近いレベルなので、操作や説明部分で内容に誤認や間違いなどがあれば教えてください。

# Genieとは

LumaAIというNeRF（画像から３Dモデルを作成する技術）を活用したスマホアプリで有名な企業が提供するテキストプロントから3Dモデルを生成するサービスになります。

https://lumalabs.ai/genie

商用で利用する場合には制限等がありますので、ライセンスを確認ください。

https://lumalabs.ai/legal/tos

生成AI等を活用して3Dモデルを作り出すサービスについては他にも色々ありそうですがそれらの比較等は割愛します。色々な方が調査されていますので参考にしてください。

https://zenn.dev/muna/articles/e0228351562a0a

# 3Dモデルの作成

トップページの右上のログインからGoogleアカウント等でログインします。
早速生成してみます。今回は弊社の公式ゆるキャラの「カグカグ」をイメージして生成してみます。

https://note.com/kddi_agile/n/n2a781e331dd0

プロンプトに以下のように打ち込みました、、、、（語彙力、、、）

**"A cute and fluffy character based on a blue bird"**

生成されました。結構カワイイ！！


![スクリーンショット 2024-06-13 18.30.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/e2da4647-e672-2dc4-a53c-9938eedc10f7.png)

左下の3Dモデルを **偽カグカグ** として今回は使ってみます。選択すると開くと右下のメニューから品質を変更したり、出力フォーマットを色々選択できるようになっており、非常に便利です。
各項目の説明などはこちらの記事などで詳しく記載されています。

https://styly.cc/ja/tips/ai-genie-tripo/

![select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/8ba04f98-140b-45f6-1b5d-468a555da88e.png)

`Make Hi-Res`から高品質化をしてみます。

![スクリーンショット 2024-06-13 20.59.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/7fc528c6-8d54-67ff-c147-f66b9dab0db2.png)

出力は`Unreal Engine`を選択して`fbx`でダウンロードします。（gltfなどその他の形式でもUEに取り込めます）

参考までにデフォルトで`Retopologize`が選択され`med`になっていますが、`Retopologize`を外して頂点数がどうなるかblenderで見てみます。10倍近く結構異なっていました。使い所によって様々な選択ができそうです。今回はデフォルトのままの3Dモデルで進めます。

- `Retopologize`の`med`

![スクリーンショット 2024-06-18 0.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/5b4eaeea-a54c-05a3-7da2-a736a5605dce.png)

- `Retopologize`なし

![スクリーンショット 2024-06-18 0.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/7dd4f9c8-f538-f465-c99d-e017e932b198.png)


# テンプレートプロジェクトの編集

こちらも[前回の記事](https://qiita.com/1kjwk1/items/74c9a62d6e98e1d3783b)を参考にUEでテンプレートプロジェクトのメインレベル（`ISXR_Main`）を開くところまで進めます。

![スクリーンショット 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)

## 背景の変更

3Dモデルを配置する前にデフォルトの背景が味気ないのでHDRIバックドロップ機能を利用して変更します。
まず、今回は不要になる以下についてメインレベルから削除します。

- ExponentialHeightFog
- SM_ScheneStage
- SkyLight

いったん真っ黒になります。

![スクリーンショット 2024-06-17 23.52.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/0a2fea51-c31d-c767-5dba-69a0011be469.png)

テンプレートプロジェクトには最初からHDRIバックドロップが利用できるようになっているため、アクタのライトからHDRIバックドロップを追加します。今回はHDRIバックドロップの説明は割愛します。


![スクリーンショット 2024-06-17 23.54.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/61ce3052-7c84-8222-ff5a-57c2ee93e1d1.png)

背景がリアルな景色になりました。地面から浮いたような状態でGoogleロゴの3Dモデルが埋まっているように見える場合は位置を(0,0,0)にリセットします。`Cubemap`で他にデフォルトでセットされた画像も選択できるので色々試してみてください。

![スクリーンショット 2024-06-18 17.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/8696568c-0249-dd7e-4fba-bcfdee5f5fa8.png)


## 生成した3Dモデルの配置

Genieで生成、出力した **偽カグカグ** の3Dモデル（fbxファイル）をテンプレートプロジェクトにインポートします。
ファイルが圧縮されているため解凍し、その中のfbxファイルとrgbの画像ファイルを利用します。

![スクリーンショット 2024-06-18 0.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/c3e6b950-64ba-9500-61f0-ea008da0e8b6.png)


UEのコンテンツブラウザに２つのファイルをドラッグしてインポートします。コンテンツ配下に`Models`などのフォルダを作成してそこにインポートします。FBXインポートオプションが表示されるためそのまま全てインポートでインポートします。

- fbxファイルのスタティックメッシュ
- 自動で作成されたマテリアル
- 画像ファイルのテクスチャ

![スクリーンショット 2024-06-18 0.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/f5f39c18-d164-340f-20e2-f60391cb01e6.png)

スタティックメッシュにマテリアルが適用されていないため以下を行ってテクスチャを適用します。

- マテリアルをダブルクリックしてマテリアルグラフを開く
- インポートしたテクスチャをベースカラーに紐付けます。

![スクリーンショット 2024-06-18 0.24.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/9ef10daa-ae4b-bde9-2735-bf1cbf9a731f.png)

メインレベルの画面に戻ると**偽カグカグ**にもテクスチャが反映されました。

![スクリーンショット 2024-06-18 18.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/d0f285f2-f569-f54d-c7af-251bd0d2a6b7.png)

スタティックメッシュをメインレベルにドラッグして配置して位置を調整します。

![スクリーンショット 2024-06-18 18.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/4cf3d81a-aba6-e2cf-cd7b-f6f012188198.png)


## カメラコントロールの修正

初期で設定されているカメラアクタ`ISXR_3D_Pawn`ですが、初期値の距離が遠めなのと中身に向かって近づける最小距離も遠めに設定されているのでパラメータを変更して近くに寄って確認できるようにしておきます。

![スクリーンショット 2024-06-18 18.05.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/d44d3e61-81c6-d143-1435-f319a88d7e9c.png)

# is4xrでの動作確認

以前の[テンプレートをそのまま動作確認した記事](https://qiita.com/1kjwk1/items/ed4f2d9683924cf2e375)を参考に動作を確認します。

- GCSバケットへプロジェクトのアップロード
    - 例によって今回もバケットにプロジェクトを一式アップロードしてしまいましょう
    - 既に環境が作成済の場合は一度バケットの中身を削除してからアップロードします
- ビルド
    - ビルドして新しいバージョンを作成します
    - 今回程度の内容であれば2時間前後で終わります
- インスタンス作成
- WEBブラウザからアクセス

無事 **偽カグカグ** がクラウドレンダリングを通じてWEBブラウザ上で3Dモデルとして表示されグリグリ指の操作で眺めることができました。近づいてみても結構ちゃんとしています。デフォルトでライトの設定も入っているので影なども表示されていてそれなりに良い雰囲気で表示されているのではないでしょうか。

![model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/ba0d7ac4-a156-7579-2f4d-89f4f9b50e04.png)


# おわりに

今回はis4xrのテンプレートの背景を変更し、生成AIで作成した3Dモデルを配置してis4xrで動作を確認しました。
HDRIバックドロップで利用したEquirectangular形式のHDRI画像もおそらく生成AIで作成できるものがありそうなのでそちらもいつか試してみたいと思います。

is4xr側の操作はポチポチするだけでクラウドのことはあまり意識せずクラウドレンダリングでWEBアクセス利用できるため、開発者としてはUEのところに注力すればよいというイメージも少し湧いたかと思います。

ここまで良い点を中身に紹介していますが、**実際の開発ではそんなに簡単にはいかず、ビルドが意図せず失敗したり、ビルド成功してデプロイしたらローカルでプレイした内容と違う内容になったりすることがis4xrの特性上結構あります。** そういった状況での切り分けや注意する点など、継続的な開発における注意点なども今後まとめてみたいと思います。