ワールドを作るにあたって

落選マーケット、ワールド担当のほわいとです。

自己紹介します。VRChat自体は2018年の1月に始めました。アバターを作らねばと思い、そこから6か月ほどMayaと格闘し、2018年7月ごろから本格的にVRChatの住民となりました。

今年、とあるゲーム会社へ新卒で入社し、TA / ムービーデザイナーとして仕事をしております。学生の頃にはハードサーフェスを中心にモデリングを行い、映像作品にしてポートフォリオを作りました。

Unity自体は始めて1年と少し経ちましたね。会社ではUnityは使いません。使用しているモデリングソフトはMaya LT 2019です。ワールドデータ編集中に、何度クラッシュしたかわかりません。

ワールドを作る上で意識したこと

今回、落選マーケットを行うにあたって、主催さんやその他運営さん方と、共通で意識していたことは「落選マーケットの主体はあくまでブースである」と言うことでした。バーチャルマーケットに落選し、あきらめきれない出展意欲を救うために立ち上がったチームです。私も落選したうちのひとりであり、落選マーケットへブースを出展しています。

ワールドの製作が始まった時点で、ワールドは以下の点を意識して作り始めることとなりました。

  • ワールドのライティングについての開示を急ごう
  • ワールド自体の負荷は低くしよう
  • ブースに影響せず、キャンバスのような存在、一方でただ手抜きではなく、ディティールにこだわること

「落選」という言葉の暗さ

今でこそ愛着が湧きましたが、最初は私は「落選」という言葉の不吉さが嫌で、会議の中で意義を唱えたことがありました。複数案を上げたのち、改めて落選マーケットが多数決で良かったため、私は異議を取り下げました。これはまたどこかで。

ロゴでピックアップされる文字は必ず「落」という漢字。

また今回は、ベースモデルとして、戸森美影さんが製作された倉庫モデルを使わせて頂ける事になりました。非常にしっかりとしたモデルデータで、細かいところも丁寧にされていて…シャーロちゃんと出会った頃から尊敬しております。

戸森美影さん(ワールドベースモデル)
twitterアカウント : @tomori_mikage
Booth : https://tomori-hikage.booth.pm/

さて、しかしどうしても落選マーケットの倉庫として使うには重大な難点がありました。理にはかなっているのですが、鉄板の屋根、鉄骨、白銀灯、壁にはめ込まれた小さな採光窓。どれも無骨で、無機質で、重厚感があって、しびれるほどかっこいいのですが、この重さと「落選」の文字がブースを沈めてしまうと感じたのです。

このままだと、ワールドがブースに対して過干渉してしまうと考えた私は、ベースモデルの改変、またそこから、アセット作成、軽量化など、ワールドの構築を始めました。これがちょうど7月1日の話です。

カリングとドローコールとUV

ワールドの軽量化を図るうえで基本中の基本のテクニックですが、調整も、バランスを取るのも非常に難しかったです。

ドローコールを抑えるためにオブジェクト数は極力抑える、ただそのせいでカリングの恩恵が受けられなくなるのを避けたい、というラインを探りながら、オブジェクトの分割を行います。

また、オブジェクトの分割はライトマップにも影響してきます。マテリアルUVはリピートをまとめてできるだけ低サイズ高解像度に、ライトマップUVは歪み重なり無いよう、UVシェルのエッジはできるだけ見えない場所で。Unity上やVRChat内で負荷テストを行い、最適化していきました。短い期間での最適化だったので、まだまだ詰められるところはあったと思いますが、ある程度効果は得られたと思います。

補足(V字配置による過負荷について)

Twitterなどで、V字の配置であることから、「多数のブースが一気に移る場所がエントランスにある」という意見を頂きました。確かにあります。マップの手前あたりで、視野角が90度以上であるVR環境で一度に見渡せる場所です。BatchesもOverdrawも数値的には高い場所です。

開催前にそのこと自体には気が付いていましたが、ブースにもOccluderをつけていたからなのか、重たいと感じることがなく、また同様のバグ報告もなかったため、そのままにしておくことにしました。

実は、倉庫への入り口に何らかのOccluderとなる扉を作り、目の前に行くと開く、といった負荷対策のためのギミックを考えていたりもしました。Occluderにするためには、必ず不透明な扉にしなければならないのですが、「左右とも、行く手が阻まれている」という状態に拒絶感が出ると考えていて、負荷も大して問題ではなさそうだったので、扉をつけるのはナシにしました。(実装する時間がなかったというところもありますが。)

ライティング

ライティングも、負荷調整と、オブジェクトにあたるシェーディングのコントロールと、様々な要因が絡まる難しくて重要な要素です。

