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
94
新宿駅構内を三人称視点で探索してみる
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
590
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
440
新宿ダンジョンを可視化してみた
satoshi7190
3
750
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
『品質』という言葉が嫌いな理由
korimu
0
160
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
190
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.2k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
Rails アプリ地図考 Flush Cut
makicamel
1
110
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
950
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Introduction to kotlinx.rpc
arawn
0
670
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Featured
See All Featured
Code Review Best Practice
trishagee
66
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
Practical Orchestrator
shlominoach
186
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Designing Experiences People Love
moore
139
23k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Into the Great Unknown - MozCon
thekraken
35
1.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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ゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化