LoginSignup
10
3

はじめに

Google Cloud(以下、GCP)が提供する Immersive Stream For XR(以下、is4xr)をみなさん活用していますでしょうか。is4xrの概要や仕組みについては、こちらの記事をご覧ください。

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

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

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

Genieとは

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

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

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

3Dモデルの作成

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

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

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

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

スクリーンショット 2024-06-13 18.30.20.png

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

select.png

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

スクリーンショット 2024-06-13 20.59.05.png

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

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

  • Retopologizemed

スクリーンショット 2024-06-18 0.46.56.png

  • Retopologizeなし

スクリーンショット 2024-06-18 0.47.38.png

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

こちらも前回の記事を参考にUEでテンプレートプロジェクトのメインレベル(ISXR_Main)を開くところまで進めます。

スクリーンショット 2024-06-14 11.29.46.png

背景の変更

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

  • ExponentialHeightFog
  • SM_ScheneStage
  • SkyLight

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

スクリーンショット 2024-06-17 23.52.33.png

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

スクリーンショット 2024-06-17 23.54.34.png

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

スクリーンショット 2024-06-18 17.54.58.png

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

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

スクリーンショット 2024-06-18 0.01.49.png

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

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

スクリーンショット 2024-06-18 0.23.26.png

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

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

スクリーンショット 2024-06-18 0.24.15.png

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

スクリーンショット 2024-06-18 18.03.25.png

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

スクリーンショット 2024-06-18 18.04.13.png

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

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

スクリーンショット 2024-06-18 18.05.08.png

is4xrでの動作確認

以前のテンプレートをそのまま動作確認した記事を参考に動作を確認します。

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

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

model.png

おわりに

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

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

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

10
3
0

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
10
3