6
1

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

Last updated at Posted at 2023-12-05

はじめに

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

前提条件

・Unityがインストール済であること
・Unityのバージョンは2022.1.24f1を使用すること
 (2022.1.24f1のインストールが未済の場合、別途インストールが必要です)

ルーム作成の観点

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

使用したアセット

【無料】VRC_HouseBuilder

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

VRC_HouseBuilder用 窓・天窓追加パーツ

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

【無料】城跡

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

VirtualCastToolKit

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

事前準備

VirtualCastToolKitをインストールする

VirtualCastToolKitをインストールします。パッケージ版をインストールしてください。

ダウンロードしたフォルダを解凍

ダウンロードしたフォルダを「すべて解答」を押して解答します。
解答先のフォルダはどこでもよいです。
image.png

解凍したフォルダをコピー&貼り付け

解凍したフォルダをコピーし、任意の場所に貼り付けします。
自分の場合、Unity関連のプロジェクトはすべて1フォルダに集約しているため、今回はそちらに追加します。
必要があればフォルダ名を変更します。(今回は説明のためファイル名変更せずに進めます)
image.png

プロジェクトの追加

Unity Hubを開きます。
開く→ディスクから加えるを選択します。
image.png

VCToolKitを選択します。(フォルダ名編集した場合、編集後のフォルダ名を選択)
image.png

選択したフォルダが一覧に追加されます。
追加されたプロジェクトを選択するとUnityが起動します。
image.png

各種アセットをインストールする

今回使用するアセットをインストールします。
Assets→Import Packege→Custom Packegeを選択します。
image.png

インストールするUnityPackegeを選択し、開く。
今回はVRC_HouseBuilderをインストールします。
image.png

インストールするファイルの一覧が表示されるので、確認のうえImportを押す
image.png

インストール完了するとこのようになります。
VRC_HouseBuilderのフォルダが追加されました。
同様の手順で廃墟、窓・天窓追加パーツのUnityPackegeもインストールします。
image.png

ロケーションを作成する

VCI Objectを追加

Hierarkyタブ内で右クリック→VCI→Sample VCIを選択
image.png

VCI Objectが生成されます。
初期設定されているCubeは不要なので右クリック→Deleteで削除します。
image.png

プレハブをシーンに追加

ProjectタブよりAssets→VRC_HouseBuilderをダブルクリック
DefaultのプレハブをHierarkyタブのVCI Objectにドラッグ&ドロップしてシーンに追加します。
image.png

追加するとこのようになります。
image.png

プレハブの中身はこのようになっております。
各オブジェクトの表示・非表示を切り替えることでカスタマイズできます。
image.png

不要なオブジェクトを削除するためにプレハブを解凍します。
image.png

不要なオブジェクトを削除した結果がこちらです。
image.png

マテリアルを差し替える

壁がコンクリートだと窮屈な印象があるので、マテリアルを差し替えます。
マテリアルの差し替えは差し替えたいマテリアルをシーン上のマテリアル差し替えしたいオブジェクトにドラッグ&ドロップでできます。
image.png

マテリアル差し替えしました。コンクリートよりはいい感じそうです。
このパーツを大量に敷き詰めてルームを作成していきます。
image.png

オブジェクトを複製して部屋を作成

複製したいオブジェクトを右クリック→Duplicateでオブジェクトが複製されます。
image.png

複製したオブジェクトの座標を調整していい感じの位置に配置します。
同様に複製と位置調整、オブジェクト削除を繰り返して部屋の形をつくっていきます。
image.png

部屋の形ができました。
どこに何のオブジェクトがあるのかわかりづらいので、オブジェクトをまとめていきます。
image.png

オブジェクトをまとめました。だいぶスッキリしました。
image.png

リスポーン地点を作成する

VCI Objectを選択して右クリック→Create Emptyを選択
Add Compornent→VCI Player Spawn Pointを選択
image.png

Transformの値を調整してリスポーン地点を設定します。
Rotationの値をそのままにすると青い矢印の向きを向いた状態で読込されてしまうため、
YのRotationを180度にすることで逆向きの状態で読込するように調整します。
image.png

VCIアップロード

VCToolKit内でバーチャルキャストにログイン

メニューバーよりVCToolKit→Settingを選択します。
image.png

ログインボタンを押下するとブラウザが起動します。
「ログイン情報を保存する」にチェックを入れると以降Unity起動時にログインしたままプロジェクトが起動します。
image.png

ブラウザ上で認証コードが表示されるので、コピー&貼り付けして認証します。
image.png

認証に成功すると以下の画面に切り替わります。
この画面は×ボタンで閉じても問題ありません。
image.png

VCI Objectの設定をおこなう

VCI Objectの各項目を入力します。
Title:ロケーションのタイトルを入力します。
Version:バージョンを入力します。
Author:製作者の名前を入力します。
Discription:ロケーションの説明を入力します。(未記入でも大丈夫です)
image.png

