HTML5になってWebの表現力は格段にあがっています。その表現力を担うのがCanvasやWebGLになります。特にWebGLはiOS8からようやく使えるようになったとあって、今後注目を集めるのではないでしょうか。 その一例として今回はTangramを紹介します。Open Street MapとWebGLを組み合わせた素敵な表現を行うソフトウェアです。

Tangramの使い方

例えば下のような画像です。地図部分はOpen Street Mapを使い、その上にWebGLで建物を3Dで描画しています。

視点の変更もできます。斜めにするとより立体的です。

アニメーションもサポートしています。ビルがにょきにょき。

こっちはマウスのドラッグに合わせてビルがせり上がります。

ウッディーな描画も。

ドットで囲んだ感じ。これも良いですね。

ウィンドウ。窓の明かりがつきます。しかもこれはアニメーションしていたりします。

サーモっぽい表示。クールですねぇ。

分かるでしょうか。水が揺れています。

Tangramは地図を単純に表示して終わるのではなく、より高い表現力で楽しめるコンテンツにしてくれます。正確に描画するだけでなく、こういうインタラクティブな楽しみ方も良いですね。

TangramはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Mapzen - Start where you are. tangrams/tangram