見出し画像

MyGAL Player|3DGS背景と3D人物モデルのシーン制作用ローカル3DWebビュアーをオープンソースで公開

ChromebookのGoogleドライブ上で動作するローカル3DWebビュアーを試作したので、HTMLコードとサンプルアセット(SPZ&GLB)をオープンソースで公開します。

ChromeOS Flexや、Windows11、macOS、Linuxの最新版Chromeでも動作しますが、THREE.JSなどの各種外部ライブラリーをネットから読み込むので、最新のWebGLが動作するインターネット環境が必要です。

3DGS背景と3D人物モデルを組み合わせた360°3DVRシーンのWebギャラリー用作品づくりの試行錯誤の過程で、毎回サーバーにアップロードして確認するのが面倒なので、Gemini3.1 Pro Canvasで試作したものです。


更新履歴

Ver.0.2 2026.5.3 - 編集カメラアングルリセット&ダブルクリック挙動修正
Ver.0.1
2026.4.13 - 初版リリース

ダウンロード

開始方法

MyGAL Player スクリーンショット(サンプルシーン)

MyGAL-Ver.0.2.zip」ファイルをダウンロード後、展開すると以下のようなHTMLコードとサンプルアセットがセットされたフォルダー階層ができます。

展開後のフォルダー階層
サンプルアセットファイル(HDR, GLB, SPZ, JSON)
MyGAL Player 本体(HTMLコード)

適当な場所(ローカルディスクや、ファイルマネージャーから直接アクセスできるようマウントされたクラウドストレージなど)にフォルダーごとコピーして使います。

★ 私の場合は、メインPCとして使っているChromebook Plus(ASUS CX34)のGoogleドライブ上で運用中です。フォルダーやファイルの場所やファイル名などは自由に変えても動作には影響しません。

Chromebook PlusのGoogleドライブ上で運用中

使い方

mygal.html」をChromeブラウザーの適当なタブ画面にドラッグ・アンド・ドロップして開きます。

★ ローカルファイルでも、ブックマーク(お気に入り)に登録すれば、ブラウザーからワンタッチで開けます。

初期画面(アセットフォルダーを選択)

★ 現状では、まだドラッグ・アンド・ドロップによるアセットのロードは動いていません。動作が可能になったら更新履歴を更新しますので、ご確認ください。

SELECT FOLDER」をクリックし、アセットフォルダーを選択してアップロードをクリック。

アセットフォルダーを選択し「アップロード」をクリック
「アップロード」をクリック
サンプルシーン
マウス操作でシーンの回転・ズーム・視点移動

マウス操作

左ドラッグ:視点を中心としたカメラの回転(ドリー)
ホイール:カメラの画角(焦点距離)調整(ズーム)
右ドラッグ:視点の平行移動(パン)
左ダブルクリック:視点の移動(カメラ回転中心の移動)
左シングルクリック:アニメーション・ターンテーブル回転の途中停止・再開

初期画面へ戻る

左上のタイトルをクリックすると、初期画面に戻ってシーンアセットの再読み込みや変更ができます。

★ ブラウザーの再読み込みでも初期画面に戻れます。

調整パネル

調整パネル

D'zGAL WarpGate Playerの開発者モード(&dev=1)の調整パネルから、よく使うパラメーターをピックアップしシンプル化しています。今後、私の都合により追加や削除をする可能性があります。

★ 右端の数値をキーボード入力で変更ができます。また、スライダー上にマウスカーソルを移動すると、ホイールによる微調整も可能です。

★ 最下部の「調整結果をJSON保存」をクリックすると、その時のシーンの状態が「scene_update.json」として保存されます。

その後はブラウザーが自動的に「scene_update(1).json」などの連番を付けて保存しますが、次回にシーンを読み込む時は、日時が最新のものを自動的に選んで読み込みます。(現状ではシーンの切り替え機能はありません)

自動スリープ

この3DWebビュアーはローカルで動作しますが、THREE.JSなどの3DCG系の外部の各種ライブラリーを読み込むので、かなり処理が重いです。

これは他のタブで開いているサイトやアプリの動作や処理性能にも影響するので、自動的にスリープする機能を搭載しています。

何も触らない時間が1分を超えると、自動的に真っ黒な画面のスリープモードに移行します。また、他のタブやアプリに移動しても自動的にスリープモードに移行します。

MyGAL Player画面に戻ると、自動的にスリープモードから復帰するので、すぐに使える状態になります。

カスタマイズ

今回公開しているHTMLコードおよびサンプルアセットはご自由にお使いください。dazgen.comおよび吉良浩明が著作権を保有しますが、オープンソースとして提供します。個人の3D作品づくりなどにご活用ください。

★ HTMLソースコードをGeminiにアップロードすると、日本語プロンプトで会話的にこのローカル3DWebビュアーのカスタマイズが可能です。

Gemini3.1 Pro Canvas 画面

まとめ

D'zGALギャラリーサイトとWarpGateプレーヤーで楽しめる3D作品づくりにおいて、試行錯誤の段階で毎回サーバーにアップロードしてテストするのが面倒に感じていました。

そこで、ローカル環境でブラウザーだけでテストできる3DWebビュアー「MyGAL Player」をGeminiで試作したので、オープンソースでサンプルアセットとともに公開しています。

今後、自分で使いながら、改良を加えバージョンアップし、より使いやすいツールにしていきたいと思います。

さらに、オープンソースで提供しているので、みなさまがGeminiでご自分のニーズに合ったツールにカスタマイズしてご活用いただければ幸いです。

参考リンク

サンプルシーンのアセット(3D生成AI人物モデルGLB、3DGS背景SPZ)の制作方法などは以下の記事などを参考にしてください。

★ GLBファイルは、データの読み込み時間を短縮するために、Draco圧縮したファイルを、MyGAL Player内で自動的に展開する機能を追加しています。

DAZモデルはライセンスの都合で3Dデータの配布や商用利用が現状ではできないので、制作方法のテクニックなどを今後紹介していく予定です。


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