VCI初心者が配信用ロケーションをつくる

# はじめに
今回きりふぇすで企画参加させていただくにあたりルーム用のロケーションを作成いたしました。
その際の手順をまとめさせていただきます。

# 前提条件
・Unityがインストール済であること
・Unityのバージョンは2022.1.24f1を使用すること
　（2022.1.24f1のインストールが未済の場合、別途インストールが必要です）

# ルーム作成の観点
今回のルーム作成では以下の観点をもとに設計しました。
・配信することを前提とする
・オブジェクトは極力少なくする
・可能な限り容量を削減する（目標10MB）
・Quest単体で問題なく読込できるようにする
・作成したアセットは商品登録しない

# 使用したアセット
## 【無料】VRC_HouseBuilder
joushiさんがBOOTHで公開されている無料のアセットです。
3×3のユニットに壁や窓、床、照明などルーム作成に必要なパーツが集約されており、必要に応じて表示・非表示をおこなうことでカスタマイズします。同梱のマテリアルに差し替えることで見た目を好みにカスタマイズできます。

https://joushiikuta.booth.pm/items/2060971

## VRC_HouseBuilder用　窓・天窓追加パーツ
VRC_HouseBuilderの拡張アセットです。
窓や天窓を追加できます。有料ですが250円と安いので見た目にこだわるなら買う価値はアリです。

https://booth.pm/ja/items/2078685

## 【無料】城跡
プリメロ工房さんがBOOTHで公開されている無料のアセットです。
といっても今回使用させて頂くのはスカイドームの部分のみになります。
（スカイドームの作り方がわかればよかったのですが、いちから作る方法が調べてもわからず……）

https://booth.pm/ja/items/4224945

## VirtualCastToolKit
バーチャルキャスト公式から配布されているツールです。
プロジェクト版をインストールするとプロジェクトをコピペしてフォルダ名を修正するだけで開発環境が整うので楽です。
Unityからアセットの投稿や統計情報の取得もできるので便利。

https://developer.virtualcast.jp/vctk/

# 事前準備
## VirtualCastToolKitをインストールする
VirtualCastToolKitをインストールします。パッケージ版をインストールしてください。

https://developer.virtualcast.jp/vctk/

## ダウンロードしたフォルダを解凍
ダウンロードしたフォルダを「すべて解答」を押して解答します。
解答先のフォルダはどこでもよいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/691c3a68-fe7a-2566-316c-7702b5b4e688.png)


## 解凍したフォルダをコピー＆貼り付け
解凍したフォルダをコピーし、任意の場所に貼り付けします。
自分の場合、Unity関連のプロジェクトはすべて１フォルダに集約しているため、今回はそちらに追加します。
必要があればフォルダ名を変更します。（今回は説明のためファイル名変更せずに進めます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/f76d3b32-42f7-e5a0-c36a-443056dc5a51.png)

## プロジェクトの追加
Unity Hubを開きます。
開く→ディスクから加えるを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/71fa0b35-89e2-5dea-4b92-ae6f88c6be06.png)

VCToolKitを選択します。（フォルダ名編集した場合、編集後のフォルダ名を選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/3cae7359-9d9e-08b0-bbb1-1064a107ad2c.png)

選択したフォルダが一覧に追加されます。
追加されたプロジェクトを選択するとUnityが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/416d79bc-6bb7-ea08-95e1-2c2d8b89c185.png)

## 各種アセットをインストールする
今回使用するアセットをインストールします。
Assets→Import Packege→Custom Packegeを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/5dae71bc-3550-6731-695a-3ef5778e8360.png)

インストールするUnityPackegeを選択し、開く。
今回はVRC_HouseBuilderをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/d1aeb7c5-f77e-a55f-0593-9d3520ec8f31.png)

インストールするファイルの一覧が表示されるので、確認のうえImportを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/1c99140e-6c11-e857-e9e0-2c62d0df7c35.png)

インストール完了するとこのようになります。
VRC_HouseBuilderのフォルダが追加されました。
同様の手順で廃墟、窓・天窓追加パーツのUnityPackegeもインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/d7fde27f-0d99-52fb-09d5-656f9201ee4c.png)

