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

2025/2/15
FOSS4G Hokkaido 2024 発表資料
https://foss4g.hokkaido.jp/2024/

Transcript

1. 三人称視点で探索してみる Satoshi Komatsu 新宿駅構内を
2. 自己紹介 株式会社MIERUNE フロントエンドエンジニア 約３年前に岐阜から札幌に お引越し @satoshi7190 @satoshi7190 Satoshi Komatsu
3. 新宿駅構内を可視化したよ
4. 東京都新宿区にある日本最大級 のターミナル駅 「新宿ダンジョン」とも呼ばれ るほど複雑な構造を持つ 新宿駅
5. 新宿駅構内図の例 JR東日本のホームページ https://www.jreast.co.jp/estation/stations/866.html
6. https://www.google.co.jp/maps/ Googleマップの屋内表示 新宿駅構内図の例
7. https://3dview.tokyo-digitaltwin.metro.tokyo.lg.jp/ 東京都デジタルツイン 3Dビューア （新宿西エリア） 新宿駅構内図の例
8. 構内図における最大の欠点 スマホのGPSの性能が劣るため、現在地を正確に 地図上に描画するのが難しい 3Dの場合階数とかの高さ情報とかも 必要になってくる
9. 構内図における最大の欠点 ので
10. GPSによるの位置表示はあきらめました 構内図における最大の欠点
11. TPS（三人称視点）で見せることにした ３Dゲームなどで プレイヤーキャラクターを後方 または斜め上から見下ろす形で 操作する視点 「崩壊：スターレイル」 © HoYoverse
12. 「崩壊：スターレイル」 © HoYoverse 広い視野で実際に歩いているよ うな擬似体験 2Dミニマップ表示で全体構造を 把握し、現在地マーカーで位置、 進行方向を把握しやすい TPS（三人称視点）で見せることにした
13. プロトタイプDEMO https://satoshi7190.github.io/three-plateau-tps/
14. Three.js Web上で3Dグラフィッ クスを描画するための JavaScriptライブラリ https://threejs.org/
15. 2023年度の新宿区データに 地下街モデル（LOD4）が公開 https://www.mlit.go.jp/plateau/ PLATEAU 3D都市モデル
16. PLATEAU GIS Converter PLATEAU CityGMLを いろんなデータ形式に変換できる ３Dモデルの.glb .objなどの形式 にも対応 https://plugins.qgis.org/plugins/plateau_plugin/
17. データについて GLTF(glb)形式に変換すると 位置情報を失っちゃう
18. FlatGeobuf Z（高さ）情報も格納可能 バイナリデータなので属性情報を含め ても比較的軽量
19. PLATEAU QGIS Plugin https://github.com/Project-PLATEAU/PLATEAU-GIS-Converter 3次元の平面直角座標系（EPSG:6677） に変換し、FlatGeobfで出力
20. Three.jsは標準でFlatGeobfに対応してない そんなプラグインない 自力でなんとかせい 描画させてください！！ おかのした
21. https://qiita.com/satoshi7190/items/67148db8b3149e73c4b0 FGB3DLoaderクラスの自作
22. X Z Y X Z Y 座標の向きの違い ワールド座標 地理座標
23. X Z Y 平面直角座標系（EPSG:6677）新宿駅中心 [-12043, -34145 , ０] ワールド座標原点 [０, ０, ０] 座標の位置の違い
24. X Z Y 動的に座標変換すればいいだけ
25. 詳しくはQiitaで https://qiita.com/satoshi7190/items/67148db8b3149e73c4b0
26. 他の地理空間データを重ねられる • 基盤地図情報 軌道の中心線(Railroad Track Centerline) • 地理院ベクトル 道路中心線 • R1整備_歩行空間ネットワークデータ （新宿駅周辺）（2018年3月版適用） ※2次元データは高さ合わせがきついかも
27. 地図ライブライブラリをミニマップとして使える
28. 新宿駅自体の課題 常にどこかしら工事してるため変形し続けるラビリンス オープンデータ自体が追いついてないかも？ PLATEAU地下街モデルもまだ一部の区域のみしかない
29. データの課題 屋内のオープンな３次元データ少ない 屋内POI情報も足りない 自ら現地で収集するしかなさそう…
30. 作ってみた感想 WebGISと違ってWeb3Dゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化