Tweet
Tweet

Slide 1

Slide 1 text

三人称視点で探索してみる Satoshi Komatsu 新宿駅構内を

Slide 2

Slide 2 text

自己紹介 株式会社MIERUNE フロントエンドエンジニア 約３年前に岐阜から札幌に お引越し @satoshi7190 @satoshi7190 Satoshi Komatsu

Slide 3

Slide 3 text

新宿駅構内を可視化したよ

Slide 4

Slide 4 text

東京都新宿区にある日本最大級 のターミナル駅 「新宿ダンジョン」とも呼ばれ るほど複雑な構造を持つ 新宿駅

Slide 5

Slide 5 text

新宿駅構内図の例 JR東日本のホームページ https://www.jreast.co.jp/estation/stations/866.html

Slide 6

Slide 6 text

https://www.google.co.jp/maps/ Googleマップの屋内表示 新宿駅構内図の例

Slide 7

Slide 7 text

https://3dview.tokyo-digitaltwin.metro.tokyo.lg.jp/ 東京都デジタルツイン 3Dビューア （新宿西エリア） 新宿駅構内図の例

Slide 8

Slide 8 text

構内図における最大の欠点 スマホのGPSの性能が劣るため、現在地を正確に 地図上に描画するのが難しい 3Dの場合階数とかの高さ情報とかも 必要になってくる

Slide 9

Slide 9 text

構内図における最大の欠点 ので

Slide 10

Slide 10 text

GPSによるの位置表示はあきらめました 構内図における最大の欠点

Slide 11

Slide 11 text

TPS（三人称視点）で見せることにした ３Dゲームなどで プレイヤーキャラクターを後方 または斜め上から見下ろす形で 操作する視点 「崩壊：スターレイル」 © HoYoverse

Slide 12

Slide 12 text

「崩壊：スターレイル」 © HoYoverse 広い視野で実際に歩いているよ うな擬似体験 2Dミニマップ表示で全体構造を 把握し、現在地マーカーで位置、 進行方向を把握しやすい TPS（三人称視点）で見せることにした

Slide 13

Slide 13 text

プロトタイプDEMO https://satoshi7190.github.io/three-plateau-tps/

Slide 14

Slide 14 text

Three.js Web上で3Dグラフィッ クスを描画するための JavaScriptライブラリ https://threejs.org/

Slide 15

Slide 15 text

2023年度の新宿区データに 地下街モデル（LOD4）が公開 https://www.mlit.go.jp/plateau/ PLATEAU 3D都市モデル

Slide 16

Slide 16 text

PLATEAU GIS Converter PLATEAU CityGMLを いろんなデータ形式に変換できる ３Dモデルの.glb .objなどの形式 にも対応 https://plugins.qgis.org/plugins/plateau_plugin/

Slide 17

Slide 17 text

データについて GLTF(glb)形式に変換すると 位置情報を失っちゃう

Slide 18

Slide 18 text

FlatGeobuf Z（高さ）情報も格納可能 バイナリデータなので属性情報を含め ても比較的軽量

Slide 19

Slide 19 text

PLATEAU QGIS Plugin https://github.com/Project-PLATEAU/PLATEAU-GIS-Converter 3次元の平面直角座標系（EPSG:6677） に変換し、FlatGeobfで出力

Slide 20

Slide 20 text

Three.jsは標準でFlatGeobfに対応してない そんなプラグインない 自力でなんとかせい 描画させてください！！ おかのした

Slide 21

Slide 21 text

https://qiita.com/satoshi7190/items/67148db8b3149e73c4b0 FGB3DLoaderクラスの自作

Slide 22

Slide 22 text

X Z Y X Z Y 座標の向きの違い ワールド座標 地理座標

Slide 23

Slide 23 text

X Z Y 平面直角座標系（EPSG:6677）新宿駅中心 [-12043, -34145 , ０] ワールド座標原点 [０, ０, ０] 座標の位置の違い

Slide 24

Slide 24 text

X Z Y 動的に座標変換すればいいだけ

Slide 25

Slide 25 text

詳しくはQiitaで https://qiita.com/satoshi7190/items/67148db8b3149e73c4b0

Slide 26

Slide 26 text

他の地理空間データを重ねられる • 基盤地図情報 軌道の中心線(Railroad Track Centerline) • 地理院ベクトル 道路中心線 • R1整備_歩行空間ネットワークデータ （新宿駅周辺）（2018年3月版適用） ※2次元データは高さ合わせがきついかも

Slide 27

Slide 27 text

地図ライブライブラリをミニマップとして使える

Slide 28

Slide 28 text

新宿駅自体の課題 常にどこかしら工事してるため変形し続けるラビリンス オープンデータ自体が追いついてないかも？ PLATEAU地下街モデルもまだ一部の区域のみしかない

Slide 29

Slide 29 text

データの課題 屋内のオープンな３次元データ少ない 屋内POI情報も足りない 自ら現地で収集するしかなさそう…

Slide 30

Slide 30 text

作ってみた感想 WebGISと違ってWeb3Dゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化