PLATEAU Hands-on 03（初心者向け：VR空間の作り方）～Unity で遊んで、ついでにメタバースも作ってみる



##  １．初めに

### 1-1. 今日やること
PLATEAU　のデータダウンロードやファイル変換は講師が説明し、
PLATEAU データを使ってUnity のハンズオンをし、
最後はcluster にデータを上げます。

##### （参考）講師のPCのスペック
- CPU : Intel Core i7-11800H
- RAM : 32GB
- GPU : NVIDIA GeForceRTX3070

※ZOOMの画面共有でUnityがサクサク動いたスペックです。
ここまでなくても、RAM 8GB あれば大丈夫だとは思います。

<br>

### 1-2. 事前準備確認

- ３D都市モデルCityGMLをFBX形式に変換したファイル（松山市）
- Unity　2021.3.4f1 のインストール
- Unityアセットダウンロード（ユニティちゃん、花火）
- Clusterのアカウント作成

https://qiita.com/tatsuya1970/private/cf7272d147baea86a0e8

<br>

## 2．データ入手・変換　（説明のみ）

### 2-1.　PLATEAUの3D都市モデルのダウンロード

「G空間情報センター」にアクセス
https://www.geospatial.jp/ckan/dataset/plateau

[![Image from Gyazo](https://i.gyazo.com/2776009561c9e579f952b8f5df707927.png)](https://gyazo.com/2776009561c9e579f952b8f5df707927)

使いたい都市の３D都市モデル（CityGML または FBX）をダウンロードする。
今回のハンズオンでは松山市のモデルを使用します。

※なお、東京都、札幌市はFBXファイルがありますので、このような変換作業は不要です。

詳細 ＞　ダウンロード
[![Image from Gyazo](https://i.gyazo.com/723422be840224a00dbf4beb9d801ffc.png)](https://gyazo.com/723422be840224a00dbf4beb9d801ffc)

zip ファイルがダウンロードされる。
解凍すると、こんな感じ。
[![Image from Gyazo](https://i.gyazo.com/b9f4d0a02fde8c790a0a4de80b24a415.png)](https://gyazo.com/b9f4d0a02fde8c790a0a4de80b24a415)



### 2-2. データ変換 

ダウンロードしたCityGMLファイルは、Unityでは使えませんので、以下の手順でデータ変換してください。
※東京などFBX、OBJをダウンロードした人は、データ変換は不要です。





#### 2-2-1.  3D都市モデル（CityGML形式）に記述されたURLの更新

2021年9月に３D都市モデル（CityGML)に記述されたURLが変更になったため、エディターで修正する必要があります。

方法は[3D都市モデルのデータ変換マニュアル](https://github.com/Project-PLATEAU/Data-Conversion-Manual-for-3D-City-Model)に書かれていて、
「3D都市モデルのファイル内の名前空間とschemaLocationに記載されている旧URLを、新しいURLに更新してください」とのこと。

つまり、CityGMLファイルをVisual Studio 等のテキストエディタで開き、スクリプトの中の文字列を新URLに置換します。

修正前、修正後のURLは、[3D都市モデルのデータ変換マニュアル](https://github.com/Project-PLATEAU/Data-Conversion-Manual-for-3D-City-Model)に書かれている。
[![Image from Gyazo](https://i.gyazo.com/16a2486e0e58e87bcb9b736476edc8c6.png)](https://gyazo.com/16a2486e0e58e87bcb9b736476edc8c6)

ここでは、Visual Studio Code での方法を記載

VSCodeを起動して、メニューから［ファイル］→［フォルダーを開く］をクリックし、該当のフォルダを選択して、開きます。
<br>
今回のハンズオンの該当するフォルダは[udx]です。

<br>
※ウインドウがクラッシュする場合は、小分けにするか、該当のファイルだけ変換

(例1）udx > bldg と　udx > dem　と２回に分けて変換
(例2）　該当のファイルだけ（今回のハンズオンでは、 udx > bldg > 50326610_bldg_6697_op.gml と udx > dem > 50326610_dem_6697_op.gml）

左側にフォルダ内のファイルが一覧表示されます。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/d0c51570-20b5-500a-399c-9ced18d7857b.png)


そのまま、以下のコマンドを押す。
Windows：Control + Shift + H
Mac：Command + Shift + H　（未検証）

これで、開いているファイル全てを一括で検索・置換できるようになるので、それぞれの欄にさきほどの[3D都市モデルのデータ変換マニュアル](https://github.com/Project-PLATEAU/Data-Conversion-Manual-for-3D-City-Model)で指定のURLを入力する。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/8f1cd2ba-01e6-6d9c-bb39-3771ef4ab86b.png)


新旧URLを入力したら、「Replace All」ボタンをクリック

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/f73dc18d-4036-e4b6-5aa2-988a2cd706f6.png)

先ほどのURLを全て変換したら、URLの修正作業は終了です。

※ウインドウがクラッシュする場合は、該当のファイルだけ変換



<br>

#### 2-2-2.  3D都市モデル（CityGML形式）をFBXファイルに変換

以下を２つを用意

- (1) FME Desktop 
- (2) 3D都市モデルのデータ変換スクリプト

##### (1) FME Desktop 
FME Desktop というソフトでCityGML（3D都市モデル）のデータを変換します。

FMEはHome use /非営利目的に限り申請すれば無料利用できます。

以下のURLにあるFormより、申し込みできます。
https://www.safe.com/free-fme-licenses/home-use/

[![Image from Gyazo](https://i.gyazo.com/9afb584d78ee050aa5db9197de523d97.png)](https://gyazo.com/9afb584d78ee050aa5db9197de523d97)


##### (2) 3D都市モデルのデータ変換スクリプト

「3D都市モデルのデータ変換マニュアル」から入手できます。　
　→　https://github.com/Project-PLATEAU/Data-Conversion-Manual-for-3D-City-Model

Code ＞ Download ZIP
[![Image from Gyazo](https://i.gyazo.com/0725d6e232b7d16556940cea2780fe12.png)](https://gyazo.com/0725d6e232b7d16556940cea2780fe12)

ZIPファイルを解凍すると
FMEで使用できるスクリプトがたくさんあります。
[![Image from Gyazo](https://i.gyazo.com/e6340a94a77b44cfec2a9d2fd30bafb8.jpg)](https://gyazo.com/e6340a94a77b44cfec2a9d2fd30bafb8)


ここからは、公式サイトのマニュアルのとおりの手順でやってみましょう。

使うスクリプトは、citygml2fbx.fmwt です。
[![Image from Gyazo](https://i.gyazo.com/27656a9a6a37ac18894d80cccfa1becf.jpg)](https://gyazo.com/27656a9a6a37ac18894d80cccfa1becf)


<br>
松山市の３D都市モデル（CityGML）は土地・建物あわせて約６００あります。
今回のハンズオンでは、そのうちの松山市街中心部の以下の場所の３D都市モデルを使用します。

どこでもいいのですが、ハンズオンなのでみんな統一します。
番号でいうと　「50326610」
　<IMG SRC="https://i.gyazo.com/77254d0ed7cb29962c156742565229dc.png" width="70%">

この青い四角が3次メッシュといって、一辺の長さは１キロメートルです。

<br>


「３D都市モデルのデータ変換マニュアル」（リンク先のPDFの１つ）
https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_doc_0007_ver01.pdf
[![Image from Gyazo](https://i.gyazo.com/5551280617ca43d9b265181ca7d478eb.png)](https://gyazo.com/5551280617ca43d9b265181ca7d478eb)

マニュアルのとおりやった結果、
変換できました！

[![Image from Gyazo](https://i.gyazo.com/4a9d5bdcd6d954108bb16c87f272ca2a.png)](https://gyazo.com/4a9d5bdcd6d954108bb16c87f272ca2a)


と思いきや、
この例は最低単位の範囲のデータにもかかわらず、lod2.fbx 247メガと、大容量です。

merge_bldg_surface.fmwt を使えば、先ほどのより大幅に少ないサイズのFBXに変換してくれます。


[![Image from Gyazo](https://i.gyazo.com/f0f9c83a0ff3327039b7ff28b550d587.jpg)](https://gyazo.com/f0f9c83a0ff3327039b7ff28b550d587)


これについては、
「３D都市モデルのデータ変換マニュアル」
P54「2.5 建物データのサーフェスのマージ(OBJ/FBX)」をご覧ください。
[![Image from Gyazo](https://i.gyazo.com/9d0faf721648e203157579b5abeb6c1f.png)](https://gyazo.com/9d0faf721648e203157579b5abeb6c1f)


さきほどの松山市のlod2と同じ３D都市モデルCityGMLが、model.fbmフォルダ とmodel.fbx に変換されました。

lod2.fbx 247メガ　に対して、
model.fbx が25メガ　と、約10分の一のサイズです。 

[![Image from Gyazo](https://i.gyazo.com/aa4b4ffad26bd8801ca84c2958a672a3.png)](https://gyazo.com/aa4b4ffad26bd8801ca84c2958a672a3)


<br><br>



## ３.Unity で遊ぶ　

ここから実際に手を動かします

### 3-1. Unityを開く

#### 3-1-1. Unityを開く

Unity Hubを開く

「新しいプロジェクト」をクリック

[![Image from Gyazo](https://i.gyazo.com/2aa7decef3e881b7d0f13d7f57864b02.png)](https://gyazo.com/2aa7decef3e881b7d0f13d7f57864b02)


(1) すべてのテンプレート
(2) エディターバージョン　2021.3.4f1 （cluster の対応バージョン）
(3) 3D
(4) プロジェクト名、保存場所

[![Image from Gyazo](https://i.gyazo.com/b7c22cb508242628273fb119cd4fd3e3.png)](https://gyazo.com/b7c22cb508242628273fb119cd4fd3e3)



開いた
[![Image from Gyazo](https://i.gyazo.com/697284bcd92f50ce51d5f192922ff0e0.png)](https://gyazo.com/697284bcd92f50ce51d5f192922ff0e0)


こんなポップアップがでたら、スキップする。
[![Image from Gyazo](https://i.gyazo.com/63ebba8fb8c1d29fbc8479c4bb9ebfc8.png)](https://gyazo.com/63ebba8fb8c1d29fbc8479c4bb9ebfc8)


もし私と同じレイアウトでなければ、
レイアウトをデフォルトにしてください。
[![Image from Gyazo](https://i.gyazo.com/34400fe16514b512b5e318636d99ec3a.png)](https://gyazo.com/34400fe16514b512b5e318636d99ec3a)


下図の「Scene」タブをクリック
ここにバーチャル空間を作成します。
[![Image from Gyazo](https://i.gyazo.com/2ad972843757483f117f90c300e69a9a.png)](https://gyazo.com/2ad972843757483f117f90c300e69a9a)


#### 3-1-2. 各ウィンドウの説明
[![Image from Gyazo](https://i.gyazo.com/36c63f5d315a6992067def64b3384690.png)](https://gyazo.com/36c63f5d315a6992067def64b3384690)

- Hierarchy （ヒエラルキー）ウィンドウ<br>シーンにある全オブジェクトを階層的に表示

- Scene（シーン）ビュー<br>編集画面

- Inspector（インスペクター）ウィンドウ<br>選択中のオブジェクトの内容の表示・編集

- Project（プロジェクト）ウィンドウ<br>プロジェクト全体のオブジェクトやスクリプト等の全てを表示


<br>


### 3-2． Unity に3Dモデルを置く

#### 3-2-1. Unity に3Dモデルを置く

事前に準備したFBXファイル と model.fbm　フォルダを　UnityのProjectへドラック＆ドロップする。　（1-2分）
[![Image from Gyazo](https://i.gyazo.com/3d90b90dc09c11b647ffc90289e800ed.png)](https://gyazo.com/3d90b90dc09c11b647ffc90289e800ed)

FBXファイルをシーン上へドラック＆ドロップ
[![Image from Gyazo](https://i.gyazo.com/64c154a8b5746a3a1e2540e4bca36f5a.png)](https://gyazo.com/64c154a8b5746a3a1e2540e4bca36f5a)

画面上には変化ないように見えますが、3Dモデルが原点から遠い位置に置かれたためです。
[![Image from Gyazo](https://i.gyazo.com/41160672f49af3bda8d9bb9d7f0124e4.png)](https://gyazo.com/41160672f49af3bda8d9bb9d7f0124e4)

3D都市モデルCityGMLは緯度経度による地理座標系、すなわち地球に沿った球体の座標系で定義されていますが、FBXファイルでは測量や建築・土木の図面などによく使われる平面直角座標系に変換されているからです。

なお、PLATEAUの座標系については、PLATEAU AWARD 2022 説明会 （2022年7月20日開催）での技術解説がとてもわかりやすいです。
こちらの動画をご参照ください。
https://youtu.be/EBnB83Vva5w?t=1806



<br><br>
では、3Dモデルをカメラの方に移動します。
<br>

Hierarchy の 3Dモデル（dem, lod1, model) を選択したままで、
[![Image from Gyazo](https://i.gyazo.com/15d1dd2521997b60ac669cc083d0c867.png)](https://gyazo.com/15d1dd2521997b60ac669cc083d0c867)

GameObject ＞　Move to View
または、Ctrl + Alt + F
[![Image from Gyazo](https://i.gyazo.com/7bd79e17df9a0f80d1930b3a6c7e11e3.png)](https://gyazo.com/7bd79e17df9a0f80d1930b3a6c7e11e3)



３Dモデルがカメラの位置に移動します。
[![Image from Gyazo](https://i.gyazo.com/c9cf81d3e6dbbd9afdbd75dfd47c1fa4.png)](https://gyazo.com/c9cf81d3e6dbbd9afdbd75dfd47c1fa4)

拡大するとlod2の建物（model.fbx） には、自動的にテクスチャがついてます。
[![Image from Gyazo](https://i.gyazo.com/e8c65913175d478e29538bec7b36b7c9.png)](https://gyazo.com/e8c65913175d478e29538bec7b36b7c9)


#### 3-2-2. Unity の画面操作の練習

マウスを使います。<br>
マウスないと無理です。

- 視点の回転	：マウス右ボタンドラッグ
- 視点の平行移動	：マウス中ボタンドラッグ
- 視点のズーム	：マウスホイール
- オブジェクトに視点をフィットさせる　：Hierarchyでオブジェクトをダブルクリック

<br>
1分間、以下の動画のように適当に操作の練習をしてください。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">松山市上空 <a href="https://t.co/04ZTWgNifO">pic.twitter.com/04ZTWgNifO</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1564970729623367680?ref_src=twsrc%5Etfw">August 31, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<br><br>

#### 3-2-3. 調整

ビルと地形の高さが合ってない場合は
下の画像のように、dem , lod1 , model(lod2のこと）のＹの位置を合わせる。
[![Image from Gyazo](https://i.gyazo.com/211aae82f957f0cf565e7ccd1a17d750.png)](https://gyazo.com/211aae82f957f0cf565e7ccd1a17d750)

<br>
このままだと、アバターを置いた場合、地面がすり抜けるので、地面にCollidar（コライダー）を付ける。

Hierarchy で dem を選択
Inspector で Add　Componentをクリック
[![Image from Gyazo](https://i.gyazo.com/76ba5286749feea6870953703e3aacb3.png)](https://gyazo.com/76ba5286749feea6870953703e3aacb3)

検索窓に「Mesh」といれて、
検索結果の中から「Mesh Collidar」を選択
[![Image from Gyazo](https://i.gyazo.com/b4bc5289a20289fc22d284e2a189a40c.png)](https://gyazo.com/b4bc5289a20289fc22d284e2a189a40c)

Inspector　に　Mesh Collider　が追加される。
[![Image from Gyazo](https://i.gyazo.com/f731f6b41ae0188c81d914a2a93faa3a.png)](https://gyazo.com/f731f6b41ae0188c81d914a2a93faa3a)






### 3-3. 巨大ユニティちゃん出現

※本記事は[ユニティちゃんライセンス条項](https://unity-chan.com/contents/license_jp/)の元に提供されています
© Unity Technologies Japan/UCL

<br>

事前順位事項でご用意いただいてる [ユニティちゃんのアセット](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705) をダウンロードしインポートします。

Window > Package Manager

(1) My Assets
(2) Unity-Chan! Model
(3) download したあと、　Import

[![Image from Gyazo](https://i.gyazo.com/7f9ecaffaadc4786494a83d8980cb231.png)](https://gyazo.com/7f9ecaffaadc4786494a83d8980cb231)

こんな画面が出る。
[Import] をクリック

本当は必要なものだけ選択するところですが、とりあえず全部インポートします。

[![Image from Gyazo](https://i.gyazo.com/c6dd3e926f5a28d8d4ddbf90ff53e930.png)](https://gyazo.com/c6dd3e926f5a28d8d4ddbf90ff53e930)

Project > Assets ＞UnityChan! > UnityChan!Model > Prefabs > for Locomotion
にあるunitychan_dynamic をシーンにドラッグする。

[![Image from Gyazo](https://i.gyazo.com/43e458ba36f87969d1bf9011033ba9c7.png)](https://gyazo.com/43e458ba36f87969d1bf9011033ba9c7)


なお、Unityちゃんが超巨大に見えますが、基本身長約１５０センチメートルです。
３DモデルはFBXではだいたい100分の１に変換されています。


以下　Inspector を調整

参考までに私の数値

[![Image from Gyazo](https://i.gyazo.com/ccd509daebfef482523c698542922031.png)](https://gyazo.com/ccd509daebfef482523c698542922031)

(1) ユニティちゃんの大きさ　（好きな数字で）
(2) Spring Manager のチェックをはずす
(3) Rigidbody の Constraints を上画像のようにチェックしたらユニティちゃんの挙動が安定した
(4) お好みでスピードなどの値を調整

<br>

カメラの位置を調整
[![Image from Gyazo](https://i.gyazo.com/56d9953025316ded27a7308dff2cd2a4.png)](https://gyazo.com/56d9953025316ded27a7308dff2cd2a4)



<br>

PLAYボタンを押す。

[![Image from Gyazo](https://i.gyazo.com/b04b5faa38e8f20212aab1866a75c22b.png)](https://gyazo.com/b04b5faa38e8f20212aab1866a75c22b)

Game ウインドウに再生されます。
矢印ボタンでユニティちゃんを操作できます。
その他の操作方法はゲームシーン右上にUIをご覧ください。

[![Image from Gyazo](https://i.gyazo.com/af0771cd447f4ab3eb94b691ea2d6140.gif)](https://gyazo.com/af0771cd447f4ab3eb94b691ea2d6140)

では、編集に戻ります。
編集に戻るには、もう１度「PLAY」ボタンを押してください。
PLAY中に編集したものはPLAYを終えた後には反映されませんので、ご注意ください。

<br><br>

次に、ユニティちゃんにカメラを追従させます。
そのためには。MainCamera のチェックを外し、
ユニティちゃん専用カメラを Hierarchy のユニティちゃんへドラッグ＆ドロップ
[![Image from Gyazo](https://i.gyazo.com/66fc5840caea38bde0515b593fbfdebc.png)](https://gyazo.com/66fc5840caea38bde0515b593fbfdebc)

こうなればOK
[![Image from Gyazo](https://i.gyazo.com/6b0b4510195a12e34651c45bf7e85592.png)](https://gyazo.com/6b0b4510195a12e34651c45bf7e85592)

<br>
これでPLAY ボタンを押すと、
ユニティちゃんの背後にカメラが追従します。
 
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">巨大ユニティちゃんを松山の街で動かして遊んでた。 <a href="https://t.co/FxnD4EM2S0">pic.twitter.com/FxnD4EM2S0</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1550838940609183746?ref_src=twsrc%5Etfw">July 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

建物を素通りしてるので、建物にコライダーをつける。
建物のオブジェクト（lod1 , model(lod2のこと) )を全部選択して、 Inspector で Add Component > Box Collidar 
  
[![Image from Gyazo](https://i.gyazo.com/c588f2c38ca525cd49774c31449c14b7.png)](https://gyazo.com/c588f2c38ca525cd49774c31449c14b7)

※Mesh Collidar の方が正確ですが負荷が高いので、Box Collidar を選択しました。

<br>


講師メモ　（開始45分）


以上です。



### 3-4. 花火を上げる


筆者は7月30日に呉市の3D都市モデルを使って、バーチャル花火大会をしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AB%E5%91%89%E8%8A%B1%E7%81%AB%E5%A4%A7%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#バーチャル呉花火大会</a> 開催中（24時まで）<br>是非、遊びにきてください！！<br>3倍速動画（1分半）で見どころをお伝えします。<a href="https://twitter.com/hashtag/cluster?src=hash&amp;ref_src=twsrc%5Etfw">#cluster</a> <a href="https://t.co/lyXGu6aE42">https://t.co/lyXGu6aE42</a> <a href="https://t.co/YlUNZam3FX">pic.twitter.com/YlUNZam3FX</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1553366778277134337?ref_src=twsrc%5Etfw">July 30, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<br>

事前順位事項でご用意いただいてる　[花火のアセット](https://assetstore.unity.com/packages/3d/props/weapons/fireworks-101035) をインポートします。
※バーチャル呉花火大会とは違うアセットです。

Window > Package Manager

(1) My Assets
(2) Fireworks
(3) downlod のあと、　Import

[![Image from Gyazo](https://i.gyazo.com/8cd5876334424756fb4e69249dfd94fa.png)](https://gyazo.com/8cd5876334424756fb4e69249dfd94fa)


こんな画面が出る。
[Import] をクリック

本当は必要なものだけ選択するところですが、とりあえず全部インポートします。

[![Image from Gyazo](https://i.gyazo.com/78a93de71166ceb1c3ce2c2dc3eb9dd5.png)](https://gyazo.com/78a93de71166ceb1c3ce2c2dc3eb9dd5)

Project > Assets ＞Fireworks > Battery > Prefabs >　Battery
にあるBattery をシーンの花火を打ち上げしたいところにドラッグする。

[![Image from Gyazo](https://i.gyazo.com/805899f73b797860897ab996dd29985b.png)](https://gyazo.com/805899f73b797860897ab996dd29985b)


以下　花火の大きさをInspector で調整
高さは -250 から -200 くらい

[![Image from Gyazo](https://i.gyazo.com/5a9998134b42fb0ad69a9ab8ea9bad28.png)](https://gyazo.com/5a9998134b42fb0ad69a9ab8ea9bad28)

PLAYボタン！


こんな感じに

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">PLATEAUの松山の街に花火のアセットを追加してみると<a href="https://t.co/VYgXfXziV8">https://t.co/VYgXfXziV8</a> <a href="https://t.co/463SYktkUX">pic.twitter.com/463SYktkUX</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1550779906539532288?ref_src=twsrc%5Etfw">July 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



### 3-5. 巨大ユニティちゃん　街破壊

ちなみに、建物（lod1, model(lod2のこと) ）全部を選択して、Inspector にRigid Body を追加して、Use Gravity をチェックすると、
[![Image from Gyazo](https://i.gyazo.com/0feeecc89e33e1c191c2bcf83a2b64fc.png)](https://gyazo.com/0feeecc89e33e1c191c2bcf83a2b64fc)

ユニティちゃんがゴジラのように都市を破壊します。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">別のものを作るつもりが偶然にこんなのができた。<br>ある実在の日本の都市をユニティちゃんが破壊しまくる。さて、どこでしょう？ <a href="https://twitter.com/hashtag/plateau?src=hash&amp;ref_src=twsrc%5Etfw">#plateau</a> <a href="https://t.co/IVeeNg1ZXS">pic.twitter.com/IVeeNg1ZXS</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1549053659685605376?ref_src=twsrc%5Etfw">July 18, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>
ちなみに、Use Gravityのチェックを外すと、人智を超えた力で街が破壊されます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Unityを適当にいじってたら偶然こんなのができた。<br>人智を超えた力で破壊される都市。　<a href="https://twitter.com/hashtag/plateau?src=hash&amp;ref_src=twsrc%5Etfw">#plateau</a> <a href="https://t.co/joY2JOnzys">pic.twitter.com/joY2JOnzys</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1577651824630243328?ref_src=twsrc%5Etfw">October 5, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br><br>

## 4. cluster 対応　

まず、ユニティちゃんと、花火のアセットを削除してください。
さきほどユニティちゃん街破壊をした人は、建物（lod1、model）のRigid Body　を削除してください。

<br><br>

この章では、clusterの公式サイトを参考にしました。

https://creator.cluster.mu/2020/03/30/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e3%80%8cclustercreatorkitsample-master%e3%80%8d%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%80%8cunity/

### 4-1. Cluster Creator Kit

Edit > Project Settings
[![Image from Gyazo](https://i.gyazo.com/88ef68a2199e4d7913723db29c592357.png)](https://gyazo.com/88ef68a2199e4d7913723db29c592357)


ウィンドウ内左のタブから「Package Manager」を選択し、「Scoped Registries」に以下のように追加し、「Save」をクリックする。

Name: Cluster
URL : https://registry.npmjs.com
Scope(s) : mu.cluster

[![Image from Gyazo](https://i.gyazo.com/61a1f4ecdf15f006857640d45b3d726b.png)](https://gyazo.com/61a1f4ecdf15f006857640d45b3d726b)

ここは閉じてOKです。


Window > Package Manager 
[![Image from Gyazo](https://i.gyazo.com/623acc81589e364a057d33da9ebad9e2.png)](https://gyazo.com/623acc81589e364a057d33da9ebad9e2)


ウィンドウ上部のドロップダウンより「My Registries」を選択します。
[![Image from Gyazo](https://i.gyazo.com/acfecedd27b42ea7d8fb75fc2e7786bc.png)](https://gyazo.com/acfecedd27b42ea7d8fb75fc2e7786bc)

表示されたリスト内から Cluster, Inc. > Cluster Creator Kit を選択し、「Install」ボタンを押します。
[![Image from Gyazo](https://i.gyazo.com/4c838e90d47cf7ee33646f90c66fd7f5.png)](https://gyazo.com/4c838e90d47cf7ee33646f90c66fd7f5)

Unityのメニューに「Cluster」の項目が追加されていればCreator Kitの導入は完了です。
[![Image from Gyazo](https://i.gyazo.com/ca4ddd5abdb9fbc85733987b316ce1f2.png)](https://gyazo.com/ca4ddd5abdb9fbc85733987b316ce1f2)


### 4-2. 設定

#### 4-2-1. 3Ｄモデルの位置、大きさ


Hierarchy ウィンドウで、空のオブジェクトを作成します。
プラスマーク > Create Empty

[![Image from Gyazo](https://i.gyazo.com/6ae0801a22a198e2f8fe309444f271fc.png)](https://gyazo.com/6ae0801a22a198e2f8fe309444f271fc)

Hierarchy ウィンドウに新しく GameObject ができる。
[![Image from Gyazo](https://i.gyazo.com/82d479e82d3ac8ee52704c80650ee126.png)](https://gyazo.com/82d479e82d3ac8ee52704c80650ee126)

あとで判別しやすいように名前を「Matsuyama」に変える
[![Image from Gyazo](https://i.gyazo.com/f8fb3f61e23c05da00bebe2db81fe913.png)](https://gyazo.com/f8fb3f61e23c05da00bebe2db81fe913)

dem , lod1 , model(lod2のこと) を選択したまま、さきほど作成した「Matsuyama」オブジェクにドラッグアンドドロップする

[![Image from Gyazo](https://i.gyazo.com/4679e128ea2eae34b325c9f3297b4d76.jpg)](https://gyazo.com/4679e128ea2eae34b325c9f3297b4d76)

こんな感じになる。
これをMatsuya を親オブジェクト、dem,lod1,model を子オブジェクトという。
[![Image from Gyazo](https://i.gyazo.com/5608a39140104ec1de2919771d19c0dd.png)](https://gyazo.com/5608a39140104ec1de2919771d19c0dd)



Matsuyama の位置を 0,0,0   
スケールを15にします。

[![Image from Gyazo](https://i.gyazo.com/d3f57205a2953c9cfb7c8513c96839e8.png)](https://gyazo.com/d3f57205a2953c9cfb7c8513c96839e8)

※原寸大にする場合はスケールを100にします

<br>
微妙に地面と建物の高さが乖離してるので、dem,lod1,model を選択したまま Inspector のYをゼロにする。

[![Image from Gyazo](https://i.gyazo.com/46484c43636cbca26073efb4d26b7572.png)](https://gyazo.com/46484c43636cbca26073efb4d26b7572)



<br><br>
次に
cluster へアップロードする必要最低限の設定をします。

- SpawnPoint（プレイヤーの出現ポイント）
- DespawnHeight（プレイヤーが消滅する高さ）
- Collider（衝突可能なオブジェクト）


#### 4-2-2. SpawnPoint
プレイヤーの出現ポイントを設定します。

Hierarchy ウィンドウで、空のオブジェクトを作成します。
プラスマーク > Create Empty

[![Image from Gyazo](https://i.gyazo.com/6ae0801a22a198e2f8fe309444f271fc.png)](https://gyazo.com/6ae0801a22a198e2f8fe309444f271fc)

Hierarchy ウィンドウに新しく GameObject ができる。
[![Image from Gyazo](https://i.gyazo.com/951292318ebdfa5b9b0239a4f6dbe2f5.png)](https://gyazo.com/951292318ebdfa5b9b0239a4f6dbe2f5)


あとで判別しやすいように名前を「Spawn」に変える
[![Image from Gyazo](https://i.gyazo.com/1648f268f211483d412901d0a0ead5d0.png)](https://gyazo.com/1648f268f211483d412901d0a0ead5d0)

Inspector ウィンドウで、
(1)Add Component
(2)spawn で検索
(3)Spawn Point を選択
[![Image from Gyazo](https://i.gyazo.com/e11c76bbc795b97c5d01e68727e74376.png)](https://gyazo.com/e11c76bbc795b97c5d01e68727e74376)

Inspector ウィンドウに 新しいコンポーネント[Spawn Point(Script)]が追加され、
シーンビューに緑色の球体が現れる。
[![Image from Gyazo](https://i.gyazo.com/85b13d692ab0d41222b1e0339f273486.jpg)](https://gyazo.com/85b13d692ab0d41222b1e0339f273486)


この緑色の球体を、ワールドに訪問した人を最初に出現させたい位置へマウス操作で移動する。
（赤い細い線の向きが正面）

[![Image from Gyazo](https://i.gyazo.com/bacb80186a0808836fe60731a7352acf.png)](https://gyazo.com/bacb80186a0808836fe60731a7352acf)


#### 4-2-3. DespawnHeight

プレイヤーが消滅する高さを設定します。

Hierarchy ウィンドウで、空のオブジェクトを作成します。
プラスマーク > Create Empty

Hierarchy ウィンドウに新しくGameObject ができる。
[![Image from Gyazo](https://i.gyazo.com/55c8da5df49dd3d56045c31c31c22c93.png)](https://gyazo.com/55c8da5df49dd3d56045c31c31c22c93)


名前を「Despawn」に変更
[![Image from Gyazo](https://i.gyazo.com/428f2bfb588ecb4cd4cfc296eab8142c.png)](https://gyazo.com/428f2bfb588ecb4cd4cfc296eab8142c)

Inspector ウィンドウで、
(1)Add Component
(2)despawn で検索
(3)Despawn Height を選択

[![Image from Gyazo](https://i.gyazo.com/1d44d4dc96d896a25c66b480d7ff0754.png)](https://gyazo.com/1d44d4dc96d896a25c66b480d7ff0754)

プレイヤーがこの黄色の床にの高さに落ちたら、最初の場所に戻ります。
この黄色の高さ（Y）を、dem より低い値にします。
[![Image from Gyazo](https://i.gyazo.com/8de651c8d8bdb8a646980837ac78cacd.jpg)](https://gyazo.com/8de651c8d8bdb8a646980837ac78cacd)





#### 4-2-4. Camera の削除
Hierachy の　main camera は削除してください。
（cluster の場合）

[![Image from Gyazo](https://i.gyazo.com/e6f55375d457d733103bc7a09923bcdf.png)](https://gyazo.com/e6f55375d457d733103bc7a09923bcdf)






### 4-3. Play
これで cluster へのアップロードの準備ができました。

アップロードする前に、挙動を確認しましょう。
「Play」ボタンを押します。

[![Image from Gyazo](https://i.gyazo.com/0d454623f8f5fdc008d093709fa44a63.jpg)](https://gyazo.com/0d454623f8f5fdc008d093709fa44a63)

[![Image from Gyazo](https://i.gyazo.com/fd74a560bc07f5391557adce7f9b66e6.gif)](https://gyazo.com/fd74a560bc07f5391557adce7f9b66e6)

Playで確認し、気に入らないところは直しましょう。


### 4-4. cluster へのアップロード

まず、この画像をデスクトップにダウンロードしてください。
（あとで使います）

![3aac9d02d10dfa6ed039cbcb93eef766.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/865d22e1-0af0-689f-54fb-1be1fcd23110.jpeg)



#### 4-4-1. 設定

Edit > Project Settings 
[![Image from Gyazo](https://i.gyazo.com/971e7b585a06635d74a5c499bf0624d5.png)](https://gyazo.com/971e7b585a06635d74a5c499bf0624d5)

以下の通り設定します。
Player > Other Settings > Rendering > Color Space
を
Linear　に設定

[![Image from Gyazo](https://i.gyazo.com/6933bed9d7e8d39dfc307be5571a9e3f.png)](https://gyazo.com/6933bed9d7e8d39dfc307be5571a9e3f)

こんなメッセージが出たら「Change to Linear」をクリック
[![Image from Gyazo](https://i.gyazo.com/f0f0daba17e1700bab92f77b06cfdd70.png)](https://gyazo.com/f0f0daba17e1700bab92f77b06cfdd70)

私のPCでは処理に２、３分かかる。

処理が終わったら、ここは閉じて結構です。


<BR>

#### 4-4-2. アップロード

cluster > ワールドアップロード

初めての人はこんな画面

Webトークン発行を押す
[![Image from Gyazo](https://i.gyazo.com/d5fb8e9ea8ec27fb3a9a5979f7dff4ec.png)](https://gyazo.com/d5fb8e9ea8ec27fb3a9a5979f7dff4ec)

clusterが立ち上がり、
「トークン作成」
[![Image from Gyazo](https://i.gyazo.com/240354c539dbb70d67f0b422bdf881b1.png)](https://gyazo.com/240354c539dbb70d67f0b422bdf881b1)

トークンをコピーし、
[![Image from Gyazo](https://i.gyazo.com/f0bb29c6b3a45a3a46a137716e916492.png)](https://gyazo.com/f0bb29c6b3a45a3a46a137716e916492)

さきほどの、ここに張り付ける。

[![Image from Gyazo](https://i.gyazo.com/8101a4ba8d1b86eebbe635b92fa808bb.png)](https://gyazo.com/8101a4ba8d1b86eebbe635b92fa808bb)




新規作成
[![Image from Gyazo](https://i.gyazo.com/76d2b537e052b84285e7cab31aab796c.png)](https://gyazo.com/76d2b537e052b84285e7cab31aab796c)



・画像の選択　（とりあえず、さっきダウンロードした画像）
・ワールド名、ワールドの説明を入力
・「〇〇としてアップロードする」
[![Image from Gyazo](https://i.gyazo.com/db03042cd9512a7f5c943a4146f29eaa.png)](https://gyazo.com/db03042cd9512a7f5c943a4146f29eaa)


数分後、こんな画面になれば、成功です。

「ワールドに入る」を押して、ワールドに入ってみましょう。

[![Image from Gyazo](https://i.gyazo.com/f361cd76fc56c02d9719117728f5f4ee.png)](https://gyazo.com/f361cd76fc56c02d9719117728f5f4ee)

「cluster を起動」
[![Image from Gyazo](https://i.gyazo.com/b19b73d367792884e801b870d27c4670.png)](https://gyazo.com/b19b73d367792884e801b870d27c4670)

[![Image from Gyazo](https://i.gyazo.com/df553a92c729956244f9c3c57c52b219.gif)](https://gyazo.com/df553a92c729956244f9c3c57c52b219)

さっきの画面で、
「公開する」をクリックすると、全世界に公開されます。

[![Image from Gyazo](https://i.gyazo.com/d2902925000c0904fc4426aff3efbf6a.png)](https://gyazo.com/d2902925000c0904fc4426aff3efbf6a)

<br>
こちらが実際に公開されたワールドです。<br>

https://cluster.mu/w/e4fb8c18-4f32-4f43-a9fb-4767ba684edb

<br><br>

## 5.おまけ


VRChatに上げる場合

- OS: Windows (Macは不可）
- Unityのバージョン： 2019.4.31f1.


http://tatsuya1970.com/?p=16555






<br>
以上です。

<br>