WebGLを使うと通常のDOMでは表現しづらいことも実現できます。GPUを使うことでグラフィックスの性能も向上しますが、JavaScriptの実装と大きく異なるので習得の時間が必要です。 今回紹介するProcedural GL JSはWebGLを使った実装例になります。こうした表現もできるのだという学びになるでしょう。

Procedural GL JSの使い方

普通の地図表示としても使えます。

山脈を表示しています。立体になっています。

拡大しています。

平面的な表示です。

Procedural GL JSはTHREE.jsを使って高度に合わせて実際の山脈に合わせて表示します。サンプルとしてニュージーランドの地図もあります。回転したりズームイン、ズームアウトもでき、地図をよりリアルに体験できます。

Procedural GL JSはJavaScript製のオープンソース・ソフトウェア(Mozilla Public License)です。

Procedural GL JS felixpalmer/procedural-gl-js: 3D mapping engine for the web