Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新宿駅構内を三人称視点で探索してみる
Search
Satoshi Komatsu
February 16, 2025
Programming
2
440
新宿駅構内を三人称視点で探索してみる
2025/2/15
FOSS4G Hokkaido 2024 発表資料
https://foss4g.hokkaido.jp/2024/
Satoshi Komatsu
February 16, 2025
Tweet
Share
More Decks by Satoshi Komatsu
See All by Satoshi Komatsu
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
780
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
570
新宿ダンジョンを可視化してみた
satoshi7190
3
980
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.2k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1.2k
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
NIKKEI Tech Talk#38
cipepser
0
230
CSC305 Lecture 08
javiergs
PRO
0
280
Devoxx BE - Local Development in the AI Era
kdubois
0
140
iOSでSVG画像を扱う
kishikawakatsumi
0
170
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.5k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
Catch Up: Go Style Guide Update
andpad
0
250
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Balancing Empowerment & Direction
lara
5
700
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Side Projects
sachag
455
43k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Art, The Web, and Tiny UX
lynnandtonic
303
21k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Adaptive Systems
keathley
44
2.8k
Writing Fast Ruby
sferik
630
62k
Transcript
三人称視点で探索してみる Satoshi Komatsu 新宿駅構内を
自己紹介 株式会社MIERUNE フロントエンドエンジニア 約3年前に岐阜から札幌に お引越し @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(三人称視点)で見せることにした 3Dゲームなどで プレイヤーキャラクターを後方 または斜め上から見下ろす形で 操作する視点 「崩壊:スターレイル」 © 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を いろんなデータ形式に変換できる 3Dモデルの.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 , 0] ワールド座標原点 [0,
0, 0] 座標の位置の違い
X Z Y 動的に座標変換すればいいだけ
詳しくはQiitaで https://qiita.com/satoshi7190/items/67148db8b3149e73c4b0
他の地理空間データを重ねられる • 基盤地図情報 軌道の中心線(Railroad Track Centerline) • 地理院ベクトル 道路中心線 •
R1整備_歩行空間ネットワークデータ (新宿駅周辺)(2018年3月版適用) ※2次元データは高さ合わせがきついかも
地図ライブライブラリをミニマップとして使える
新宿駅自体の課題 常にどこかしら工事してるため変形し続けるラビリンス オープンデータ自体が追いついてないかも? PLATEAU地下街モデルもまだ一部の区域のみしかない
データの課題 屋内のオープンな3次元データ少ない 屋内POI情報も足りない 自ら現地で収集するしかなさそう…
作ってみた感想 WebGISと違ってWeb3Dゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化