見出し画像

XiexeToonマテリアル完全攻略!(Resonite版)

akiRAM

はじめに

どうも。akiRAMです。
Resoniteでアバターのセットアップをしようとして、XiexeToon（シェーダー）の設定項目の多さに絶望したことはありませんか？

「項目が多すぎて何から触ればいいかわからない……」 「とりあえず入れたけど、なんか思った通りにならない……」

設定項目はこの3倍くらいある

また、Wikiを見ても、情報が少ない・・・実践的な例が載っていない・・・！👇

この記事は、そんなResoniteアバターセットアップの“最大の壁”を乗り越えるための非公式ガイドです。

本記事ではXiexeToonのほぼ全てのパラメータを説明していますが、とにかく量が多いため、手始めに最低限これだけ設定して！というパラメータに目次上で(★)を付けています。
手っ取り早く設定したい方は（★）のところだけ設定すればOKです

※★の項目はMA-Resoを使用すると自動で概ね良い感じに設定されます。
MA-Resoを使用してアバターをセットアップした場合、気になるところが無い限り、手動セットアップは不要です。

デフォルト状態(左)と、最低限(★)の4項目の設定後(右)。 違和感の強かった鋭い影、血色の悪さ、髪の裏側の描画が改善されている。
同上

対象読者

アバターの設定を自分で調整してみたい、または一度セットアップした/してもらったアバターの設定をより追い込みたいという初心者・中級者をメインのターゲットとします。
また、今まで雰囲気で設定していたが、XiexeToonへの理解をより深めたいという既存Resoniteユーザも対象読者としています。

なお、アバターはXiexeToonで作成済みの想定です。まだの人は以下のまとめ記事を参考に、アバターのセットアップを先に済ませてください。

インスペクターって何？という方向けの記事はこちら👇

付録1 ざっくり用語集

だいたいこの辺の用語を使って解説します。

  • シェーダー: 3D物体の光の当たり方などをどういう風に描画するか？を定義したプログラム。XeixeToonもシェーダーの1種です。

  • マテリアル: 3Dの物体の色や質感を表現するテクスチャなどを定義するものです。

  • メッシュ: 3Dの物体の形状を定義するものです。頂点のデータを含みます。
    Resoniteの3Dモデルは、このメッシュ、シェーダー、マテリアルのデータを組み合わせて表示されています

  • テクスチャ: 色を記録した画像ファイルです。
    画像ファイルはR=赤,G=緑,B=青,A=透明度の4つのチャンネルが存在し、それぞれ8bitのデータが保存されています。
    肌や衣服、髪の毛の色を表現するRGBの色の情報のほかにも、○○Mapや○○Maskと名付けられたテクスチャ画像では色情報(R,G,B,Aの各チャンネル)の8bitのデータ領域を使用して、表面の凹凸の表現や、後述のマスクなど様々な情報を格納している場合もあります。

  • マスク: 効果をかける所、かけない所を指定するものです（マスク＝「覆う」の意）。
    真っ白と真っ黒の2色か、グラデーションであることが多くあります。

  • トゥーン: アニメチックな画風のこと。対義語にリアリスティックなど。「トゥーン・シェーダー」で「アニメ調の画風を表現する描画プログラム」のことを指します。

  • シャドウ: 影/陰。光が当たっていないところ。
    また、Resoniteでは光源(Light)の中の「ShadowType」という項目で、モデルに対してどのような種類な影/陰を指定する事ができ、「Soft(滑らかな影)」、「Hard(鋭い影)」、「None(無し)」から選択できます。
    XiexeToonはHard Shadowと相性があまりよくないので、SoftまたはNoneを推奨したいところです。

  • XiexeToon:Resoniteで使用されるトゥーンシェーダーの名前です。
    元はXiexe氏が開発したオープンソースのUnity向けシェーダ「Xiexe's Unity Shader」、通称XSToonの古いバージョンを使用しています。
    元のUnity向けパッケージはこちらで配布しています。(多分2.2あたりのバージョンから一部の機能を削除されたものが使用されています)
    ちなみに…"XiexeToon"の発音の仕方は謎です。シェイクストゥーン、シーシェトゥーン、ゼクシートゥーン、ズィーズィートゥーン等々、ユーザやコミュニティによりぶれています。*

