AIで3Dモデルを生成する：ブラウザゲームで使える形式に変換
遊びをつくる執筆にClaudeを使用しています。
AIを使えば3Dモデルのテキスト入力や画像からの生成が現実的な選択肢になりました。しかし「生成できた」と「ゲームで使える」のあいだには、ファイル形式の変換・ポリゴン数の最適化・テクスチャの調整という三つの壁があります。この記事ではその壁を一つずつ乗り越えるための判断基準と手順を示します。 ブラウザゲームで3Dを扱う場合、多くの開発者はThree.jsやBabylon.jsといったWebGLライブラリを使います。これらのライブラリが標準でサポートするのは主にglTF / GLB形式です。AIツールが出力するOBJ・FBX・STLなどとは異なるため、変換の知識が必要になります。
この記事の目次
AIによる3Dモデル生成ツールの選び方
現時点で個人開発者が試しやすいツールはいくつかあります。ツール選びで確認すべき点は「出力形式」と「商用利用条件」の二つです。利用規約は頻繁に変わるため、使用前に必ず公式サイトで確認してください。
代表的なアプローチを大まかに分類すると次のようになります。
- テキスト→3D生成：プロンプトで形状を指示する。抽象的な造形には強いが、細部の制御が難しい。
- 画像→3D生成：既存のイラストやスプライトから立体形状を推定する。2Dアセットを流用したいゲーム開発者に向く。
- スカルプト補助型：既存ソフト（BlenderのAIアドオンなど）でポーズや形状をAIが提案する。出力形式の自由度が高い。
ブラウザゲームを目標にするなら、「glTFまたはOBJで書き出せるか」を最初に確認するのが最短です。FBXしか出力できないツールでも変換は可能ですが、工程が一段階増えます。
ファイル形式の変換：何をどう変えるか
なぜglTF / GLBが推奨されるのか
glTF（GL Transmission Format）はKhronos Groupが策定したWeb向けの3D標準形式です。メッシュ・マテリアル・アニメーションを一つのファイルにまとめられるGLB（バイナリ版）は特にWebでの転送と読み込みに最適化されています。Three.jsもBabylon.jsもGLTFLoaderを標準で持っており、数行のコードで読み込めます。
変換の基本フロー
- AIツールからOBJ・FBX・STLのいずれかで書き出す。
- Blender（無償）でインポートし、glTF 2.0形式でエクスポートする。
- エクスポート時に「GLB（単一バイナリ）」を選ぶとテクスチャが内包されてファイル管理が楽になります。
Blenderを使わない方法としては、オープンソースのコマンドラインツールAssimpがあります。多くの形式を相互変換でき、CI/CDパイプラインに組み込めます。またWebブラウザ上で変換できるgltf.reportのようなツールも存在しますが、大容量ファイルには向きません。
STL・PLYへの注意
3Dプリント向けに生成されたSTLはUV座標（テクスチャの貼り付け位置情報）を持ちません。ゲームに使うにはBlenderでUV展開をやり直す必要があります。AIツールがSTLしか出力しない場合、テクスチャが不要なシンプルな形状（岩・建物の外壁など）に用途を限定するのが現実的です。
ポリゴン数とテクスチャの最適化
ブラウザゲームでの目安
AIが生成したモデルはポリゴン数が多すぎることがほとんどです。スマートフォン含む幅広いデバイスで動かすことを前提にすると、キャラクター1体あたり2,000〜10,000ポリゴン程度が一つの目安になります（背景オブジェクトはさらに少なく抑えるのが一般的です）。ただし目標フレームレートとシーンに登場するオブジェクト数によって変わるため、実際にブラウザで計測しながら調整することが重要です。
Blenderでのデシメート（ポリゴン削減）
Blenderには「デシメートモディファイア」という機能があります。
- オブジェクトを選択し、プロパティパネルの「モディファイアー」タブを開く。
- 「デシメート」を追加し、比率を下げていく（0.1なら元の10%）。
- プレビューで形状の崩れを確認しながら、許容できる最小値に設定する。
- 「適用」してからglTFでエクスポートする。
AIが生成したモデルは局所的に密なポリゴンが集中していることが多く、一律に比率を下げると重要な部位が崩れます。「頂点グループ」を使って部位ごとに異なる削減率を設定する方法も覚えておくと便利です。
テクスチャのサイズと形式
テクスチャはゲームのロード時間とメモリに直結します。基本的な方針は以下のとおりです。
- 解像度は2の累乗（512×512・1024×1024など）にする。WebGLがこれを前提に最適化されているためです。
- JPEGは写真的なテクスチャ向け、PNGは透過が必要な場合に使います。
- WebP形式はファイルサイズをさらに抑えられますが、使用するローダーが対応しているか確認が必要です。
- 複数のテクスチャを一枚にまとめる「テクスチャアトラス」はドローコール（描画命令の回数）削減に有効ですが、UV座標の編集が必要になります。
Three.jsでGLBを読み込む最短手順
変換したGLBファイルをブラウザゲームに組み込む基本的な流れを示します。Three.jsを例にします。
まずGLTFLoaderをインポートし、ファイルのパスを渡して読み込みます。loader.load()のコールバック内でgltf.sceneをscene.add()すればモデルが表示されます。アニメーションが含まれている場合はgltf.animationsからAnimationMixerに渡します。
実際の実装で詰まりやすい点は次のとおりです。
- テクスチャが白くなる：glTFのマテリアルはPBR（物理ベースレンダリング）前提です。THREE.MeshStandardMaterialまたはTHREE.MeshPhysicalMaterialを使い、シーンにAmbientLightかDirectionalLightを追加しているか確認します。
- モデルのスケールがおかしい：AIツールによって単位系が異なります。gltf.scene.scale.set(0.01, 0.01, 0.01)のようにスケールを調整します。
- 読み込みが遅い：GLBの容量が大きい場合はDRACOLoaderを組み合わせるとメッシュを圧縮できます。Three.jsはDRACOデコーダーを内包しており、ローダーに渡すパスを設定するだけで有効になります。
商用利用とライセンスの確認
AI生成3Dモデルをゲームに使う際のライセンスは、ツールごと・プランごとに異なります。無料プランでは非商用のみ許可しているケースも多く、また生成物の著作権の帰属についても各ツールの規約で方針が違います。ゲームを公開・配布する前に、使用したAIツールの利用規約を必ず読み、不明点は運営元に問い合わせるか法律の専門家に確認することをお勧めします。一般的な考え方として「ツールが出力したデータに対してサービス側がライセンスを付与する」形をとるサービスが増えていますが、これを断定した説明はできません。
次の行動
Blenderをまだインストールしていない場合は公式サイトから入手し、手元のOBJファイルをGLBに変換する練習から始めてください。Three.jsの公式ドキュメントにあるGLTFLoaderのサンプルコードと組み合わせると、最短でブラウザ上に3Dモデルを表示できます。変換したモデルを使ったゲームが完成したら、HTMLファイルやZIPとしてアソバースに投稿して公開することができます。
参考資料
- glTF 2.0仕様書（Khronos Group公式）
- Blender公式マニュアル（Decimate Modifier・glTFエクスポートの項）
- Three.js公式ドキュメント（GLTFLoader・DRACOLoader）
- Assimp公式ドキュメント