# ロケーションを作成する
## VCI Objectを追加
Hierarkyタブ内で右クリック→VCI→Sample VCIを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/1e53a94b-cf43-cf3e-3e07-167828ee986f.png)

VCI Objectが生成されます。
初期設定されているCubeは不要なので右クリック→Deleteで削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/7b8cdd2b-d5e1-d146-6ddd-e4ac8fb017c1.png)


## プレハブをシーンに追加
ProjectタブよりAssets→VRC_HouseBuilderをダブルクリック
DefaultのプレハブをHierarkyタブのVCI Objectにドラッグ＆ドロップしてシーンに追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/d3565bb3-997d-da43-51d0-322eafcfd4ab.png)

追加するとこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/628a85df-2dee-bf86-40df-ce7fbb0e9248.png)

プレハブの中身はこのようになっております。
各オブジェクトの表示・非表示を切り替えることでカスタマイズできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/66b324ec-5337-085b-5ae0-76321aba8b22.png)

不要なオブジェクトを削除するためにプレハブを解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/9f3d1dc9-9d6f-25e3-f2a1-b39c45c946ff.png)

不要なオブジェクトを削除した結果がこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/a8d1f6ee-ff0b-28ca-c365-6afe340f6232.png)

## マテリアルを差し替える
壁がコンクリートだと窮屈な印象があるので、マテリアルを差し替えます。
マテリアルの差し替えは差し替えたいマテリアルをシーン上のマテリアル差し替えしたいオブジェクトにドラッグ＆ドロップでできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/510a7c85-5c2e-4b04-513c-63c1b6505940.png)

マテリアル差し替えしました。コンクリートよりはいい感じそうです。
このパーツを大量に敷き詰めてルームを作成していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/d0fdc50b-db28-617b-b970-402d8afc325d.png)


## オブジェクトを複製して部屋を作成
複製したいオブジェクトを右クリック→Duplicateでオブジェクトが複製されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/a550b177-48f4-5548-9fb3-746c3822db4f.png)

複製したオブジェクトの座標を調整していい感じの位置に配置します。
同様に複製と位置調整、オブジェクト削除を繰り返して部屋の形をつくっていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/519d4733-80d9-40fd-79d2-2f1fd3ce1d3c.png)

部屋の形ができました。
どこに何のオブジェクトがあるのかわかりづらいので、オブジェクトをまとめていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/28a069e6-e7fb-8eae-dab0-076ab5e9b65d.png)

オブジェクトをまとめました。だいぶスッキリしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/3a43acb3-ecb0-d547-0be3-88d7ee37fda7.png)


## リスポーン地点を作成する
VCI Objectを選択して右クリック→Create Emptyを選択
Add Compornent→VCI Player Spawn Pointを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/f6b5c89a-1921-eb15-0efd-8a8d8fe9c055.png)

Transformの値を調整してリスポーン地点を設定します。
Rotationの値をそのままにすると青い矢印の向きを向いた状態で読込されてしまうため、
YのRotationを180度にすることで逆向きの状態で読込するように調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/2dfef6ae-297c-8f33-4499-ec18835f083c.png)


# VCIアップロード
## VCToolKit内でバーチャルキャストにログイン
メニューバーよりVCToolKit→Settingを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/970bb836-f158-66c8-c943-1309988262ae.png)


ログインボタンを押下するとブラウザが起動します。
「ログイン情報を保存する」にチェックを入れると以降Unity起動時にログインしたままプロジェクトが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/74e4936d-acd1-e04d-df81-5844559893a2.png)

ブラウザ上で認証コードが表示されるので、コピー＆貼り付けして認証します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/578dfd54-63e6-490a-2b8e-7e6f6aea0870.png)

認証に成功すると以下の画面に切り替わります。
この画面は×ボタンで閉じても問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/da5ee0e2-2025-22cc-6ce7-2d0bfdaed5ae.png)

## VCI Objectの設定をおこなう
VCI Objectの各項目を入力します。
Title：ロケーションのタイトルを入力します。
Version：バージョンを入力します。
Author：製作者の名前を入力します。
Discription：ロケーションの説明を入力します。（未記入でも大丈夫です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/4339edb2-cc3a-21a5-4dfc-2dfc34d4b0f3.png)


