← 研究ログ一覧へ

気づき・ログ / 3D・空間あそび

RPG風の3D研究施設を作る実験

壮大で詳細なイメージは時に研究の妨げになるのかもしれない(Dr.よこぼ)

SUCCESS

実験結果

ローポリ研究施設、探索可能状態まで到達

せっかちな方のために、研究成果を先に発表しておく。

よこぼの研究所ローポリワールドはこちら。

https://yokobo103.github.io/yokobo_ai_lab_3d_boxel_world/

方向キーでDr.よこぼを移動できる。ドラッグで視点を変えられる。

画像

今回の実験目的は、当ラボの世界観を「見るだけのイメージ」ではなく、実際に歩ける3D研究施設として構築できるか確認することだった。

要するに、よこぼのAIラボをRPGの街っぽくしたい。

しかも、ブラウザで動かしたい。

さらに、Dr.よこぼを歩かせたい。

欲張りである。

---

きっかけ

きっかけは、npaka氏のnote記事だった。

https://note.com/npaka/n/n34b00d58dfbe?sub_rt=share_pw

これを見て、私はかなり驚いた。

「こんなことができるのか?!」

記事を読んだ瞬間、当ラボの研究テーマにすることを即決した。

まずはやってみる

ひとまずCodexにお願いしてみることにした。

画像

最初に渡したイメージ画像はこちら。

せっかくなので、よこぼのAIラボ研究施設をイメージして作った。

画像

かなり情報量が多いが問題ないだろう。

最初にできたものがこちら。

画像

おお。

ローポリの街にはなっている。

中央に広場があり、建物が並び、木も街灯もある。

ただし、当初のラボ感とは少し違う。

研究施設ではない、ファンタジー系RPGの村である。

悪くはない。

しかし、イメージ画像とはかなり遠い気がする…

もう少しイメージに寄せる

そこで、もう少し頑張って最初のイメージに寄せてほしいとお願いした。

画像

建物に色が入り、発光パネルらしきものも増えた。

紫、赤、青、水色など、エリアごとの差も出てきた。

ただし、ここで別の問題が発生した。

情報量が増えた分、テクスチャの貼り方や建物の個性が少し不安定になった。

そして私は気づいた。

最初に渡したイメージ画像、情報量が多すぎたかもしれない…

ゴールイメージをローポリに寄せる

そこで、いったん考え方を変えた。

最初から豪華なイメージを渡すのではなく、ローポリ版のゴールイメージを作り、それを目標にする。

画像

これなら、ゲーム画面としての形が見えやすい。

建物の形もデフォルメされており、ローポリ化の方向性も明確である。

その結果がこちら。

画像

ちょっと近づいた。

少なくとも、最初のファンタジー村よりはラボの街っぽくなった。

中央広場、建物配置、屋根色の違い、発光パーツ。

だいぶ「研究施設を歩いている」感じに近づいた。

しかし、まだ課題は残っていた。

紫、赤、紺の屋根の建物が、見た目だけでは役割を判別しにくい。

色は違うが、何の施設なのかが伝わりにくい。

これは重要である。

RPGの街では、建物ごとの役割が見た目でわかることが大事だ。

武器屋っぽい、宿屋っぽい、研究所っぽい。

そういう記号が必要になる。

建物の役割を伝える

というわけで、もっと建物の位置づけに関する情報を渡してみた。

画像

ここでは、単に「見た目を良くして」ではなく、各施設が何をする場所なのかを伝えるようにした。

画像・動画の建物はアトリエっぽく。

ゲームの建物は冒険ギルドっぽく。

Webの建物はコード工房っぽく。

つまり、建物の外観に役割を持たせる実験である。

さらに、建物ごとのコンセプトシートも作成した。

画像

だんだん研究施設になってきた

結果がこちら。

画像

かなりゴールイメージに近づいた。

中央の広場、青い研究棟、水色の3Dっぽい建物、紫の建物、赤い屋根、黒っぽいWeb工房。

施設ごとの方向性が見え始めている。

もちろん、まだ完璧ではない。

建物によっては、テクスチャが少し強すぎたり、パーツの貼り方が不自然だったりする。

だが、最初の「なんとなくローポリ村」からは大きく前進した。

ここまで来ると、ただの背景ではなく、歩き回れる研究施設に見えてくる。

主人公を配置する

主人公はもちろん私、Dr.よこぼである。

このあたりの発想は、npaka氏のnoteを見なければまったく思いつかなかった。

感服である。

Codexがスプライトシートを作ってくれている様子がこちら。

画像

Dr.よこぼを THREE.Sprite のビルボードとして配置し、方向キーで移動できるようにする。

さらに、カメラの向きに対して自然に見えるよう、上下左右と斜め方向のスプライトを切り替える。

この時点で、かなりゲームっぽい。

単に3D空間を作るだけなら、まだ展示物に近い。

しかし、キャラクターが動くと、急に「ここを探索する」感覚が出る。

これはかなり大きな変化だった。

最終的にこうなった

最終的には、こんな感じになった。

画像

Dr.よこぼが中央広場付近に立っている。

周囲には研究施設が並び、看板や発光パネルもある。

方向キーで移動でき、ドラッグで視点を変えられる。

研究施設としては、まだ荒いが、

ブラウザ上で、当ラボのローポリ研究施設を歩けるところまでは到達した。

これはかなり成功寄りの実験結果と言ってよい。

今回わかったこと

今回、特に大きかった発見は、ゴール画像の作り方である。

最初に作った豪華なAIラボ画像は、世界観の確認には有効だった。

ただし、そのまま実装の設計図にするには情報量が多すぎた。

一方で、ローポリ版のゴールイメージや建物ごとのコンセプトシートは、実装にかなり効いた。

AIに作ってもらう場合でも、人間側が何を整理して渡すかで結果が変わる。

「もっといい感じに」では弱い。

「この建物はアトリエで、パレットとリールがあり、窓はステンドグラスで、作業場が見える」くらいまで言うと、急に実験が前に進む。

これは重要な観測結果である。

残っている課題

まだ課題はある。

建物の個性は、さらに強めたい。

施設ごとに入れるようにもしたい。

Dr.よこぼ以外のキャラクターも歩かせたい。

スマホ操作も検討したい。

軽量化も必要である。

あと、ローポリなのに油断すると情報量が増えすぎる。

これはかなり危険だ。

研究施設を作ろうとすると、つい小物を増やしたくなる。

しかし小物を増やすと、負荷も上がるし、作るものも増える。

研究施設づくりは、欲望との戦いである。

---

最終研究成果

最終研究成果はこちら。

https://yokobo103.github.io/yokobo_ai_lab_3d_boxel_world/

方向キーでDr.よこぼを移動できる。

ドラッグで視点を変えられる。

動画はこちら。

当ラボは、今後もローポリ研究施設の拡張を継続する。

まだ改善の余地がある。研究継続案件だ。(Dr.よこぼ)

読んだしるしに、そっと肉球を置いていけます

0

ギャラリー

関連リンク