愛犬が走るゲームを Tripo-SG と ThreeJS でつくる
背景
愛犬 (といってもパートナーの愛犬なのですが) のデフォルメした3Dモデルを作成しフィギュアにするなり何なり…というのは，遡ること2022年ころから画策していました。
当時の画像からのイヌモデル生成の (恐らく，多分) SoTAであった BARC (BARC: Learning to Regress 3D Dog Shape from Images by Exploiting Breed Information) の公式実装を必死こいて環境再現し，自前のGPUで生成していました。
のですが，愛犬のプロポーションをうまく再現することができず，またイチからモデリングするBlender力も私には無く，しばらく諦めていました。
ちなみに，BARC それ自体は面白いアプローチを取っていて，イヌ生成するために犬種のドメイン情報を取り込むことによって損失関数を工夫 (犬種としてどれくらい類似度があるか / 犬種分類タスクを解かせるなど) したり，動物向けのパラメトリック3DモデルであるSMAL (Skinned Multi-Animal Linear - 人間のSMPLの動物版) モデルをイヌ特化型の部分空間に拡張したり的なことをしています。
Image-to-3Dモデル生成と後処理
2025年には単一画像からの生成制度が飛躍的に向上していたので，再度チャレンジすることにしました。
色々と調査した結果， Huggingface上でのGPU推論 (サブスクリプション) + Huggingface Spacesにあるモデルの利用 が最も楽で実験が早いとなり，結果的にTripo-SG が最も制度高く生成できたため採用しました。
ここで，生成精度が高いゆえに手元にある愛犬の画像からそのまま3Dモデル生成を行うと，あまりにも「剥製」っぽいリアリティで，不気味の谷が相当あったため，一度 ChatGPT (4o) での画像変換を挟むという処理を挟みます。
リメッシュとベイク
Tripo-SG 生成モデルのポリグループが分かれている問題を解消するため、リメッシュを行いました。
- リメッシュしてバラバラなパーツを一つのメッシュに統合
- リトポロジーしてゲーム向けのローポリジオメトリを作成
- ローポリジオメトリにテクスチャをベイク (マテリアル新規作成 → テクスチャ画像新規作成 → Smart UV Unwrap で展開 → Diffuse でベイク)
注意点として、リメッシュすると元の UV マップが消えてしまうため、ベイク前に元モデルのマテリアルを参照する設定が必要です（法線に沿った Transform を使う）。
ボーン・リグを入れる
ゲーム上では走らせたいので，3Dモデルにアニメーションをつけますが，ボーン（骨格）とリグ（骨格と頂点の紐付け）が必要です。
自動リグの試み
いくつかの自動リグサービスを試しました。
- anything.world — 四足歩行モデルへの自動リグに対応しているサービス。「ポメラニアン」なども指定できる。ただし今回は生成時にエラーが出て断念。
- AutoRig Pro（Blenderの有料プラグイン） — イーブイ（ポケモン）に犬のボーンを入れようとした事例でも自動ではうまくいかなかったという報告があり、愛犬のような独特なプロポーションのモデルには難しかった。
Rigifyを使う
結局 Blender の Rigify を使って手動でリグを入れることにしました。 以下を参考に自前で，整えたモデルに骨格を入れていきます。
走るアニメーションは犬のリグを活用できる AnimBox などのアセットを参考にしました。
これにより，作ったモデルが歩いたり走ったりできるようになります。
Three.jsでゲーム化する
Vite + Three.js (react-three-fiber) で開発しました。Vector 周りのシーン構造の理解が浅い部分は Gemini 2.5 Pro を使ったバイブコーディング（Vibe Coding）で補いました。
- 基本はラジコンカーのような操作（操作中以外は OrbitControls）
- HDR の天球画像を Poly Haven から取得して背景に使用
- 愛犬の好きなアロエヨーグルトを通過すると得点が加算される
- 障害物として木のモデル（外部アセット）と岩（ローポリで描画）を配置
- 木はマテリアルを固定にしないと描画が重くなる問題があった
- イントロ画面とスコア表示を実装
- Three.jsで新宿駅構内の3D探索ゲームを作ってみる - Qiita などを参考にした
- 【Three.js】ジョイスティック風UIでARオブジェクトを操作する - Zenn を参考にモバイル対応も検討
- ボーンアニメーションは techblog.kayac.com を参考にした
まとめ
AI を使えばモデル生成自体は一瞬ですが、ゲームに使えるクオリティに仕上げるためのリメッシュ・リトポロジー・ベイク・リグ入れが一番の手間でした。 一方、Three.js によるゲームロジックやシーン構築は Vibe-coding との相性が良く、プロトタイプを素早く作れます。