VRChatワールド制作日誌

pkpq

なにこれ

この記事は、VRCのワールド制作をUnityも3Dも満足に知らない素人がやってることを記録するものです。
　たぶん似たようなTipsは世の中に腐るほどあるとは思いますが、あとで自分が見返して思い出すための備忘と、こういうのは何らかの形でアウトプットしといたほうが覚えるはずなのでたぶん無駄ではないと信じて書いています。（あと大体色んなものを三日坊主にしてしまうのでその防止も兼ねています）

これを書いた人のスペック

  • VRChat初心者

  • VR歴はHTC Viveの初代が発売した1年後ぐらいからたまにゲームで遊んでたくらい（最近Quest2を買った）

  • Unity初心者

  • 3DはVRoid弄ったくらい

  • プログラミングは少しわかる（WEB系とか）


1日目

Unityのインストール

まずは何はなくともUnityを入れないと始まらないと思ったのでUnityのインストールから調べた。
とはいっても、実は昨年末に最近流行ってるしどんなもんか見てみようと思ってUnity自体は触っていたので、あまりここで詰まるようなことはなかった。
VRChatのドキュメントにSDK使うのにこのバージョン使えやみたいな情報が載っている（https://docs.vrchat.com/docs/current-unity-version）ので、それに従ってUnityをインストール、3DのProjectを作ってワールド作成用のSDKを入れるところまでやった。
とりあえず適当に床を作ってVRC Worldというオブジェクトを置いてアップロードすれば動くっぽいのでやってみる。（ついでにミラーオブジェクトのサンプルっぽいのもあったので一緒に置いてみる）

できてる、Sizeがめっちゃ軽い
ロボと白い床とミラー

環境構築

Unityはユーザの作ったUnityPackageを入れることで機能を拡張したり出来る。使うかはおいておいていくつかの拡張を入れた

  • ヒエラルキーを見やすくするやつ

  • Unity上でVRCエミュレーションができるやつ（ビルドしなくてよくなる）

  • Udonの拡張（配布ギミックの前提になっていることが多い）


2日目 - 3日目

仮組

とりあえず、なんかそれっぽいワールドを作ってみたい、でも3Dモデリングから始めるとたぶん爆速で飽きてしまうだろうということで、去年のブラックフライデーにたまたま買っていたUnityアセットを適当に組み合わせて良い感じにしていくことにした。

使ったアセットは以下（確かどっちも半額以下で買った）

  • とはいえUnityできちんとマップ組みをやったことがあるわけでもないのでかなり手探り

  • 特にオブジェクトを綺麗に並べるのがどうしたらいいのかわからな過ぎてすごく辛かった（Vキーで頂点掴んで並べたいオブジェクトの頂点に合わせてやってるけど、なんかもっといい方法ありそう）

それっぽく並べてみたの図

  • Asset並べてるだけなのに時間が凄い勢いで溶けていった

  • ゲームのマップ作りって大変なんだなぁ（小並感）となった

因みにソファなどがあるが、コライダーの設定がおかしい時があるので適宜ボックスコライダーを付け直したりなどした

箱を二つ組み合わせてそれっぽいコライダーにした

  • たぶんオブジェクトの表面に沿ってコライダーを付ける方法もあると思うけど、なんかよくわからなかったのでとりあえずこうしたという感じ

  • 不都合が起きたらまた考えることにする

ライティング

  • 雰囲気良くなりそうだしとりあえず夜にしよって思って夜のスカイボックスを適用したら何も見えなくなった（当たり前）

  • 別にランプのオブジェクトを置いたからって光るわけではないので、光源になりそうなオブジェクトの近くにちゃんと光源を置く

シルバニアファミリー真っ暗なお家

  • ライティングも色々あるっぽいけど、大まかに以下がある

    • ディレクショナルライトという環境光（外からやんわり差し込んでくる光）

    • ポイントライトという点在する光源（屋内の電灯なんかはこれを使う）

    • スポットライトという円錐型に照射される光

  • とりあえず光りそうなものの近くにポイントライトを置いて調整することにした

明るくなった

灯りが付いたのでそれっぽくなってきたのだが、何か物足りないというかチープな感じがするなぁ……となり、ふとVRChatで雰囲気のいいワールドはもっと光が滲んだりしてエモい空気を醸し出していたことを思い出した。
Google先生にそういう画作りをするにはどうすればいいか尋ねたところ、PostProcessingを使いなさいと出たのでそれを試すことにした.


足されるエモみ

  • とりあえずbloomとcolor gradingだけ入れた

  • 良い感じになったけど、目には悪そうな感じになってしまった

  • たぶん最終的にこれを微調整しまくる（＋ライティングの調整）感じなのだろうなぁと思った

4日目

