ChatGPT, ImageFXで箱庭を作って3D背景にする

## はじめに

前回の記事「[ChatGPTの絵から3Dモデルの部品を大量生成する。](https://qiita.com/yanosen_jp/items/f98e8b03917b465a92b3)」、沢山ご覧いただき有難うございました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/c1fb4dc8-d8b0-4d1a-be5d-78dca62cbad3.png)

あの記事では触れなかったんですが、既存のimage to meshはアイテムの生成には強くても、「カフェの内部の建物部分」のような空間の生成は苦手なんですよね。だから、あの記事では「部品の生成」しか行ってないわけです。

そこで、やや姑息的な解決策として、AIに「箱庭」の画像を生成させ、それの壁や床部分だけを取り出し、それを3Dモデルにする方法を考えてみました。いろいろなアイテムを置くときの簡易的な背景として使えると思います。

## 「箱庭」画像の生成

ここでいう箱庭画像とは、例えば以下のようなものです。ChatGPTで生成しています。

<img width="400" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/87c2f7da-221e-4d29-b74c-1fe8129ab473.png">

空間を斜め上から見ており、外周の輪郭は正六角形に近いです。これはisometric projectionと言われる投影方法で、ゲームなどでもおなじみですよね。手前でも奥でも大きさは変化しないのでゆがみが少ない、空間全体を一つの画像に入れられるので便利です。大抵の画像生成AIなら、プロンプトにisometric projectionと入れればそれっぽく生成してくれます。例えば、上の画像なら

```
画像を作成する ヨーロッパ風のカフェの内部
isometric projection
```
という感じです。シーン全体を画像に収めたいので、はみ出している部分が多いときは```カメラを後ろに下げてください```、```もう少し離れた視点の画像にしましょう```といった指示を出してください。

## 背景だけを残す。

さて、上の画像では単にカフェと指示したので椅子など余計なものがあります。これを除去しましょう。とりあえず、画像を生成した後に続けて
```
この画像から、家具をすべて除去してください。
```
と指示します。すると以下のように、椅子やテーブル、コーヒーメーカーなどが削除されました。


<img width="400" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/d17d588c-2930-47c3-8632-64c6f471e170.png">

しかし、左の壁にカウンターなどが残っています。基本的に、壁から凹んだり出っ張っているものは箱庭背景の邪魔になるので、除去します。ここでは、ChatGPTの画像選択ツールを使います。生成された画像をクリックすると右上に出てくる投げ縄のようなアイコンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/79010ded-833a-4edf-9487-5369f11d0ffe.png)

こういう感じに、凹みやでっぱり部分を選択して、「選択部分を除去してください」と指示しましょう。

<img width="400" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/027fa46c-bc29-4634-90e6-743b2d511168.png">

良い感じで除去してくれます。ChatGPTの「除去力」はなかなかですね。

<img width="400" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/c7f6509c-b03c-4f64-9caa-5bf8083a59fe.png">

(追記)
より正確なテクスチャにするには、o3,o4-miniなどにお願いして立面図を書いてもらうのも良いです。
```
左壁の立面図と、背面壁の立面図をそれぞれ描け。
これらは正面から描かれたものとして、アイソメトリックではなく、
直交投影としての視点で生成せよ
```
(追記終わり)

これで箱庭画像から余計なものを除去して「背景」部分だけを取り出せたので、これをダウンロードして画像ファイルを保存してください。

## 箱庭背景画像を3Dモデルにする。

次に、作った画像を3Dモデルに変換します。私が作った[**箱庭メイカー**](https://hakoniwa-maker.vercel.app/)を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/507ba971-8279-4285-9908-58c525dba9bd.png)

名前の通り、isometric projectionスタイルの画像から3Dモデルを作ります。単純に壁と床に相当する画像部分をテクスチャとして張り付けるだけで、AIによる推論はありません。

ページを開いたら、指示に通り画像をアップロードしてください。すると、以下のように、頂点を選択するよう指示が出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/1fd6dd7b-2052-4e67-acae-1815298e5c0b.png)

これは要するに、壁と床に相当する部分を自分で切り取ってください、ということです。頂点を選ぶ順番が決まってるので、画面の指示通りに7つの頂点を**順に選択してください**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/97a548a0-8415-4900-9c0b-3699fd9fed6c.png)

上下の頂点は生成画像の中で見切れてしまってることも多いですが、その場合「この辺が頂点だろう」と思うあたりの余白をクリックしてください。失敗したら、「取り消す」ボタンを使います。頂点をすべて選択したら、右下の「頂点選択完了」を押して下さい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/b27c38cf-6f4d-4c5f-8efa-42132668311a.png)

すると、3Dモデルが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/ff9b5ab4-2ae1-4461-be62-c92e793bad57.png)

モデルのglbファイル、および壁と床のテクスチャファイルは下のボタンでダウンロードできます。

ダウンロードしたモデルは、ブラウザやVRヘッドセットで出来栄えを確認しましょう。簡単なツールを作ったので、以下の記事からアクセスしてください。

