⾃⼰紹介
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 曲線を使えばそれっぽく⾒える︕
悪くない・・が
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 マイナスの標⾼のオブジェクトの描画に対応