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

公共交通オープンデータチャレンジ2024 開発者向けオープンデータ・ウェビナーでの発表資料です。

Mini Tokyo 3D は東京の公共交通のリアルタイム3Dマップです。今、実際に動いている列車や発着している旅客機をリアルな3Dマップ上に滑らかなアニメーションで表現します。これは、現実世界とそっくりな双子をデジタルの世界に表現した「デジタルツイン」です。

https://minitokyo3d.com

公共交通オープンデータチャレンジ2024に参加する開発者向けに、Mini Tokyo 3D開発初期の試行錯誤のストーリーをお話しします。

Transcript

1. 公共交通データとアプリ制作 Mini Tokyo 3D の初期制作過程を振り返る 草薙 昭彦 AKIHIKO KUSANAGI
2. 自己紹介  草薙 昭彦 (くさなぎ あきひこ)  Postman 株式会社 テクノロジーエバンジェリスト  Mapbox ジャパン アンバサダー  2016年からシンガポール在住  最近のビジュアライゼーションワーク  Mini Tokyo 3D  Japan EQ Locator / World EQ Locator  ぴえん 東京／ぴえん 大阪  北朝鮮ミサイル実験ビジュアライゼーション @nagix
3. Mini Tokyo 3D 概要  東京の公共交通のリアルタイム3Dマップ  今、実際に動いている列車やバス、発着してい る旅客機をリアルな3Dマップ上に滑らかなアニ メーションで表現  現実世界とそっくりな双子をデジタルの世界に 表現した「デジタルツイン」  実際の遅延や天候をマップ上に反映  路線沿いのライブカメラや花火イベント  地下鉄駅の出口案内や独自の経路探索エンジン による遅延を反映した乗換案内 https://minitokyo3d.com 第3回 東京公共交通オープン データチャレンジ最優秀賞 第25回 AMD Award ‘19 江並直美賞（新人賞） 他多数
4. 朝・昼・晩のシーンの変化 遅延を考慮した経路探索 4ヶ国語＋α対応 降水・降雪アニメーション 花火アニメーション ライブカメラ イベント情報 地下鉄・地下街情報の表示
5. 地図好き
6. 鉄道好き
7. ゲーム好き
8. ゲーム作るの好き
9. 東京公共交通リアルタイム 3Dビジュアライゼーション MINI TOKYO 3D 一言で言うならば
10. Mini Tokyo 3D: 別の言い 方をすると リアル東京デジタル鉄道模型 東京公共交通デジタルツイン 動く東京近郊鉄道路線図 東京上空仮想フライトツアー
11. https://minitokyo3d.com または 「Mini Tokyo 3D」で検索
12. デジタルツインを作りたい  何かいいデータはないか
13. あった 路線データ 駅データ 時刻表データ 在線データ
14. 2012年: 鉄道Now
15. 足りないもの  路線図として見にくい  動きがカクカク  サイトデザインが2000年代インターネット  リアルタイムの遅延が反映されない
16. ヒント: Mini Metro
17. 初期バージョン: Mini Tokyo
18. Leaflet + D3.js  Leaflet: Webマップライブラリ  ラスタータイル  D3.js: データサイエンティスト御用達ビジュアライゼーションライブラリ  SVG なのできれい、拡大にも強い
19. この滑らかな動きは難しいのか？  SVG ベジェ曲線は、始点からの距離から 座標は求まる！  Easing 曲線を使えばそれっぽく見える！
20. 難しいのは路線図のラインのオフセット ズームアウトしてもライ ンが重ならないように一 定の間隔を確保 隣り合うラインから分岐 して離れていくにつれ、 滑らかに本来の位置に戻 す
21. 悪くない・・が  だが、今時GPUをフル活用した、もっとイケてるマップが作れるんじゃない か・・？  もっとゲームっぽく
22. Mapbox GL JS
23. Mapbox GL JS  ベクタータイルを WebGL を使ってレンダリングする JavaScript ライブラリ  スタイルを自由に設定できる  ポリゴンの Extrusion を使ったビルディングの 3D 表現  様々なカスタムレイヤー
24. GeoJSON と Turf.js  GeoJSON: 緯度経度の座標を持つポイント、ライン、ポリゴンを格納するファイ ルフォーマット  Turf.js: GeoJSON 分析・加工のための JavaScript ライブラリ
25. これはいける
26. ヘリコプタービューと斜め後方ビュー
27. ズームと マルチレ イヤー
28. リアルタイム の遅延を反映
29. リアルタイムに見せるためには工夫がいる  取得できるデータは、実は数十秒〜数分前の列車情報である！  東京メトロは1分弱、JR東日本は3分程度の配信遅延  分単位の遅延時間と、停車している駅もしくは2駅間にいるかどうかしかわからない  そこで、次のようなロジックを実装  通常は静的な時刻表通り  遅延時間の情報があるときは、その分だけ位置を補正  動的な在線位置情報は使わない
30. パフォーマンスが厳しい  列車の数が増えてくると、コマ落ちする  Mapbox では GeoJSON ポリゴンの Extrusion で列車の箱は描けるが、滑らかな更新 を行うことは想定していない  列車の位置計算が重い  バックグラウンドのマップのローディングも動かなくなる
31. three.js  three.js: WebGL ベース、クロスブラウザ対応の軽量な JavaScript ライブラリ  Mapbox のカスタムレイヤーとして組み込める  列車を three.js のオブジェクトで表示し、動きがサクサクに
32. 最適化の数々  始点からの距離の事前計算と二分探索  方角、傾斜も線分毎に事前計算  描画時の三角関数の使用はなるべく避けたい  一編成内の車両位置の計算をまとめて行う  画面外の車両のフレームレートを1fpsに  ロード時のデータ量削減  降雨パーティクルの動的な更新、データの遅延更新  地図のテキストラベルは駅名だけに
33. 加減速・最高速度を現実っぽく
34. 今日はここまで  開発初期（2019年6月〜）の1ヶ月半くらいの試行錯誤のストーリーでした  その後5年以上続く開発過程を詳しく知りたい方は、Mini Tokyo 3D 開発日誌 https://togetter.com/li/1413307 をご覧ください  データの表現、可視化は楽しい！！