Mini Tokyo 3D 2021 − 交通デジタルツイン、2年間の進化

Mapbox/OpenStreetMap meetup #06での発表資料です。

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

前作「Mini Tokyo 3D」を出発点として、2年間で大きな進化を遂げました。『東京を訪問した旅行者が複雑な交通網を理解し、快適に過ごせるように』という当初の目的に加えて、2020年の新型コロナウイルスパンデミックを契機に『東京を訪問できない世界中の人々が東京の「今」を身近に体験できるように』という新たな目的を設定し、様々なアイデアを盛り込んでいます。

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

https://minitokyo3d.com/2021/

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

Transcript

1. Mini Tokyo 3D 2021 交通デジタルツイン、2年間の進化 草薙 昭彦 AKIHIKO KUSANAGI
2. ⾃⼰紹介 u 草薙 昭彦 (くさなぎ あきひこ) u Cognite 株式会社 チーフソリューションアーキテクト兼CTO Japan u 2016年からシンガポール在住 u 過去は u MapR Technologies u EMC (Greenplum) u Oracle u Sun Microsystems Twitter: @nagix
3. Mini Tokyo 3D (2019年) 第3回 東京公共交通オープン データチャレンジ最優秀賞 2019年度 VLED 勝⼿表彰貢献賞 第25回 AMD Award ‘19 江並直美賞（新⼈賞）
4. 東京公共交通リアルタイム 3Dビジュアライゼーション MINI TOKYO 3D ⼀⾔で⾔うならば
5. Mini Tokyo 3D 概要 u 東京の公共交通のリアルタイム3Dマップ u 今、実際に動いている列⾞やバス、発着して いる旅客機をリアルな3Dマップ上に滑らかな アニメーションで表現 u 現実世界とそっくりな双⼦をデジタルの世界 に表現した「デジタルツイン」 u ユーザーは⾃由に3Dマップ上を動き回り、⾒ たいところにズームインできる u PC、スマートフォン、タブレット、セット トップボックスなど、デバイスを問わず Web ブラウザさえあれば利⽤できる Web アプリ https://minitokyo3d.com
6. https://minitokyo3d.com または 「Mini Tokyo 3D」で検索
7. Mini Tokyo 3D 2021 のテーマ 東京を訪問した旅⾏者が複雑な 交通網を理解し、快適に過ごせるように 2020年 新型コロナウイルスパンデミック 東京を訪問できない世界中の⼈々が 東京の「今」を⾝近に体験できるように
8. Mini Tokyo 3D 2021 2年間で何が変わった︖ より実⽤的に • 対応路線の拡⼤・駅情報の追加 • 3D乗り換え案内 • 乗っている電⾞のシェア より快適に • ⼤幅な性能向上・省電⼒モード • 再⽣モード 現実に東京を旅しているかのように • 地平線と空が⾒えるカメラ⾓度 • リアルな天候 • 花⽕やライブカメラ、オリンピック 情報
9. 対応路線の拡⼤ ※路線数は⽀線・連絡線を含む 2019年11⽉ 56路線、 610駅 ラッシュ時の同時⾛⾏列⾞ 1,100+ 2021年10⽉ 150路線、 1,684駅 ラッシュ時の同時⾛⾏列⾞ 2,200+
10. 特急列⾞の数々
11. 駅出⼝情報の表⽰
12. Mini Tokyo 3D https://minitokyo3d.com 経路検索 （乗り換え案内） 登場︕ NEW
13. 3Dマップ上で乗り換え案内
14. 今乗っている列⾞を誰かに伝えたい︕
15. GPUを活⽤する描画性能の⼤幅な改善 u インスタンシング u GPUピッキング
16. 𝑥 インスタンシングなし インスタンシングあり ⾊ 透明度 向き スケール 位置 形状 形状 スケール (メッシュ共通) 透明度 (メッシュ共通) ⾊ 透明度 向き 位置 ⾊ 透明度 向き スケール 位置 形状 ⾊ 透明度 向き スケール 位置 形状 CPUで 更新処理 CPUで 更新処理 GPUで 描画処理 GPUで 描画処理 ⾊ 透明度 向き 位置 ⾊ 透明度 向き 位置 標準シェーダー 標準シェーダー 標準シェーダー Drawコール Drawコール Drawコール カスタムシェーダーで共通属性と個別属性からインスタンスを合成 Drawコール … …
17. 𝑥 レイキャスティング GPUピッキング スクリーン マウスカーソル 3D空間で視線と各オブジェクトの交差を計算 オフスクリーンに各オブジェクトを異なる⾊で 描画し、マウス位置の⾊コードを読み取る
18. モバイル機器のためのエコモード搭載
19. 再⽣モード（タイムラプス機能）
20. 空と⽔平線が⾒えるカメラ⾓度
21. 降⽔アニメーションの改善
22. 中⽌になった花⽕⼤会をバーチャルで︕
23. 3Dマップとライブカメラ映像を同じ視点で
24. オリンピックの会場案内とスケジュール
25. 台⾵・地震・変電所⽕災・・・
26. Mini Tokyo API 公開とプラグインシステム
27. 2020年2⽉〜の利⽤者13.6万⼈/28.8万接続
28. まだまだ続きます・・
29. https://minitokyo3d.com または 「Mini Tokyo 3D」で検索