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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Satoshi Komatsu

More Decks by Satoshi Komatsu

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

他の地理空間データを重ねられる • 基盤地図情報軌道の中心線(Railroad Track Centerline) • 地理院ベクトル道路中心線 •

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

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

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

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