見出し画像

D'zGAL Studio|3Dモデルのポーズ編集&パノラマ/3DGS背景シーン制作用Webアプリのアルファ版を公開

Gemini Flash 3.5とClaude Opus 4.7でコード生成した、3Dモデル/パノラマ&3DGS背景切り替えのシーン制作用Webアプリのアルファ版を公開しているので紹介します。

シングルHTMLファイルのみのコードだけでどこまで実現できるか?チャレンジしてみましたが・・・

デスクトップChromeブラウザー(Preview - パノラマ背景)
Androidスマートフォン(Asset)
Androidスマートフォン(Preview - パノラマ背景)
Androidスマートフォン(Preview - 3DGS SPZ 背景)

更新履歴

Ver.0.8.2 2026年5月25日 アルファ初版 公開

D'zGAL Studio(アルファ版)公開

デスクトップ

Chromebook Plus(ASUS CX34)のChromeブラウザー

Assetsモード(モデル/背景/シーン設定をロード)
Editモード(ポーズ編集)
Previewモード(パノラマ画像 背景)
Previewモード(3DGS(SPZ) 背景)

★ サンプルシーンに使っている背景は、パノラマ画像(天球にエクイレクタングラー形式の背景画像をテクスチャとして貼り付け)と、3DGSMarble AIのExplore画面から選んだシーンのSPZ)をその元の360°パノラマ画像、およびアイキャッチ画像とともにダウンロードしたものなので、原理的に同じ見え方にはなりませんが、できるだけ近づけるよう工夫しています。

Android

Xiaomi 14T Chromeアプリ

全画面表示を開始
画面を横向き倒す
サンプルアセットをロード
Editモード(モデルのポーズを設定/編集)

★ 右上の「✕ 閉じる」ボタンをタップすると、右の操作パネルが非表示になり全画面でプレビューができます。

設置パネルを閉じた状態
Previewモード(パノラマ画像背景)
Previewモード(3DGS(SPZ)背景)
3DGS(SPZ)背景 & 設定パネルを閉じる

★ 全画面表示の時に「 縮小」ボタンをタップすると、元のアドレスバーなどが表示され、ブラウザーの操作が可能になります。

★ パノラマ画像背景から3DGS(SPZ)背景に切り替えると、メッセージが表示されるので、両者の背景の向きが異なるなどの場合は、SPZ背景を回転させてホイールでズームアップするなどして両者をできるだけ合わせた後で「カメラ画角をパノラマ<>SPZで連動」にチェックを入れてください。

メッセージは右上の「OK」をクリック/タップすると消えます。

iPnone(iOS Safari)

最初の縦長画面の状態では、全画面表示がサポートされないので、そのまま横向きに倒すと横長画面では自動的に全画面表示になります。

iPad(iPadOS Safari)

iPadOSは縦長画面の状態でも全画面表示がサポートされるので、Androidと上部の帯などの多少の違いはありますが、操作は同じです。

現状

開発のきっかけ

D'zGAL Gallery / WarpGate Player」(Web環境)や「MyGAL Player」(ローカル環境)では、高画質な人物モデル(DAZ StudioとBlenderを併用)とMarble AIによる3DGS背景を組み合わせたWebビュアーという位置づけでしたが、一般的なスペックのPCやスマートフォンでは、動作が少々重いと感じていました。

最近になって、3Dモデルのポーズを画像と手動で設定し編集できる「MyGAL 3D Pose Editor」(ローカル環境)をテスト的に制作してみました。

★ 上記記事で、当初はAvaturnで制作した3Dモデルをダウンロードできるようにしていましたが、Avaturnで制作した3DコンテンツはAvaturnの利用規約で配布を禁止しているので、ダウンロード提供を中止しました。

すると、動作が軽快なので試行錯誤の段階では使い勝手が良いと判断し、ポーズ編集&Webビュアーとして「D'zGAL Studio」アルファ版の開発にチャレンジすることにしました。

実現したかったことは主に以下です。

  1. WordPressサーバーにアップロードして動作するWebアプリ

  2. シングルHTMLファイルで実現

  3. ポーズ編集とWebビュアーを合体しシームレスに運用できる

  4. 軽快なパノラマ画像背景と、リアルな3DGS背景を切り替えられる

  5. レスポンシブ化し、スマートフォンでもなんとか操作が可能

★ アルファ版では機能の実装と動作検証に重点を置いたUI/UX開発になっているので、操作性がイマイチですが、徐々にUI/UXを整理して使い勝手を向上させたいと思います。

使い方

現在はアルファ版であり、今後多くのUI/UX上の改良を加える必要があると思われるので、今回は詳しい操作方法の説明は省略します。

ユーザー様でお試しいただいた上で、こうした方が良いなどのご意見・ご要望などがありましたら、コメントやダイレクトメッセージでご指摘ください。

できるだけご要望にお応えできるようがんばります。

生成AIによるWebアプリの開発状況

今まではGemini Pro 3.1 Canvas上で一連の3DCG関連のWebアプリを開発し紹介してきましたが、ここに来て、Geminiに大きな変化がありました。

まず、利用制限がかかるようになりました。サポートチャット(人間)に問い合わせると、いろいろな要因が複雑にからんでいるので、利用制限がかかる条件を明確には説明できないとのこと・・・

解消するには24時間後に作業を再開するか、新規チャットで始めてください、と言われ、24時間はオーバーだとは思いましたが、Claude Proを契約(月額20ドル)して、Claude Opus 4.7に移行しました。

しかし、有料のClaudeでも利用制限がGeminiよりも頻繁にかかるので、ローカル環境からWeb環境への移行までをできるだけ完成度を高めてからGeminiに戻りました。

このタイミングで、Gemini Flash 3.5が使えるようになったので、アルファ版が完成するまでGeminiで作業しましたが、利用制限はかかりませんでした。

GeminiとClaudeの有料版(Pro)を使い比べてみると、A型気質のClaude、B型気質のGemini、という感じです。

仕様が明確な場合は、Claudeの方が圧倒的に効率良く作業できますが、曖昧な頭で相談しながらコアな部分を詰めるなどはGeminiが得意であり、最後の段階での検証作業や使い勝手の向上などの「壁打ち」もGeminiの方が効率が良いように感じます。

まとめ

3Dモデルのポーズエディター機能とパノラマ/3DGS背景によるシーンのWebビュアーを兼ねた「D'zGAL Studio」Webアプリを、生成AIを用いたシングルHTMLでの開発にチャレンジしてみたので紹介しています。

次回以降では、UI/UXのブラッシュアップや不具合の改善などにより、ベータ版を制作して公開する予定です。

参考リンク

今回のポーズエディターでは、リグ入りの3Dモデルが必要なので、サンプルアセットで使用しているAvaturn(無料版でもGLBエクスポート可能)と、Meshy AI(3D生成AI:有料版でないとGLBエクスポートはできない)について以下で紹介します。(Fal AI内でMeshy AIのリグ入りGLB生成が可能)


いいなと思ったら応援しよう!