地図なのに GLSL Sandbox のようにカスタムシェーダに対応したパワフルなマップシステム Tangram がスゴイ!

doxas : 2015-09-17 15:14:19

まさに驚きのシェーダ拡張性!

今回ご紹介するのは、いわゆる WebGL を活用したマップシステムなのですが、今までにない高い拡張性を持った Tangram というライブラリです。

Google が提供するマップシステムや、今までに当サイトでもご紹介してきたたくさんの 3D マップシステムなど、地図の情報を三次元で表現できるライブラリやツールは実は結構種類があります。しかし、ここまでシェーダでのカスタムに特化したものは、正直見たことがありません。

高い拡張性と、シェーダによる非常にリッチな表現は、地形や地図といったものが WebGL によりどこまで高みを目指せるのか、その可能性を感じさせてくれるものとなっています。

サンプルも豊富で見ているだけでも楽しい

ここで突然のカミングアウトをしますと、小学生のころ、わたしは地図帳とかをぼんやり眺めているのが嫌いではありませんでした。なんとなく地図って、不思議な魅力がありますよね。

今回ご紹介する Tangram は、地図を表現するうえで、よりエンターテイメント性の高さが際立つライブラリです。

Github のページにはたくさんの Examples があり、これらを見ているだけでも本当に楽しい気持ちにさせられます。これまでも地図系の WebGL 実装はいくつもご紹介してきましたが、地形を表示するタイプとしては異例と言ってもいいくらい、表現力が豊かです。

まずは、これはスタンダードな 2D 表現の地図。

Tangram は、三次元だけでなく二次元による地図表現にももちろん対応しています。

Open Street Map のマップ API を利用しつつ、高速道路だけを目立つように太い黄色のラインで表示したのが上の画像ですね。

見やすい地図、という意味では、上のような実装が正解なのかもしれませんが、Tangram のスゴイところは、豊富な 3D 表現を可能にする GLSL Shader Map です。

これは本当に驚きました。まるで、地図システムの GLSL Sandbox です。

三次元状に、高さを取得しつつ建物を立体化します。

そこに、GLSL によるシェーダエフェクトを追加することで、ただの地図とは異なる非常に高いレベルの表現を可能にしています。

上の画像ふたつは、上段が窓の模様やグラデーションをシェーダで、下段がテクスチャをマッピングすることでノイジーな感じに仕上がっています。

しかし公開されている作例はこれだけではありません。ほかにもカッコいいマップがいくつもあります!

まるで木の年輪のようなノイズによる模様の表現と、水面を思わせる揺らめく青い模様が美しい一品。

映画 Matrix を彷彿とさせるサイバーな地図も!

とにかく、積極的に GLSL によるシェーダエフェクトを加えてシーンを作っていくという発想が素晴らしいですね。

多数公開されいてるシェーダによるエフェクトが加えられたマップを見ると、公式が「Tangram-Sandbox」と謳うことにも納得せざるを得ません。まさに驚きの表現力です。

今後、WebGL がより一般していく過程において、やはりシェーダを使いこなせるかどうかということが、いかに高い価値を持つのかということを再認識させてくれるデモだとも感じました。

たかが地図、されど地図。

シェーダのパワーで高い表現力を得たマップシステムを、ぜひ堪能してみてください。

リンク:

Mapzen · an open-source mapping lab.

tangrams/tangram · GitHub

tangrams/tangram-sandbox · GitHub

share

follow us in feedly

search

search

monthly

sponsor

social