Dynmapを軽くしたい その2

Dynmapを軽くしたいので、ちょっとWebGLのコードを書いたり計算をしたりしたら、設計が少し進んだ。

以下のDynmapの地図は、512x512の範囲を表示している。右の方にちょっとゴミが残っていたり、地形が壊れ気味なのはPaperサーバの操作ミスでできたもので関係はない。

Dynmapは拡大縮小ができる。2倍づつ縮小でき、以下は、2回縮小したもの。

以下はさらに2回縮小したもの。縮尺は、512の16倍になっているので、画面の上下いっぱいでは、512x16=8192　になっている。

つまり8192の範囲をブラウザで描画できればよい。

WebGLで試しに4096x4096の地形を生成して、土と石だけにして描画してみたら、20フレーム以下しか出なかった。8192にしたらもっと遅いだろう。

生成時以外はJavaScriptはほとんど何もCPUを消費してなくて、GPUが忙しいだけだ。

据え置きの強いGPUを積んでるマシンだと楽勝で表示できるだろうけど、3年前のラップトップマシンでも軽快に動いて欲しい。

作りたいのはゲームじゃなくて地図なので、毎フレーム全部を描画する必要もない。そう考えると、マップをこのように広範囲に見たいときは、Dynmapと同じように、isometric変換を使ってテクスチャに描画しておいて、そのテクスチャを2Dで並べればパフォーマンスは大幅に改善するだろう。

WebGLのコードではgl-matrixを使っていて、mat4.ortho関数を使うとこんな感じになった。綺麗に絵が出ている。

また、ボクセルをポリゴンに変換する速度は、4096x4096x64=1Gボクセルで1分ぐらいだった。でも中間形式ではほとんど表面だけになる。木とかも生えているので平均して8ボクセルぐらい高さを描画すると考えると、8分の1で、10秒ちょっと、だろうか。最適化をがんばれば3~5秒はいけるんじゃないかな。

3年前のラップトップで8192のマップを10秒で描画できれば、まあまあありなんじゃないかな?

ソースはここにあります:

kengonakajima/wglmap