*…Xiexe氏は好きなように呼んでくれと発言しています

XiexeToon 各パラメータの説明

本題です。
XiexeToonの各パラメータの項目を上から順に説明します。
（★）を付けたものが「最低限これだけ設定するといいよ！」という項目です。

まずはMainTexutre(Color), BlendMode, NormalMap, MetallicGlossMapからご紹介。

MainTexture(★)

色の情報が載っているテクスチャをここに入れます。
また、ColorのRGBAの値を操作する事で色調を変更する事ができます。
髪の毛や衣服などのメッシュが分かれている場合、こちらで簡易的な色改変も行うことが可能です。

MainTextureにレンガの色情報が載ったテクスチャを割り当てた例。（右）
ColorのR,G,B,Aにそれぞれ1,0,0,1を入力した例。（右）

Blend Mode/AlphaMap

透過素材を含ませるためにアルファ値を設定したマテリアルや、テクスチャにアルファ情報が含まれる場合、BlendModeをCutout/Alphaに変更する事
で半透明の表現が可能です。

※MainTextureに透明、半透明の素材を含まない場合、初期値のOpaque(不透明)から変更する必要はありません。

※半透明テクスチャ素材の作り方について→「付録5」を参照

ColorにRGBA=1,1,1,0.5、Blend Modeを「Alpha」にした例。

また、Alphaチャンネルを含むテクスチャ画像をMainTextureに指定することで、Alphaチャンネルの箇所だけ透過にできます。

ColorにRGBA=1,1,1,1、Blend Modeを「CutOut」にした例。

※完全に透明・不透明部分が分かれている場合はBlendMode「Cutout」
シースルー素材など半透明素材を使用する場合はBlendMode「Alpha」
を使用します。

BlendModeをOpaqueから変更し、Alpha情報を持ったテクスチャをMainTextureに割り当てることで、メッシュの一部を半透明/透明に透過させることできます。
例えば、前髪を半透明にしたり、衣服の一部を透明/半透明にしたり等を（メッシュを分けることなく）実現できます。

前髪を半透明にした例。髪の毛越しに描画される目元に注目。
透明感を表現するためによく使われる手法。

※より詳細な半透明素材の取り扱い・作り方について→「付録5」を参照

NormalMap

マテリアルの表面に疑似的な凹凸を作り、表面の立体を表現するための画像です。
青紫っぽい画像です。衣装のデータに付属する事が多いです。

レンガ柄のNormalMapを適用した例。表面の凹凸が描画されている。
両方の例にレンガ柄のMainTextureを適用したあと、右側のみNormalMapを適用した例。
レンガの凹凸も表現されたため、よりリアルに見える。

MetallicGlossMap

金属のような反射と、光沢感を指定します。金属製の素材や、滑らかな素材を含むアバターでは用意されていることがあります。
MetallicGlossMapで金属光沢を表現したい箇所を指定したテクスチャを指定したのち、Metallic、Glossinessの数値を上げることで金属素材の光沢を表現できます。

・Metallic …金属感の強さ。数値が高いほどMainTextureで定義された色を無視し、Glossinessの影響を受けやすくなります。
・Glossiness …表面の滑らかさ。数値が高いほど、周囲の風景を反射するようになります。RefrectionProbeが設定されている場合RefrectionProbeを、RefrectionProbeがない場合はSkyboxを反射します。
（・Refrectivity …※動作していない模様）

Metallicを1.0、Glossinessを0.0にした例。MainTextureで定義された色は無視されて黒っぽくなるが、Glossinessが低いので何も反射しない。
Metallicを1.0、Glossinessを1.0にした例。Glossinessが高いので、周囲の環境を反射している。（Skyboxを反射している）

※チャンネルのマッピングはPBS Metallicと同じく、
R=Metallic
A(アルファ)=Glossiness
となっています。
そのため、アルファの無いMetallic Mapや、A以外のチャンネルにSmoothness/Glossinessの情報が含まれているSmoothness/GlossinessMap、
また、Blender等で使用されるRoughnessMapはそのままでは完全に使えません。
チャンネルの再パッキングと呼ばれる工程が必要になります。

