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
July 25, 2024
Programming
2
440
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
2024/07/24
MIERUNE BBQ #10 in 札幌時計台 発表資料
https://mierune.connpass.com/event/321230/
Satoshi Komatsu
July 25, 2024
Tweet
Share
More Decks by Satoshi Komatsu
See All by Satoshi Komatsu
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
88
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
590
新宿ダンジョンを可視化してみた
satoshi7190
3
750
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
技術を根付かせる / How to make technology take root
kubode
1
240
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Being A Developer After 40
akosma
89
590k
Optimizing for Happiness
mojombo
376
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building an army of robots
kneath
302
45k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Writing Fast Ruby
sferik
628
61k
Docker and Python
trallard
44
3.3k
Designing Experiences People Love
moore
139
23k
For a Future-Friendly Web
brad_frost
176
9.5k
How STYLIGHT went responsive
nonsquared
98
5.3k
Transcript
⽴⽅体異世界⽣成魔法 Satoshi Komatsu キュービックディメンション・ジェネレーションマジック Glyph designed by "project daisy bell"
Satoshi Komatsu フロントエンドエンジニア @satoshi7190 @satoshi7190 株式会社MIERUNE
⽴⽅体異世界⽣成魔法 キュービックディメンション・ジェネレーションマジック
実際の地形からMinecraftの地形を作るツール (開発中段階です) ⽴⽅体異世界⽣成魔法 キュービックディメンション・ジェネレーションマジック
Minecraft(マイクラ)とは? • 広⼤なブロックの世界を探検 し、創造するゲーム • 様々なブロックを使って⾃由 に建築ができる • 創造⼒を発揮できる⼦供から ⼤⼈まで楽しめる
https://www.minecraft.net/ja-jp
マイクラの世界にリアルな地形を誰でも簡単に再現できる!!
変換ツール 変換後のデータ 元データ とりあえず⼯夫した点
変換ツール 変換後のデータ 元データ 使う側の気持ち とりあえず⼯夫した点
元データが未知の物質(ファイル)だと 不安感でユーザーは利⽤しない。準備が⾯倒。 元データ Geotiff COPC とりあえず⼯夫した点
APIという魔法で未知の物質に触れなくても 変換できるようにした API
地理院タイル https://maps.gsi.go.jp/development/tileCoordCheck.html https://maps.gsi.go.jp/development/ichiran.html
地理院タイルの仕組み 地図画像の出典:国⼟地理院
地理院タイルの仕組み 世界をグリッドに分割 地図画像の出典:国⼟地理院
地理院タイルの仕組み 世界をグリッドに分割 地図画像の出典:国⼟地理院
タイル画像 地理院タイルの仕組み
縦256px 横256px 地理院タイルの仕組み ある地域のを⼀枚の画像として取得できる 地図画像の出典:国⼟地理院
地理院タイルの仕組み 4分割して⼀段上の解像度が⾼い画像を取得する 地図画像の出典:国⼟地理院
地理院タイルの仕組み 4分割して⼀段上の解像度が⾼い画像を取得する 地図画像の出典:国⼟地理院
地理院タイルの仕組み 地図画像の出典:国⼟地理院
地理院タイルの仕組み 地図画像の出典:国⼟地理院
地理院タイルの仕組み 地図画像の出典:国⼟地理院
地理院タイルの仕組み 地図画像の出典:国⼟地理院
ズームレベル(Z) 10 11 12 13 地理院タイルの仕組み 地図画像の出典:国⼟地理院
X 地理院タイルの仕組み Y ズームレベル(Z)13 地図画像の出典:国⼟地理院
X 地理院タイルの仕組み Y ズームレベル(Z)13 地図画像の出典:国⼟地理院
X 地理院タイルの仕組み Y X:7252 Y:3234 X:7253 Y:3234 X:7251 Y:3234 X:7252
Y:3233 X:7252 Y:3235 X:7253 Y:3233 X:7253 Y:3235 X:7251 Y:3235 X:7251 Y:3233 ズームレベル(Z)13 地図画像の出典:国⼟地理院
X 地理院タイルの仕組み Y Z:13 X:7252 Y:3234 Z:13 X:7253 Y:3234 Z:13
X:7251 Y:3234 Z:13 X:7252 Y:3233 Z:13 X:7252 Y:3235 Z:13 X:7253 Y:3233 Z:13 X:7253 Y:3235 Z:13 X:7251 Y:3235 Z:13 X:7251 Y:3233 ZXYのタイル座標で領域が確定する 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/{layer}/{z}/{x}/{y}.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/{layer}/{z}/{x}/{y}.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/{layer}/13/7252/3234.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/{layer}/13/7252/3234.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/13/7252/3234.jpg URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 航空写真 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/std/13/7252/3234.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 電⼦国⼟基本図 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/slopemap/13/7252/3234.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 傾斜量図 地図画像の出典:国⼟地理院
地理院タイルの仕組み https://cyberjapandata.gsi.go.jp/xyz/dem_png/13/7252/3234.png URLパターンに従ってタイル画像を取得する Z:13 X:7252 Y:3234 標⾼タイル 地図画像の出典:国⼟地理院
標⾼タイルとは? • 各ピクセルには標⾼値が格納 されている • 標⾼値をRGBで独⾃エンコー ドしたものなので⾒た⽬がお かしい • 2次元画像データだけど、デ
コードすれば3次元データと して使える 地図画像の出典:国⼟地理院
URLリクエストのみで地形情報を取得できる 地形の⾼さ情報 地形の⾊情報 地図画像の出典:国⼟地理院
クロスプラットフォームのデ スクトップアプリケーション 開発⾔語はRust 使⽤した技術
地図画⾯から変換したい領域を選択して決定を押すだけ フロント側
地形データを取得してマイクラのワールドデータ(.mca)を⽣成する バックエンド側 fastnbt クレート 地図画像の出典:国⼟地理院 https://github.com/owengage/fastnbt
https://www.reddit.com/r/Minecraft/comments/14jrc92/created_a_full_color_palette_for_all_the_blocks/ 画像の各ピクセルのカラー情報から⼀番⾊が近いブロックを選択 バックエンド側 地図画像の出典:国⼟地理院
⾼さ情報からブロックを積み上げる バックエンド側 地図画像の出典:国⼟地理院
出⼒時のズームレベルを変えることでスケールの変更が可能 ズームレベル(Z) 14 12 13
タイル画像の種類を変えれば、ブロックの⾊も変わる 電⼦国⼟基本図 傾斜量図 地図画像の出典:国⼟地理院
地形の解像度が⾼いデータ(兵庫県)を使えば 1/1スケールで再現できる 建物の⾼さを含むデータ(DSM) ズームレベル17(1ブロック1mスケール)
難点 マイクラの限界の⾼さが 384ブロックまで。 標⾼が⾼い⼭は解像度 (スケール)を低く設定 しないと⼭頂が削れる。
今後の課題点 • 並列処理ができてないので変換処理遅い • 技術的には⽇本列島全てを変換可能だが、範囲が広 すぎるとエラーでうまく変換できない • 解像度の限界。⼀部の地域しか1/1スケールの再現が できない。