見出し画像

【書きかけ】VRCアバター改編ステップからの部品化と減量について

 プレファブ化がどうのとかモジュラーアバターがどうのとか、機能とかソフトウエアの紹介はよく見かけるけど、結局どう使うのが再利用性とシンプルさのちょうどいいところなんだろうなあと思って書く記事です。アバターアップロードまでできたぐらいの人が対象です。前半はUnityの体系的な話と、VRCアバターのヒエラルキーの話をちょろちょろっとしてから、後半に具体的に私がいい感じだと思う素体改編の戦略について記述します。


Unityのオブジェクトとヒエラルキー

オブジェクト

 ユニティーのオブジェクトはシーンに設置できるもの全てです。オブジェクトはコンポーネントを持つことができ、コンポーネントによってそのオブジェクトに機能が付加されます。最もシンプルなオブジェクトは、位置と方向を示すTransformコンポーネントのみがついています。
 メニューにあるGameObject→Create Emptyとするとシーン上に追加されます。ヒエラルキーウインドウ(デフォルトでは左側にある)上に、GameObjectが追加され、それをクリックするとInspectorウインドウ(デフォルトでは右側にある)にそのオブジェクトの持っているコンポーネントが確認できます。
 ヒエラルキーウインドウで、導入済みのアバターをクリックするとTransformのほかにAnimatorと、VRC Avatar Descriptor, PipelineManagerが付加されているのが確認できますね。


fig1. オブジェクトの要素。オブジェクトはコンポーネントを持つことができる

ヒエラルキー

 オブジェクト同士は並列に置くこともできるし、親子関係を持つこともできます。ヒエラルキーウインドウ内で一段右側にある場合、それは一段左側のものの子オブジェクトであることを示しています。
 親子関係では、親のオブジェクトのTransformを変更する(動かす)と子はそれに追従します。

fig2. 並列関係と親子関係の図。Main Camera, Directional Light, Phys_Haolanは並列関係で、Phys_Haolan, Aamatureは親子関係を示す。

VRCアバターのヒエラルキー

ボーンとメッシュ

 fig2で示した図のように、アバターはArmature, Body, Body2, hairなどの子オブジェクトを持っています。Armatureはボーンを扱うオブジェクト、その他はメッシュを扱うオブジェクトです。
 メッシュは、点群に対して辺や面を定義したもので、画面に表示されるものと言い換えてよいと思います。Unity上では、Skinned Mesh Rendererコンポーネントでメッシュとマテリアルを指定して表示しています。また、メッシュは後述するウエイトと呼ばれる値も保持しています。マテリアルは、表面の色や透明度、光の反射率、光の散乱度合いなどをつかさどるものです。
 ボーンは位置と向きと大きさを持つ点群で、unity上ではTransformコンポーネントでそれを確認できます。ボーンは、メッシュに含まれる点に対してウエイトを持ち、ボーンを動かすとそのウエイトに従ってメッシュの点が動きます。ウエイトは1~0の値で、1であれば、ボーンを動かしたのと同じだけメッシュ上の点が動きます。メッシュの各点に、1~0の値が設定されているので、ボーンを動かすとボーンによく追従する点と追従しない点があり、これによりメッシュの見た目が変形します。
 このように、ボーンによってメッシュを変形、移動させることができますが、ボーンによってオブジェクト(の原点)は動きません。あくまで、オブジェクトの親子関係がオブジェクトを動かします。

fig3. 赤が親オブジェクト、青が子オブジェクト、黒点が子オブジェクトの原点、緑線は子オブジェクトのボーン。親オブジェクトを動かすとこオブジェクトが動く。ボーンを動かしてもそれに関連づいたメッシュは動くがオブジェクト(原点)は動かない。

 ちなみに、ウエイトの値を確認するUnityの標準機能はありません。

アクセサリーを追加する

アバターの特定部分にくっつけたいものはアーマチュアの下へ

 Neck(首)にアクセサリをつけることを考えます。fig2をさらに展開(fig4)して、Neckの下に、何らかのアクセサリ(メッシュ付きのオブジェクト)を入れます。これで、首の位置や角度に完全に追従するようになります。ですが、たいていの場合位置や角度が目的の場所にないため調整が必要になります。Transformを操作し、調整しましょう。

fig4. Armatureを展開し、Neckを探す。

服にアクセサリーを追加したい

 つけたい場所に一番近いボーンをアーマチュアから探してその子にしましょう。
 体じゃなくて、服の先っちょに何かをつけたい場合、服のオブジェクトの子にアクセサリのオブジェクトを持ってくればいいとなりがちですが、服にくっついて動いてはくれません。
 服のメッシュはボーンによって動かされており、親オブジェクトによって動かされているわけではないため、服のメッシュのオブジェクトに、アクセサリを子オブジェクトとして入れた場合、服のメッシュのオブジェクトの親との相対関係を維持したままアクセサリが固定されます。つまりアバターが移動するとアクセサリーはついてくるが、アバターが変形(手を動かしたり)してもアクセサリーはついてこないのです(fig3)。 

服を変える

