【Google】WebGLの新マップ機能による地図機能の進化

グルメサイトや不動産サイトで目的地までのルート確認や所在情報を載せるために、Googleマップが埋め込まれているのを皆さんも目にしたことがありますよね?かく言う筆者も、そのマップの情報を頼りに様々なスポットへ行く機会が多々あります。

 そんなGoogleマップについて、GoogleはGoogleマップにおける傾き機能回転機能、またWebGL Overlay Viewのベータ版をリリースすると発表しました。これらの機能によって、Googleマップは更に利便性が増すことになりそうです。

 今回は、これらの機能による変化とその効果について言及していきます。


○WebGLを利用したマップ機能

 Maps Javascript APIに元々搭載されていたOverLay Viewは、地図上に透明なレイヤーを描写することでWebブラウザ上に二次元の地図を作成することができました。裏を返せば、Overlay Viewでは二次元の地図に記載されたレイヤーにしか情報を付随することができなかったのです。

 しかし、今回発表されたWebGL Overlay Viewでは、クラウドベースのマップのスタイル設定の一部にベクトル地図を導入することで(今後JavaScript API経由で一般提供する予定です)、WebGLによる複雑な2Dと3Dグラフィックをウェブ上でレンダリングできるようになりました。これは、これまでのGoogleマップと同じような地図がマップアプリ上でも利用可能になることと同義です。

 これらの機能を可能にしたWebGLは低レベルのブラウザAPI(Application Programming Interface、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェース)であり、このAPIを用いることでスマートフォンやコンピュータなどの個人のデバイスのGPU(3Dグラフィックスなどの画像描写を行う際に必要となる計算処理を行うプロセッサ)のレンタリング能力や処理能力をウェブアプリからでも利用できるようになります。ブラウザ単体では3D空間のオブジェクトのレンダリングといった重い処理を実行することはできませんが、WebGLを使用すれば、そのような重い処理に特化して設計されたGPUで処理することができます。


○傾き機能と回転機能

 これまで、地図の表示方法は真上から基本地図を見る二次元ビューに限定されていました。しかし、今回発表された新機能を使用すると、読み込み時と実行時の両方で、最大67.5 度の傾きと 360 度の回転が可能になり、地図の新たな視点をユーザーに提供できるようになります。これは斜め視点からの 3D の建物モデルが初めてウェブアプリで表示できるようになったということでもあります。


 また、キーボードとマウスによる制御が追加されたことでユーザーが地図の傾斜と回転を手動で変更できるようにもなっています。これによって、ユーザーは自分の思い通りにマップを様々な角度から見ることが可能になりました。

○WebGL Overlay View

 WebGL Overlay Viewは、ベクトル地図のレンダリングに使用する WebGL レンダリング表現を背景地図の上に直接重ね合わせて操作できるようにようにするというものです。この機能により、初めて二次元と三次元のオブジェクトを基本地図に直接レンダリングできるようになりました。つまり、レンダリングされたオブジェクトが地図に表示されるだけでなく、そこに遠近感も兼ね備えた三次元空間で地図の一部としてレンダリングされます。地図を回転させるとマーカーが建物に隠れて非表示になったり、カメラから離れるに連れてマーカーが小さくなったりする具合です(下の画像をクリックすると別ページでその様子が体験できます)。


【WebGL Overlay Viewで基本地図に直接レンダリング】

https://1.bp.blogspot.com/-cNPejE4fO1w/YKpo1_zTmVI/AAAAAAAAE5w/cQ4bLmLWKV84Y8PvG9ed4a9EKpij6ReYQCLcBGAsYHQ/s800/multi-pin.gif

https://developers-jp.googleblog.com/2021/05/google-io-2021-google-maps-platform.html より引用)

○その他の機能

 WebGL Overlay Viewのベータ版リリースでは、「moveCamaera」も紹介しています。これは新しくい統合されたカメラコントロール手法で、カメラの位置、傾き斜、回転、ズームを同時に設定できます。アニメーションのループで「moveCamera」を連続的に呼び出すと、カメラの位置の間で滑らかなアニメーションを作成できます。ズームや浮動小数点数のサポートも含め、これらの調整によって従来では不可能であったようなカメラのコントロールが可能になるだけでなく、高い精度でカメラ位置をコントロールできるようになります。