Unreal Engine 5で日本のどこかの地形をインポートする

この記事は [Akatsuki Games Advent Calendar 2022](https://adventar.org/calendars/7459) 8日目の記事です。
前回はotofuneさんの [GitHub Actions でコミットの status checks を取る](https://hackerslab.aktsk.jp/2022/12/07/235257) でした。

# はじめに
Unreal Engineには、オープンワールド制作に役立つ機能がいろいろ入っています。
しかし、それらを試そうにもまず地形が必要になることが多いと思います。
地形を用意するには、アセットストアにあるものを買って使ったり、サンプルプロジェクトのものを使用したり、スカルプトを使ってある程度自作したりすると思います。
もちろんこれらでも実験などはできると思いますが、お金をかけず、見知った地形(つまり自身がイメージしやすい地形)を、比較的短い時間で、用意する方法をこの記事で紹介します。

# この記事に書いてあること
- UE5で日本のどこかの地形をインポートする方法
    - 国土地理院の地形データの活用方法
    - UE5に高さマップから地形をインポートする方法

# この記事に書いてないこと
- ランドスケープの基礎的な使い方に関する情報
- マテリアル、フォリッジ、グラスツール、プロシージャルフォリッジなどランドスケープに付随する細かなところ

# 動作確認環境
- Windows 10
- Unreal Engine 5.0.3

# 手順
## 概要
大まかな流れは以下の通りです。
1. 国土地理院のサイトから地形データをDLする
2. DLした地形データを適切な形で画像として出力する
3. 出力した画像をUE5にインポートしやすい形に加工する
4. 加工した画像をUE5にインポートする

## 詳細
### 国土地理院のサイトから地形データをDLする
まずは [国土地理院のサイト](https://fgd.gsi.go.jp/download/menu.php) でアカウント登録をします。
そして、今のうちに [利用規約](https://www.gsi.go.jp/GSI/chosaku.htm) も確認しておくとよいです。
その後、"数値標高モデル"の箇所にある"ファイル選択へ"を選択します。
![01 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/4ac07eec-f06b-8659-5011-02b44e44e9fd.png)

地形選択画面へ移ります。
まず、"検索条件指定"が"5mメッシュ"になっていることを確認します。
(10mメッシュでもかまいませんが、後述するギザギザ感が増します)
![02 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/bc31fd29-f094-c09d-b3b9-562b6ed894fe.png)

欲しい地形があるマスをクリックして選択します。
(画像では箱根にある芦ノ湖周辺を選択してます)
選択し終わったら"ダウンロードファイル確認へ"を選択します。
![03 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/91625668-c417-3f10-5a7b-a44857ba6ed9.png)

ダウンロードファイルリストが出てきます。
ここで"このページをまとめてダウンロード"を選択します。
すると、地形ファイルのダウンロードが始まります。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/442d425b-fd22-3c62-1a96-755ba1098109.png)

今回ダウンロードしたものはこちらです。
地形データが入っているzip( `FG-GML-...zip` など)は解凍しなくて大丈夫です。
(後述するツールではzipのままでもデータが使用できます)
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/e56bf616-424a-9508-7a52-d528ff044073.png)

### DLした地形データを適切な形で画像として出力する
ダウンロードした地形データを読み込むため"基盤地図情報ビューア"をダウンロードします。
[国土地理院のサイト](https://fgd.gsi.go.jp/download/menu.php) にあるのでそれをダウンロードします。
ダウンロードが終わったら中身を確認し、 `FGDV.exe` を開きます。
![06 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/2c96e3ea-00d0-5ee1-7d24-0df46055e0dd.png)

基盤地図情報ビューアを起動したら上部メニューから"ファイル ＞ 新規プロジェクト作成"を選択します。
すると読み込むファイルを選択する画面が出てくるので、そこで先ほどダウンロードした地形データのzipを選択して"OK"を押します。
![07 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/d600b75f-15cb-f83d-0085-9ed03789c967.png)

成功すると、以下の画像のように地形データが表示されます。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/1a6167e0-1940-8b49-599d-98c11bfe6c87.png)

地形データをUE5にインポートできる形にするための設定をします。
上部メニューから"設定 ＞ 表示設定"を選択します。
"表示設定"が出てくるので、そこで"DEM段彩表示"にチェックを入れ"DEM表示設定"を押します。
すると2つの選択肢が出てきますが、ここで"連続段彩"を選択します。
![09 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/6a71879c-825a-c4b4-ba03-ba73128ac4a6.png)

"カラー設定"が表示されます。
そこで以下の設定を行います。
- "標高グラデーション"を調整する
    - 一番高いところを白、一番低いところを黒にする
    - 以下の画像にある、矢印の部分を選択したあと、"選択された「ペグ」"の部分にある色を選択すると変更できます
- "海の色"にチェックを入れ、色を黒にする
- "無効領域"にチェックを入れ、色を黒にする
- "陰影レベル"を0(一番左にスライド)にする

また、ここで"標高グラデーション"上下に記載されている標高値をメモしておきます(以下の画像の場合、 -119 ~ 1438 )。
終わったら"OK"を選択します。
![10 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/9a00bcb5-c5f7-aab5-89f7-3564e26fce72.png)

成功すると、以下の画像のように地形データが表示されます。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/89653cb3-2b76-7953-a0bd-032853381138.png)

_ここで芦ノ湖周辺だとデカすぎて今回の解説には不向きだということが判明したため、地形を江ノ島周辺に変更してます。_
_標高値は -34 ~ 556 です。_
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/d43fb44b-e1bf-b484-0668-5e87b62b2a1b.png)