まず負荷対策として、Realtime Directional Light含め、Realtime Light系は一切使用しないことにしました。すべて、ライティングに関しては事前ベイクを行うことにしたのです。(当初は一灯のみRealtime Directional Lightを含んでいたのですが、ドローコールや見え方の観点から削除するように決めました。)

また今回、ライティングのベイクエンジンを、Unity標準のものではなく、「Bakery」という、アセットストアで販売されているベイクエンジンを使用することにしました。このBakeryはGPUを使用してベイクするため非常に高速で、かつRaytracingを行うためライティングの整合性が保てるという部分にあります。ライティングに関して物理的に正確になる、ということです。

Bakeryを使って始めてレンダリングしてみた時のベイク結果

さてここで、いろいろな課題が出てきます。私自身初めてBakeryを使うので、まず勝手がわからないこと。第2に、Toon調のシェーダーでRealtime Directional Lightの有無で見え方が変わることです。

Bakery Mesh Light自体は、室内に置いてある蛍光灯に対して、その形に当てはまるようなサイズで複数おいてあります。

ベイクエンジン「Bakery」

ほとんどのToon調シェーダーが、Lightmapを使用しません。一部のシェーダーは、ほんの若干ですが、色味が変わるようでした。こちらもいろいろ検証したので、また別記事にまとめたいと思っています。

今回調査したToon調シェーダーは、

の4つです。Standard shaderを参考に、色味明るさが同じになるようチューニングしていきました。

最初にハマったことは、BakeryのArea Lightをひたすら明るくしても、Toon調シェーダーは一切明るくならなかったこと。Reflection ProbeもLight Probe Groupもおいているのになぜ…と。

シェーダーによって見え方が異なるうえに、Baked LightがLight Probeに反映されない…

結局、直接的ではないにせよ解決することができました。BakeryのLight Meshは、Light Probeに対して一切影響を与えない代わりに、StandardマテリアルのEmissionは(当たり前ですが)Light Probeに影響を与えます。そこで、Light ProbeをベイクするためだけにEmissiveなStandardマテリアルを割り当てたメッシュ光源を用意し、Light Probeだけを別でベイク(Bakeryは個別でベイクすることができる)することにしました。このメッシュ光源は、LightmapとReflection Probeをベイクするときには非表示にします。

Light Vector

二つ目の問題に関しては、個人的に解決できていないというか、納得できていないところです。

ほぼすべてのToonシェーダー系が、必ず「Realtime Directional Lightを探してしまうこと」です。これについては、サーフェス系シェーダーにあまり詳しくない私ですが一つ意見を述べさせていただくと、「Standard Shaderで正しいらしい結果が得られている環境で、Toonシェーダーの挙動が大きく変わるのはいかがなものか」ということです。

Realtime Shadowな、Realtime Directional Lightは非常に負荷の高いライトです。No ShadowなRealtime Directional Lightは、室内ワールドに関しては言うまでもなく使い物になりません。Realtime Directional Lightがない、すべてBaked Light + Light Probe + Reflection Probe + Environment Lightで成り立っているワールドも多いはずです。それなのに、Realtime Directional Lightを常に要求してはいけないと、思っているのですが、そうでもないのでしょうかね。

外ならば、太陽光(Realtime Directional Light)が差し込んで見え方は当然変わるのですが、今回は室内だったため、どう考えてもアバターにDirectional Lightは当たらないはず。この部分はどうしても解決できませんでしたね。

レイヤーを分けて、Directional Lightが影響するレイヤーを分けて負荷対策と見え方を整えている、という知恵を聞きましたが、それもそれで根本的な解決には至っていないと思うのです。

バックの白いボードと天井窓

初期のワールドで、天井をくり抜いてみた図

こちらは、負荷軽減というよりは、ワールドのイメージを軽くするための対策でした。もともと、ワールドには、「バーチャルマーケットへ出荷する予定だったブースを一時保管している倉庫で、急遽会場のスペースが足りなくなったから、倉庫を展示場にして、来てもらおうとした」という設定があります。そこで、倉庫の体裁を少しでも展示場っぽく整えるため、ブースの背景に白いボード板を用意しました。この白色は、モノトーン調であるためワールドの存在感を保ちながら主張を抑えられ、またGI光によりまんべんなくふんわりしたライティングが実現できると考えました。(ただ、このまんべんない光は、時にノーマルなどの細かいディティールをつぶしてしまう原因となったかもしれません。Unlitのような見え方だった、という意見を頂きました。)

ただ、円形による高すぎる天井と、下が白、上が黒いため、非常にアンバランスな印象になってしまいました。そこで、天井を鉄板張りから木目調へ、さらには天井に大きな窓を開けようと考えていました。

窓が開いたころに作った画像素材。

ただし、ライティングが大きく変わってしまうこと、指向性の強い光がブースに注がれてしまうこと、実際やってみると意外とアンマッチだったことなどから、この天井窓方式はやめることにしました。