服を消す

 服を消さないと二重に服を着ることになるため、元の服を消す必要があります。消したい服のメッシュのオブジェクトをヒエラルキーから選択し、fig5のようにTag部分のプルダウンメニューをEditorOnlyに設定しましょう。
 Tagと書かれた部分の上にあるチェックボックスでも消えますが、見えないだけでゲームのオブジェクトとして存在しているので、無駄にデータを多くアップロードする可能性があります。実際にどのような挙動かはvrcsdkの仕様次第ですが未確認です。

fig5. インスペクターのタグ設定の図。

 メッシュデリーターhttps://booth.pm/ja/items/1501527  というものもあり、オブジェクトとして独立していないけど消したい部分がある場合に活用するとよいでしょう。

服を着せる

 boothなどで入手した服には、アバターのようにメッシュのオブジェクトとボーンのオブジェクトで構成されています。
 1.非対応服として提供されているものは、まず見た目の位置をアバターと合わせましょう。このとき動かすボーンは浅い階層のものを優先して動かすとよいでしょう。例えば指先を先に合わせると次に肩を動かすと指の部分が肩のボーンの動きに合わせてさらに動いてしまいます。
 2.服の一番親のオブジェクトを、アバターのオブジェクトの子にします。avatar descripterコンポーネントのついているオブジェクトのヒエラルキーの下に入れるだけです。
 3.服のボーンを体のボーンの子オブジェクトにしていきます。一部ですが、以下のような入れ子構造にします。

hip(体)
┗┯chest(体)
 ┃┣shoulder(体) 
 ┃┗chest(服)
 ┗hip(服)

 このような構造にすることで、以下のように挙動します。
4つの作用が起こる。
・体のボーンが体のメッシュを動かす。(体が動く)
・体のボーンが体のボーンのオブジェクトの子オブジェクトの体のボーンを動かす。(体の一つ下の階層(末端方向)の体が動く)
・体のボーンのオブジェクトの子オブジェクトである服のボーンのオブジェクトを動かす。(服が動く)
・子オブジェクトである服のボーンが服のメッシュを動かす。(服が動く)

2や3の操作に相当することを自動で行えるモジュラーアバターhttps://modular-avatar.nadena.dev/ja  という便利なソフトがあります。

マテリアルの改変

シェーダーによる調整

 コンピューターグラフィックスは、2次元表示しかできません。なので、3dグラフィックスは、3次元上の点群から作り出した面(ポリゴン)を2次元に射影することでモニターに映し出されます。どの面がどの面の前にあるとか、ここにモノがあるからここには影がかかって最終的にこのピクセルの色はこの色だなとか、このポリゴンは透過素材なので薄く色を乗せるぞとか、遠くにあるから大気による散乱っぽくするためにぼやけさすぞとかそういうのを処理するのがシェーダーです。ポリゴンの色を決めたり、もシェーダーの仕事です。ほとんどのシェーダーは、難しいことをしなくても簡単に色味を調整したりできるようになっています。シェーダーはオブジェクトのSkinned Mesh Rendererコンポーネントで指定できます。VRCでよく使用されているシェーダーにliltoonがあります。fig6ではliltoonが使用されているアバターの、顔のオブジェクトのSkinned Mesh Rendererコンポーネントのshader部分を展開して表示しています。メインカラーと書かれた項目で、ポリゴンに張り付けられる画像データがまず指定され、その下に色調補正の項目があります。このゲージを操作することで、好みの色合いに変更することができます。fig6では頭のオブジェクトを指定していますが、例えば髪色を変えたいとき、髪のオブジェクトのシェーダー部分の色相のゲージをいじることで簡単に髪の色を変えることができます。

fig6. liltoonの色調整画面

テクスチャの改変

 シェーダーで色を変えることができますが、おおざっぱに全体の色を変えることしかできないため、細かな部分の色だけ変えたり、模様を追加する場合にはテクスチャの編集をする必要があります。テクスチャは画像ファイルで、色(アルベド)を指示したり、凸凹(ノーマル: 法線)を指示したり、表面の粗さ(ラフネス、スムースネス)を指示したりします。シェーダーのメインカラーの項目に登場した画像ファイルは、この中で色を指定するアルベドと呼ばれるものです。
 外部の画像編集ソフト(windows付属のpaintとか)で、元の画像をもとに、お絵かきをしたファイルを隣に置いてみました。左が元のファイルで、右がお絵描きしたものです。元のファイルは上書きせずに別の名前でprojectウインドウの中にドラックアンドドロップするとよいでしょう。

fig7. アルベドのおえかき。左が元のアルベド。右がお絵描きしたもの。
fig8. 元の目とか眉毛
fig9. 自分で描いた眼とか眉毛

 fig7のように画像が用意できたら、liltoonのメインカラーの項目のところにドラックアンドドロップするか、メインカラーの色のところをクリックして目的のファイルを選択するかして、元のファイルから、自分の作ったファイルに交換してみましょう。sceneビュー(デフォルトでは画面真ん中にあるウインドウ)で、自分の描いたものがポリゴンに反映されていると思います。この手順で、どんなに細かいところの色でも自分で編集することができます。