続いて、表示されている地形データの縮尺を調整します。
後の工程のために表示されている地形データを1ピクセル = 1mに近づける必要があります。
上部メニューから"表示 ＞ 縮尺設定"を選択し、1/12000にします。
これでおおよそ1ピクセル = 1mになります。
_(正確には計算していません...もっと正確な縮尺があると思われます)_

準備が整ったので画像としてエクスポートします。
上部メニューから"ファイル ＞ 表示画面を画像データとして保存"を選択します。
すると、表示されている地形データを範囲選択できるようになるので、画面いっぱいを選択します。
選択し終わると"画像イメージの保存"が表示されるので、"高解像度"を選択したのち、保存場所を選んでからOKを押します。
![13 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/bb81de3a-aba9-9874-ffaf-f94167eccea4.png)

_補足: これじゃエクスポートというよりかはただのスクショじゃないか！と思うかもしれませんが、基盤地図情報ビューアでは現状画像として出力する方法はこれしかない模様です..._

### 出力した画像をUE5にインポートしやすい形に加工する
先ほど出力した画像を、画像編集ソフトなどを使用して適切なファイルにします。
_(筆者はGIMPを使用しました)_
- 画像サイズを"ランドスケープのテクニカル ガイド"の"推奨されるランドスケープのサイズ"に記載されている"全体のサイズ (頂点)"と同じにする
    - [ランドスケープのテクニカル ガイド](https://docs.unrealengine.com/4.26/ja/BuildingWorlds/Landscape/TechnicalGuide/)
    - 今回の場合は 2017 x 2017 にしました
- 16bitのグレースケールpngファイルとして出力する
    - 参考: [カスタム仕様の高さマップとレイヤーの作成および使用方法](https://docs.unrealengine.com/4.26/ja/BuildingWorlds/Landscape/Custom/)

出来上がった画像がこちらになります。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/c08e29c8-3f32-aec2-6a78-69ea0926fcbe.png)

ひとまず、加工した画像をUE5にインポートします。
(詳しい手順は後ほど解説します)
ズームしてみるとよりわかるのですが、ギザギザ感があります。
これは地形データが5m精度だからです。
滑らかにするために、画像をさらに加工する必要があります。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/da9a9169-2192-f4f4-57c7-a0d466ddf0e2.png)
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/7471b4c2-aa36-f300-2178-4cedd84db6f5.png)

方法はいろいろあると思いますが、筆者はGIMPを使ってガウスぼかしをかけました。
これで少しギザギザ感が軽減されるはずです。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/70f6c921-475a-e65f-2feb-7eac63156bf9.png)

### 加工した画像をUE5にインポートする
UE5にて、"ランドスケープモード"の中にある"ファイルからインポート"を選択します。
"高さマップファイル"の箇所に先ほど加工した画像を指定します。
次に、Zスケールの調整をします。
デフォルトの"100"だと、再現できる高さが -256m ~ 256m です。
ここで、先ほどメモした地形の高さを確認してください。
(今回の場合は -34m ~ 556m )
[ランドスケープのテクニカル ガイド](https://docs.unrealengine.com/4.26/ja/BuildingWorlds/Landscape/TechnicalGuide/) の"高さマップ Z スケールを計算する"に記載されている計算式を使ってZスケールを計算します。
(今回の場合は、
```
556 - (-34) = 590
590 * 100 = 59000
59000 * 0.001953125 = 115.234375
```
Zスケールの値は"115.234375"となりました)
計算して求めたZスケールをそのままZスケールの値へ入れて、インポートをします。
![19 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/202253ad-d480-5b6d-1fe5-3edcb70294e3.png)

インポートした結果がこちらになります。
(先ほどよりはマシですが、まだギザギザ感があるので、もうちょっと加工しても良かったかもしれません。)
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/ce0d1696-7806-4fef-774a-a77f0157b017.png)
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/cfc3365d-7f8a-c9c5-2ac2-0241052e0551.png)

以上で終了になります。
あとはインポートした地形を使って好き勝手遊びましょう。
(以下の画像は、筆者がインポートした地形を元に、ランドスケープのマテリアルやグラスツール、プロシージャルフォリッジなどを実験した時の画像です。)
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55107/f8a9b764-8732-f331-5d15-353af2256db0.png)

# 出典
本ページに記載されている地形データは [国土地理院ウェブサイト](https://fgd.gsi.go.jp/download/menu.php) の基盤地図情報(数値標高モデル) を利用および筆者が加工したものです。