This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

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

Unity

Last updated at 2022-09-02Posted at 2022-08-29

１．初めに

1-1. 今日やること

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

（参考）講師のPCのスペック

CPU : Intel Core i7-8750H
RAM : 32GB
GPU : NVIDIA GeForce GTX 1050 Ti

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をダウンロードした人は、データ変換は不要です。

ダウンロードした３D都市モデルのフォルダを開きます。

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/libraries/

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

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

私のメモリ16ギガのWindowsパソコンでは、これをUnityにインポートした瞬間にフリーズしてしまいました。

ということで、LOD2のデータは
merge_bldg_surface.fmwt を使えば、先ほどのより大幅に少ないサイズのFBXに変換してくれます。

これについては、
「３D都市モデルのデータ変換マニュアル」
P54「2.5 建物データのサーフェスのマージ(OBJ/FBX)」をご覧ください。

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

lod2.fbx 246メガ　に対して、
model.fbx が24メガ　と、約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をご覧ください。

FPSのような一人称視点にするには。MainCamera のチェックを外し、
ユニティちゃん専用カメラを Hierarchy のユニティちゃんへドラッグ＆ドロップ

こうなればOK

これでPLAY ボタンを押すと、ユニティちゃんのFPS視点

巨大ユニティちゃんを松山の街で動かして遊んでた。 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時まで）
是非、遊びにきてください！！
3倍速動画（1分半）で見どころをお伝えします。#cluster https://t.co/lyXGu6aE42 pic.twitter.com/YlUNZam3FX
— たつや (@tatsuya1970) July 30, 2022

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

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 をチェックすると、

ユニティちゃんがゴジラのように都市を破壊します。

別のものを作るつもりが偶然にこんなのができた。
ある実在の日本の都市をユニティちゃんが破壊しまくる。さて、どこでしょう？ #plateau pic.twitter.com/IVeeNg1ZXS
— たつや (@tatsuya1970) July 18, 2022

4. cluster 対応　

まず、ユニティちゃんと、花火のアセットを削除してください。

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

4-1. cluster SDKを付ける

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の　dem , lod1 , model(lod2のこと) を選択したまま、Inspector の各スケールを15にします。

※原寸大にする場合はスケールを100にしますが、スケールを大きくするとPLATEAUモデルと中心からのズレが拡大し、シーンビューが正常に動作しないことがあります。
松山市の３Dモデルは15倍が限界でした。こういう場合はblenderなどの３Dソフトで原点を調整する必要があります。
なお、東京都の３Dモデルは100倍までできました。

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