Mini Tokyo 3D リアルタイム・オープンデータの可能性 草薙 昭彦 AKIHIKO KUSANAGI

⾃⼰紹介 u 草薙 昭彦 (くさなぎ あきひこ) u コグナイト株式会社 チーフソリューションアーキテクト兼CTO Japan u シンガポール在住 u 過去は u MapR Technologies u EMC (Greenplum) u Oracle u Sun Microsystems Twitter: @nagix

Mini Tokyo 3D 第3回 東京公共交通オープン データチャレンジ最優秀賞 2019年度 VLED 勝⼿表彰貢献賞

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

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

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

課題とテーマ u 平成23年以降訪⽇・訪都外国⼈旅⾏者数は継 続的に増加、東京オリンピックに向けさらな る増加が⾒込まれる u 東京の公共交通ネットワーク網は世界⼀の複 雑度・過密ダイヤ u 既存の交通サイネージ・Webアプリには直感 的でわかりやすいデザイン、突発的な交通障 害に対応するリアルタイム情報の反映が⾜り ない u 東京の交通事情を知らない訪⽇した外国⼈や 観光客が快適に過ごせるような⽅策が求めら れている

Mini Tokyo 3D 概要 u 東京の公共交通のリアルタイム3Dマップ u 今、実際に動いている列⾞やバス、発着して いる旅客機をリアルな3Dマップ上に滑らかな アニメーションで表現 u 現実世界とそっくりな双⼦をデジタルの世界 に表現した「デジタルツイン」 u ユーザーは⾃由に3Dマップ上を動き回り、⾒ たいところにズームインできる u PC、スマートフォン、タブレット、セット トップボックスなど、デバイスを問わず Web ブラウザさえあれば利⽤できる Web アプリ https://minitokyo3d.com

利点・特徴 u 全てがリアルタイム u 現実の時刻表やリアルタイムの遅延情報に従って運⾏する列⾞や旅客機を上 空の好きな視点から観覧 u 東京の⽇の出・⽇の⼊り時刻に合わせて景⾊の明るさが変化 u リアルタイムの気象情報を基にした降⽔アニメーション u 鉄道路線図の⾒やすさをそのままに u 路線図や案内で使われているものと同じラインカラー u 乗り換え駅の接続の表⽰ u 列⾞・旅客機はシンプルな単⾊の直⽅体にしてシンボル性を向上 u 操作性とパフォーマンス u 2,000以上の列⾞やバスが同時運⾏するラッシュ時、スマートフォンでも⾮常 にスムーズな運⾏アニメーションを実現 u ⽇英中韓の4ヶ国語対応 u 駅名検索にも対応 u 現実に限りなく近づけた列⾞運⾏と表⽰ u 実際の列⾞と同じ動きになるように、列⾞の起動加速度や最⾼速度を微調整 u 地上を⾛る列⾞の地下トンネル部分、地下鉄の地上⾛⾏区間も完全に再現 u 地上・地下の表⽰切り替え u 地上と地下の路線網を切り替えて表⽰することで⾒やすさを追求

4ヶ国語に対応 u 訪⽇観光客の7割は中国・韓国・台湾・⾹港から u 駅名、路線名、空港名、航空会社名、・・ u ⼿⼊⼒なので、実はここにかなりの時間をかけている

技術的な ⼯夫事項 u 地上・地下を含めた3Dモデルの表⽰ u 複数のオープンソースライブラ リ (Mapbox, deck.gl, three.js) を多層的に融合して地上・地下 の路線と列⾞の動きを表現 u 性能の追求 u 最適化の数々 u 路線上の始点からの距離、⽅⾓、傾斜の事前計算と⼆分探索 u 描画時の三⾓関数の使⽤の回避 u 画⾯外の⾞両のフレームレートを1fpsに u 圧縮によるロード時のデータ量削減 u 降⾬パーティクルの動的な更新、データの遅延更新 u 降⽔データの解析 u WebGLパーティクルを使った 3D降⽔アニメーション u 降⽔ナウキャスト画像からピク セルを解析して降⽔強度を取得

ユーザビリティ への⼯夫事項 u 地上・地下の切り替え u 地上の路線と地下鉄を両⽅ 表⽰すると⾮常に⾒にくい u ボタンで表⽰を切り替えること で⾒やすい路線図に u 列⾞・旅客機の追跡 u 注⽬した列⾞・旅客機の 動きを追える追跡モード u 360度旋回を⾏うヘリコプター 視点、斜め後⽅視点を選べる u 駅名検索 u 初めて東京にきた観光客でも⾏ き先がわかるように u ⼀部でも⼊⼒すると候補を提⽰、 選択すると移動アニメーション

デザインの ⼯夫事項 u シンボル性のある路線と列⾞・バス・旅客機 u 3Dモデルの形状はあえてシンプ ルな単⾊の直⽅体にして、シン ボル性を⾼めた u アニメーション u 視点移動や地上・地下表⽰の切 り替え、列⾞・旅客機の フェードイン・アウトなど、60 フレーム/秒のスムーズなアニ メーションを随所に利⽤ u マップの⾵景の時間による変化 u 時間によって⾊合いや明るさを 変化させてリアルさを追求 u ⽇の出・⽇の⼊りの時間は東京 の緯度・経度をもとに計算

u 活⽤している官⺠データ u 交通データ: 公共交通オープンデータセンター (https://www.odpt.org) u 地図データ: Mapbox (https://www.mapbox.com) OpenStreetMap (https://www.openstreetmap.org) u 降⽔データ: 気象庁降⽔ナウキャスト (https://www.jma.go.jp/jp/radnowc/) u 離着陸ルートデータ: 国交省東京航空局 (https://www.franomo.mlit.go.jp/) u 活⽤しているオープンソースライブラリ u Mapbox GL JS, Turf.js, deck.gl, three.js, Shader Particle Engine, SunCalc, pako, Font Awesome, Loaders.css u Mini Tokyo 3D ⾃⾝もオープンソースで公開中 u https://github.com/nagix/mini-tokyo-3d データとオープンソースコード

最近の新機能 u 安定版(11⽉15⽇)リリース以降に追加された機能 u ゆりかもめ、京急空港線・⼤師線、京成、北総鉄道、芝⼭鉄道、東武、⻄武、⼩⽥急、東急、 みなとみらい線、埼⽟⾼速鉄道、東葉⾼速鉄道、つくばエクスプレスを追加 u 臨時列⾞の表⽰ u データの圧縮による通信量の削減 u ⾵向き、時間帯に応じた⽻⽥・成⽥空港の⾶⾏ルートのリアルタイムの反映 u MapboxがOpenStreetMapをより詳細なゼンリン地図データに変更 u 追跡中の列⾞時刻表の表⽰ u ⾼速再⽣モード（タイムラプス機能） u minitokyo3d.comドメイン運⽤開始 u 特急列⾞のデータ追加と、3Dモデル対応 u 「Togetter: Mini Tokyo 3D 開発⽇誌」を⾒ると⽇々の開発進⾏状況がわかる u https://togetter.com/li/1413307

今後の構想 u 3/14ダイヤ改正対応 u 3D乗り換え案内 u 乗⾞列⾞の推定 u ネイティブアプリ化 u ユーザーごとのカスタマイズ、お気に⼊りルート・場所の保存 u 乗っている列⾞情報の他⼈への共有、交通SNS u プラグインによる独⾃レイヤー追加への対応 u レストラン情報、ホテル情報、広告、独⾃タグ表⽰、・・・ u 他都市への展開 u Mini SG 3D: シンガポール版を準備中