VRワールドのデータサイズを低く抑えながら、質を上げるコツ

2023年の今も、VRの世界では、ときどき一昔前のゲーム機のようなポリゴン数の粗いVRをときどき目にします。その理由の一つが、データサイズの制限だと思います。
ここでは、データサイズの抑えることと、クオリティの向上の両立の話をします。

### つくったもの

先日、「ノンアルコール酔ったふり居酒屋」というVRワールドをつくりました。
![izakayaphoto.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/57d27e7b-7e7e-b362-367f-5f9c82adeb15.jpeg)
こちらで公開中です。
https://hubs.mozilla.com/JrYaZmp/
PCブラウザでもスマホでもMeta Quest２でも体験していただけます。
（ぜひ体験していただけると嬉しいです）

プラットフォームは、hubs Mozilla。データのサイズは、わずか5.3MBに抑えることができました。5.3MBというデータサイズで、クオリティを上げるために、トライしたいろいろな工夫を話します。

### そもそもVRに求められるデータサイズとは

hubs Mozillaは、ワールドのサイズが推奨16MB以下。
VR chatのQuestワールドは100MB、Stylyは1.7GBですが、Unreal Engineで作られたゲームは数十GB以上のものも多いことを考えると、データサイズを気にせずつくっているとすぐに限界を超えてしまいます。
また、データサイズは少なければ少ないほどロード時間も短く、ユーザビリティは向上します。

### データのサイズを減らすとどうなるか

一般にデータのサイズを減らすためにできることは、「ポリゴン数を減らす」「テクスチャーの画質を下げる（圧縮する）」「テクスチャーを使いまわす」「マテリアルのパターンを減らす」です。
ただし、単にそうすると、粗いポリゴンとテクスチャー、同じマテリアルが何度も使われる、いまいちなワールドになってしまいます。そこで、それを乗り越えるためのいろいろな工夫をしました。

### TIPSその１：環境光で生っぽさを消す

ビジュアルに対して、「生っぽい」という言葉があります。むき出しのものがそのまま置かれている＝料理される前の状態という意味です。
僕は、色付きの環境光を当てることで、絵本っぽく見せることで生っぽさを消しています。「ノンアルコール酔ったふり居酒屋」では、温かみや酔い（＝赤くなる）を表現するためにオレンジ色の環境光を当てました。

こちらが環境光を入れる前。
![スクリーンショット 2023-02-12 21.33.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/e4b698bb-2cca-d260-b383-d222bbf75da0.png)
こちらが環境光を入れた後。
![スクリーンショット 2023-02-12 21.34.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/e5bb44d1-c64e-7fd6-3604-0f2614048f17.png)
簡単ですが、劇的な変化です。

### TIPSその2：遠くのものほど、ざっくりに

「ノンアルコール酔ったふり居酒屋」では、見せたいものを中心に、離れていくほど、ざっくりした表現に変えています。

いちばん細かいポリゴン数と色数が、居酒屋の中。
↓
次に高架は、それよりもさらに少ないポリゴン数で表現。
↓
上を通る電車も、グレー一色＋環境光です。（夕焼けに溶け込んでいるような演出）
↓
そして一番奥にある空は、赤からブルーへのグラデーションのみで表現。

![izakayaphoto.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/728788e1-e44d-67d2-3d76-0c368e31e43b.jpeg)
背景に空の写真を入れたものも参考に載せておきます。リアルな写真の空に前に、ポリゴン数の少ない人物や建物があると、ちぐはぐになりますし、またポリゴン数の少なさが逆に際立ってしまいます。（狙ってやるなら別ですが）
![sorahaikei.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/b075ad73-e2ca-75ee-8e03-a894e7dd85e7.jpeg)

### TIPSその３:擬似シャドーを使う

Blenderのレンダリングでシミュレーションしていたときはよかったのに、ワールドに入れたら、イマイチだった、ということがよくあります。ワールドで行われるリアルタイムレンダリングは、3D作成ソフトのプレレンダリングに比べ、光の計算がかなり落ちるからです。
そこで、今回、使ったのが擬似シャドー（という言葉があるかどうかはわかりませんが）です。
３箇所使っています。

1つ目がビールのケース。
![スクリーンショット 2023-02-12 21.58.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/f9cb7d45-c58b-0531-d4ed-7053df594be0.png)
右側のケースが、左側のケースと比べて、影になって暗くなっているように見えますが、実はケース自体の色を変えています。

2つ目が看板の部分。
![スクリーンショット 2023-02-12 21.58.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/95773bfa-e9ca-e3ec-09ef-4e739c215a46.png)
下から照明が当たっているように見えますが、
画像自体をこう見えるように塗ってしまっています。（今見返すと、ちょっと雑ですねw）

3つ目が、建物の中から床にこぼれだしているように見える光とテーブルの影。これも地面を塗っています。
![スクリーンショット 2023-02-12 21.59.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/b8fe20bb-5afa-b74c-fff0-7cfa43ccb3d9.png)
Blenderにはベイクという技があり、プレレンダリングした照明効果をテクスチャーに塗れますが、これは、いわば手動ベイクです。
※昔の2Dドットのゲームを見ると、2Dドットで影を表現するために、この技があちこちに使われています。

### TIPSその４：テクスチャーで一工夫

小さな工夫なのですが、「テクスチャーは、大事なところだけ解像度高く」しています。
先ほどの、地面に影を塗った部分。地面の中で、塗る必要があるエリアだけ切り分けて、そのエリアだけ解像度が高くなるようにUVマップを工夫しました。
山や地面など大きなものに、小さなものと均等の解像度でテクスチャーを貼ってしまうと、近づくとヤバいぐらい「解像度低っ！」となってしまうことが多いので気をつけたいポイントです。
![スクリーンショット 2023-02-12 22.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/1f49d44b-0c78-3e17-f249-dd88aaaebded.png)
↑の中央の四角の部分に影を入れたかったので、四角の部分を↓のUVマップでは大きく設定して、四角の部分の解像度を上げました。
![スクリーンショット 2023-02-12 22.08.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420008/fb42f747-f165-7aa4-e880-a1295e7d33d5.png)

### まとめ

データの大きさを下げながら、クオリティの高いVRワールドをつくるというのは「制約」ですが、その制約が、演出上プラスになればと思っています。

僕は、よくインディーゲームを見て研究しています。工数や人手がAAAタイトルと比べてはかけられない、だからこその演出の工夫がされているものが多いからです。特に好きなのは、「Road96」「RiME」「Firewatch」「アンリアルライフ」で、どれも素晴らしい演出でした。

他にも、コツはいろいろあると思います。
あくまで一例ということで、どなたかの何かの参考になれば嬉しいです。