## VCIをアップロード
Add Compornent→TSO Item DiscriptorよりTSO Item Discriptorを追加します。
Typeを「ロケーション」に変更し、「VCIをVirtualCastにアップロードする」を押下するとVirtualCastへのアップロードが完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/dcb2cc9f-46c9-99d8-c7b2-bb1480090aa9.png)


## アップロード状態を確認
アップロードが完了したのでロケーションの情報を確認します。
VCIObjectより「統計情報を取得」ができるので、こちらをもとにロケーションの情報を見ていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/7a429781-5f3b-0a16-2d01-157282855c97.png)


初心者すぎて詳細な内容は把握できないですが、とりあえず「オブジェクトが多すぎる」「テクスチャが多すぎる」ということはわかりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/ef2a75fc-5af1-2532-7277-be66e0ff6179.png)


アセットの容量は統計情報からは見れなかったので投稿アセットから確認しましたが、目標値（10MB）を大幅に上回っております。
この容量だとPC想定でもだいぶ厳しいですね……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/d2779ade-f062-c4e4-a2a2-c23c042038d9.png)

## 投稿アセットからビューワーで確認
バーチャルキャストの中に入って確認する前に、投稿アセットのビューワーから見た目を確認してみます。
何故かすごくバリバリしてるような感じがします。なんでや……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/9d3e6e77-1341-e55d-e451-945d7642d80e.png)

# 問題点を改善する
今回アップロードしたロケーションについて、
・容量が大きすぎる
・ビューワー上で何故かバリバリしてる
という問題が発生したので、こちらを改善していきます。

## テクスチャの解像度を落とす
容量が大きくなる原因の大半はテクスチャの解像度です。
レンガのテクスチャの解像度を確認したところ、なんと2Kでした。
ノーマルマップも含めてすべてのテクスチャが2Kだったので、容量が大きくなるのも納得です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/8847c753-878e-4f48-ec9b-71aa394927ba.png)

どこまで解像度を落とすかは場合によりますが、壁や床をじっくり見るひとなんていないでしょ……の観点から、
今回は解像度を512まで落とすことにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/a913015c-93df-236d-6ef0-88195c1fb5bf.png)

## コライダーをまとめる
ビューワー上の見た目がバリバリする原因ですが、色々と検証した結果、パーツごとにコライダーを設定していることが原因のようでした。おそらくパーツごとのコライダーがぶつかった結果あのような挙動になっているのかと推測します。（あくまで推測なので、明確な原因はわからず……）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/617e375b-ac13-a56e-872f-f03ffce9f136.png)

コライダーがたくさんあっても見づらいので、パーツごとにコライダーをまとめていくようにします。
とてもスッキリしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/069d5a77-e317-dc94-5d17-38e0b82945d2.png)

## 再アップロードして確認
アセットの再アップロードは初回アップロード時と同様に「VCIをVirtualCastにアップロードする」を押下します。
初回アップロード時にアイテムIDを設定しているため、該当するVCIが更新されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/edd37c09-5a7e-98fe-31b9-34dbc48581d7.png)

統計情報を確認します。
コライダー設定用のオブジェクトを削ったのでそのぶんだけオブジェクト数が削減されています。
また、テクスチャ解像度を落としたため、「Texture total pixel count」の値も減っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/25b084e0-9cb1-5e24-5ed7-67f2f44c4616.png)

再アップロード後の容量を確認したところ、5MB以下まで削減されておりました。
テクスチャの解像度削減で大幅に効果が出たようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/b551231a-cf15-2271-92d9-bb54c4791e22.png)

ビューワーでの見た目も特に問題なさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/05bc05b3-3ffb-a0d9-f1f5-5f213aa45a47.png)


## バーチャルキャストにログインして確認する
バーチャルキャストの中に入って、実際にロケーションを確認します。
空間の大きさや見た目に問題がないかを体感します。
フレンドさんなど第三者から見た感想も頂けるとよりよいです。

リスポーン地点から見た状態です。
悪くないですがなんとなく暗い雰囲気がします。
あと若干狭いように感じました。
![2023112823375783_拠点_黒永×もっかん.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/5afcd28a-26d3-881b-0bcd-cb8c54a5fb2f.jpeg)