VCIをアップロード

Add Compornent→TSO Item DiscriptorよりTSO Item Discriptorを追加します。
Typeを「ロケーション」に変更し、「VCIをVirtualCastにアップロードする」を押下するとVirtualCastへのアップロードが完了します。
image.png

アップロード状態を確認

アップロードが完了したのでロケーションの情報を確認します。
VCIObjectより「統計情報を取得」ができるので、こちらをもとにロケーションの情報を見ていきます。
image.png

初心者すぎて詳細な内容は把握できないですが、とりあえず「オブジェクトが多すぎる」「テクスチャが多すぎる」ということはわかりました。
image.png

アセットの容量は統計情報からは見れなかったので投稿アセットから確認しましたが、目標値(10MB)を大幅に上回っております。
この容量だとPC想定でもだいぶ厳しいですね……
image.png

投稿アセットからビューワーで確認

バーチャルキャストの中に入って確認する前に、投稿アセットのビューワーから見た目を確認してみます。
何故かすごくバリバリしてるような感じがします。なんでや……
image.png

問題点を改善する

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

テクスチャの解像度を落とす

容量が大きくなる原因の大半はテクスチャの解像度です。
レンガのテクスチャの解像度を確認したところ、なんと2Kでした。
ノーマルマップも含めてすべてのテクスチャが2Kだったので、容量が大きくなるのも納得です。
image.png

どこまで解像度を落とすかは場合によりますが、壁や床をじっくり見るひとなんていないでしょ……の観点から、
今回は解像度を512まで落とすことにしました。
image.png

コライダーをまとめる

ビューワー上の見た目がバリバリする原因ですが、色々と検証した結果、パーツごとにコライダーを設定していることが原因のようでした。おそらくパーツごとのコライダーがぶつかった結果あのような挙動になっているのかと推測します。(あくまで推測なので、明確な原因はわからず……)
image.png

コライダーがたくさんあっても見づらいので、パーツごとにコライダーをまとめていくようにします。
とてもスッキリしました。
image.png

再アップロードして確認

アセットの再アップロードは初回アップロード時と同様に「VCIをVirtualCastにアップロードする」を押下します。
初回アップロード時にアイテムIDを設定しているため、該当するVCIが更新されます。
image.png

統計情報を確認します。
コライダー設定用のオブジェクトを削ったのでそのぶんだけオブジェクト数が削減されています。
また、テクスチャ解像度を落としたため、「Texture total pixel count」の値も減っています。
image.png

再アップロード後の容量を確認したところ、5MB以下まで削減されておりました。
テクスチャの解像度削減で大幅に効果が出たようです。
image.png

ビューワーでの見た目も特に問題なさそうです。
image.png

バーチャルキャストにログインして確認する

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

リスポーン地点から見た状態です。
悪くないですがなんとなく暗い雰囲気がします。
あと若干狭いように感じました。
2023112823375783_拠点_黒永×もっかん.jpg

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

現地確認をもとに再改善

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

マテリアルのシェーダーを変更する

部屋が暗い要因として、壁や床そのものが暗い色になっている雰囲気がしました。
原因はシェーダーがStandardだからと推測しました。
Standardは光源の影響を受けやすい(と聞いた)ので、影がつきやすい印象があります。
image.png

上記、マテリアルをMToonに変更すれば改善できそうだと思ったので、シェーダーを変更してきます。
シェーダーを変更したいマテリアルを選択し、
Shaderのプルダウンをクリック→VRMを選択→MToonを選択します。
image.png

image.png

シェーダーがMToonに変更されました。
Shader Colorの初期値が肌色となっており影の違和感が強いので、肌色部分をクリックして白に設定します。
image.png

下記のようなポップアップが出るので、Sを、Vを100に設定します。
image.png

これで影が消えて違和感がなくなりました。
同様にして、ロケーションに使用されているシェーダーをMToonに再設定します。
今回は壁、床、扉をMToon、天井、屋根、扉の取っ手はStandardとしました。
image.png

ルームの見た目を調整する

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

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

最終的な状態ですが、このようになりました。
大きさを調整する過程で前後左右の調整を楽におこないたいことから大きな枠を用意する方式をとりましたが、大きさ確定させてから不要になった部分を消すのが面倒になったのでそのまま残しております。
容量を考えても10MB以内に収まっており、オブジェクト削減しても大した容量削減にならないので残しても問題ないと判断しました。
image.png

最終的な統計情報です。
アセットの性質上、面積拡大するとオブジェクトの量が増加してしまうのでGameObjectとMeshの項目は想定範囲内です。テクスチャ量も窓とスカイドームが追加されているので想定範囲内かと思います。
ポリゴン数が大幅に削減されたのは照明を削除したことが大きそうです。
image.png

最終的にできたロケーションの容量は5.35MBでした。
10MB以下の目標も達成できており、Quest単体で入っても読込はやいので問題なさそうでした。
image.png

最後に

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

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1