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
630
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
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
640
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
850
新宿ダンジョンを可視化してみた
satoshi7190
3
1.1k
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.3k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1.3k
Other Decks in Programming
See All in Programming
nuget-server - あなたが必要だったNuGetサーバー
kekyo
PRO
0
440
Claude Code Skill入門
mayahoney
0
420
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
210
安いハードウェアでVulkan
fadis
1
770
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
2
380
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
240
KagglerがMixSeekを触ってみた
morim
0
210
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
nrslib
16
3.4k
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
170
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
140
コードレビューをしない選択 #でぃーぷらすトウキョウ
kajitack
3
1.1k
飯MCP
yusukebe
0
300
Featured
See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
52k
How to Ace a Technical Interview
jacobian
281
24k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
250
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
110k
A designer walks into a library…
pauljervisheath
210
24k
The Curse of the Amulet
leimatthew05
1
10k
SEO for Brand Visibility & Recognition
aleyda
0
4.4k
Prompt Engineering for Job Search
mfonobong
0
220
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
sira's awesome portfolio website redesign presentation
elsirapls
0
200
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
130
A Tale of Four Properties
chriscoyier
163
24k
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スケールの再現が できない。