入口の様子です。真ん中にアバターが初期表示されるので、左右１マス分しか余裕がないのは厳しそうですね。
また9×9は狭いような感覚がありつつも、配信を前提に考えると前後に9マス分は多すぎるように感じました。
部屋に窓がなく、閉鎖空間を連想させるのでもう少し開放的にしたい気もしました。
またこれはテスト中にQuest単体で凸してくださった方からの情報ですが、「天井からぶら下がってる紐がチラチラする」といったご意見もいただきました。Quest単体だと解像度が粗いので、あまり細かいオブジェクトは置かない方がよさそうでした。
![2023112823373973_拠点_黒永×もっかん.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/0ffd6b39-e857-a94a-d9a7-369568588f10.jpeg)

# 現地確認をもとに再改善
実際にバーチャルキャスト内で感じたことをもとにルームを修正していきます。
改善内容は以下となります。
・入口が狭いのでもう少し広くする
・全体的に暗いので明るくする
・配信スペースが狭いので横に広げる。
・縦幅はいらないので削ってもよい
・閉鎖的な雰囲気が強いので窓をつける
・窓をつけると外が見えるので、庭とスカイドームを入れる
・照明は消したほうがよい

## マテリアルのシェーダーを変更する
部屋が暗い要因として、壁や床そのものが暗い色になっている雰囲気がしました。
原因はシェーダーがStandardだからと推測しました。
Standardは光源の影響を受けやすい（と聞いた）ので、影がつきやすい印象があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/a4d86032-32a2-bbe8-6632-1f4bcfc54f1b.png)

上記、マテリアルをMToonに変更すれば改善できそうだと思ったので、シェーダーを変更してきます。
シェーダーを変更したいマテリアルを選択し、
Shaderのプルダウンをクリック→VRMを選択→MToonを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/1a9d4fac-5283-4998-4855-a506e5567d52.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/b3ddf78d-c430-a264-fc5e-82bfd401c34b.png)

シェーダーがMToonに変更されました。
Shader Colorの初期値が肌色となっており影の違和感が強いので、肌色部分をクリックして白に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/c3b3a9fe-af28-9ec5-5b17-bbc7661b3824.png)

下記のようなポップアップが出るので、Sを、Vを100に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/13803c1c-c0cd-b837-b1a1-a395826f38d7.png)

これで影が消えて違和感がなくなりました。
同様にして、ロケーションに使用されているシェーダーをMToonに再設定します。
今回は壁、床、扉をMToon、天井、屋根、扉の取っ手はStandardとしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/c246bbc8-5486-0320-53ce-5074a6e13827.png)

## ルームの見た目を調整する
ルームの大きさや見た目を改善していきます。
オブジェクトの配置調整の話になるので詳細は割愛します。

ルームの調整が終わったら再アップロードと現地確認を繰り返します。

最終的な状態ですが、このようになりました。
大きさを調整する過程で前後左右の調整を楽におこないたいことから大きな枠を用意する方式をとりましたが、大きさ確定させてから不要になった部分を消すのが面倒になったのでそのまま残しております。
容量を考えても10MB以内に収まっており、オブジェクト削減しても大した容量削減にならないので残しても問題ないと判断しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/fe050707-4b80-5392-df97-2a6952db8f51.png)

最終的な統計情報です。
アセットの性質上、面積拡大するとオブジェクトの量が増加してしまうのでGameObjectとMeshの項目は想定範囲内です。テクスチャ量も窓とスカイドームが追加されているので想定範囲内かと思います。
ポリゴン数が大幅に削減されたのは照明を削除したことが大きそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/9d7ed001-0d75-2dbf-2186-c03bfd2820a8.png)

最終的にできたロケーションの容量は5.35MBでした。
10MB以下の目標も達成できており、Quest単体で入っても読込はやいので問題なさそうでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629675/42b7bcaa-61da-7ebb-e33a-b1e7a907636d.png)

# 最後に
ここまでお付き合いいただきありがとうございました。
今回は配信を目的としたロケーションのため飾りつけやエフェクトなどを排除しましたが、オブジェクトを増やすことでより華やかな空間をつくることもできそうです。
初心者のロケーション作成記事ですが、これがどなたかの助けになりましたら幸いです。