Cesium for Unity でPLATEAU都市モデル水没

## はじめに
都市や地形のモデルを Unity 上で簡単に作成できる Cesium for Unity が 2022年12月にリリースされました。

https://cesium.com/platform/cesium-for-unity/

一方、Unity2022.2 の HDRP プロジェクトでは以下のような水面を簡単に作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/f8e23c80-b45b-594e-8c05-fe68bec91671.png)
ということで都市を水没させてみました :umbrella2:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/059fb72d-5745-fa71-0160-2cde28e9fab1.png)
以下ではこの作り方を説明していきます。

## 作り方
まず、HDRPプロジェクトを作成しておきましょう。Unity2022.2 をインストールして、3D (HDRP) でプロジェクトを作成します。3D (HDRP) をダウンロードしていない場合は以下のように表示されるのでダウンロードして作成してください。
![スクリーンショット1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/7512ba22-1974-687d-3b22-d93192adf196.png)

#### 1.水面を表示する
1. Edit > Project Settings > Graphics > HDRP Global Settings を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/eb6ed831-71ba-bda1-4f7c-240d8f3e0c1f.png)
1. Frame Settings 内の Camera の Rendering にある Water にチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/6e41defb-bc12-0a0b-9b73-6d09eb3f3e24.png)
1. また、任意ですが Camera の Lighting にある Transparent にチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/d72b7c59-ef7f-a291-050f-88fc69294e88.png)
1. 続いて、Project Settings > Quality > HDRP を開き、Water の Enable にチェックを入れます。（GPUが弱めのPCだとここでUnity Editorが落ちる可能性があります:cry: [^1]）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/cc1354ee-201b-230a-00b4-973c4d2a22de.png)
1. Project Settings ウィンドウを閉じます。
1. Hierarchy 内の Sky and Fog Volume をクリックして、Add Override から WaterRendering を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/b3bb2b0b-6906-9b70-5bcf-d0293219b319.png)
1. State を Enable に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/43352006-1308-3766-4599-8b457d039a9d.png)
1. Hierarchy 内で右クリックし、WaterSurface > Ocean Sea or Lake を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/eec5d4b7-96fe-6739-3e69-5bd54f5ef824.png)
1. しばらく待つと以下のように水面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/b06717cb-a97f-48d9-e24b-0bb7ebb1f1ab.png)

#### 2. Cesium for Unityをインストールする
さて、上でお見せした都市水没イメージでは [PLATEAU-3DTiles](https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/plateau-3dtiles-streaming.md) で配布されている都市モデルと [PLATEAU-Terrain](https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/terrain/plateau-terrain-streaming.md) の地形モデルを Cesium for Unity で表示しています。水没しているので地形は見えないですが、、笑
Cesium for Unity のインストール方法については以下の記事の「Cesium ionに接続する」まで及び「メインカメラの設定」を実行してみてください。なお、記事内で HDRP ではうまくいかないといった記述がありますが、2023年3月時点では解消されているようです。ただし、Unity のレンダリング方法には built in , URP, HDRP の三種類があり、英語版クイックスタートでは built in ではうまくいかないと書いてあるので、ひょっとすると単なる翻訳間違いの可能性もあります。また、本記事執筆時点では Cesium for Unity のバージョンは 0.3.1 でした。

https://qiita.com/northprint/items/ba9c0760ad359cadf66d

#### 3. 都市モデルと地形モデルを表示する
以下では一旦、水面モデルは非表示にしておくとわかりやすいかもしれません。

1. CesiumCesiumタブから Blank 3D Tiles を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/a2cc7599-9d25-0126-4c9d-89f987d828bb.png)
1. Game Object として CesiumGeoreference が追加されるのでクリックして、
latitude: 35.681
Longitude: 139.766
Height: 75
と入力してください。
1. Cesium3DTileset をクリックして、Tileset Source を From Url に変えたうえで、URL に 
``https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13101_chiyoda-ku/texture/tileset.json``
を入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/d03f52d7-0fb6-64fe-fe3e-ef6c76c4f728.png)
1. しばらく待つとロードが始まり、都市モデル（東京駅周辺）が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/38c54da6-5438-fb20-54be-48c551bb0685.png)
1. 続いて、Cesium World Terrain を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/7626b2b5-4452-da6d-edaf-7431b08f6359.png)
1. Cesium World Terrain の Tileset Source を From Cesium Ion のままとし、
icon Asset ID: ``770371``
ion Access Token: ``eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE``
を入力してください。
1. しばらく待つとロードが始まり、地形モデルが表示されます。（前のバージョンだとテクスチャも表示されたはずですが出てこない:rolling_eyes:）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568193/bfda68c7-dbd5-5b8f-c903-bfa33b364e17.png)

#### 4. 高さを調整する
水面のy座標またはCesiumGeoreferenceのHeightをいい感じに調節して終わりです！！簡単！！

## おわりに

こんな手軽に美しい景色を作れるなんて驚きです。『天気の子』の再現みたいなものも簡単に作れそうですね:sunny:

https://qiita.com/nishi_bayashi/items/f733f1358b1ce37229f9

また、Cesium for Unity は VR対応もしているみたいなのでもっと真面目にやれば、リアリスティックな水害体験アプリケーションなども作れそうです。こんな感じでいろいろと活用できるように整備してくれた Cesium や PLATEAU 、そして Unity に圧倒的感謝です！

[^1]: しばしば発生するエラーとして "Failed to present D3D11 swapchain due to device reset/removed." というものがあるが、これはhttps://toropippi.livedoor.blog/archives/56486390.html によれば、GPUタイムアウトが原因のようである。解決策としては、レジストリエディタで以下の場所に TdrDelay という名前で DWORD 値を持つキーを追加し、その値にタイムアウトまでの秒数を適当に設定すればよい。
``HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\GraphicsDrivers``