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
360
新宿駅構内を三人称視点で探索してみる
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
720
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
540
新宿ダンジョンを可視化してみた
satoshi7190
3
880
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.1k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1.1k
Other Decks in Programming
See All in Programming
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
型で語るカタ
irof
0
600
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
220
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
210
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
430
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
NEWT Backend Evolution
xpromx
1
120
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
530
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Practical Orchestrator
shlominoach
189
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Code Review Best Practice
trishagee
69
19k
Documentation Writing (for coders)
carmenintech
72
4.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Faster Mobile Websites
deanohume
307
31k
Optimizing for Happiness
mojombo
379
70k
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ゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化