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
100
新宿駅構内を三人称視点で探索してみる
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
600
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
440
新宿ダンジョンを可視化してみた
satoshi7190
3
760
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
160
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
820
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
1
140
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
160
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
270
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
620
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
780
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
6
1.7k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
KATA
mclloyd
29
14k
Faster Mobile Websites
deanohume
306
31k
BBQ
matthewcrist
87
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
RailsConf 2023
tenderlove
29
1k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Scaling GitHub
holman
459
140k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
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ゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化