E'z GAL 3DGS PLAYER｜3DGSワールドとGLB人物モデルを統合化したWebビュアーのプロトタイプをGeminiで制作
E'z GALギャラリーサイト向けの、3D人物モデル+3DGSワールドの統合化Webビュアーを実現するための基盤として、今回はNano Banana 2やFal AI、Marble AIなどでアセットを制作し、GeminiでHTMLのプロトタイプをコーディングしてみたので紹介します。
シーン画像を生成
Nano Banana 2
Nano Banana 2を用いて3D人物モデルのベース画像を作成します。今回は、「桜並木を散歩するJK」をテーマとして、以下の記事の作例を参考にしています。
満開の桜を見上げながら桜並木の下を散歩をしている若い日本人女性の風景写真。彼女の服装は、スカートは膝丈の日本の春用セーラー服、紺色のハイソックス、濃い茶色のローファー。晴れた日中の景色。そよ風が吹いているので、彼女の髪とスカートの裾が揺れている。カメラアングルは彼女の身長よりやや高い位置から彼女の顔に向けたドローンショット。フォトリアリスティック。4K, シネマティック。
このプロンプトによりGemini 高速モード（Nano Banana 2）で画像生成してみました。
同じポーズや容姿で、背景が薄いグレーの彼女の全身ポートレートを作成してください。
さらに、Nano Banana 2でマルチアングル画像も生成できるか？を試してはみましたが、それは出来ませんでした。生成AIにも得手・不得手はあるようです。
そこで、従量課金制のFal AIを用いて、オープンソース生成モデルの中から適当なマルチアングルビューが生成できる生成モデルを探してみました。
Fal AI
私の場合は従量課金制なので、最初に10ドルのクレジットを購入し、さらに、残金が5ドルになったら自動的に10ドルをチャージする設定にしています。
無料版では、生成モデルを使うと残金がマイナスになりますが、何回かは無料で生成できます。
★ Fal AIを使うのが面倒であれば、正面画像のみでも3D人物モデルの生成は可能です。
今回使用したのは以下の「Qwen Image Edit 2511 Multiple Angle｜Image to Image」です。上下左右の角度と距離をスライダーで指定すると、その角度と距離のカメラから撮影した画像を生成できます。
★ 最初は45度で試してみましたが、ほぼ正面の画像と同じだったので、90度で試すとOKでした。
・90度（彼女の左側からのショット）
・270度（彼女の右側からのショット）
無料版では以下のようにクレジットがマイナスにはなりますが、数回の画像生成は可能です。
3D人物モデルを生成
今回はFal AIのHunyuan 3Dで3Dモデルを生成しましたが、Meshy AIやTripo 3Dなどの無料お試し版でも生成が可能だと思います。
Fal AI
Fal AIの「Hunyuan-3d-pro-image-to-3d/v3.1/pro/image-to-3d」で複数のマルチアングル画像から3Dモデルを生成します。
★ 今回は「正面」「右サイド」「左サイド」の３枚の画像から生成しましたが、さらに別の角度からの画像も追加ができます。
「Download All（ZIP）」をクリックしてダウンロード。
GLBファイルをプレビュー確認
オンライン3Dビュアーでプレビュー。
3DGSワールドを生成
今回は、Marble AIを使います。無料版でも7,000クレジット分楽しめます。ワールドの生成には1,500クレジットが消費されるので、4回生成可能。
私の場合は、Googleアカウントでログインしました。
ワールドを生成
左上のツールバーの「Create」アイコンをクリック。
★ 今回は、先にNano Bananaで生成した元画像から、同じくNano Bananaの編集機能を使って人物を消去した背景のみの風景画像を生成し、それを用いてワールドを生成しました。360°パノラマ画像でもOKです。
場合によっては、「Imagine a world…」のところに英語でプロンプトを記入してワールドを生成できます。「3D input」があるので、Beta版ですが、GLBをインポートしてワールドを生成することも可能なようです。
Marbleサイトの使い方は、以下の紹介動画などを参考にしてください。
背景画像からドラフトワールドを生成
インプットする桜並木の風景画像は以下を使いました。
シンプルなプロンプト「Scenery of cherry blossom-lined streets in Japan.（日本の桜並木道の風景）」と風景画像をインプットし、「Use advansed editing」にチェックを入れ「Create」をクリック。
★ 「Use advansed editing」にチェックを入れると、パノラマシーンの生成やドラフトワールドでのテスト、編集、やり直しをした後で、本番のワールドを生成できるので、初心者にはやさしいと思います。
マウスドラッグで後ろ側も確認。風景画像からは見えない部分の風景も、それなりにAIが描いてくれているのが感動的ですが・・・💦
このまま「Create world」をクリックして本番のワールド生成が可能ですが、5分以上かかるので、とりあえず、「Create draft」をクリック。
数秒でドラフト版のワールドができあがるので、右下の「View」をクリック。
★ 画質は粗いですが、本番のワールドと同じ扱い方が可能なので、この状態でMarbleの操作に慣れておくと良いです。
ドラフトワールドをWordPressで公開
★ 以下はMarble有料版で提供されている機能です。
ダウンロードメニューから「Embedded viewer HTML」をクリック。
クリップボードにiframeコードがコピーされるので、テキストエディターなどに貼り付けます。
<iframe style="width: 100%; aspect-ratio: 4 / 3;" src="https://marble.worldlabs.ai/viewer.html?splatUrl=https%3A%2F%2Fcdn.marble.worldlabs.ai%2F63047ae6-3925-4001-a7bc-46d58db62a59%2Fe57ea40d-e43e-4c72-bde8-7acaf45387ec_sand.spz&mobileUrl=https%3A%2F%2Fcdn.marble.worldlabs.ai%2F63047ae6-3925-4001-a7bc-46d58db62a59%2Fb55c5155-450a-4001-9a8f-3f02b26a2882_sand_500k.spz&marbleWorldId=63047ae6-3925-4001-a7bc-46d58db62a59"></iframe>これをWordPressサイト（dazgen.com）の固定ページのカスタムHTMLブロックに貼り付けて表示すると以下のようになります。
★ マウス操作の他にキーボード操作も可能です。View画面の右下にあるキーボードアイコンをクリックすると、キーボード操作方法が見れます。この他に、矢印キーやスペースバーも使えます。
通常の360°パノラマ画像によるVRプレビューでは、視点が固定されていますが、Marbleのワールドではドラフト版であっても、VRプレビューに加えて、上下左右前後の視点の動きができるので、3Dゲーム感覚を味わえます。
本番ワールドを生成
右下の「Create world」をクリックし本番ワールドを生成します。今回は約5分かかりましたが、場合によってはもっと時間がかかる場合もあります・
★ ドラフト版と本番版の画質の比較ができます。人物入りの画像を用いると、ドラフト版では人物も表示されますが、本番ワールドの生成では人物や動物などの不確定なオブジェクトはすべて削除されるので、注意が必要です。
SPZ形式でダウンロードしておきます。
E'z GAL 3DGS PLAYER プロトタイプ
Gemini3.1 Pro CanvasでHTMLコードを生成しました。
ドラフト版 コーディング仕様書
https://dazgen.com/gallery/player/3DGS/spec/CodingSpec-0.1.05.pdf
プロジェクト・ダッシュボード
コーディング仕様書の内容を元に、ユーザー向けのGUIコードをGeminiでWebアプリとしてHTMLファイルを生成してもらいました。
E'z GAL 3DGS PLAYER プロトタイプ
E'z GALサイト プロトタイプ
ちなみに、このWebビュアーを組み込む予定のギャラリーサイト（プロトタイプ版）は以下です。これもGemini君にコーディングしてもらいました。
まとめ
前回制作を開始したE'z GALギャラリーサイト向けの、3DGS背景とGLB人物モデルを統合化したWebビュアーのアセットとプロトタイプHTMLコードを生成したので紹介しています。
3D人物モデルは、今回はFal AIでオープンソースの3D生成モデルを用いてマルチアングルの人物画像から生成しましたが、本来はDAZ StudioとBlenderによる3DCG人物モデルのGLBファイルを使う予定です。
今後は、一人称視点でのウォークスルー機能（Phase 2）も将来的に搭載できるよう開発を続けたいと思います。
