配車システムでおなじみの UBER が手掛けた WebGL 製のマップ&データビジュアライズフレームワーク deck.gl

doxas : 2016-11-12 13:11:22

高いレベルで構築されたモダン WebGL 実装

今回ご紹介するのは、今まさに世界中にそのビジネスの輪を広げている、タクシー配車システムなどを手がける Uber の技術チームが作った WebGL ベースのフレームワークです。

このフレームワークは流れの早いと言われる JavaScript のトレンドの、まさに最先端を走っているかのようなフレームワークですね。

React を使うことをほとんど前提のように扱っている点や、マップデータ API を提供する Mapbox との連携ができる点などが特徴で、WebGL を利用したハイエンドなデータビジュアライズが行えることを謳っています。

既にいろいろなところで話題になっているのでその存在が気になっているという方もいるかもしれませんが、WebGL 使いの目線で、このフレームワークについて見ていきたいと思います。

技術力の高さをうかがわせる重厚さがある

最初にまず書いておきたいことなのですが、基本的にマップ系のアプリケーションというのは「重い」です。

ただでさえ、ネットワーク越しに大量のデータをやり取りするマップ系のコンテンツの場合、どうしても挙動が鈍いものになってしまいがちです。

そしてさらに付け加えると、今回のこの deck.gl は、けして軽くないです。

確かに WebGL を利用したことで高速に動作していることは間違いありませんが、だからといって、本来のマップ系アプリが持つ重さを根底から覆すものではありませんので、そこは履き違えないようにするべきでしょう。

また、初帰化時の JavaScript の処理の負荷は結構高そうな印象を受けます。たぶん、コンテンツの作り方や表示するデータの種類によって変わってくると思いますが、CPU に掛かる負荷も高めだと予想できますので、そのことを踏まえた実装が必要になると思います。

ちょっと前置きが長くなりましたが、今回の deck.gl は公開されたばかりのフレームワークではあるものの、Github を見る限り、一年近く前から開発が行われていたものみたいです。それ故に、既に高いレベルの技術がギュッと詰め込まれたような感じになっています。

サイトにはきちんと Example も用意されていますので、実際に動作している様子を、複数のビジュアライズの形態別に見ることができます。

基本的には二次元でも三次元でもどちらでも実装することができるようになっており、WebGL の描画処理についてはいくつかの外部ライブラリをうまく利用しているようです。

React ベースになっているだけでもモダンな印象を受けるフレームワークではありますが、全体に、処理内容に応じた住み分けがしっかりできているように感じる部分が多いですね。

ただ、最初にも書いたとおりで、けして動作が軽いということはありません。しかも、恐らく重いのは CPU ですね。描画の負荷そのものよりも、可視化したいデータを JavaScript でさばくのが苦しそうな、そんな挙動をしています。

実装例として公開されているサンプルを見ると、そのほとんどが 2D 表示になっているのがわかるでしょう。

WebGL イコール 3D という見方をする向きが一般にはあるかと思いますが、けして三次元描画の派手さだけを目指したフレームワークではないことが Example を見ても伝わってきますね。

その証拠に、というわけではないのですが……内部の実装を見てみるとかなりシェーダなどがごっつい感じになってますね。派手でエンターテイメント性の高いコンテンツのためというより、中身はむしろかなり硬派です。

個人的に一番驚いたのは、高い精度での数値演算が求められる地図系のアプリケーションである deck.gl には、超えなければならない技術的な壁として 64bit 浮動小数点 を、シェーダの実装として確実に扱えるようにする必要があった、という点が挙げられます。

Uber がこの壁を超えるために取った戦略は、GLSL を使ったカスタムシェーダによる 64bit 浮動小数点演算の仕組みをまるっと全て作ってしまう、という途方もないものだったようです。

MIT ライセンスで公開されている Github のリポジトリを見てみればわかることですが、GLSL で 64bit 浮動小数点を扱うための一連の GLSL コードが、リポジトリには含まれています。

注意書きももちろん添えてあって、精度は高いけど重くなるかもしれないぜ! というニュアンスのことが書かれています。

シェーダの記述に慣れている方なら、GLSL で確実に 64bit 精度の演算を行うために、データの pack & unpack の実装を作ったのだろうなと予想できると思いますが、逆にシェーダがよくわからないと、なんのこっちゃと思うかもしれません。

しかし、これだけのものをシェーダのなかにまるっと作ってしまい、それを惜しげもなく公開するというのは、まあなんというか、すごいなとしか言いようがなかったです。アルゴリズムやロジックは他のプラットフォームの実装を参考にしているようですが、それにしてもすごいです。

冒頭から再三書いているとおりで、今回のフレームワークを使ったら、即座に爆速の 3D マップアプリが作れるとか、そういうたぐいのフレームワークではありません。というかぶっちゃけ重いです。

しかしそれはあくまでも、現時点では、というだけの話です。

React をベースにした、モダンで先進的なフレームワークである deck.gl には、今後も猛烈な勢いで成長していく可能性が感じられます。

これまでにも様々な実装を Github などで公開している Uber の企業体質も素晴らしいと感じますし、マップ系の WebGL 実装としてはかなり期待が持てるなという印象を受けました。

現時点ではお世辞にも早いとは言えず、デモを見ても若干動作そのものがもっさりしているように見えます。しかし、これが来年、あるいは数年後には、普通にモバイル端末でもサクサク動くようになるはずです。

使う使わないはまた別として、新しい技術や、ハイエンドで先進的な取り組みに興味があるのならば、ソースコードを見てみるのもかなり勉強になると思います。

非常に素晴らしいプロダクトです。ぜひチェックしてみてください。

リンク:

deck.gl

uber/deck.gl: WebGL based visualization layers

share

follow us in feedly

search

search

monthly

sponsor

social