狠狠撸

Mini Tokyo 3D
草薙昭彦 AKIHIKO KUSANAGI

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

Cognite
u ノルウェー発?重?業向
けデジタル化?データ分
析プラットフォーム
u 2019年10?に?本?社
設?

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

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

https://nagix.github.io/mini-Tokyo-3d/
または
「Mini Tokyo 3D」で検索

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

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

初期バージョン:
Mini Tokyo

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

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

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

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

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

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

ヘリコプタービューと斜め后?ビュー

ズームと
マルチレ
イヤー

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

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

4ヶ国語に対応
u 訪?観光客の7割は中国?韓国?台湾??港
u 駅名、路線名、空港名、航空会社名、??
u ???なので、実はここにかなりの时间がかけている

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

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

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

加减速?最?速度を现実っぽく

遅延を??で
わかるように

地下は别にした?がいいよね

deck.gl
u deck.gl: Uber 謹製、WebGLベースの地理情報視覚化フレームワーク
u Mapbox のレイヤーとして追加できる
u マイナスの標?のオブジェクトの描画に対応

路線座標データをOepnStreetMapから
overpass turboOpenStreetMap

鉄道ファンなら
夢?るフル編成

現実と?べてみる
u プラスマイナス1分は仕?ない
u それでも誤差を少なくするために、毎分25秒
を基準に

2019年9?9?: 台?15号
u ?がヤバかった
u ?都圏の鉄道、ほぼ全滅
u 遅延が400?500分とか
u デバッグがはかどった

2019年10?12?: 台?19号
u 台?15号の記憶が残る中、「最強」
台?の接近に各社万全の体制
u ?都圏の鉄道、全?的に計画運休
u ?部地下鉄はずっと動いていたが
u デバッグがさらに
はかどった

??機は絶対?ばす
u 鉄道ファンだけでなく、航空ファンも引き込みたい
u ??機は列?並みにかわいく
u ??ルートは現実と同じにしたい
u ?ただけでエアラインがわかるようにしたい

?を降らせた
ら便利ではな
いか?

5分毎、1kmメッシュ、8段階の降?予測
気象庁?降?ナウキャスト

GitHub 1,000 スター越え
u 半分くらいは海外から

?????????????
u?????&??? ?)? ???-? ??-?

地下トンネル、
地下鉄の地上
部分

夜なのに?景が明るいのはおかしい

??空港の并?滑?路の同时离着陆运?

グルメ情報出し
たらどうか?

狠狠撸

Mini Tokyo 3D

More Related Content

Mini Tokyo 3D