VRCアバターに無段階の透過を実装する手順

この手順ではAvatars 3.0環境のVRCアバターでExMenuから衣類の一部を透過無段階調整する方法を解説します。
現在の手順ではSunaoShaderが必須となります。
他シェーダーでの設定や動作確認はできていません。

■用意するファイルは以下の通りです。
・vrc_AvatarV3HandsLayer
・VRCExpressionParameters
・VRCExpressionsMenu
・各種テクスチャファイル
・透過用アニメーションファイル

vrc_AvatarV3HandsLayerは/Assets/VRCSDK/Examples3/Animation/Controllers にありますので別の場所にコピーします。
VRCExpressionParameters、VRCExpressionsMenuは右クリック>Create>VRChat>Avatars から作成します。
テクスチャとアニメーションファイルの作り方は後述します。

名称未設定 1

用意したファイルをアバターのVRC Avatar DescriptorのPlayable Layersに上図のようにセットします。

■ここからは透過についての手順を解説していきます。
透過させる場所を決めるためにアルファマスク画像を用意します。

画像2

右がアルファマスク画像です。
透過させたいオブジェクトのテクスチャの透過させたい部分を黒で塗りつぶしそれ以外の部分を白で塗りつぶしただけのファイルです。

画像3

透過させたいマテリアルをTransparentに変更し、Alpha Maskに上で作成したアルファマスク画像をセットします。Alpha Mask Strengthを0~1に動かして目的の部分が透過することを確認します。確認後は0(透過していない状態)に設定します。
この時一番下にある項目OtherのRender Queueを2500などに変更しておくと水に入った時でもだいたい消えなくなります。

右クリック>Create>Animation で空のアニメーションファイルを作り、名前をalphaに変更しておきます。
Hierarchyから設定中のアバターを選択し、Crtrl+Dで複製します。
設定中のアバターは非表示にし、複製した側でアニメーションファイルを設定します。
アニメーションファイルalphaを複製したアバタールートにドラッグ&ドロップし、複製したアバターを選択した状態でアニメーションウィンドウを開きます。

画像4

Add Propertyから透過させたいオブジェクトのSkinned Mesh RendererからMaterial._Alpha Mask Strengthを+で追加します。
透過させたいオブジェクトが複数ある場合には必要分追加します。
追加したらキーを設定します。0:00部分のキーを0に設定します。
0:01部分のキーを右クリックから追加して1に設定します。
1:00など他にキーがあれば削除します。
これでアニメーションファイルの作成は完了です。
複製したアバターを非表示にし、設定中のアバターを表示に戻して続きの作業を行います。

画像5

上でコピーしておいたvrc_AvatarV3HandsLayerを選択してAnimatorタブを開開きます。
Layersタブの右上にある+から項目を追加し、名前をAlphaMaskに変更しました。この時右端にある歯車のマークを開き、Weightを1に変更します。
Parametersタブでも右上の+から項目でFloatを追加し名前をalphaに変更します。

画像6

Layersに戻りAlphaMaskを選択した状態で真ん中のウィンドウのEntryの横で右クリックしCreate State>Emptyを作成します。
作られたNew Stateの名前を適当に変更し、InspectorのMotionに作成したアニメーションファイルをセット。
Normalized Timeの右側にあるチェックを入れ、項目にParametersで作成した項目名と同じalphaをセットする。

画像7

コピーしておいたVRCExpressionParametersを選択し、InspectorからParameterの空きにParametersで作成した項目名と同じalphaとFloatをセットする。

画像8

コピーしておいたVRCExpressionsMenuを選択し、InspectorからAdd Controlで項目を追加する。
TypeにRadial Puppetを指定し、Paramater Rotationに「alpha,Float」をセットする。
これで作業は完了です。VRC内のExMenuから実際に透過できるか試してみましょう。




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