Mini Tokyo 3D

mapbox/OpenStreetMap meetup #03での発表資料です。

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

ユーザーは自由に3Dマップ上を動き回り、見たいところにズームインして東京の「今」を知ることができます。路線図として乗り換えルートを調べる、出かける前に目的地の街と天気を下調べする、列車を自動追跡して沿線の様子をただひたすら眺める、終電に逃さないためにダッシュすべきかどうか列車の現在位置から判断するなど、さまざまな使い方ができます。

Mini Tokyo 3D は PC、スマートフォン、タブレット、セットトップボックスなど、デバイスを問わず Web ブラウザさえあれば利用できる Web アプリケーションです。下記の URL からアクセスしてください。

https://nagix.github.io/mini-tokyo-3d/

より詳しい情報は Mini Tokyo 3D ユーザーガイド https://github.com/nagix/mini-tokyo-3d/blob/master/USER_GUIDE-ja.md をご覧ください。ソースコードは GitHub リポジトリ https://github.com/nagix/mini-tokyo-3d にて公開されています。開発の経緯は、Mini Tokyo 3D 開発日誌 https://togetter.com/li/1413307 にまとめています。

Transcript

1. Mini Tokyo 3D 草薙 昭彦 AKIHIKO KUSANAGI
2. ⾃⼰紹介 u 草薙 昭彦 (くさなぎ あきひこ) u コグナイト株式会社 チーフソリューションアーキテクト兼CTO Japan u シンガポール在住 u 過去は u MapR Technologies u EMC (Greenplum) u Oracle u Sun Microsystems Twitter: @nagix
3. Cognite u ノルウェー発・重⼯業向 けデジタル化・データ分 析プラットフォーム u 2019年10⽉に⽇本⽀社 設⽴
4. 地図好き
5. 鉄道好き
6. ゲーム好き
7. ゲーム作るの好き
8. 東京公共交通リアルタイム 3Dビジュアライゼーション MINI TOKYO 3D ⼀⾔で⾔うならば
9. Mini Tokyo 3D: 別の⾔い ⽅をすると リアル東京デジタル鉄道模型 東京公共交通デジタルツイン 動く東京近郊鉄道路線図 東京上空仮想フライトツアー
10. https://nagix.github.io/mini-Tokyo-3d/ または 「Mini Tokyo 3D」で検索
11. デジタルツインを作りたい u 何かいいデータはないか
12. あった
13. 2012年: 鉄道Now
14. ⾜りないもの u 路線図として⾒にくい u 動きがカクカク u サイトデザインが2000年代インターネット u リアルタイムの遅延が反映されない
15. ヒント: Mini Metro
16. 初期バージョン: Mini Tokyo
17. Leaflet + D3.js u Leaflet: Webマップライブラリ u ラスタータイル u D3.js: データサイエンティスト御⽤達ビジュアライゼーションライブラリ u SVG なのできれい、拡⼤にも強い
18. この滑らかな動きは難しいのか︖ u SVG ベジェ曲線は、始点からの距離から 座標は求まる︕ u Easing 曲線を使えばそれっぽく⾒える︕
19. 難しいのは路線図のラインのオフセット ズームアウトしてもライ ンが重ならないように⼀ 定の間隔を確保 隣り合うラインから分岐 して離れていくにつれ、 滑らかに本来の位置に戻 す
20. 悪くない・・が u だが、今時GPUをフル活⽤した、もっとイケてるマップが作れるんじゃない か・・︖ u もっとゲームっぽく
21. Mapbox GL JS
22. Mapbox GL JS u ベクタータイルを WebGL を使ってレンダリングする JavaScript ライブラリ u スタイルを⾃由に設定できる u ポリゴンの Extrusion を使ったビルディングの 3D 表現 u 様々なカスタムレイヤー
23. GeoJSON と Turf.js u GeoJSON: 緯度経度の座標を持つポイント、ライン、ポリゴンを格納するファイ ルフォーマット u Turf.js: GeoJSON 分析・加⼯のための JavaScript ライブラリ
24. これはいける
25. ヘリコプタービューと斜め後⽅ビュー
26. ズームと マルチレ イヤー
27. リアルタイム の遅延を反映
28. リアルタイムに⾒せるためには⼯夫がいる u 取得できるデータは、実は数⼗秒〜数分前の列⾞情報である︕ u 東京メトロは1分弱、JR東⽇本は3分程度の配信遅延 u 分単位の遅延時間と、停⾞している駅もしくは2駅間にいるかどうかしかわからない u そこで、次のようなロジックを実装 u 通常は静的な時刻表通り u 遅延時間の情報があるときは、その分だけ位置を補正 u 動的な在線位置情報は使わない
29. 4ヶ国語に対応 u 訪⽇観光客の7割は中国・韓国・台湾・⾹港 u 駅名、路線名、空港名、航空会社名、・・ u ⼿⼊⼒なので、実はここにかなりの時間がかけている
30. パフォーマンスが厳しい u 列⾞の数が増えてくると、コマ落ちする u Mapbox では GeoJSON ポリゴンの Extrusion で列⾞の箱は描けるが、滑らかな更新 を⾏うことは想定していない u 列⾞の位置計算が重い u バックグラウンドのマップのローディングも動かなくなる
31. three.js u three.js: WebGL ベース、クロスブラウザ対応の軽量な JavaScript ライブラリ u Mapbox のカスタムレイヤーとして組み込める u 列⾞を three.js のオブジェクトで表⽰し、動きがサクサクに
32. 最適化の数々 u 始点からの距離の事前計算と⼆分探索 u ⽅⾓、傾斜も線分毎に事前計算 u 描画時の三⾓関数の使⽤はなるべく避けたい u ⼀編成内の⾞両位置の計算をまとめて⾏う u 画⾯外の⾞両のフレームレートを1fpsに u ロード時のデータ量削減 u 降⾬パーティクルの動的な更新、データの遅延更新 u 地図のテキストラベルは駅名だけに
33. 加減速・最⾼速度を現実っぽく
34. 遅延を⼀⽬で わかるように
35. 地下は別にした⽅がいいよね
36. deck.gl
37. deck.gl u deck.gl: Uber 謹製、WebGLベースの地理情報視覚化フレームワーク u Mapbox のレイヤーとして追加できる u マイナスの標⾼のオブジェクトの描画に対応
38. 路線座標データをOepnStreetMapから overpass turbo OpenStreetMap
39. 鉄道ファンなら 夢⾒るフル編成
40. 現実と⽐べてみる u プラスマイナス1分は仕⽅ない u それでも誤差を少なくするために、毎分25秒 を基準に
41. 2019年9⽉9⽇: 台⾵15号 u ⾵がヤバかった u ⾸都圏の鉄道、ほぼ全滅 u 遅延が400〜500分とか u デバッグがはかどった
42. 2019年10⽉12⽇: 台⾵19号 u 台⾵15号の記憶が残る中、「最強」 台⾵の接近に各社万全の体制 u ⾸都圏の鉄道、全⾯的に計画運休 u ⼀部地下鉄はずっと動いていたが u デバッグがさらに はかどった
43. ⾶⾏機は絶対⾶ばす u 鉄道ファンだけでなく、航空ファンも引き込みたい u ⾶⾏機は列⾞並みにかわいく u ⾶⾏ルートは現実と同じにしたい u ⾒ただけでエアラインがわかるようにしたい
44. ⾶⾏機︕
45. ⾬を降らせた ら便利ではな いか︖
46. 5分毎、1kmメッシュ、8段階の降⽔予測 気象庁・降⽔ナウキャスト
47. GitHub 1,000 スター越え u 半分くらいは海外から
48. รองรับภาษาไทย uनेपाल&लाई प)न समथ-न गद-छ
49. 地下トンネル、 地下鉄の地上 部分
50. 駅名検索 いるよね
51. 夜なのに⾵景が明るいのはおかしい
52. 夜なのに⾵景が明るいのはおかしい
53. 夜なのに⾵景が明るいのはおかしい
54. 夜なのに⾵景が明るいのはおかしい
55. ⽻⽥空港の⾶⾏コース
56. ⽻⽥空港の並⾏滑⾛路の同時離着陸運⽤
57. グルメ情報出し たらどうか︖
58. まだまだ続きます・・
59. 第4回︕