公共交通データとアプリ制作 - Mini Tokyo 3D の初期制作過程を振り返る

Slide 1

Slide 1 text

公共交通データとアプリ制作 Mini Tokyo 3D の初期制作過程を振り返る草薙昭彦 AKIHIKO KUSANAGI

Slide 2

Slide 2 text

自己紹介  草薙昭彦 (くさなぎあきひこ)  Postman 株式会社テクノロジーエバンジェリスト  Mapbox ジャパンアンバサダー  2016年からシンガポール在住  最近のビジュアライゼーションワーク  Mini Tokyo 3D  Japan EQ Locator / World EQ Locator  ぴえん東京／ぴえん大阪  北朝鮮ミサイル実験ビジュアライゼーション @nagix

Slide 3

Slide 3 text

Mini Tokyo 3D 概要  東京の公共交通のリアルタイム3Dマップ  今、実際に動いている列車やバス、発着している旅客機をリアルな3Dマップ上に滑らかなアニメーションで表現  現実世界とそっくりな双子をデジタルの世界に表現した「デジタルツイン」  実際の遅延や天候をマップ上に反映  路線沿いのライブカメラや花火イベント  地下鉄駅の出口案内や独自の経路探索エンジンによる遅延を反映した乗換案内 https://minitokyo3d.com 第3回東京公共交通オープンデータチャレンジ最優秀賞第25回 AMD Award ‘19 江並直美賞（新人賞）他多数

Slide 4

Slide 4 text

朝・昼・晩のシーンの変化遅延を考慮した経路探索 4ヶ国語＋α対応降水・降雪アニメーション花火アニメーションライブカメライベント情報地下鉄・地下街情報の表示

Slide 5

Slide 5 text

地図好き

Slide 6

Slide 6 text

鉄道好き

Slide 7

Slide 7 text

ゲーム好き

Slide 8

Slide 8 text

ゲーム作るの好き

Slide 9

Slide 9 text

東京公共交通リアルタイム 3Dビジュアライゼーション MINI TOKYO 3D 一言で言うならば

Slide 10

Slide 10 text

Mini Tokyo 3D: 別の言い方をするとリアル東京デジタル鉄道模型東京公共交通デジタルツイン動く東京近郊鉄道路線図東京上空仮想フライトツアー

Slide 11

Slide 11 text

https://minitokyo3d.com または「Mini Tokyo 3D」で検索

Slide 12

Slide 12 text

デジタルツインを作りたい  何かいいデータはないか

Slide 13

Slide 13 text

あった路線データ駅データ時刻表データ在線データ

Slide 14

Slide 14 text

2012年: 鉄道Now

Slide 15

Slide 15 text

足りないもの  路線図として見にくい  動きがカクカク  サイトデザインが2000年代インターネット  リアルタイムの遅延が反映されない

Slide 16

Slide 16 text

ヒント: Mini Metro

Slide 17

Slide 17 text

初期バージョン: Mini Tokyo

Slide 18

Slide 18 text

Leaflet + D3.js  Leaflet: Webマップライブラリ  ラスタータイル  D3.js: データサイエンティスト御用達ビジュアライゼーションライブラリ  SVG なのできれい、拡大にも強い

Slide 19

Slide 19 text

この滑らかな動きは難しいのか？  SVG ベジェ曲線は、始点からの距離から座標は求まる！  Easing 曲線を使えばそれっぽく見える！

Slide 20

Slide 20 text

難しいのは路線図のラインのオフセットズームアウトしてもラインが重ならないように一定の間隔を確保隣り合うラインから分岐して離れていくにつれ、滑らかに本来の位置に戻す

Slide 21

Slide 21 text

悪くない・・が  だが、今時GPUをフル活用した、もっとイケてるマップが作れるんじゃないか・・？  もっとゲームっぽく

Slide 22

Slide 22 text

Mapbox GL JS

Slide 23

Slide 23 text

Mapbox GL JS  ベクタータイルを WebGL を使ってレンダリングする JavaScript ライブラリ  スタイルを自由に設定できる  ポリゴンの Extrusion を使ったビルディングの 3D 表現  様々なカスタムレイヤー

Slide 24

Slide 24 text

GeoJSON と Turf.js  GeoJSON: 緯度経度の座標を持つポイント、ライン、ポリゴンを格納するファイルフォーマット  Turf.js: GeoJSON 分析・加工のための JavaScript ライブラリ

Slide 25

Slide 25 text

これはいける

Slide 26

Slide 26 text

ヘリコプタービューと斜め後方ビュー

Slide 27

Slide 27 text

ズームとマルチレイヤー

Slide 28

Slide 28 text

リアルタイムの遅延を反映

Slide 29

Slide 29 text

リアルタイムに見せるためには工夫がいる  取得できるデータは、実は数十秒〜数分前の列車情報である！  東京メトロは1分弱、JR東日本は3分程度の配信遅延  分単位の遅延時間と、停車している駅もしくは2駅間にいるかどうかしかわからない  そこで、次のようなロジックを実装  通常は静的な時刻表通り  遅延時間の情報があるときは、その分だけ位置を補正  動的な在線位置情報は使わない

Slide 30

Slide 30 text

パフォーマンスが厳しい  列車の数が増えてくると、コマ落ちする  Mapbox では GeoJSON ポリゴンの Extrusion で列車の箱は描けるが、滑らかな更新を行うことは想定していない  列車の位置計算が重い  バックグラウンドのマップのローディングも動かなくなる

Slide 31

Slide 31 text

three.js  three.js: WebGL ベース、クロスブラウザ対応の軽量な JavaScript ライブラリ  Mapbox のカスタムレイヤーとして組み込める  列車を three.js のオブジェクトで表示し、動きがサクサクに

Slide 32

Slide 32 text

最適化の数々  始点からの距離の事前計算と二分探索  方角、傾斜も線分毎に事前計算  描画時の三角関数の使用はなるべく避けたい  一編成内の車両位置の計算をまとめて行う  画面外の車両のフレームレートを1fpsに  ロード時のデータ量削減  降雨パーティクルの動的な更新、データの遅延更新  地図のテキストラベルは駅名だけに

Slide 33

Slide 33 text

加減速・最高速度を現実っぽく

Slide 34

Slide 34 text

今日はここまで  開発初期（2019年6月〜）の1ヶ月半くらいの試行錯誤のストーリーでした  その後5年以上続く開発過程を詳しく知りたい方は、Mini Tokyo 3D 開発日誌 https://togetter.com/li/1413307 をご覧ください  データの表現、可視化は楽しい！！