表示領域の拡大と高速化に取り組む - Overpass APIとthree.jsで地図を3D表示(3)

公開:2017-04-30 04:39
更新:2020-02-15 04:37
カテゴリ:three.js,overpass api,open steet map,overpass apiとthree.jsで地図を3d表示,ゲーム製作

表示領域の拡大と高速化に取り組んでみた。 なんとか大阪環状線の周囲まで表示してみたかったので、コードをいろいろ改良してみた。

Overpass APIから受け取ったデータをthree.jsのメッシュに変換するところは処理は重いが、変換が終わればサクサク動くと思う。うちの環境(Core i7 6700,Geforce 1060)では。

実際のサンプル:

https://bl.ocks.org/sfpgmr/raw/a2d4c0e9ecc5e81d91210c15b33b0a4b/

サンプル&ソースコード:

https://bl.ocks.org/sfpgmr/a2d4c0e9ecc5e81d91210c15b33b0a4b

高速化のアプローチとしては以下を行った。

メモリ不足への対処

大阪環状線の内側ともなるとデータが膨大となり、以前のコードだとJSヒープが枯渇してしまうようである。ガベージコレクタが追い付かないのだろう。

なので以下のことを行った。

以上のことを行ってみたところ、Chromeでなんとかギリギリ処理できるようになった。EdgeやFirefoxのほうがメモリ枯渇に強いのか、この改良をしなくとも普通に表示できたし、この改良によってさらにパフォーマンスが上がった。 Edgeで表示したほうがChromeより軽かったりする。

ただ前回コードよりもやることを少なくしているので、表現力は落ちている。GW中は改良にいそしむつもりだ。

これである程度のめどがつけば、シューティングゲームへの取り込みを行おうと思っている。

使用したテクスチャ

下記サイトからダウンロードして使用

https://www.textures.com/download/buildingshighrise0625/104602

skybox用に下記からダウンロードして使用

https://opengameart.org/content/clouds-skybox-1