見出し画像

【VRM】動くオブジェクトの仕組み

W@(ワット)

本記事では自分がアバターで使用している
動くオブジェクトの仕組みについて解説していきます。

解説対象

今回は、アバターマーケットで販売予定の
PartyOKAMEを元に解説していきます。

UVスクロールについて

先にネタバラシをすると、動くオブジェクトは
VRMのシェーダーであるMToonのUVスクロール
という機能を使っています。

UVスクロール

UVスクロールとは、名前の通りUVをスクロールする機能で、
MToonのマテリアルのAutoAnimationの項目に
スクロール速度の設定があります。

設定箇所

動いてるように見える理由

動くオブジェは、UVスクロールを使ってパラパラ漫画のように、
見える状態と見えない状態を切り替えることで
あたかも動いているように見せています。

例えば、PartyOKAMEの怒りマークだと、
微妙に形を変えた3つのパーツを重ねたうえで
一つずつ表示することで微妙に振動しているように見せています。

実際は3つのマークが重なっている。
振動しているように見える

動くオブジェ用のテクスチャ

UVスクロールを使用しているため、
どんなテクスチャでも対応できるわけではありません。

PartyOKAMEの場合は、以下のようになっており、
動かないところは縦一列全部同じ色。
動かすところは表示させるところだけ色をつけ、その他は透明
というようになっています。

このテクスチャを縦にスクロールする

動かす用のUV配置

専用のテクスチャが必要ということは、
オブジェクト自体も専用のUVも必要になるということです。

ここからは自分が使用してる2つの方法について解説します。

方法1:UV縦並べ

縦並べとは先程の怒りマークなどに使っており、
パーツすべてが同じ色のときに使用します。

例えば、怒りマークだと、
下図の赤い丸で囲まれたオレンジ色の点がマークそれぞれのUVをまとめたものになっており、このUVがスクロールすることで表示が切り替わります。

UV配置例
UVを動かしている様子


方法2:UV横並べ

UV横並べとは、PartyOKAMEのFUN/JOYの表情に使っており、
パーツによって色が変わるときに使用します。

この場合テクスチャも少し特殊なものとなり、
PartyOKAMEの場合以下のように階段状のテクスチャを
使うようになります。

JOY/FUN専用テクスチャ

そして、UVもこれに合わせた形で
横一直線に並べるようにします。

この状態でUVを縦に動かすことで
先ほどと同じように動いているように見せる事ができます。

UV配置例
UVを動かしている様子

テクスチャ/UVの制限

今までの説明で分かる通り、動くオブジェクトのUVは
一直線or一点の配置でないといけません。
なので使えるテクスチャも、
単色orグラデーションのみということになります。

※動かさないところに関してはMaskテクスチャを用意するなど
することで、普通にテクスチャを使うことができます。

テクスチャの設定

動くオブジェクトはテクスチャで表示非表示を切り替える特性上、
テクスチャがぼやけると違和感のある動き方になる場合があります。
(オブジェクトが2つ表示されるなど)

なので、テクスチャの設定で
GenerateMipMap(カメラから遠い場合テクスチャをぼかす機能)をOFF
FilterMode(テクスチャをぼかすフィルタ)をPoint(処理なし)
にしておくことをおすすめします。

※UV同士の間隔が十分に広いorテクスチャが十分に大きければ
そんなに気にする必要はないと思われます。

推奨設定

ちなみにUniVRMで自動生成されたprefabを使用すると
上記の設定がリセットされているので、手動で変える必要があります。

マテリアルの設定

マテリアルに関しては、RenderTypeをCutoutにする
(透明度がしきい値未満の場合全て透明にする)
以外は特に制限はありません。

Cutoutにする

clusterにおける制限

動くオブジェクトは大量のオブジェクトを表示非表示する関係上、
多くの頂点を必要とします。

ただし、clusterでは一定のポリゴン数を超えると自動的に処理が入り
表示が崩れてしまう場合があります。

検証はできていませんが、およそ3万ポリゴンを超えたあたりから
制限がかかる気がします。

また、テクスチャに関しても制限があり、
解像度の高いテクスチャを複数使用していると圧縮がかかり、
解像度が小さくなる場合があります。

なのでテクスチャは512x512を13枚程度に押さえておくことをおすすめします。

(比較的)簡単に回転するオブジェクトを作ろう

最後にBlenderを使用して(比較的)簡単に回転するオブジェクトを作りたいと思います。

1.回すモデルを用意する

今回はBlenderにデフォルト生成できる猿のモデルを使います。

名前はスザンヌちゃんです(公式)

2.テクスチャを用意する

スザンヌのモデル似合わせて以下のようなテクスチャを作成しました。

1/16だけ色があり他は透明になっている

3.UV展開する

モデルをUV展開してテクスチャの位置に合わせましょう。

横一直線になるようにする

4.エンプティを用意する

配列複製用のエンプティを用意します。
位置はスザンヌの原点と同じにしましょう。

オレンジ色の線がエンプティ

5.配列複製モディファイアーを設定する

スザンヌに配列複製モディファイアーをつけて
以下の画像のように設定します。

設定項目

この時点で変な複製のされ方をしている場合、

  • エンプティの位置がスザンヌの原点と同じになっているか？

  • エンプティ/スザンヌの回転がすべてゼロになっているか？

  • エンプティ/スザンヌのスケールがすべて1になっているか？

を確認してください。

回転/スケールを確認

6.エンプティを回転させる

エンプティを選択し、Z回転を360/16にしてください。
すると、16体のスザンヌが等間隔に複製されます。

悲惨な見た目ですが正常です。

7.ExportしてUnity上で設定する

普通のモデルと同じようにエクスポートし、
記事の通りにマテリアル等を設定します。

8.完成

これで動くオブジェは完成となります。
あとは既存のアバターに組み込むなどをして、カスタマイズしましょう！

よく回ってます

最後に

いかがだったでしょうか？
結構、疑問に持たれることが多かった動くオブジェクトですが
蓋を開けてみれば意外とシンプルな仕組みだった
と感じた人が多いのではないでしょうか？

今回は説明を省きましたが、この方法を利用することで
位置/回転移動・拡大縮小・モデル変形などが可能となるので、
工夫次第では様々なことができると思います！

ぜひいろいろ試してみてください！

宣伝

最初にも説明した通りclusterで開催されるアバターマーケットにて
PartyOKAMEを出展します！

よければ買って使ってみてください！

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