UV

 メッシュデータには、与えられた画像ファイルのどの位置が、どの位置のポリゴンに割り当てられるかという情報が含まれています。UVと呼ぶ理由は、3次元を表すときにXYZの軸を使いますが、その三次元上に作られた平面上でさらに座標を表したいときにU軸とV軸で表現するからです。
 どこに描いたら目的の場所にかけるかということを可視化するために、アバターによってはポリゴンの境界を線で示したUV画像を用意してくれていることがあります。これをお絵かきソフトのレイヤー機能などで重ねて自分の書きたい場所の目印にするとよいでしょう。

fig10. UVとアルベドをお絵かきソフトで重ねてみた様子

テクスチャの減量(そのうち書く)

メッシュの改変(blender そのうち書く)

削除、変形

ウエイト

ボーン追加

部品化

 服を着せたり、アクセサリーをつけたりしましたが、髪や顔は自分のアイデンティティーとして共通で使って、服やアクセサリーはほかのものに置き換えたりしたい。また、素体のバージョンアップがあったときに、アクセサリーや服の配置を個別で保存できていれば、手軽に素体をバージョンアップすることができます。ここでは、カスタマイズした素体+服、アクセサリーの二つの部品に分けることを行います。素体と服については、アクセサリーと同様に手動で分離できます。実際の運用としては、ここでは解説しませんがmodular avatarを使用することを考えるとよいでしょう。

コンストレイント

 アクセサリーを追加する節では、ボーンオブジェクトの子オブジェクトにすることでアクセサリーを体の動きに合わせて動かすことができました。しかし、階層の深い場所に入れ込むと前述のとおり素体のアップデートや使いまわしが難しくなります。そこで、親子関係の外に出す手順をここでは解説します。コンストレイントは、オブジェクトをほかのオブジェクトの位置や回転に依存させることができるコンポーネントです。

fig11コンストレイントでパーツを外だしするための解説画像。Chestを右クリックし、Create Emptyを行う。また、外に出したパーツをまとめるオブジェクト(黄色線で囲まれたオブジェクト)もアバター直下に作っておく。それぞれ名前は何でもよい。

 ここでは、Chestボーンの下にアクセサリを付けた想定でそのアクセサリを外に出すことを考えます。
 fig11のように、まずChest直下に空オブジェクトを作ります。名前は、この例ではFake_Chestとでもしています。
 次に、アバター直下にアクセサリーをまとめる空オブジェクトを作ります。黄色線で囲まれているのがそれです。
 次に、Chest直下においてあるアクセサリーのオブジェクトを、Fake_Chestの下に移動します。
 次に、Fake_Chestを黄色線で囲まれた空オブジェクトに移動します。最終的な階層構造としては、fig11のFake_Chestのような状態になります。
 次に、コンストレイントを設定します。Fake_Chestをクリックし、inspector上でAdd ComponentからParent Constraintを選ぶとコンポーネントが追加されます(fig12)。Constraint Settings->Sourceの下にある枠に、依存したいオブジェクト(もともと親だったオブジェクト)を入れます。☉マークからでも探せますし、ヒエラルキーからでもドラックアンドドロップできます。

fig12コンストレイントの例。Add ComponentでParent Constraintを追加した様子。

 以上で、コンストレイントの設定は終了です。オブジェクトの親子関係を分離し、部品(アクセサリー)を外に出しました。この状態でも、もともとの動きと同じように動くことを確認しましょう。

プレファブ

 アセットは、アセットウインドウからヒエラルキーウインドウやシーンウインドウにドラックアンドドロップしたときにオブジェクトになります。この状態でアセットのファイルを編集すると、オブジェクトに反映されます。それとは逆に、オブジェクトにした操作はアセットのファイルには一切影響を及ぼしません。オブジェクトは、アセットを見ているだけで触ってはいない、と表現して良いでしょう。シーン上で行った編集内容をファイルにすることで、編集状態を保存できます。そのファイルをほかのプロジェクトで使ったり、バックアップとして取っておけばオブジェクトを破壊的ないじり方をしながらいろいろ実験したりしても元に戻せます。オブジェクトをファイルにすることをプレファブ化といっていいでしょう。
 プレファブ化のやり方は、オブジェクトをアセットディレクトリにドラックアンドドロップ(fig13)するだけです。赤線はアバター全体を、黄色線はアクセサリーだけをプレファブ化しようとしています。

fig13.プレファブ化する方法。ヒエラルキーにあるオブジェクトを、アセッツウインドウにドラックアンドドロップする。アバター全体をプレファブにしたいなら赤線のオブジェクトを、アクセサリーだけをプレファブにしたいなら黄色線のオブジェクトをドラックアンドドロップする。

 プレファブ化したものを外にエクスポート(fig14)すると、見慣れたunitypackageファイルが作成できます。プレファブを右クリックし、Export Package…を選び、出現したウインドウで依存するファイルをすべて選択してexportするだけです。これで、ほかのvrcプロジェクトに簡単に持っていくことができるようになりました。

fig14.prefabをexportする様子。fig13で作成したprefabを右クリックして、Export Package…をクリックする。

いいなと思ったら応援しよう!