RGBAチャンネルが1,1,1,1と0,0,0,1の箇所をチェッカー状に並べたテクスチャをMetallicGlossMapに適用し、XiexeToon上のMetallic、Glossinessを1.0に設定した例。

テクスチャ上で白い(Rチャンネルが1)箇所がMetallic=1となり、
一方で黒い（Rチャンネルが0）の箇所はMetallic=0として扱われる。


続いてEmissionMap/EmissionColorとRimColor, Specular

EmissionMap/EmissionColor

発光する部分を持つ箇所をRGBAで指定します。髪のエンジェルリング（光沢）や、メカ・サイバー衣装の発光部分に指定されている事が多いです。
EmissionMapにテクスチャを指定したあと、「EmissionColor」を0以上にすることで発光します。（R,G,B,A=1,1,1,0で白く光ります。）

※テクスチャ画像を指定しない場合、EmissionColorに数値を入力しても無視されます。

EmissionMapに格子状の柄を指定して、EmissionColorに赤色(R,G,B,A=1,0.0,1)を指定した例

また白黒だけでなく、RGB画像を指定することもできます。

EmissionMapにレインボー柄のRGB画像を適用して、
EmissionColorをニュートラル(R,G,B,A=1,1.1,1)に戻した例

元の地の色（MainTextureやColor）が重なるため、Emissionだけの色にしたければ、ColorのRGBを0,0,0に設定するとよいでしょう。

ひとつ上の例から、Colorを0,0,0に変更した例

また、Emissionは自己発光するので、暗所でも周囲の光源に関わらず明るくなるのが特徴です。

上の例で、Skybox, Directional Lightの明るさの値を落とした例。
左の球は光源の変化に応じて暗くなっているが、Emissionは自己発光するため影響を受けない。

RimColor

画面から見た3Dモデルのフチを発光させたり、影が落ちる範囲を指定します。

  • RimColor : フチの色

  • RimIntensity : 効果の強さ

  • RimRange : 効果をかける範囲

  • RimSharpness : 効果がかかり始める鋭さ

RimColorを白(RGBA=1,1,1,1)で、RimIntensityを1.0にした例
上の例から、RimColorを赤(RGBA=1,0,0,1)にした例。光る色が変化した。
上の例から、RimRangeを0.5に下げた例。光る範囲が広がった。

RimColorの合成モードは「加算」のみのため、リムの色を暗くすることはできません。その場合は「ShadowRim」を設定してください。

Specular

Specularは表面のテカり、ツヤ感を出す設定項目です。
SpecularIntensityでテカりの強さ、SpecularAreaでテカりを出す範囲を指定します。

SpecularIntensityを「50」にした例。
※光源の向きで撮影しづらかったため、極端な数値を入れています

上記の例だと分かりづらいため、以下のgifにてツヤ感の違いを確認してください。

SpecularIntensityを「0」と「5」のSuzanneを並べて、光源の後ろで回転させた様子。
SpecularIntesityが5のSuzanneは逆光でテカるようになっている
続いてMatcap, OcculisionMap, Outline

Matcap

あらかじめ反射や光沢のパターンが書き込まれた球体の画像ファイルを用意することで、反射・光沢の表現が可能です。

前の項目の「MetallicGlossMap」との違いとしては、
MetallicGlossmapが基本的にその場の光源をリアルタイムに反射することに対して、
Matcapはあらかじめ描かれたハイライトや質感の絵を、カメラの向きに合わせて貼り付ける機能のため、周囲の光源に左右されることなく一定の光沢を得られることです。

※重要※
ResoniteのXiexeToonにはMatcapMaskが使えないため、同じマテリアルを使用する衣服などのメッシュのうち指定した一部だけMatcapを使う・・・という事ができません。
⇒付録3を参照

