XiexeToonマテリアル完全攻略!【NeosVR】
はじめに
※(10/9追記)Resonite向けに来た方へ：この記事は本来はNeosVR向けですが、UIや操作感等が似ているため、参考になる部分も多いかと思われます。
resoniteにはカラースペースのリニア化や影の解像度の向上、SSAOの軽減などトゥーンシェーダにとってメリットの多いアップデートを含みます。
当記事はNeosVRにてアバターセットアップを自分でやってようとする際に必ずぶつかる壁である「XeixeToonの設定多すぎわからん」問題の解消または軽減を目的とした記事です。
なお、アバターはXiexeToonで作成済みの想定です。（まだの人はこれ読む）
紹介するパラメータを重要なもののみに絞っておりますが、それでも情報量が多いので、手始めに最低限これだけ設定して！というパラメータに(★)を付けています。
違和感の強い影、血色の悪さ、髪の裏側の描画が改善されている。
対象読者
アバターの設定を自分で調整してみたい、または一度セットアップした/してもらったアバターの設定をより追い込みたいという初心者・中級者をメインのターゲットとし、
今まで雰囲気で設定していたが、XiexeToonへの理解をより深めたいという既存NeosVRユーザも対象読者としています。
付録1 ざっくり用語集
超初心者向け。だいたいこの辺の用語を使って解説したり、調べると情報が出て来ます。
シェーダー: 3D物体の光の当たり方などをどういう風に描画するか？を定義したプログラム。XeixeToonもシェーダーの1種。
マテリアル: 3Dの物体の色や質感を表現するテクスチャなどを定義するものです。
メッシュ: 3Dの物体の形状を定義するものです。頂点のデータを含みまあす。
3Dモデルはこのメッシュ、マテリアルシェーダーの３つテクスチャ: 色を記録した画像ファイルです。
そのまま色情報のほか、○○Mapや○○Maskと名付けられたテクスチャ画像では色情報(R,G,B,Aの各チャンネル)のデータ領域を使用して、表面の凹凸や、後述のマスクなど様々な情報を格納している場合もあります。マスク: 効果をかける所、かけない所を指定するもの。真っ白と真っ黒の2色か、グラデーションであることが多い。
トゥーン: アニメチックな画風のこと。対義語にリアリスティックなど。「トゥーンシェーダー」で「アニメ調の画風を表現する描画プログラム」のこと。
シャドウ: 影。光が当たっていないところ。また、Neosでは光源の中の「ShadowType」という項目で、モデルに対して影を生成するかを指定する事ができ、「Soft(滑らかな影)」、「Hard(鋭い影)」、「None(無し)」から選択できます。
XiexeToon:NeosVR(およびResonite)で使用されるトゥーンシェーダーの名前です。
元はXiexe氏が開発したオープンソースのUnity向けシェーダ「Xiexe's Unity Shader」、通称XSToonを少しカスタマイズしたものを使用しているはずです。
元のUnity向けパッケージはこちらで配布しています。
XiexeToonの発音の仕方は謎です。シェイクストゥーン、ゼクシートゥーン等々、ユーザやコミュニティによりぶれています。
XiexeToon 各パラメータの説明
XiexeToonの各パラメータについて、アバター設定時に調整することの多い主要な項目を上から順に説明します。
(★)...最低限これだけ設定して！というパラメータ
MainTexture(★)
色の情報が載っているテクスチャをここに入れます。
ColorのRGBAの値を操作する事で色調を変更する事ができます。
髪の毛や衣服などのメッシュが分かれている場合、こちらで簡易的な色改変も行うことが可能です。
Blend Mode
MainTextureに透過または半透明の素材を含まない場合、初期値のOpaqueから変更する必要はありません。
透過素材を含むマテリアルが分離されているか、テクスチャにアルファ情報が含まれる場合、Alphaに変更する事で透過させることが出来ます。（マテリアルが分離されている場合、Colorの値のR,G,B,Aのうち最後のAの値を変更することで透過させる事ができます。）
※AlphaMask Mapの使用法や、MainTextureに半透明の素材が含まれる場合→「付録5」を参照
NormalMap
疑似的な凹凸を表現し、立体感を強調するための画像です。青紫っぽい画像です。
衣服についてくる事が多いです。
MetallicGlossMap
金属のような反射と光沢を指定します。金属パーツや滑らかな素材を含むアバターでは用意されていることがあります。
MetallicGlossMapで金属光沢を表現したい箇所を指定したテクスチャを指定したのち、Metallic、Glossinessの数値を上げることで金属光沢感の表現ができます。
・Metallic …金属感の強さ。数値が高いほどMainTextureで定義された色を無視し、Glossinessの影響を受けやすくなります。
・Glossiness …表面の滑らかさ。数値が高いと周囲の風景を反射するようになります。
RefrectionProbeが設定されている場合RefrectionProbeを、そうでない場合はSkyboxを反射します。
（・Refrectivity …※動作していない模様）
※透過情報を含まないMetallic Map、SmoothnessMap、RoughnessMapはそのままでは使えません。パッキングの必要があります。
チャンネルのマッピングはPBS Metallicと同じく、R=Metallic,A=Gloss/Smoothnessです。
テクスチャで指定された箇所が完全な鏡面になっている。
MainTextureの色が無視され黒くなっている
EmissionMap
発光する部分を持つ箇所を指定します。髪のエンジェルリング（光沢）や、メカ・サイバー衣装の発光部分に指定されている事が多いです。
EmissionMapにテクスチャを指定したあと、「EmissionColor」を0以上にすることで発光します。（R,G,B,A=1,1,1,0で白く光ります。）
RimColor
画面から見た3Dモデルのフチを発光させたり、影が落ちる範囲を指定します。
RimColor : フチの色
RimIntensity : 効果の強さ
RimRange : 効果をかける範囲
RimSharpness : 効果がかかり始める鋭さ
Matcap
あらかじめ反射や光沢のパターンが書き込まれた球体の画像ファイルを用意することで、周囲の光源に左右されることなく反射・光沢の表現が可能です。
MatCap Tintで色合いや全体に掛かる強さを調整することができます。強めに出ていると思ったときは、RGBをそれぞれ「0.5」にしてみるなどしてみましょう。
※この場合、Metallicの値を上げるとより金キラが目立つようになります
OcculusionMap
凹部などの陰影を強調するための白黒の画像を入れます。衣服などにたまに付いてきます。
※AO、AO Mapなどとも呼ばれることが多いです
それぞれOcculusionMapのある・なしの比較。
Outline
Outlineを「None」から「Lit」などに変更し、
OutlineWidthを「0.01～0.1」などに調整することで、モデルの輪郭に線が引かれるようになります。
アニメチックな表現や、キャラクターが背景から浮き出て見える効果があります。
OutlineMask
上記のOutline(輪郭線)が入る場所、入らない場所を白黒の画像で指定することができます。
目や口の周りなど輪郭線を入れたくない場所が指定されている事が多いです。
ShadowRamp(★)
モデルに影が落ちるときに生まれる影のグラデーションのパターンをここで指定します。
デフォルトだと灰色で段階がはっきり分かれたShadowRampが入っているため、くっきりしたグレーの影が落ちます。
これが人物などの場合だと極めて血色が悪く見えてしまうため、「Clear」を押して丸ごと消すか、少なくとも変更することを強く推奨します。
ShadowSharpness(★)
影が入り始める鋭さを指定します。
ワールドやアイテムによっては光に影が落ちる設定が入っており、その際の影の付き方を指定するパラメータです。
上げるほどパキっとした影になりますが、人物などでは違和感が強いため「0」推奨です。
SubsurfaceColor
半透明の物体など、光が表面を通過した様子を表現することができます。
例えば、人物の皮膚下を流れる血液を表現するために赤色などを設定すると、血色がよい表現になります。
SubsurfaceScaleで表現の強さを変更できます。
Culling(★)
メッシュを「裏側から見たとき」に描画するかをここで指定することができます。
デフォルトの「Back」だとスカートの裏側や裏側から見た髪の毛が描画されないので、衣服、髪のメッシュについては「Off」を指定することを推奨します。
付録2 そもそもインスペクターの使い方
そもそもインスペクター、マテリアルの球ってどうやって使うの？という人向けに、簡単に画像メインで操作方法を解説します。
DevToolTipの取り出し方
インスペクターの開き方
インスペクターはゲーム内オブジェクトの情報を表示するパネルです。オブジェクトの中には、コンポーネント（構成要素）が並んでおり、アバターのマテリアルを編集するには「SkinnedMeshRenderer」というコンポーネントを探す必要があります。
NeosVRはオブジェクトが階層になったヒエラルキーツリーと呼ばれる画面とインスペクターが一体になっており、「↑」ボタンで上位の階層に移動したり、オブジェクト名の横の「▶」ボタンを押して下位の階層を表示させ、オブジェクト名をダブルクリックしてインスペクターの右半分で表示させるオブジェクトを変更することができます。
マテリアル設定画面の開き方
マテリアルの設定を変更するのに必要な「SkinnedMeshRenderer」は通常、「アバターのroot（○○.fbx、××.gltfなど）」＞「RootNode」の配下にメッシュごとに並んでいます。各メッシュの名前（「Body」など）をダブルクリックして、インスペクターの右側に情報を表示させます。
すると、「Materials(list):」と表示されたエリアがあり、そこに適用されたマテリアルが１つ、または複数並んでいます。
それぞれの「↑」ボタンを押すと、マテリアルの設定パネルが表示されます。
マテリアル設定画面の使い方
アバターに新しくテクスチャを適用するには、Neosにドラッグアンドドロップで読み込ませた画像をグラブ（掴む）して、
・VRモードならグラブした手と反対側の手で適用したいテクスチャのスロット（枠）に合わせてトリガ
またはグラブした手のまま、インスペクターの向こう側にテクスチャを重ねるようにして、枠にレーザーを合わせてトリガ。
・デスクトップモードなら、インスペクターの向こう側にテクスチャを重ねるようにして、枠にレーザーを合わせてクリック。
テクスチャだけでなく、SkinnedMeshRendererのMaterialsへマテリアルオーブを適用する際も同じ操作で適用可能です。
マテリアルオーブ(球)の取り出し方
各パラメータや、テクスチャの割り当て情報を格納したマテリアルはオーブ(球)の形でアイテム化されます。設定したマテリアルを取り出したい場合は、「SkinnedMeshRenderer」の「Metarials(list):」の下の一覧から、取り出したいマテリアル名でグラブ(右クリック)すると手元にオーブが手にくっついたような形で出現します。
そのまま、何もないところでグラブを放すことでオーブをその場に出すことが出来ます。
【補足】Orangeさんが上げている動画内でマテリアルインスペクターの操作をする場面があります。UIが古いのですが、迷った時の参考になるかも。
付録3 これ無いの？シリーズ
XiexeToonの機能についてよく質問される事項をまとめました。
AlphaMask
→「付録5」にて解説します。MatCapMask
ありません。（※MeshをBlenderなど外部で分割する事でなんとかできる説もあります）→知見メモメッシュごとの明るさ自動調節
機能としてはありません。
SkinnedMeshRenderer内のProxyBoundsSourceをProxyにして任意のひとつのMesh（顔や体）を指定するとおおむね改善します。
完全に解決するには→知見メモ1影、2影の色指定、影の境界色
ShadowRampにて任意の影の色・境界を使ったグラデーション表現が可能です。Fur(毛皮)
一応ファーシェーダーは存在しますが、あまり綺麗な見た目にならないため非推奨です。宝石シェーダー
ありません。UVスクロール
条件によっては可能です。「付録4」にて解説します。手や顔を近づけると影が出る（※Resonite非対応）
NeosVRのポストプロセスでScreenSpaceAmbientOcclusion=SSAO（物体同士が近くと落ち影が出るエフェクト）がデフォルトで有効なために起こります。
MODの導入によりOFFが可能です。
→デリシャスカメラ＆ReFractでエモい写真を撮ろう！ - neos search ネオスサーチ！
その他については、以下コミュニティの人間に質問すると答えが見つかるかも知れません。
また、過去に質問された履歴があっても、時間が空いている場合、最近新たな発見が起こっているかもしれまん。重複も恐れず、気軽に質問してみましょう。
NeosJapan Discord
NeosVR着付けフォース
付録4 UVスクロールのやり方
回転部分のメッシュやテクスチャが分離されていれば、「Panner2D」というコンポーネントを使用することで可能です。
以下、実装例を示します。※よっしーさんに感謝！
① マテリアルのあるスロットのインスペクターの下部の「コンポーネントをアタッチ」のボタンから図の順に選択してゆき、「Panner2D」をアタッチします。
② スクロールさせたいテクスチャ画像のオフセット値（例では「MainTextureOffset」）の項目の名前をグラブで掴み、先ほどアタッチしたPanner2Dの「_target」の値（初期値は「null」）に重ねて、グラブを離すと代入されます。
③Panner2Dの「_speed」のx,yにそれぞれスクロール速度の値を入れます。
まず試しに「1」などを入れてみて、望む見た目になるまで調整してください。
より詳細なPannerの使い方は以下の動画を参考にしてください。※英語
付録5 AlphaMaskの使い方
XiexeToonでAlphaMaskやAlphaを含むテクスチャを使用する場合、下準備となるチャンネルパッキングと、設定後にSortingOrderの変更が必要です。それぞれの具体的な設定方法を以下で解説します。
BlendModeによる透過の比較。Alphaでは前髪を透過して奥側の目も見えている
チャンネルパッキング
Unity用のトゥーンシェーダーでは独立したAlphaMaskテクスチャ画像を使うのが一般的ですが、XiexeToonでAlphaMaskはそのまま使う事ができません。
使用する場合は、MainTextureで使用するテクスチャ画像に透明度情報をチャンネルパッキングする必要があります。
上記を行った上、XiexeToonのBlendModeを「Alpha」へ変更することで、AlphaMaskによる透過表現が可能です。
パッキングはPhotoshopやCLIP STUDIOなど画像編集ソフトを使うのが一般的ですが、
今回の記事をきっかけにkazuさんにWebブラウザですぐに完了する便利なツールを用意頂きましたので、ここで紹介します。
青、赤の枠内にそれぞれの画像をドラッグアンドドロップすると、下にパッキング後の画像が出力されます。（読み込んだ画像は外部と通信していないため、安全です）
SortingOrderの変更（※resonite要検証）
AlphaのBlendModeを持つマテリアルは仕様上、そのままでは別のAlphaマテリアルや、インスペクターが重なった場合に完全に透明になってしまいます。
目立たない部位であれば無視してもよいですが、前髪などに透過設定が入っている場合、髪が丸ごと透明になり、強い違和感に繋がってしまいます。
Alphaのマテリアル(スカート、上着の袖)が完全に透明になってしまう
これを避けるため、SkinnedMeshRendererコンポーネント内の「SortingOrder」にインスペクターの持つ「-32000」よりも低いSortingOrderを指定してやる必要があります。例えば、「-32768」などを入れます。
（インスペクターなんでそんなに低いの・・・？）
付録6 デスクトップモードの切り替え方
マテリアルの設定のような長時間の細かい作業などの際、VRだとしんどい時があります。
そういう場合は、キーボードの「F8」キーを押すと、デスクトップモードへ瞬時に切り替える事が可能です。VRに戻りたい場合は再度F8キーを押します。
デスクトップモードの操作方法(NeosVR 日本語Wiki)
ぶっちゃけこの記事のような作業はデスクトップモードでやった方が楽です。。。そして誰もVRしなくなる
※もし切り替え後に音やマイクが聞こえなくなった場合は、「設定」→「音声入力/出力デバイスを選択」から正しいデバイスを選択し直してください。
付録7 実際の設定例・紹介ワールド
※(10/9追記)Resonite用の実際の設定例は
「akiRAM Public/XiexeToon設定例」にて一部配布しています。以下URLをコピペで出てきた板をインベントリに保存すると、インベントリからフォルダが開けます。
resrec:///U-akiRAM/R-9ed95a55-08c6-408d-87cb-9a5d62fc3f61
以下内容はneos向け
「JP Public/個人」配下にある公開フォルダ「akiRAM Public」にて実際の設定例を公開しています。
私が普段使用している XiexeToon マテリアルの設定値を akiRAM Public にて公開しました。
— akiRAM (@akiram_vr) October 22, 2022
血色の良さを意識して調整したものです。調整の際のパラメータの参考にお使い下さい。
既にAkatsukiさんが同様の設定例を公開されてますので、アバターや求める表現で合う方を設定するのがよさそう。#NeosVR pic.twitter.com/VMcPpffFyZ
「JP Public」フォルダはJPチュートリアルワールドにて配布しています。
また、以下のURLをNeosの画面でコピペするとフォルダが出て来ますので、「インベントリに保存」すると該当フォルダへのショートカットになります。
neosrec:///U-akiRAM/R-c2d318f2-85e5-4b47-9153-04fcf72ac9fc
また、実際に設定済のアバターが閲覧できるワールドを公開しました。
※Tanossyさんに感謝！
以下のURLをNeosの画面上でコピペするか、「公開ワールド」タブで「xiexetoon」などと検索してください。
neosrec:///U-akiRAM/R-a9846f3d-5251-44d3-8829-b25b050df6e7
付録8 マテリアル間のパラメータの一括コピーツール紹介
※(10/9追記)Resoniteでは色のコピーが動かないそうです。
顔のマテリアルのパラメータ設定を追い込んだ後、身体のマテリアルへ全く同じパラメータを入れるのが面倒・・・そんな時、よっしーさん作の以下のアイテムが便利かもしれません。
ちなみに上記「XiexeToon設定例」ワールドに設置させて頂いております。
MMCのワールドを公開しました！
— よっしー@VRでTRPGを遊ぼう！ (@trpg_yoshi) February 18, 2023
XiexeToonマテリアルの設定を一括コピーできるツールです。#NeosVR #MMC #MMC23
[MMC23] XiexeToon Replicatorhttps://t.co/cIyvmcgy8y pic.twitter.com/V5YkqHUMds
付録9 顔と身体などの明るさがバラバラ対策
光源が複数ある場所において、顔や身体、髪・服などのパーツによって明るさがバラバラになり、違和感が生じてしまう場合があります。
これは、パーツごとに分離されたメッシュが、メッシュごとに明るさを計算してしまう事に起因します。
設定で、どれか一つの部位のメッシュを計算元として指定することでかなり軽減されます。（完全に解決しない場合もあります）
例えば、「顔・体・髪・服」でメッシュが分かれている場合、明るさの計算元を「体」などに指定してやることで、「髪」に光源が近づいた場合に常に「体」の明るさを参照し続けることで、部位ごとに明るさのバラついてしまう現象を押さえます。
やり方を以下で解説します。
1.アバターのインスペクターを開き、部位ごとに分かれた「SkinnedMeshRenderer」を探します。（「Centered Root」>「RootNode」などの下にあることが多いです）
2.「SkinnedMeshRenderer」の設定項目の「BoundsComputeMethod」を「Proxy」に変更します。
3.ひとつ下の設定項目、「ProxyBoundSource」に参照させたいSkinnedMeshRendererのコンポーネント名をドラッグアンドドロップして指定します。
これを各メッシュ行うことで、全身を通して統一感のある明るさを維持できます。
この方法でも解決しない場合、Notion Tipsの「複数のSpotLightの境界でアバターのメッシュごとに色が全然ちがう問題に対処」が役に立つかもしれません。
おわりに
ここで紹介されない項目については、Unityや、他のシェーダーのドキュメントを参照すると理解が深まるでしょう。
まずこれを読む
マテリアル(シェーダー) - NeosVR日本語Wiki
トゥーンシェーダー系でドキュメントが非常に充実しているもの
ユニティちゃんトゥーンシェーダー 2.0 v.2.0.9 マニュアル
Sunao Shader 解説書 - Sunao Shader とは
NeosVRのレンダラーエンジンでもあるUnityの、より一般的なマテリアルの解説（NeosVRにおけるPBS Metallic/Specularが相当）
マテリアルパラメーター - Unity マニュアル
難しい無理！めんどい！と思ったら、NeosVRの日本語コミュニティへ助けを求めてみるとよいでしょう。特に、「NeosVR着付けフォース」では、多数のアバターをNeosVRへ導入してきた経験豊富なユーザ達がセットアップの手伝いをしてくたり、様々な技術的な相談に乗ってくれます。お気軽に質問等してみてください。※(10/9追記)「NeosVR着付けフォース」はユーザのResonite移行につき活動終了だそうです。
またResoniteについての質問はResoniteJapan Discordで質問するのがよいでしょう。
記事内で例に使わせて頂いたアバター
オリジナル3Dモデル ハオランーHAOLAN - かなﾘぁさんち
VRChat向けオリジナル3Dモデル「ミュオン」NeosVR対応 - FLASTORE
おわり