Procedural GL JS - WebGLで地図を立体的に表示
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