7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【NeosVR】アバターの明るさをコンテキストメニューから切り替えられるようにする

Posted at

2021-07-30 13.47.17.jpg
こんにちは(ピカー)

ユーザーが自由にワールドをアップロード出来るNeosVRやVRChat、Clusterなどでは環境光設定がワールド投稿者毎に異なるため、場所と使用シェーダーの組み合わせによっては上図のようにアバターの表示が酷い状態になるという問題があります。

NeosVRでは特にXiexeToonShaderを使用している状態でRenderQueueの値を2501に設定した場合に発生しやすくなります。
かといってデフォルト値の-1に戻すと今度はPostProcessの影響を受けるようになってしまい、アバターに陰影が発生し印象が変わってしまいます。

20210730165530_1.jpg
白飛びは反射光が強いことが原因なので、AlbedoColorの設定値を低くすることで明るさを抑えることが可能です。

20210730171845_1.jpg
が・・・そうすると今度は暗いワールドへ行った際に真っ黒クロスケ・・・は言いすぎですが暗さが気になってしまいます。
自分一人だけならまだいいのですけど、正常な色の人と一緒にいると本当に気になります・・・。

環境光自体を調整するというのもNeosVRなら可能ではありますが、セッションでの権限が必要であること、環境光の調整は他人のアバターに影響を与えてしまうことなどから自分のアバター側を調整出来るようにするのが良いと思っています。

path4529.png
そのため、このようなコンテキストメニューを作成し、マテリアルのAlbedoColorを変更できるようにすることでアバターの明るさを自分で切り替えられるようにします。

###補足
20210730160221_1.jpg
AlbedoColorはXiexeToonでは単にColorという名前になっています。

#前提条件
シェーダーの設定値を変更する必要があるため、マテリアルがアバターオブジェクトの中に組み込まれている必要があります。
組み込まずに設定した場合、おそらくその場では動くのですが再度アバターを着た際にマテリアルの参照が外れ、動作しなくなるはずです。

context_2.png
マテリアルをアバターオブジェクトの中に組み込む簡単な方法として、モデルインポート時にアセットをオブジェクト内に入れるオプションにチェックを入れるという方法があります。

20210730144416_1.jpg
チェックを入れてインポートした場合、CenteredRoot配下にマテリアルが格納されています。

もし、現在使用しているアバターがモデルインポート時該当オプションにチェックを入れておらず、再度モデルインポートしてその他の設定をするのも嫌という場合は

ComponentCloneTipを使ってシェーダーコンポーネントを1個ずつアバターオブジェクト内に移動
→MeshRendererの参照マテリアルを修正

とすることでマテリアルがアバターオブジェクトの中に組み込まれた状態にできます。

#コンテキストメニュー作成
コンポーネントを使用し、コンテキストメニューを作成します。

##1.スロット作成

管理しやすくするため、アバターオブジェクト配下にContextMenuという名前で空オブジェクトを作成し、更にその配下にAlbedoColorという名前で空オブジェクトを作成します。
20210730151249_1.jpg

##2.コンテキストメニュー項目作成

###コンポーネント追加
手順1で作成したAlbedoColorスロットに以下のコンポーネント6種を追加します。

①RootContextMenuItem
Radiant UI
->Context Menu
->RootContextMenuItem

②ContextMenuItemSource
Radiant UI
->Context Menu
->ContextMenuItemSource

③SpriteProvider
Assets->
SpriteProvider

④ButtonValueCycle<color>
Common UI
->Button Interactions
->ButtonValueCycle<T>
->color

⑤ValueMultiDriver<color>
Relations
->ValueMultiDriver<T>
->color

⑥ValueTextFormatDriver<color>
Utility
->ValueTextFormatDriver<T>
->color

###コンポーネント設定

20210730154508_1.jpg
コンテキストメニューに項目を追加するため、RootContextMenuItemのItemにContextMenuItemSourceをセットします。
追加された項目はボタンとなり、メニューを開いて押すことでボタンイベントが発生します。

20210730155907_1.jpg
アイコンを設定出来るようにするため、ContextMenuItemSourceのSpriteにSpriteProviderをセットします。

20210730160054_1.jpg
SpriteProviderに任意のテクスチャを設定します。
ここで設定したテクスチャがコンテキストメニュー上で表示されるアイコンになります。

20210730161938_1.jpg
ButtonValueCycle<color>のValues(list)でAddボタンを押下し、AlbedoColorの組み合わせをいくつか用意します。
必要な数値や設定数などはあなたの使用アバターや好みで大きく変化します。今回は0.9、0.7、0.5の3つの組み合わせを用意します。

20210730162259_1.jpg
複数マテリアルのAlbedoColorを一括で変更したいため、
ButtonValueCycle<color>のTargetValueにValueMultiDriver<color>のValueをセットします。

20210730163025_1.jpg
ValueMultiDriver<color>のValueをValueTextFormatDriver<color>のSourceにセットします。

20210730163314_1.jpg
ValueTextFormatDriverのFormatに「AlbedoColor<br>{0}」と入力します

20210730163555_1.jpg
ContextMenuItemSourceのLabelをValueTextFormatDriverのTextにドライブします。
これにより、コンテキストメニューからAlbedoColorの現在値を確認出来るようになります。

20210730164244_1.jpg
ValueMultiDriver<color>のDrivers(list)でアバターの明るさを変更したいマテリアルの数だけAddボタンを押下し、各マテリアルのColorをドライブします。

これで設定作業は終わりです。LogiXは必要ありません。

20210730164918_1.jpg
この時手順通りに実施していくとColorの値が[0,0,0,0]で設定され真っ暗な状態になりますが、ButtonValueCycle<color>は一度コンテキストメニューから選択されるまで値の書き換えを行わないため正常な動作です。問題ありません。

##3.動作確認
設定したアバターを着て、コンテキストメニューを開きます。

20210730165351_1.jpg
AlbedoColorの項目が増えているので、選択します。

[0.9;0.9;0.9;1]
->[0.7;0.7;0.7;1]
->[0.5;0.5;0.5;1]
->[0.9;0.9;0.9;1]以下ループ・・・とAlbedoColorを変更出来るようになっています。

20210730165510_1.jpg

20210730173101_1.jpg
NeosFesta3のテンプレートテーマ「海岸」では0.5に切り替え、同じくNeosFesta3のテンプレートテーマ「Cube」では0.9に切り替えというように使えば良いですね。

正常動作が確認できたらアバターを保存して完成です!

#おわりに
これで様々な環境光に対応出来るようになりました。
手間かもしれませんが、ワールド巡りやNeosFesta3などたくさんのワールドを読み込む場面ではきっと役に立つと思います。みんなとの記念撮影で自分だけ真っ白・真っ暗とかは避けたいですしね。

また、コンテキストメニュー項目の作成はたくさんの応用が出来ると思いますので、あなただけの便利な機能を作ってみてください。
私はDynamicBoneのOn/Offなども作成し、活用しています。
LogiXのトリガーもButtonEventに繋げますので簡単に行えます。

それでは。

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?