※重要2※
ResoniteのXiexeToonではMatcapの合成は「加算」のみ可能です。乗算や塗りつぶし等はできません。
つまり、もとのテクスチャの色より暗くすることは基本的にできません。
ただし、ワークアラウンドがあります。（この項の最後を参照）

左右のふちが白く発光するMatCapを適用した例。
上の例からMatcapTintを赤(RGBA=1,0,0,1)に変更した例。

前述の通り、Resoniteで使用できるMatcapの合成モードは「加算(Additive)」のみです。
元のテクスチャの色より暗くすることができませんが、以下に紹介する方法で疑似的に合成モード「通常」（塗りつぶし）と同じ効果を得られます。

金色のキラキラ模様のMatcap画像を適用した例。
元々のカラーが明るいところに加算されるので、このままでは模様や色が目立たない。
上の例から、Colorを黒（RGBA=0,0,0,1)に変更した例。Matcapの質感が見えるようになった。

上記の例から、MatCapTintの数値を上げると、完全に元のMatcap画像に見た目にすることができ、加算合成ではなく通常合成（塗りつぶし）をしたような効果を得ることができます。
これにより、通常合成ができないワークアラウンドとして使用することができます。

上の例から、MatCapTintをRGBA=2,2,2,1に変更した例。
完全に塗りつぶしたような効果が得られた。

OcculusionMap

凹部などの陰影を強調するための白黒の画像を入れます。
たまに衣服などに付属しています。
AO、AO Mapなどとも呼ばれることが多いです
※XiexeToonのOcculusionMapではRGBA画像のGチャンネルのみ参照します

レンガ柄用のOcculusionMapを適用した例
MainTextureにレンガ柄のテクスチャを適用した状態で、 それぞれOcculusionMapのある・なしの比較。
OcculusionMapありの右の方が、陰影が強調される。

Outline/OutlineMask

Outlineを「None」から「Lit」などに変更し、
OutlineWidthを「0.01～0.1」などに調整することで、モデルの輪郭に線が引かれるようになります。

アニメチックな表現や、キャラクターが背景から浮き出て見える効果があります。

Outlineを「Lit」に変更し、OutlineWidthを「0.1」に設定した例
上の例から、OutlineWidthを「2.0」OutlineColorを赤色(RGBA=1,0,0,1)に変更した例。
フチ取りが太くなり、色が赤色になっている。

OutlineMaskは上記のOutline(輪郭線)が入る場所、入らない場所をテクスチャ画像で指定することができます。
目や口の周りなど、輪郭線を入れることで違和感が出てしまう場所が指定されている事が多いです。

グレースケール画像を指定した場合は白=輪郭線を出すになります。（画像のRチャンネルを参照します）

上半分が白、下半分が黒の画像をOutlinMaskとして設定した例。
白でマスクされた球の上半分にアウトラインが付いている。


最後にShadowRamp, ShadowRim, ShadowSharpness, SubsurfaceColor(ThicknessMap), Culling

ShadowRamp(★)

モデルに影が落ちるときに生まれる陰のグラデーションのパターンをここで指定します。

デフォルトだと灰色で段階がはっきり分かれたShadowRampが入っているため、くっきりしたグレーの影が落ちます。
これが人物などの場合だと極めて血色が悪く見えてしまうため、「Clear」を押して丸ごと消すか、少なくとも変更することを強く推奨します。

合成モードは「乗算」のため、元の色から明るくすることはできません。

ShadowRampをClearした（無くした）例
ShadowRampへ白からうすだいだい色に変わるグラデーションを設定した例
上の例から、Colorを実際のアバターの肌に近いうすだいだい色(RGBA=1,0.9,0.8,1)に設定した例
※効果が分かりやすいようにDirectionalLightの「ShadowType」を「None」に設定した上で、
Colorを薄いだいだい色(RGBA=1,0.9,0.8,1)にして、
ShadowRampへ白→赤→青へ変化するグラデーションを設定した例
上の例から、Colorを白(RGBA=1,1,1,1)に戻した上で、
白→青に変化するグラデーションを設定した例

ShadowRim

モデルのフチに色をつけて、影を強調します。

ShadowRimの値を黒(RGBA=0,0,0,1)にした例

ShadowSharpness(★)