[3Dモデルをブラウザに放り込んで、スマホやVision Proでサクッと見る話](https://qiita.com/yanosen_jp/items/573538278b9273b98785)

## 天井と残りの壁を追加する

原理的に、箱庭画像では床＋壁2面しか作れないんですが、どうしても天井や残りの壁も欲しいという人のために、雑な天井と壁を作る手段も用意しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/b2609750-9123-4f41-aba0-0fecd1c5aafb.png)

まず天井ですが、テクスチャパターンを使います。ChatGPTで、今までのやり取りに続いて

```
画像を作成する この部屋の天井の壁紙のために、
上下左右にシームレスでタイラブルな
テクスチャ画像を生成してください。
```

とリクエストしてください。すると、以下のような画像を生成します。

<img width="300" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/7d5e7f26-2f58-4688-a8db-6b0b95fc9d9a.png">

厳密にはシームレスではないのですが、それっぽい感じはありますよね。完全なシームレスにするなら、[シームレステクスチャメーカー](https://v0-seamless-texture-maker.vercel.app/)を用意したので使ってみてください。

画像ができたらダウンロードして、「3Dモデルのオプション」の「天井を作成」から、天井パターンをアップロードしてください。すると、以下のようにテクスチャが適用された天井が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/3690f56d-acbc-4a13-809f-d9016927d4fd.png)

壁については、単純に向かい合う壁をコピーするだけです。「手前の左/右壁を作成」のオプションをオンにすれば作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/16187d90-c620-4fdd-ae3e-674d60bc087c.png)

中はこういう感じです

![Screen Recording 2025-04-03 at 10.59.05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/7f76e925-edaa-45df-9cf4-ca3bb5b545d8.gif)



## ImageFXでもう少し広い箱庭を

ChatGPTの画像生成と除去機能は素晴らしいんですが、画像が正方形に近いので、どうしても狭い空間しか出力できません。広い空間を作るには横長にしてほしいのですが、そうすると下のような空間の一部だけを写した絵になりがちです。

<img width="400" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/f35c9035-60d3-4af2-b88f-2cb51e41fda3.png">

そこで、[ImageFX](https://labs.google/fx/ja/tools/image-fx)を試してみます。こちらは、出力画像のアスペクト比を選べるうえ、アスペクト比を変えても出力の傾向が大きく変わらないという利点があります。英語しか受け付けない、ネガティブプロンプトが効きづらいなどの欠点はありますが、、、。

まずは、以下のようなプロンプトを試してみてください

```
an interior view of an European cafe,
no people, isometric projection.
```

すると、複数の候補画像を生成してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/59d8c434-facf-4a22-a7d9-851f681b6c53.png)

なるべくごちゃごちゃしておらず、壁の凹凸が少なく、上下が見切れていないものを選んでダウンロードして下さい。

ダウンロードしたら、ChatGPTにアップロードして、先ほど同じように余計なものを除去しましょう、ただし、「元の画像のアスペクト比を維持すること」という指示を加えてください。そうしないと正方形画像になってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/3bbf4732-1072-40b4-9e80-accfaf161242.png)

元画像より微妙に縦に長いですが、一応横長になってくれてます（ChatGPTは本当に横長が苦手、、）。

アップロードしたての画像は範囲選択で除去の指定ができないですが、ChatGPTが一度処理した画像には可能なので、とりあえずプロンプトで家具などを消した後に、範囲選択で余計なもの（今回は無駄な天井部分）を消してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/55f10bac-34ca-4721-ab28-e4cac0cb84b0.png)

クリーンナップが出来たら、変換ツールで3Dにしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/61723ecd-a0fd-4770-a0d5-d603d8be52cb.png)

最初の例より広い空間になりましたね。

### Gemini 2.0 Flash (Image Generation) Experimentalを使ってみる。

ChatGPTの画像編集力は高いんですが、絵の雰囲気や中身を勝手に変えることがあって不便なところもあります。なので、目的によってはGemini 2.0 Flash (Image Generation) Experimentalを使うとよいでしょう。

これはGoogle AI Studioなどで使えます。ChatGPTに比べると元絵に忠実ですが、消してほしいものを消してくれなかったり、消した跡が汚かったりすることがありますね。同じ命令を何度も繰り返すとうまく消えることもあります。

<img width="500" alt="no alt" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58503/b1046caf-079f-43a6-9c4a-b85e559f1825.png">

消し残りがあったら、WindowsのPaintアプリにあるCopilot/生成消去機能で消して、消し跡をGeminiに"Fix this image"とお願いして修復してもらうこともできます。試してみてください。ほかにもPhotoshop（有料ですが）や[pixelcut](https://www.pixelcut.ai/)など使って微修正できます。探してみましょう。



## おわりに

画像生成については、ほかにも良いサービスがあるかもしれません。ご存じでしたらコメントいただければ幸いです。

今回の方法は原理的に３面しか作れないと言いましたが、もしかしたら工夫すれば、残りの面もChatGPTで合成出来るかもしれません。もう少し検討してみます。