catch

東京メトロリアルタイムシミュレーションwebアプリ metrogram3D

皆さんこんにちは。
アルゴリズム好きな小井です。

先日、当ブログにてご紹介させていただいた「東京メトロリアルタイムシミュレーションwebアプリ metrogram」をバージョンアップさせたビジュアライゼーション作品「metrogram3D」をリリースいたしましたのでご紹介いたします。

cap001

タイトルでお気づきの方もいらっしゃるかと思いますが、今回は何と3Dになっています。3D視点から東京の地下鉄を眺めることができます。

地下鉄のデータなので、当然駅ごとに深さの情報も存在しており、今まではすべて平面上での曲線計算だったものを、3軸での曲線計算に調整。表現はもとより、車両の描画なども複雑になっているのですが、ウェブ上での3次元表現技術である「WebGL」を用いる事で、相当のパフォーマンス向上につながりました。

そのパフォーマンスを生かす形での演出の追加。そしてカメラ視点を自在に操っています。

  1. TOPビュー: 旧metrogramと同様のカメラワーク
  2. 俯瞰ビュー: 東京メトロ全域が入るように距離感を調整
  3. ラインビュー1: 各路線にスポットを当てて路線全域をカメラが追いかけます
  4. ラインビュー2: 路線を真上から見つめるカメラ視点
  5. 駅ビュー: 特定の駅を中心にカメラが回り続ける視点

この強力な「WebGL」ですが、現在使えるブラウザ環境が限られており、なかなかお目見えできる事が少ないのですが、これからはブラウザやスマートフォン環境の向上によりネット上での表現をより豊かにしてくると思います。

今回は、東京メトロのデータを元にビジュアライズを行っていますが、一定量以上のデータさえあれば様々な分野の情報を視覚化する事ができます。それによってさらに新しい視点で物事をとらえる事ができるようになる。それはとても意味があり、そして何より楽しいですよね!

さて、次は何を作りましょう?

ではまた!