１．初めに
1-1. 今日やること
PLATEAU のデータダウンロードやファイル変換は講師が説明し、
PLATEAU データを使ってUnity のハンズオンをし、
最後はcluster にデータを上げます。
（参考）講師のPCのスペック
- CPU : Intel Core i7-11800H
- RAM : 32GB
- GPU : NVIDIA GeForceRTX3070
※ZOOMの画面共有でUnityがサクサク動いたスペックです。
ここまでなくても、RAM 8GB あれば大丈夫だとは思います。
1-2. 事前準備確認
- ３D都市モデルCityGMLをFBX形式に変換したファイル（松山市）
- Unity 2021.3.4f1 のインストール
- Unityアセットダウンロード（ユニティちゃん、花火）
- Clusterのアカウント作成
2．データ入手・変換 （説明のみ）
2-1. PLATEAUの3D都市モデルのダウンロード
「G空間情報センター」にアクセス
https://www.geospatial.jp/ckan/dataset/plateau
使いたい都市の３D都市モデル（CityGML または FBX）をダウンロードする。
今回のハンズオンでは松山市のモデルを使用します。
※なお、東京都、札幌市はFBXファイルがありますので、このような変換作業は不要です。
詳細 ＞ ダウンロード
zip ファイルがダウンロードされる。
解凍すると、こんな感じ。
2-2. データ変換
ダウンロードしたCityGMLファイルは、Unityでは使えませんので、以下の手順でデータ変換してください。
※東京などFBX、OBJをダウンロードした人は、データ変換は不要です。
2-2-1. 3D都市モデル（CityGML形式）に記述されたURLの更新
2021年9月に３D都市モデル（CityGML)に記述されたURLが変更になったため、エディターで修正する必要があります。
方法は3D都市モデルのデータ変換マニュアルに書かれていて、
「3D都市モデルのファイル内の名前空間とschemaLocationに記載されている旧URLを、新しいURLに更新してください」とのこと。
つまり、CityGMLファイルをVisual Studio 等のテキストエディタで開き、スクリプトの中の文字列を新URLに置換します。
修正前、修正後のURLは、3D都市モデルのデータ変換マニュアルに書かれている。
ここでは、Visual Studio Code での方法を記載
VSCodeを起動して、メニューから［ファイル］→［フォルダーを開く］をクリックし、該当のフォルダを選択して、開きます。
今回のハンズオンの該当するフォルダは[udx]です。
※ウインドウがクラッシュする場合は、小分けにするか、該当のファイルだけ変換
(例1）udx > bldg と udx > dem と２回に分けて変換
(例2） 該当のファイルだけ（今回のハンズオンでは、 udx > bldg > 50326610_bldg_6697_op.gml と udx > dem > 50326610_dem_6697_op.gml）
左側にフォルダ内のファイルが一覧表示されます。
そのまま、以下のコマンドを押す。
Windows：Control + Shift + H
Mac：Command + Shift + H （未検証）
これで、開いているファイル全てを一括で検索・置換できるようになるので、それぞれの欄にさきほどの3D都市モデルのデータ変換マニュアルで指定のURLを入力する。
新旧URLを入力したら、「Replace All」ボタンをクリック
先ほどのURLを全て変換したら、URLの修正作業は終了です。
※ウインドウがクラッシュする場合は、該当のファイルだけ変換
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/
(2) 3D都市モデルのデータ変換スクリプト
「3D都市モデルのデータ変換マニュアル」から入手できます。
→ https://github.com/Project-PLATEAU/Data-Conversion-Manual-for-3D-City-Model
Code ＞ Download ZIP
ZIPファイルを解凍すると
FMEで使用できるスクリプトがたくさんあります。
ここからは、公式サイトのマニュアルのとおりの手順でやってみましょう。
使うスクリプトは、citygml2fbx.fmwt です。
松山市の３D都市モデル（CityGML）は土地・建物あわせて約６００あります。 今回のハンズオンでは、そのうちの松山市街中心部の以下の場所の３D都市モデルを使用します。
どこでもいいのですが、ハンズオンなのでみんな統一します。
番号でいうと 「50326610」
この青い四角が3次メッシュといって、一辺の長さは１キロメートルです。
「３D都市モデルのデータ変換マニュアル」（リンク先のPDFの１つ）
https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_doc_0007_ver01.pdf
マニュアルのとおりやった結果、
変換できました！
と思いきや、
この例は最低単位の範囲のデータにもかかわらず、lod2.fbx 247メガと、大容量です。
merge_bldg_surface.fmwt を使えば、先ほどのより大幅に少ないサイズのFBXに変換してくれます。
これについては、
「３D都市モデルのデータ変換マニュアル」
P54「2.5 建物データのサーフェスのマージ(OBJ/FBX)」をご覧ください。
さきほどの松山市のlod2と同じ３D都市モデルCityGMLが、model.fbmフォルダ とmodel.fbx に変換されました。
lod2.fbx 247メガ に対して、
model.fbx が25メガ と、約10分の一のサイズです。
３.Unity で遊ぶ
ここから実際に手を動かします
3-1. Unityを開く
3-1-1. Unityを開く
Unity Hubを開く
「新しいプロジェクト」をクリック
(1) すべてのテンプレート
(2) エディターバージョン 2021.3.4f1 （cluster の対応バージョン）
(3) 3D
(4) プロジェクト名、保存場所
開いた
こんなポップアップがでたら、スキップする。
もし私と同じレイアウトでなければ、
レイアウトをデフォルトにしてください。
下図の「Scene」タブをクリック
ここにバーチャル空間を作成します。
3-1-2. 各ウィンドウの説明
-
Hierarchy （ヒエラルキー）ウィンドウ
シーンにある全オブジェクトを階層的に表示 -
Scene（シーン）ビュー
編集画面 -
Inspector（インスペクター）ウィンドウ
選択中のオブジェクトの内容の表示・編集 -
Project（プロジェクト）ウィンドウ
プロジェクト全体のオブジェクトやスクリプト等の全てを表示
3-2． Unity に3Dモデルを置く
3-2-1. Unity に3Dモデルを置く
事前に準備したFBXファイル と model.fbm フォルダを UnityのProjectへドラック＆ドロップする。 （1-2分）
FBXファイルをシーン上へドラック＆ドロップ
画面上には変化ないように見えますが、3Dモデルが原点から遠い位置に置かれたためです。
3D都市モデルCityGMLは緯度経度による地理座標系、すなわち地球に沿った球体の座標系で定義されていますが、FBXファイルでは測量や建築・土木の図面などによく使われる平面直角座標系に変換されているからです。
なお、PLATEAUの座標系については、PLATEAU AWARD 2022 説明会 （2022年7月20日開催）での技術解説がとてもわかりやすいです。
こちらの動画をご参照ください。
https://youtu.be/EBnB83Vva5w?t=1806
では、3Dモデルをカメラの方に移動します。
Hierarchy の 3Dモデル（dem, lod1, model) を選択したままで、
GameObject ＞ Move to View
または、Ctrl + Alt + F
３Dモデルがカメラの位置に移動します。
拡大するとlod2の建物（model.fbx） には、自動的にテクスチャがついてます。
3-2-2. Unity の画面操作の練習
マウスを使います。
マウスないと無理です。
- 視点の回転 ：マウス右ボタンドラッグ
- 視点の平行移動 ：マウス中ボタンドラッグ
- 視点のズーム ：マウスホイール
- オブジェクトに視点をフィットさせる ：Hierarchyでオブジェクトをダブルクリック
1分間、以下の動画のように適当に操作の練習をしてください。
松山市上空 pic.twitter.com/04ZTWgNifO
— たつや (@tatsuya1970) August 31, 2022
3-2-3. 調整
ビルと地形の高さが合ってない場合は
下の画像のように、dem , lod1 , model(lod2のこと）のＹの位置を合わせる。
このままだと、アバターを置いた場合、地面がすり抜けるので、地面にCollidar（コライダー）を付ける。
Hierarchy で dem を選択
Inspector で Add Componentをクリック
検索窓に「Mesh」といれて、
検索結果の中から「Mesh Collidar」を選択
Inspector に Mesh Collider が追加される。
3-3. 巨大ユニティちゃん出現
※本記事はユニティちゃんライセンス条項の元に提供されています
© Unity Technologies Japan/UCL
事前順位事項でご用意いただいてる ユニティちゃんのアセット をダウンロードしインポートします。
Window > Package Manager
(1) My Assets
(2) Unity-Chan! Model
(3) download したあと、 Import
こんな画面が出る。
[Import] をクリック
本当は必要なものだけ選択するところですが、とりあえず全部インポートします。
Project > Assets ＞UnityChan! > UnityChan!Model > Prefabs > for Locomotion
にあるunitychan_dynamic をシーンにドラッグする。
なお、Unityちゃんが超巨大に見えますが、基本身長約１５０センチメートルです。
３DモデルはFBXではだいたい100分の１に変換されています。
以下 Inspector を調整
参考までに私の数値
(1) ユニティちゃんの大きさ （好きな数字で）
(2) Spring Manager のチェックをはずす
(3) Rigidbody の Constraints を上画像のようにチェックしたらユニティちゃんの挙動が安定した
(4) お好みでスピードなどの値を調整
カメラの位置を調整
PLAYボタンを押す。
Game ウインドウに再生されます。
矢印ボタンでユニティちゃんを操作できます。
その他の操作方法はゲームシーン右上にUIをご覧ください。
では、編集に戻ります。
編集に戻るには、もう１度「PLAY」ボタンを押してください。
PLAY中に編集したものはPLAYを終えた後には反映されませんので、ご注意ください。
次に、ユニティちゃんにカメラを追従させます。
そのためには。MainCamera のチェックを外し、
ユニティちゃん専用カメラを Hierarchy のユニティちゃんへドラッグ＆ドロップ
こうなればOK
これでPLAY ボタンを押すと、 ユニティちゃんの背後にカメラが追従します。
巨大ユニティちゃんを松山の街で動かして遊んでた。 pic.twitter.com/FxnD4EM2S0
— たつや (@tatsuya1970) July 23, 2022
建物を素通りしてるので、建物にコライダーをつける。
建物のオブジェクト（lod1 , model(lod2のこと) )を全部選択して、 Inspector で Add Component > Box Collidar
※Mesh Collidar の方が正確ですが負荷が高いので、Box Collidar を選択しました。
講師メモ （開始45分）
以上です。
3-4. 花火を上げる
筆者は7月30日に呉市の3D都市モデルを使って、バーチャル花火大会をしました。
#バーチャル呉花火大会 開催中（24時まで）
— たつや (@tatsuya1970) July 30, 2022
是非、遊びにきてください！！
3倍速動画（1分半）で見どころをお伝えします。#cluster https://t.co/lyXGu6aE42 pic.twitter.com/YlUNZam3FX
事前順位事項でご用意いただいてる 花火のアセット をインポートします。
※バーチャル呉花火大会とは違うアセットです。
Window > Package Manager
(1) My Assets
(2) Fireworks
(3) downlod のあと、 Import
こんな画面が出る。
[Import] をクリック
本当は必要なものだけ選択するところですが、とりあえず全部インポートします。
Project > Assets ＞Fireworks > Battery > Prefabs > Battery
にあるBattery をシーンの花火を打ち上げしたいところにドラッグする。
以下 花火の大きさをInspector で調整
高さは -250 から -200 くらい
PLAYボタン！
こんな感じに
PLATEAUの松山の街に花火のアセットを追加してみるとhttps://t.co/VYgXfXziV8 pic.twitter.com/463SYktkUX
— たつや (@tatsuya1970) July 23, 2022
3-5. 巨大ユニティちゃん 街破壊
ちなみに、建物（lod1, model(lod2のこと) ）全部を選択して、Inspector にRigid Body を追加して、Use Gravity をチェックすると、
ユニティちゃんがゴジラのように都市を破壊します。
別のものを作るつもりが偶然にこんなのができた。
— たつや (@tatsuya1970) July 18, 2022
ある実在の日本の都市をユニティちゃんが破壊しまくる。さて、どこでしょう？ #plateau pic.twitter.com/IVeeNg1ZXS
ちなみに、Use Gravityのチェックを外すと、人智を超えた力で街が破壊されます。
Unityを適当にいじってたら偶然こんなのができた。
— たつや (@tatsuya1970) October 5, 2022
人智を超えた力で破壊される都市。 #plateau pic.twitter.com/joY2JOnzys
4. cluster 対応
まず、ユニティちゃんと、花火のアセットを削除してください。
さきほどユニティちゃん街破壊をした人は、建物（lod1、model）のRigid Body を削除してください。
この章では、clusterの公式サイトを参考にしました。
4-1. Cluster Creator Kit
Edit > Project Settings
ウィンドウ内左のタブから「Package Manager」を選択し、「Scoped Registries」に以下のように追加し、「Save」をクリックする。
Name: Cluster
URL : https://registry.npmjs.com
Scope(s) : mu.cluster
ここは閉じてOKです。
Window > Package Manager
ウィンドウ上部のドロップダウンより「My Registries」を選択します。
表示されたリスト内から Cluster, Inc. > Cluster Creator Kit を選択し、「Install」ボタンを押します。
Unityのメニューに「Cluster」の項目が追加されていればCreator Kitの導入は完了です。
4-2. 設定
4-2-1. 3Ｄモデルの位置、大きさ
Hierarchy ウィンドウで、空のオブジェクトを作成します。
プラスマーク > Create Empty
Hierarchy ウィンドウに新しく GameObject ができる。
あとで判別しやすいように名前を「Matsuyama」に変える
dem , lod1 , model(lod2のこと) を選択したまま、さきほど作成した「Matsuyama」オブジェクにドラッグアンドドロップする
こんな感じになる。
これをMatsuya を親オブジェクト、dem,lod1,model を子オブジェクトという。
Matsuyama の位置を 0,0,0
スケールを15にします。
※原寸大にする場合はスケールを100にします
微妙に地面と建物の高さが乖離してるので、dem,lod1,model を選択したまま Inspector のYをゼロにする。
次に
cluster へアップロードする必要最低限の設定をします。
- SpawnPoint（プレイヤーの出現ポイント）
- DespawnHeight（プレイヤーが消滅する高さ）
- Collider（衝突可能なオブジェクト）
4-2-2. SpawnPoint
プレイヤーの出現ポイントを設定します。
Hierarchy ウィンドウで、空のオブジェクトを作成します。
プラスマーク > Create Empty
Hierarchy ウィンドウに新しく GameObject ができる。
あとで判別しやすいように名前を「Spawn」に変える
Inspector ウィンドウで、
(1)Add Component
(2)spawn で検索
(3)Spawn Point を選択
Inspector ウィンドウに 新しいコンポーネント[Spawn Point(Script)]が追加され、
シーンビューに緑色の球体が現れる。
この緑色の球体を、ワールドに訪問した人を最初に出現させたい位置へマウス操作で移動する。
（赤い細い線の向きが正面）
4-2-3. DespawnHeight
プレイヤーが消滅する高さを設定します。
Hierarchy ウィンドウで、空のオブジェクトを作成します。
プラスマーク > Create Empty
Hierarchy ウィンドウに新しくGameObject ができる。
名前を「Despawn」に変更
Inspector ウィンドウで、
(1)Add Component
(2)despawn で検索
(3)Despawn Height を選択
プレイヤーがこの黄色の床にの高さに落ちたら、最初の場所に戻ります。
この黄色の高さ（Y）を、dem より低い値にします。
4-2-4. Camera の削除
Hierachy の main camera は削除してください。
（cluster の場合）
4-3. Play
これで cluster へのアップロードの準備ができました。
アップロードする前に、挙動を確認しましょう。
「Play」ボタンを押します。
Playで確認し、気に入らないところは直しましょう。
4-4. cluster へのアップロード
まず、この画像をデスクトップにダウンロードしてください。
（あとで使います）
4-4-1. 設定
Edit > Project Settings
以下の通り設定します。
Player > Other Settings > Rendering > Color Space
を
Linear に設定
こんなメッセージが出たら「Change to Linear」をクリック
私のPCでは処理に２、３分かかる。
処理が終わったら、ここは閉じて結構です。
4-4-2. アップロード
cluster > ワールドアップロード
初めての人はこんな画面
Webトークン発行を押す
clusterが立ち上がり、
「トークン作成」
トークンをコピーし、
さきほどの、ここに張り付ける。
新規作成
・画像の選択 （とりあえず、さっきダウンロードした画像）
・ワールド名、ワールドの説明を入力
・「〇〇としてアップロードする」
数分後、こんな画面になれば、成功です。
「ワールドに入る」を押して、ワールドに入ってみましょう。
「cluster を起動」
さっきの画面で、
「公開する」をクリックすると、全世界に公開されます。
こちらが実際に公開されたワールドです。
5.おまけ
VRChatに上げる場合
- OS: Windows (Macは不可）
- Unityのバージョン： 2019.4.31f1.
以上です。