「落ち式」ポータル

ワールドエントランスのギミックを、ワールドデザインアドバイザーのつかさんと模索していたときのラフ。リボルバー式の穴から下を覗くと行先のワールドが見え、上を見ると穴が開いている。

他ワールドへ移動するためのポータルをひと工夫しようとは考えていました。落選マーケットというひとつのイベントであり、ただのブースをまとめたワールドではないということ。倉庫の中はブースに対して余計に干渉してはいけない、しかしエントランスは自由に設計できます。そこで、落選マーケットらしい何かを入れたいと考えたのです。脳裏にはバーチャルマーケットがありました。そういった点で、私は非常にプレッシャーを感じていました。

構想自体はずいぶんと昔に決まっていました。ただ、実装されたのは開催2日前です。ワールド全体のベイク作業、ブースの再入稿や修正作業、(そして突如重なる私個人の用事…)いろいろと立て込んでいました。

デザイン自体は完成していたけど、ギミックが完成したのは2日前というカツカツスケジュールでした。

このポータルのギミックは、VRCギミックに長けるhayashiさんにお手伝いいただきました。「ぐるぐるっと穴も針も回って、行き先が変わっていくようなやつ、あとはいい感じによろしく」というラフなお願いだったり、彼自身忙しかったりした中、非常に助かりました。

入り口のマップ

マップの設置は当初、賛否両論でした。VRだと文字が読めない読めないものは置かないほうがいい。最もだと思います。ブース配置は、マップなど無くても一目瞭然な配置だったし、導線もしっかり張ってあったため、無くても良かったのかもしれません。

しかし、リスポーン地点の目の前に地図があり、ジオラマティックにブースの配置がイメージでき、左を向けば導線に乗れる、という流れは非常に理想的でした。文字の大きさも、所定の立ち位置から読める程度のサイズは確保しようと、あのサイズ形になりました。

エントランスマップの初案。一枚板に、できるだけ大きく、わかりやすいように努めたつもりでしたが、どうも面白みに欠けていました。

結果Twitterでは分かりやすいという声がありました。また、効果は実感できなくても、ワールドのバランスをひっそりと支えてくれていると思います。

入り口のマップは、参考モデルはいくつか私が作りましたが、最終モデルは超蔟さんにモデリングからテクスチャリングまで行って頂きました。

表示を立体的にすることで、より分かりやすく、そしてバーチャルらしくなったと思います。

ワールドデザイン

ワールド全体のデザインは非常に迷いました。制約が非常に多いためです。もう一度、自分がワールドに求めていたことを挙げてみると

  • ワールドの世界観はブースに干渉しないが表現されていること
  • 中途半端なワールドにはしない
  • 説得力がほしい
  • 余計な負荷は掛けられないこと
  • 時間がないため、スケールを広げすぎないこと(収集がつかなくなる)
  • でもカッコよくしたい

最初にワールドのコンセプトやデザインを考えていたときに、それぞれの倉庫が置いてあるワールドは小さな孤島のようなものであり、それが空中に浮いているのか海に浮かんでいるのかはさておき、孤立させようとは考えていました。

周りを塀で囲んでみたり、逆に何も置かなかったり、いろいろ試した結果、今回の「海」というところに落ち着いたのです。

そこで、今回はPacketbirDさん(Arktoonの作者さん)のVRWaterShaderを使用しました。

VRWaterShader
http://packetbird.booth.pm/items/1224312
PacketbirDさん作

カリングが効くように海のメッシュも考慮しつつ、海を導入しました。

ラフ確認のときに用意した構成図
建物の向こう側の海は決して見えないようにしていたため、切り取られているのでした。
The 港って感じ。

まとめ

ワールド自体はこんな感じでしょうか。この後の私の作業は、配置済みのデータをワールドごとに配置し、ひたすらベイクとライティングエラーの修正を行っていく感じでした。

全体を通して、個人的に、非常に貴重な経験でした。Tweetdeckで「落ちマケ」「落マケ」「落選マーケット」で検索ワードにし、Twitterを監視していましたが、いろんな意見が聞けてとても新鮮でしたね。自分の制作物に対して外側から意見を頂けることは本当にありがたいことです。

落選マーケット、楽しんでいただけましたでしょうか。これからも変わらずの楽しいVRChatライフを願って、この記事はおしまいにしたいと思います。

お疲れ様でした!!!!

落選マーケットの公式サイトがリリース

落選マーケット開催まで、あとおよそ1か月となりました。

出展者渾身のブースが集まり、これからワールドの準備が始まります。

そして、これからもっと多くの方々に落マケのことを知ってほしいと、公式サイトを立ち上げました!こちらからは、様々な情報やブースの紹介を行っていきます。

また、出展者が自身の商品やブースについてもブログ形式で情報発信していきますので、ぜひチェックしてみてください!