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
250
新宿駅構内を三人称視点で探索してみる
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
630
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
470
新宿ダンジョンを可視化してみた
satoshi7190
3
800
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
390
Going Structural with Named Tuples
bishabosha
0
170
ニックトレイン登壇資料
ryotakurokawa
0
140
WordPress Playground for Developers
iambherulal
0
120
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.3k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.2k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
720
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
240
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
200
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
A Tale of Four Properties
chriscoyier
158
23k
A Philosophy of Restraint
colly
203
16k
Typedesign – Prime Four
hannesfritz
41
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
BBQ
matthewcrist
88
9.5k
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ゲーム 制作ってめちゃむずい 当たり判定とか カメラワークとか 当たり判定オブシェクトの可視化