Slide 1

Slide 1 text

Mini Tokyo 3D 草薙 昭彦 AKIHIKO KUSANAGI

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

地図好き

Slide 5

Slide 5 text

鉄道好き

Slide 6

Slide 6 text

ゲーム好き

Slide 7

Slide 7 text

ゲーム作るの好き

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

あった

Slide 13

Slide 13 text

2012年: 鉄道Now

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ヒント: Mini Metro

Slide 16

Slide 16 text

初期バージョン: Mini Tokyo

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Mapbox GL JS

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

これはいける

Slide 25

Slide 25 text

ヘリコプタービューと斜め後⽅ビュー

Slide 26

Slide 26 text

ズームと マルチレ イヤー

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

加減速・最⾼速度を現実っぽく

Slide 34

Slide 34 text

遅延を⼀⽬で わかるように

Slide 35

Slide 35 text

地下は別にした⽅がいいよね

Slide 36

Slide 36 text

deck.gl

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

⾶⾏機︕

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

รองรับภาษาไทย uनेपाल&लाई प)न समथ-न गद-छ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

駅名検索 いるよね

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

⽻⽥空港の⾶⾏コース

Slide 56

Slide 56 text

⽻⽥空港の並⾏滑⾛路の同時離着陸運⽤

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

まだまだ続きます・・

Slide 59

Slide 59 text

第4回︕