WebGL による新しいマップ機能の使用

Google I/O 2021 において、Google は傾きと回転、および WebGL Overlay Viewのベータ版リリースを発表しました。これにより、まったく新しい方法でマッピング エクスペリエンスの構築が可能になります。Overlay Viewは Maps JavaScript APIに以前から存在する機能で、マップの上に透明なレイヤをレンダリングできます。開発者は何年にもわたり、マップの上に 2 次元の描画をするため Overlay View を使用してきましたが、Overlay View ではマップの上に実質的に浮かんでいる透明なレイヤにしかレンダリングできない状態でした。

WebGL Overlay View では、ベクターの基本地図のレンダリングに使用されるのと同じ WebGL レンダリングのライフサイクルにに直接働きかけて、利用できます。これにより、初めて 2 次元と 3 次元のオブジェクトを直接マップ上に高速にレンダリングできるようになったため、従来の Maps JavaScript API では不可能であったユーザー体験が構築可能になりました。

この記事では、Maps JavaScript API の新しい WebGL による機能の簡単な概要をご紹介します。これにより、次世代のマッピング エクスペリエンスを作成するために十分な知識が得られます。

WebGL とは

WebGL は低レベルのブラウザ API で、元は Mozilla Foundation により作られたものです。この API を使用すれば、スマートフォンやコンピュータなどのクライアント デバイスの GPU のレンダリング能力や処理能力を、ウェブアプリから利用できます。ブラウザ単独では、3D 空間のオブジェクトのレンダリングといった重い処理を実行することはできませんが、WebGL を使用すれば、そのような処理に特化して設計されたクライアント側の GPU で実行できます。

WebGL について詳しくは、WebGL の設計と保守をしている Khronos Group のドキュメントをご覧ください。

要件

WebGL Overlay View を使用するには、ベクターマップが有効な Map IDが必要です。また、マップ ID を作成するときは、傾きと回転を有効にすることを強くおすすめします。これを有効にしないと、マップはデフォルトの真上からのビューに限定されます。言い換えると、マップを 3 次元的に動かすことはできません。

マップ IDとベクターマップの詳しい使い方は、関連ドキュメントをご覧ください。

傾きと回転の設定

設定された傾きと回転でマップを読み込むには、マップを作成するときに「tilt」と「heading」プロパティの値を指定します。

const mapOptions = {

  mapId: "15431d2b469f209e",

  tilt: 0,

  heading: 0,

  zoom: 17,

  center: {

    lat: -33.86957547870852, 

    lng: 151.20832318199652

  }

}

const mapDiv = document.getElementById("map");

const map = new google.maps.Map(mapDiv, mapOptions);

tilt は度単位の整数または浮動小数点数で、値は 0 から 67.5 までです。0 度はデフォルトの真下に向いたビューを、67.5 は最大の傾斜角度を意味します。設定可能な tilt の最大値はズームレベルによっても異なります。

回転は heading プロパティで、0 から 360 度までの整数または浮動小数点数として設定します。0 と 360 は北の方向を意味します。

また、傾きと回転は実行時のいつでも、プログラムからマップ オブジェクトに対して「setTilt」と「setHeading」を直接呼び出して変更できます。この機能は、ユーザーの操作などのイベントに対応してマップの向きを変える場合に役立ちます。

WebGL Overlay View をマップへ追加する

「google.maps.WebglOverlayView」のインスタンスを作成すると、WebGL Overlay View を Maps JavaScript API で使用できます。オーバーレイのインスタンスを作成したら、インスタンスの「setMap」を呼び出して、マップに適用します。

const webglOverlayView = new google.maps.WebglOverlayView;

webglOverlayView.setMap(map);

マップの WebGL レンダリング コンテキストにアクセスし、そこでレンダリングするオブジェクトを扱えるようにするため、WebGL Overlay View ではベクター基本地図の WebGL レンダリング コンテキストのライフサイクルにおいて 5 つの機能を提供します。

概要について簡単にご説明します。

• 「onAdd」では、たとえばフェッチや最終的にオーバーレイに渡すための中間データ構造の作成など、前処理をします。これらの処理をすべてここで行うのは、マップのレンダリング速度が低下しないことを保証するためです。
• 「onRemove」では、すべての中間オブジェクトを破棄します。できればより早い段階で破棄します。
• 「onContextRestored」はマップがレンダリングされる前に呼び出され、WebGL の状態、たとえばシェーダー、GL バッファ オブジェクトなどの初期化、バインド、再初期化をします。
• 「onDraw」では、マップの実際のレンダリングと、その関連する操作に指定された動作をします。シーンをレンダリングするための描画呼び出しは、できるだけ最小限にしてください。ここで多くの動作をすると、基本地図のレンダリングと、WebGL で行うすべての動作の速度が低下します。
• 「onContextLost」では、既存の GL ステートに関連付けられているすべてのステートをクリーンアップします。この時点では WebGL コンテキストは破棄されているため、これらのステートは無意味になっています。

これらの操作を実装するには、ひとつの関数にこれらを設定し、WebGL のレンダリング コンテキストのライフサイクルにおいて、適切な時点で Maps JavaScript API により実行されるようにします。例 :

webglOverlayView.onDraw = (gl,

coordinateTransformer) => { //レンダリングを実行 }

WebGL Overlay View と、そのライフサイクル操作の使い方について詳しくは、ドキュメントをご覧ください。

カメラ アニメーションの作成

WebGL Overlay View のベータ版リリースには「moveCamera」を紹介しています。これは新しくい統合されたカメラ コントロール手法で、カメラの位置、傾き斜、回転、ズームを同時に設定できます。「setTilt」や「setHeading」と同様に、「moveCamera」は「Map」オブジェクトに対して直接呼び出されます。

アニメーションのループで「moveCamera」を連続的に呼び出すと、カメラの位置の間で滑らかなアニメーションを作成できます。たとえば、この例ではブラウザの「requestAnimationFrame」API を使用して、各フレームの傾き斜と回転を変化できます。

const cameraOptions = {

  tilt: 0,

  heading: 0

}

function animateCamera () {

  cameraOptions.tilt += 1;

  cameraOptions.heading += 1;

  map.moveCamera(cameraOptions);

}

requestAnimationFrame(animateCamera);

ズームや浮動小数点数のサポートも含め、これらの調整によって従来では不可能であったようなカメラのコントロールが可能になるだけでなく、高い精度でカメラ位置をコントロールできるようになります。

「moveCamera」について詳しくは、ドキュメントをご覧ください。

試してみる

WebGL による Maps JavaScript API の新しい機能は、Beta チャンネルから API を読み込んで、今すぐ試すことができます。すぐに開発を始められるよう、新しい Codelab、すべての詳細が記されたドキュメント、サンプルコード、より詳細なサンプルアプリを用意しています。また、機能ツアーやトラベルのデモで詳細をご確認いただけます。さらに、これらの機能の実装をお試しいただけます。

フィードバックやご質問は、Issue Trackerにお寄せください。頂いたバグレポート、新機能のリクエスト、フィードバックなどは、新しい WebGL ベースのマップ機能のテストと改善に役立てさせていただきます。

3D でのマップ構築の可能性を探求し、優れたマップの作成にお役立てください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。

Reviewed by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Team