ギミックを追加する

  • ワールド内部で遊べる装置とか便利な奴とかを追加した方が良かろうということで、Udonを勉強する

  • ところが大体汎用的に使える者は既にPrefab化して無償で（！）配ってくれている方がいるので実はほぼ何もしなくてよくなってしまった

  • 一応Udonってのは何なのか、U#とかがUdonに対してどのような位置づけなのかだけはざっくり調べた

    • Udon: VRC SDK3くらいから出てきたノードベースのデベロップキットで、ワールド内の色々な制御をこれで行うことができる

    • UdonSharp: Udonはノードプログラミングなので、これをC#で記述できるようにしたものがUdon#

    • つまり、Unity -> VRC SDK3 -> Udon -> Udon#とラッパーが嚙んでいってるということ（めちゃくちゃややこしい）

    • 因みにさらにCyanTriggerなる汎用処理をまとめたライブラリなんかもあるっぽい

  • 本業はぷよぐやまなのでこの辺色々遊んでみたいが、とりあえずワールドの完成を急がないと飽きてしまうので一旦置いておく

QV penとLQ/HQ Mirrorを置いてみたり
iwasync3を置いてみたり
デジタル時計を置いてみたりなどした

  • デジタル時計の曜日表示(Day of weak)が日本語になってしまい、元のprefabに指定されているフォントを使ってくれないというのが起きた

    • どうも不具合内容がおま環っぽい

    • たぶん自分のUnityの言語設定が日本語だから？

    • VRchatにもっていけば治りそうな気がしたけど、なんか気持ち悪いのでスクリプトを直した(強制的にen-USロケールにした）

5日目 - 6日目

ここらで一旦ワールドをアップロードしてVRで確認したいという気持ちになってきたので、アップロードする際にやらなきゃいけないこと（主に処理の軽量化とか、ワールド自体の軽量化とか）を調べ始めた

ライティングの軽量化

  • ライティングにリアルタイム設定のライトを使わん方がいい

    • VRで処理ラグが起きると酔うってのはゲームやってて感じていたので、これは重要そう

    • ようするに3Dモデルがたくさん置いてあって、リアルタイムで処理する光源がたくさん配置されてると計算量が爆上がって死ぬということっぽい

    • それをしないために、あらかじめ影を計算して描画しておくライトベイクというのをやらなければいけない

  • ひとまず色々と調べながらライトベイクを実施することにした

  • 今回またもやたまたまオススメされて半額以下で買っていたBakeryが手元にあったので（去年の黒金）これを使った

    • 全然知らなかったがBakeryを使うと元々配置してたライティングは関係なくなってしまうっぽい、もっと早くここを知るべきだった

    • Bakeryで設定したライト、ベイクするまで見えないんだけどこれなんとかならないんですかね……？

  • ついでにベイクしてしまうとキャラとか動的に動くものに光が当たらなくて浮いた感じになってしまうのでライトプローブというものも設定しておく

    • 全体をカバーするように箱型で何個か配置する形にしたけど、これがあってるのかいまだにわからない

    • というか自分のアバターが自分の視点だとHQミラーでしか見えないから確認もできない（つらい）

    • 3人称視点が欲しい

オブジェクトの軽量化

  • オブジェクトの数も少ない方がいい

    • もう絶対動かさん家具とか、複数の板を組み合わせて作った床とか天井とかはメッシュを結合した方が軽くなる（らしい）

    • Unityは描画時にオブジェクト毎にドローコールをするらしく、これが何個も走らないようにする　というのが基本戦術（らしい）

    • 上に同じくたまたま買っていた（何でこんなに無駄にアセット買いこんでたんだかわからないが、役に立ったのでヨシとする）MeshBakerを使って結合していく

容量の削減

  • ここまでは処理の軽減で、ワールド自体の容量削減は出来ていない

  • 調べたところテクスチャが容量の大半を占めているっぽい、小さいワールドなのに120MBも容量を食っていた

    • VRC SDKのウインドウからBuild and TESTを行って、コンソールからエディターログを開く、エディターログのバンドル結果を見ると何がどれくらいの割合で容量を占めているかわかる

    • Assetフォルダから使っているやつをちまちま圧縮設定をかけていってもいいが結構な量なのでめんどくさい

    • と思ったらまとめて圧縮してくれるツール拡張を公開してくださっている方がいたのでこれを使って圧縮していく

    • 結果60MBくらいまで減った

ライト関連が本当に何もわからない（しかも上手くいってない気がする）
オブジェクト置いたりライト置いたりギミック置いたりしている時と違って、特に進んでいる感がない作業的側面が強い部分なのでワールド制作の辛み部分なのかもしれないと思った
でも綺麗にライトがベイク出来た時は割と良い気持ちになりそうだなとも思った（現状Bakery任せなんであんまりどうこうないのだけども）

ここまでである程度見れるくらいにはなったので進捗として動画をツイッターにあげたのでここにも貼っておく

7日目 - 8日目

折角映えるワールドを作っても自分のアバターが無いと楽しめないのでは？という気持ちと、VRCの色々なイベントに参加するときに買ったままのアバターで参加するのは大丈夫なのか？という心配が湧いてきたので急にアバター改変に手を染め始めた。
この二日間はアバター用のProjectを弄繰り回していて全くワールド用のProjectを触らなかった。

アバター改変については世の中に死ぬほど知見があったので特に書くことはないですし、やったことも着せ替えとテクスチャの書き換えくらいです。
お茶濁しに自撮りの変遷だけ貼っておく。

買った当初、mioさん制作の薄荷ちゃんは美人です
ややカジュアルになった
最終的にパリピ感のある見た目になった、心なしか自撮りが上手くなっている

美少女だけ使っていると鏡に映る姿が可愛すぎて脳がバグるので、使い分け用に男のアバターと人間以外のアバターも1個ずつ欲しいなぁと思っているのですが、あまり販売が無いのでそのうちBlenderに手を出すしかないという恐怖を感じながらこの二日は終了
MMORPGとかでは絶対女キャラを使う（男の尻を眺めながらTPS視点でゲームしたくないので）けど、自分がなってしまうとなると話は別。

9日目 - 10日目

何度か友人と遊ぶときの集合場所にアップロードしたワールドを使っていたが、いくつかの問題が見えてきた

現状の問題点を確認

  • ライトプローブの設定がおかしいのか、暗すぎるのかわからないが天井がある1Fにいくとアバターが真っ黒になる

  • 外がただスカイボックスがあるだけなのでなんか寂しい

  • 単純に1Fが狭い＆ミラーがないで集まる時大体２Fしか使わない（これはもう設計上の問題なので諦めて次のワールド作る時の知見にするしかない）

    • 天井が低いのが圧迫感の原因かもしれない、吹き抜け部分はあまり圧迫感がない

    • ミラーは人が集まるところには基本置いておいた方が良さそう、自分の姿を確認する術は集まる場所には欲しいものなのかもしれない

    • テストプレイでデスクトップモードで確認している時と、実際ゴーグル被って中に入った時の感じ方が全然違うので、面倒臭がらずに必要に応じて適宜ゴーグル被って確認した方が良さそう

暗すぎて(?)アバター真っ黒問題

  • SimpleLightProbePlacerという奴を使って、ライトプローブを敷き詰めてみた

  • 特に解決しなかった（何故）

    • おまけにワールドビルドも通らなくなった

      • 敷き詰め用のスクリプトを消した後、アセットも削除してUnityを再起動したら通った

    • ライトベイクの問題？ライトマッパーが何かもあんまりわかってないので、その辺の問題な気もする

    • 一旦置いておくが後でちゃんと調べる、ライティングは大事

  • 力業で解決することにした

    • 焼いてあるディレクショナルライトの他に、もう一つプレイヤー以外に影を落とさないプレイヤー専用のディレクショナルライトを配置した

    • 一応これで真っ黒になる問題は解決したが、なんと今度はカメラを通すとそのカメラの中だけ真っ黒になるという事態が発生した

      • もうわからんすぎるのでカメラは一旦放置することにした（描画の処理が別なのだろうか？）

    • この解決方法は人がいっぱい集まる場合重くなりそうなので、最終手段な気がする

遠景を作る

  • 周りがただのスカイボックス状態で、空に浮いているカフェバーみたいな状態になってしまっていたので遠景を作りたい

  • 街並みにするか迷ったが、窓が3方向あるので囲むのに労力がかかりそう

  • 水の表現とか、パーティクルの表現をやってみたいのもあったのでエモいワールドによくある水に沈んだ街を目指すことにした

  • とりあえず適当にビルを置いて、なんかそれっぽい金網を置いて、荒廃した街の中でギリギリ営業してるカフェ感を出した（それにしちゃ中綺麗過ぎだろって話もある）

とりあえず適当にそれっぽい建物で囲む
入り口から見えるところには鉄製のステップを配置してどっかからは来れる、みたいな空気に

  • ついでにスカイボックスを綺麗に星空にしようと思い、boothで販売していたこちらのSkyboxを使ってみることにした

  • 次にPlaneを2枚敷いて下をただの黒い平面、上をウォーターシェーダーにして水面を張って街を沈めた

  • 水面の照り返しがあるだけでなんかそれっぽくなるので凄い

水はエモい

  • Skyboxに月がないけど、月は光源の印象としてあった方がよい（月明りが差し込んでいるイメージ）気がしたので月を配置する

  • 最初平面に月のテクスチャを貼って適当に表示……とすることも考えたが、月の3Dモデルを配布してくださってる方がいたのでこれを配置することにした

unlit系のシェーダーをあてて、それっぽい場所に顔をのぞかせておく

  • 最後に水と空にそれっぽいパーティクルを散らして雰囲気を出しておく

    • パーティクルシステムがイマイチわかっておらず、これがどれくらいの負荷になるのかという話もあるので描画が重くてダメだ！ってなったら外すことも検討

    • Particleもこれだけで色々できるっぽいので後でちゃんと調べる必要があると思った

湧き上がるパーティクル、なんで水面から光が出るんだ？って感じするけど

  • 最後にポストプロセッシングのBloomを少しいじってそれっぽくして完成

ガンガンにDiffusion入れるとこんな感じ、綺麗

  • これで遠景は一旦完成

  • 残すやりたいこととして、音関係（水の環境音とか、ゆるやかなBGMとか、コーヒー淹れてる音とか？）、ちょっとした暇つぶしができるギミック、マップの負荷を変更できるメニュー類

  • 音は簡単にできそうなのでそこから着手していく

11日目 - 12日目

音を追加する

ワールドの雰囲気を良くするのに音効が有効という話があるので、ワールドにそれっぽく音を追加することにする。
静かな夜のカフェ＋周りは水なので水の音と落ち着いた感じのBGMを選ぶ水の音は効果音ラボの環境音から

BGMは騒音のない世界からお借りした

設定する音は決まったものの、これをどうやってワールドで鳴らすかわからないので軽く検索したところ、VRC_AudioBankというコンポーネントを付けたGameObjectをごにょごにょすれば出来る！みたいなことが書いてある記事がいくつか見つかった、が……VRC_AudioBankというコンポーネントが存在しない

どうやらSDK3には既にVRC_AudioBankが存在しないらしく、普通にUnityのAudioSourceで設定すればいいらしい（これに気づくまでめっちゃ時間がかかった）

こんな感じのobjectを作ってヒエラルキーに配置すればよい

  • ゲーム開始時に再生にチェックを入れておく

  • ループにもチェックを入れておく

  • 水の音がアスファルトに反響してる感じを出したかったので、AudioReverbFilterを追加して少しだけ残響効果を入れておく

  • 音を3Dにしておくと音源からの距離で減衰したりするが、BGMはとりあえず全員に聞こえていれば良いので2D設定にしておく

    • Unity側で2D設定したけど、Build時に怒られてVRC Spatial Audio Sourceを追加する（こちらのコンポーネントで音源の3D設定をしないとダメっぽい？）

以上で音の追加は完了、水の音と穏やかなBGMが流れることでワールドのエモさがちょっと増された気がする、たぶん。

UIを追加する

音の追加は出来たものの、オンオフが出来ないとうるさいな～って思う人もいるだろうというのと、PostProcessingのBloomは目に痛かったりするので、よくワールドに設置されている調整用のUIを作ることにした

ワールドに設置されているUIをパｋ……参考にとりあえずこんな感じかなというのをイラレで作成、フォントは小瑠璃フォントのLight、アイコンはikonateのものをお借りした

シンプルな配置、スライダーは仮置き

  • これをUnityにもっていってUIにすればいいと思ったが、その方法がわからない（何もわからない）

    • ていうかそもそもUIに画像を入れる方法すらもわからない（これについては画像をAsset配下に追加して、2Dスプライトに設定すればOKということが後程調べてわかった）

  • 調べたところ、uGUIというUnityのGUI機能を使って色々出来るらしいのでそれを調べる

    • uGUIのスライダーやボタンでGameObjectの状態を弄ることはできるが、PostProcessのパラメータを弄ることは出来ない

    • PostProcessの状態をAnimationで作成して、そのアニメーションの変化状態をスライダーに当ててやることで出来るとのこと

  • 色々試行錯誤した結果、こんな感じの構成になった

なんかめっちゃ冗長になっている気もする

  • Canvasの配下に下敷きの背景を配置

    • ボタン機能に各種切り替えのUdonBehaviorをくっ付けて、スクリプトでボタンを押したらGameObjectのオンオフを切り替えるようにする

    • スライダーの方は上の記事を参考にスクリプトを書いて、スライダーにアタッチしておく

組み立てたらこんな感じ、割と良さげでは？

  • CyanEmuで動作確認をしたら良い感じだったので、テストもせずにPublishしたら全く動かなかった

    • 原因を調べたところVRC UI Shapeコンポーネントを、Canvasに付けておかないと動かないことがわかった、これに気づくのに30分くらいかかった

ということで完成概ねワールドが完成した（ような気がする）
あとは気が向いたらギミックを追加していきたいけど、新しいワールドの制作に着手したい気持ちもあり

また何かあったら追記します。

この記事が気に入ったらサポートをしてみませんか？