われがわログ

最適化アルゴリズムとかプログラミングについて書きたい

マイクラっぽい地図ビューワを作った

https://raw.githubusercontent.com/estshorter/VoxelMapViewer/images/screnshot.png

↑こんなんを作った。

ここ↓からグリグリ動かせる

https://estshorter.github.io/VoxelMapViewer/

業務でマイクラ風3次元地図ビューワが欲しくなったのだが、Matplotlibのvoxels()は重すぎて使用に耐えないし、どうしたものかと思っていたところ、以下のサイトを見つけたのが発端。

threejsfundamentals.org

Three.jsを使った上記サイトの実装では、ボクセル描画に関して見えないところで手を抜いて高速化している。 これをそのまま使ってもよかったのだが、どうせなら少し改良してみるかと思って、worldの構成要素を立方体(ボクセル)ではなく直方体にした。 なので、最初の画像は、高さの違う細長いブロックをXY平面に敷き詰めたworldとなっており、上記サイトのものより汎用性は落ちるが処理自体は軽くなっているはず(計測はしていない)。 ソースは以下のリポジトリに置いた。

github.com

ちなみに、画像上の赤い線はA*で求めた最短経路である。A*はTypeScriptではなくC++で実装しており、A*の出力結果をTypeScript側で読み込み描画している。

github.com

www.redblobgames.com

なお、ノイズを用いた地図の生成には以下のサイトを参考にした。

www.redblobgames.com