ワールドやアイテムの光源(Light)の設定が「ShadowType」=「Soft」のとき、マテリアルの陰の鋭さを指定します。
上げるほどパキっとした影になりますが、人物などでは違和感が強いため「0」推奨です。

DirectionalLightのShadowTypeが「Soft」のワールドで、ShadowSharpnessを「0」にした例。
若干陰の境界がぼけている。

Directional Lightの「ShadowType」が「Soft」以外のときは、この設定の影響を受けません。

DirectionalLightのShadowTypeが「None」のワールドで、ShadowSharpnessを「0」にした例。
陰はそもそも描画されない。
DirectionalLightのShadowTypeが「Hard」のワールドで、ShadowSharpnessを「0」にした例。
ShadowSharpnessの値は陰の描画に変化を与えない。

SubsurfaceColor/ThicknessMap

サブサーフェススキャタリング（光の透過）によって物体内部で散乱した光を再現します。たとえば肌なら赤みがかったピンク、葉っぱなら黄緑といった、素材の内部の色を疑似的に表現することができます。
SubsurfaceColorを動作させるためにはThicknessMapが必要です。
ThicknessMapは白（Rチャンネルが大きい）がよりSubsurfaceColorの効果を出す部分、黒がSubsurfaceColorを出さない部分に塗り分けた画像です。

ThicknessMapにチェッカー柄のテクスチャを設定し、SubsurfaceColorを赤(RGBA=1,0,0,1)を設定、SubsurfacePowerを最大の「3」に設定した例。
うっすらとチェッカー柄の赤みが表現されている。

SSSの効果についてはこの画像だと分かりづらいので、以下のgifを参照

光源に向けると、ThicknessMapで白い部分が透けて見える効果

検証のためSuzanneのThicknessMapを焼いた例を以下に示します。
耳のあたりなど薄くなっているところが、赤くなり、内部での乱反射が疑似的に表現されています。

画像右側がThicknessMapを適用したSuzanne。
先ほどの画像を180度回転し、画像左側がThicknessMapを適用したSuzanne。

Culling(★)

メッシュを「裏側から見たとき」に描画するかをここで指定することができます。

デフォルトの「Back」だとスカートの裏側や裏側から見た髪の毛が描画されない場合があります。
裏側が透明になっているな？と思ったら、衣服、髪のメッシュを「Off」にしてみてください。

CullingがBackとOffの例、髪の裏側、服の裏地が透明に見え、違和感がある

付録2 そもそもインスペクターの使い方

そもそもインスペクター、マテリアルの球ってどうやって使うの？という方は、以下の記事にて詳しく解説していますのでご参照ください。

付録3 これ無いの？シリーズ

XiexeToonの機能についてよく質問される事項をまとめました。

  • AlphaMask

    • →「付録5」にて解説します。

  • MatcapMask

    • ありません。MatcapMaskを使用したい場合、MeshをBlenderなど外部で分割した上、Matcap用のマテリアルを作成して割り当ててください。

    • あるいは、場合によっては以下のワークアラウンドが可能です。
      ①MatcapMask画像をResonite内の編集機能にて「インテンシティからアルファ」機能を使ってアルファ化します。
      ②新しいXiexeToonマテリアルを作成し、Matcapを設定したあと、MainTextureに先ほどの画像を使用し、このマテリアル用のマスクとします。BlendModeはAlphaかAlphaClipで設定。
      ③SkinnedMeshRendererのマテリアルのlistに項目をAddし、さきほどのXiexeToonマテリアルを設定します。（マテリアルの重ね掛け）

  • メッシュごとの明るさ自動調節

    • 機能としてはありません。
      SkinnedMeshRenderer内のProxyBoundsSourceをProxyにして任意のひとつのMesh（顔や体）を指定するとおおむね改善します。

  • 1影、2影の色指定、影の境界色

    • ShadowRampにて任意の影の色・境界を使ったグラデーション表現が可能です。

  • Fur(毛皮)

    • XiexeToonにはありません。ただし、ファーシェーダーが存在します。→FurMaterial

  • 宝石シェーダー

    • XiexeToonにはありません。ただし、屈折マテリアルが存在します。→RefractMaterial

  • UVスクロール

    • 可能です。→付録4を参照

  • 手や顔を近づけると影が出る

    • ポストプロセスッシングでアンビエントオクルージョンが有効なためです。

      • 切りたい場合は、「設定」→「グラフィック」→「ポストプロセッシング」→「アンビエントオクルージョンの強さ」を「0」にしてください。

