ストリートビューが LEGO ブロック風に変換される Google Maps API を利用した WebGL デモ！

doxas : 2015-05-05 12:16:13

Google の API をうまく活用した事例

今回ご紹介するのは、Google Maps API を利用してデータを取得し、それをもとにストリートビューをレゴブロック風味に変換するデモンストレーションです。

とは言え、完全にレゴブロックを使った 3D ビューに変換されるわけではなく、あくまでもパノラマビューを画像として取得して変換、それを 3D ビューに反映させているという感じです。

実験的な試みのようですが、非常に面白いなと思いましたのでご紹介します。

今回のデモページを開くと、まずはアメリカはニューヨークのあたりの地図が表示されます。このマップは Google Map から持ってきているものなので、当然ながら正確な地図です。

画面の中央には、レゴブロック風のキャラクターが登場します。このキャラクターをドラッグ操作で動かすことによって、このデモオリジナルのストリートビューへ移行できるようになっています。

上の画像は、ニューヨークではちょっとわかりにくいので都内に場所を移動したものです。本来の Google Map の様子と比較してみても、地図がしっかり正確に反映されているのがわかりますね。

キャラクターの手の部分に、白いブロックでサークルのようなモデルが描かれているのがわかると思います。この部分がドラッグ操作できるようになっています。

ドラッグすると、キャラクターが宙吊りのような姿勢になり、マップのなかの道路の部分にドロップすると、そこからロード画面へと遷移したのち、ストリートビューモードに移行します。

ストリートビューモードでは、地面に相当する部分や、原点からある程度の範囲までの床面に、道路のモデルやオブジェクトが置かれるようになっているようです。

車の形をしたモデルなどがレンダリングされますが、これらは画像を解析して車を置いているのではなく、恐らくある程度ランダムで置かれるようになっているのでしょう。その他にも、木々や花などが自動的に配置されるようです。

上の画像とまったく同じ地点を、今度は本来のストリートビューで見るとどうなるのか比較してみました。

まあ……よーく見ると、同じ地点ということがわかりますね。

少し視野角が違うので分かりにくいですが、ビルの色や窓の様子などを見比べると、確かに同じ地点からのストリートビューを使っているっぽいことがわかります。

このデモでは、要するにストリートビューのパノラマ画像を取得したのち、それを解像度を下げることでレゴブロック風に変換、さらに地面のモデルと組み合わせることによってそれっぽく見せている、という感じですかね。

モデルデータなどはローポリゴンで、使われているテクスチャもほとんどない上に、マップに関するデータは Google のサービスから取得しているので、全体的に動きは非常にスムーズでロード時間も短いですね。この点が非常にすごいなあと思います。

また、地名を検索するテキストボックスにフォーカスを当てると、画面中央のキャラクターが虫眼鏡を取り出して見せるなど、細かいところまで作ってあるなと感心しました。

Google Maps API を利用した、非常に面白いデモだと思います。

私はこの手の外部サービスを利用したデモは作ったことがないのですが、3D でカッコよく演出を行うエンターテイメントの分野とは、また一味違った WebGL の実装例として、非常に貴重だなと思います。