ゲームによくある六角形のヘックスマップをWebGPUで自動生成できる「Hex Map Toy」、波動関数の収縮を応用
ゲームでよく見る六角形タイルの地形マップをWebGPUで自動生成する実験的なマップジェネレーター「Hex Map Toy」が公開されています。作者によると、全19グリッド・約4100セルのマップをブラウザ上で簡単に生成でき、最大60fpsでの描画も可能です。
Building a Procedural Hex Map with Wave Function Collapse
https://felixturner.github.io/hex-map-wfc/article/
Hex Map Toy
https://felixturner.github.io/hex-map-wfc/
実際にスマートフォン(iPhone Air)で実行したところが以下。ブラウザがWebGPUに対応していれば、スマートフォンでも動作します。
WebGPU駆動のヘックスマップジェネレーター「Hex Map Toy」でヘックスタイルの地形をスマートフォン上で自動生成してみた - YouTube
Hex Map ToyはThree.jsのWebGPUレンダラーとTSLシェーダーを使い、中世風の島マップをおよそ4100個のヘックスセルで構築します。道路、川、海岸線、崖、森、村などを含む地形を手続き的に作り出し、生成結果はシード付きで決定論的に再現できるとのこと。
この仕組みの中核にあるのが「波動関数の収縮」です。もともとは量子力学の専門用語ですが、Hex Map Toyでは「最初は各マスにいろいろな候補を持たせておき、周囲と矛盾しないものだけを残して、少しずつ1つに決めていく」というアイデアの下敷きになっているとのこと。
たとえば、あるマスが道路のタイルに決まったら、隣のマスも道路がつながる形でなければならず、川なら川、海岸なら海岸が自然につながるように候補が絞られていきます。さらに、単に隣の辺が合えばいいだけではなく、地形の高さまで考慮します。つまり、道路や川が自然につながるだけでなく、高低差のある斜面や崖も破綻しないように組み合わせているため、よりゲームらしい立体感のある地形になるというわけです。
ただし、この方法はマップが大きくなると失敗しやすくなります。そこでHex Map Toyでは、マップ全体を一気に作るのではなく、いくつかの小さな領域に分けて順番に生成する方法を採用しています。さらに、途中で矛盾が起きた場合は巻き戻して別の候補を試したり、部分的に作り直したり、最後は山のような地形でつなぎ目を自然に隠したりする工夫も入っています。
見た目の面では、WebGPUを使って水面のきらめきや海岸の波、地形の陰影なども表現しています。一方で、森や建物の配置まで全部を波動関数の収縮で決めると不自然になりやすいため、その部分はノイズ処理を使って、まとまりのある森や村ができるようにしているとのこと。
Hex Map ToyはGitHubにリポジトリがMITライセンスの下で公開されています。
felixturner/hex-map-wfc
https://github.com/felixturner/hex-map-wfc