付録4 UVスクロールのやり方

以下の記事で解説してます！

付録5 AlphaMaskMapの使い方

一般的なアバターでは、色情報を格納したMainTextureとアルファ(透過)情報を格納した白黒のアルファマスクマップ（あるいはアルファマップ）はそれぞれ分かれています。
XiexeToonでAlphaMaskMapを使用する場合、アルファマスクマップをMainTextureのAlphaチャンネルに格納する「チャンネルパッキング」と呼ばれる準備が必要になります。

チャンネルパッキングとは

XiexeToonでは、白黒グレースケールなどで用意されるAlphaMaskMapはそのまま使う事ができません。
使用する場合は、MainTextureで使用するテクスチャ画像に透明度情報をチャンネルパッキングする必要があります。

上記を行った上、XiexeToonのBlendModeを「Alpha」へ変更することで、AlphaMaskによる透過表現が可能です。

パッキングはPhotoshopやCLIP STUDIOなど画像編集ソフトを使うのが一般的ですが、
今回の記事をきっかけにkazuさんにWebブラウザですぐに完了する便利なツールを用意頂きましたので、ここで紹介します。

https://imagealpha.neos.love/ImageAlpha

青、赤の枠内にそれぞれの画像をドラッグアンドドロップすると、下にパッキング後の画像が出力されます。（読み込んだ画像は外部と通信していないため、安全です）

付録6 デスクトップモードの切り替え方

マテリアルの設定のような長時間の細かい作業などの際、VRだとしんどい時があります。
そういう場合は、キーボードの「F8」キーを押すと、デスクトップモードへ瞬時に切り替える事が可能です。VRに戻りたい場合は再度F8キーを押します。

付録7 実際の設定例

※実際の設定例はUnipocket、またはパブリックフォルダ「akiRAM Public/XiexeToon設定例」にて一部配布しています。

付録9 顔と身体などの明るさがバラバラ対策

今後追記予定

光源が複数ある場所において、顔や身体、髪・服などのパーツによって明るさがバラバラになり、違和感が生じてしまう場合があります。

これは、パーツごとに分離されたメッシュが、メッシュごとに明るさを計算してしまう事に起因します。
設定で、どれか一つの部位のメッシュを計算元として指定することでかなり軽減されます。（完全に解決しない場合もあります）

例えば、「顔・体・髪・服」でメッシュが分かれている場合、明るさの計算元を「体」などに指定してやることで、「髪」に光源が近づいた場合に常に「体」の明るさを参照し続けることで、部位ごとに明るさのバラついてしまう現象を押さえます。

やり方を以下で解説します。

1.アバターのインスペクターを開き、部位ごとに分かれた「SkinnedMeshRenderer」を探します。（「Centered Root」>「RootNode」などの下にあることが多いです）

2.「SkinnedMeshRenderer」の設定項目の「BoundsComputeMethod」を「Proxy」に変更します。

3.ひとつ下の設定項目、「ProxyBoundSource」に参照させたいSkinnedMeshRendererのコンポーネント名をドラッグアンドドロップして指定します。

これを各メッシュ行うことで、全身を通して統一感のある明るさを維持できます。

おわりに

ここで紹介されない項目については、Unityや、他のシェーダーのドキュメントを参照すると理解が深まるでしょう。

またResoniteについての質問はResoniteJapan Discordで質問するのがよいでしょう。

おわり

記事内で例に使わせて頂いたアバター
オリジナル3Dモデル　ハオランーHAOLAN - かなﾘぁさんち
オリジナル3Dモデル「マヌカ」 - STUDIO JINGO

リンク集

アバターセットアップまとめ記事

Resonite便利リンク集👇

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