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
400
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
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
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
530
新宿ダンジョンを可視化してみた
satoshi7190
3
700
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.8k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
950
Other Decks in Programming
See All in Programming
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
480
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
Spatial Rendering for Apple Vision Pro
warrenm
0
110
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
fs2-io を試してたらバグを見つけて直した話
chencmd
0
230
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
Jakarta EE meets AI
ivargrimstad
0
250
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
190
From Translations to Multi Dimension Entities
alexanderschranz
2
130
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
Beyond ORM
77web
6
780
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Side Projects
sachag
452
42k
Optimising Largest Contentful Paint
csswizardry
33
3k
Statistics for Hackers
jakevdp
796
220k
Agile that works and the tools we love
rasmusluckow
328
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Writing Fast Ruby
sferik
628
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Being A Developer After 40
akosma
87
590k
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スケールの再現が できない。