Google I/O 向けの WebGL を利用したマップデモの舞台裏
Google I/O 2021 での WebGL を利用したマップ機能のベータ版リリースの発表に備え、Google Maps Platform チームは、2012 年からの Google Cloud パートナーである Ubilabs と協力して、3D レンダリングを地図に導入すると実現できることをデベロッパーに紹介するためのデモを作成しました。最初のデモ「Google Maps Platform WebGL-powered Maps Features（Google Maps Platform WebGL を利用したマップ機能）」は、各 WebGL 機能とそれらを効果的に使用する方法をデベロッパー向けに詳しく紹介しています。
デベロッパー向けのデモでは、WebGL を利用したマップ機能の活用方法を Google Maps Platform デベロッパーに紹介しています。 |
2 番目のデモ「Travel with Next Generation Maps（次世代マップを活用した旅行）」では、架空の旅行アプリを例にして、Google Maps Platform の新しい 3D 機能でマッピング エクスペリエンスがどのように変容するかを全体像として見ることができます。
| Ubilabs と開発した旅行デモでは、WebGL を利用したマッピング エクスペリエンスの効果をビジネス ユーザーに紹介しました。 |
このプロジェクトに携わった Ubilabs のソフトウェア エンジニアである Martin Schuhfuss 氏は、2019 年の Google I/O で Google Maps Platform エンジニアリング リードの Travis McPhail と話したことを覚えています。その内容は、Google Maps Platform チームが一部の API で検討している変更と、ベクトル地図や 3D コンテンツをサポートするための取り組みについてでした。そして 2021 年。Schuhfuss 氏は Google I/O 2021 向けに Google Maps Platform の新しい WebGL 機能を紹介するデモの作成に向けて、Google Maps Platform チームとの打ち合わせに参加することになりました。信頼できる Google Cloud パートナーとして、Ubilabs はそれら機能の初期ユーザーに任命されていました。初期段階にある機能の常として、開発プロセスが進行する中、デバッグや初期ドキュメントの作成が必要になる可能性がありました。
Ubilabs の共同創業者かつ開発責任者であり、Google Maps Platform の Google Developer Expert である Martin Kleppe 氏も、プロジェクト マネージャーやデザイナー、その他 3 名のデベロッパーとともにプロジェクトに取り組みました。
Schuhfuss 氏は次のように語っています。「私たちはインターネットでの地図のユースケース、特に 3D のシーンで興味深いものを探しました。小規模なテスト版を作成し、自分たちに何ができるかを試していました。しかし、当時はドキュメントすら存在しませんでした。」
Ubilabs はデモのうち 1 つをデベロッパー向けとし、新しい機能について順を追って説明するとともに、コードサンプルを盛り込んで使用方法を紹介することにしました。2 番目のデモである旅行アプリは、航空便での移動、タクシー乗車、ホテルの検索、旅先での食事という場面に当てはめて新しい機能を紹介しています。Schuhfuss 氏は、WebGL ベータ版機能の初期ユーザーとして学んだすべてを効果的に要約した、ユーザー向けのデモ案内文を作成しました。そのテキストの大半は、機能を初めて試す他のユーザー向けにドキュメントにまとめられました。
Schuhfuss 氏は次のように語っています。「各機能について、できるようになったこと、そしてそれがどのように表示されるのかを示すのに最適な Google Maps Platform の使い方は何か。チーム内で自問を繰り返しました。そして、ある都市を訪れる旅の過程を、初めから終わりまで表現する旅行デモを作成することにしました。」
デベロッパーは真上から見下ろした、北が上になった 2D の地図表示に慣れています。そのため、Schuhfuss 氏は、どんな場面でも 3 次元機能を利用してカメラを動かし、地図に情報を追加できる仕組みの紹介に力を入れました。たとえば、以下のスクリーンショットでは、地図にシンプルな傾斜と回転を追加するだけで、エクスペリエンス全体がいかに変化するかがわかります。
| この例では、デベロッパーに新しい傾斜と回転の機能が示されています。 |
Kleppe 氏は次のように説明します。「WebGL 機能の基盤をなすテクノロジーは、GPU による高速レンダリング サービスを使用します。ユーザーはマシンのグラフィック カードを使って建物を 3D レンダリングし、3D オブジェクトを空間に配置できます。以前は追加のレイヤとして地図上にデータを表示できるだけでしたが、現在では新たなレベルの制御が可能になりました。これにより、街の景色を見るような没入型エクスペリエンスを実現できます。」
まず、チームは小規模なデモを作成し、次にそれらをクリックして詳細を見られる大規模なデモに組み込みました。意図したとおりに機能しないものがあると、Ubilabs はトラブルシューティングを試み、Google Maps Platform エンジニア チームと協力して問題を修正しました。あるケースでは、Schuhfuss 氏が 3 つの異なるオブジェクトをあるシーンに追加すると、3 番目のオブジェクトは常に数秒後に消え、2 番目のオブジェクトはさらに数秒後に消えました。Ubilabs は、この問題に関するフィードバックを Google Maps Platform エンジニア チームと共有しました。同チームは次のリリースで問題を解決し、このサービスをユーザー向けに改善できました。
Schuhfuss 氏は次のように述べています。「私はデバッグに時間をかけ、起きている現象を把握しようとしました。建物の背後に隠れるようにレンダリングするものをオクルージョン（手前にある物体が背後にある物体を隠す状態）できるようにするには、WebGL コンテキストを共有する必要があります。WebGL はグラフィック カードと通信でき、小さな状態の変化の影響を受けやすいインターフェースです。」
Schuhfuss 氏は、緯度と経度による座標の把握と算出とは別に、かなりシンプルな Three.js 機能が残りの開発に必要であることがわかりました。同チームは Google Maps Platform チームと定期的に連絡を取り、進捗状況を確認し合いし、技術的な問題や更新に対処しました。
Ubilabs は各デモの締めくくりに、デベロッパーが WebGL 機能で作成できるものとして、目を引く機能を紹介しました。
「旅行デモの最後のページは一番のお気に入りです」と Schuhfuss 氏は言います。氏は Google I/O の数日前にそのページを完全に再構築しました。「私が気に入っているのは、カメラを回転させたときのテキストラベルの動作と、建物が隠れるとテキストの下に小さなステムが表示されることです。」
| ロンドンの観光スポットのテキストラベルが各場所の上に表示され、地図を回転させると、小さなステムが各建物をはっきりと指し示すように表示されます。 |
デベロッパー向けのデモの最後のページでは、ユーザーに「地図を再定義する」ことを推奨しており、埋め込みの動画や花火が表示されます。
Schuhfuss 氏は次のように語ります。「次に気に入っているのは花火です。動画を埋め込むことができ、どこかに表示したくて港にビデオウォールを構築しました。開発の途中では、リック・アストリーの曲も再生されていたようです。」
| WebGL 機能を使用すると、動画を地図に埋め込んだり、花火などの機能を地図に追加したりできます。 |
「通りが表示された基本地図と、ビジネス情報を描画するレイヤ、ルートを計算するための追加 API など、さまざまなデータソースを組み合わせることができます。さらに、その上に独自の情報を配置できます。API のデータセットだけではありません。自分のデータを世界の抽象的なビューにいつでも自由に統合できます。」
さらに、Schuhfuss 氏は、slack ワークスペースの Three.js コミュニティも運営しており、オンラインで驚きの声が多数寄せられたことに加えて、「ユーザーによるこうした機能のユースケースを見るのを本当に楽しみにしています。」とも述べています。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やご意見はページ右上の「お問い合わせ」より承っております。
Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer