チュートリアル / Mayaで始めるゲーム用ローポリキャラモデルシーズン2～最新ゲーム開発環境に即応したモデリング手法を伝授～
第5回：シェーダー設定とフロー

2024.03.13

Maya
ゲーム
コラム
チュートリアル
マテリアル・シェーダー・UV
モデリング
学生・初心者

はじめに

こんにちは、高部（たかべ）と申します！2024年もよろしくお願いいたします。

コラム5回目は、コラム4回目で紹介したシェーダーの概要から一歩踏み込んだ、実際のシェーダー設定とそのフローを紹介します。作業者によって設定・フローに差はあると思いますので、ここでは私が行っている一例となります。

今回は以下のサンプルデータを付属しています。
・モデルのMayaシーンデータ
・モデルのテクスチャ（ベーステクスチャはpsd/png、マスクテクスチャはpngのみ）
・UnityPackage（Unityでモデルのシェーダー設定が確認できるファイル。使い方は後述参照）

また、サンプルデータの進捗は以下のようになっています。

形状（素体・服）	現段階で完了（完成までに微調整あり）
テクスチャ（ベース）	現段階で完了（完成までに微調整あり）
テクスチャ（マスク）	現段階で完了（完成までに微調整あり）
ジョイント	現段階で完了（完成までに微調整あり）
スキンウェイト	現段階で完了（完成までに微調整あり）
Unity設定	シェーダー設定：現時点で完了（完成までに微調整あり）、VRChatで使う設定：未着手
VRChat	VRChatで使う設定：未着手

5回目もくじ

・使用シェーダー
 ・UnityPackageの使い方
 ・シェーダー設定のフロー
 　-- 前提
 　-- 作成テクスチャ一覧
 　-- Ⅰ 準備
 　-- Ⅱ アウトライン
 　-- Ⅲ 影系
 　-- Ⅳ 光系
 　-- Ⅴ その他表現
 　-- Ⅵ 全体調整・実機確認
 ・5回目のまとめ
 ・次回のコラムの内容

使用シェーダー

今回、実際に設定しフローを紹介するのは「liltoonシェーダー（以下liltoon）（https://booth.pm/ja/items/3087170）」です（基本は無料）。liltoonは公式のドキュメントで使い方が詳しく紹介されているため、このコラム内での詳細は割愛します。非常に扱いやすく、VRChatのアバターによく使われているシェーダーです。

UnityPackageの使い方

サンプルで配布しているUnityPackage（chairo_package_202402.unitypackage）は、以下の手順でUnityにインポート（読み込み）をすることで、今回紹介しているモデルとシェーダー設定をUnity内で実際に確認できます。以下にUnityPackageの確認方法を記載しますので、ぜひ活用してみてください。

①
【リンク先：https://unity.com/ja/releases/editor/archive】
上記からUnity（※バージョン2022.3.6f1推奨）をインストールします（基本は無料）。
（ ※バージョンを上記に指定している理由）
VRChatでモデルを使用するためには、VRChat指定のバージョン（2024年2月現在では2022.3.6f1）でセットアップを行う必要があるためです。また、liltoonシェーダーで2022.3.6f1がサポートされているためです（2024年2月現在）。

②
【リンク先：https://booth.pm/ja/items/3087170】
上記から、今回のモデルで使用しているliltoonシェーダーをダウンロードします（基本は無料）。手順④にて「lilToon_1.X.X.unitypackage」（Xはバージョン）をUnityでインポートするため、わかりやすいところに置いておいてください。

③
①でインストールしたUnityで、3Dの新規プロジェクトを作成します。プロジェクト名は任意です。

④
Unityが開いたら、上部のAssets→Import Package→Custom Package… から、②でダウンロードした「lilToon_1.X.X.unitypackage」を選択します。

⑤
「lilToon_1.X.X.unitypackage」を選択すると、「import Unity Package」というウィンドウが出るので、そのまま「import」をクリックします。

⑥
Projectウィンドウに liltoon が追加されればliltoonのインポートが完了です。

⑦
④にて「lilToon_1.X.X.unitypackage」をインポートした手順で、今回のサンプルデータである「chairo_package_202402.unitypackage」もインポートします。「Import Unity Package」のウィンドウが出るので、そのまま「import」をクリックします。

⑧
Projectウィンドウに shadersample_202402 が追加されればインポート完了です。

⑨
shadersample_202402 がProjectに追加されたら、shadersample_202402 をHierarchyにドラッグアンドドロップします。すると、Scenesにモデルが表示されます。

⑩
Scenesにモデルが表示されたら、Hierarchyに初めからある「SampleScene」を右クリックしてRemove Sceneで消しておきます。SampleSceneのライトとインポートしたシーン（shadersample_202402）のライトが共存することを防ぐためです。

⑪
モデルに設定されたシェーダーの詳細を見るには、以下のパスをご確認ください。マテリアルが複数入っています。

⑫
このマテリアルをクリックすると、Inspectorウィンドウにてシェーダーの設定が確認できます。

⑬
Directional Lightを回転させてモデルを見る方法を記載します。まず以下の画像の部分から、Animation ウィンドウを開いてください。

⑭
Hierarchyから shadersample_202402 の Directional Light を選択すると、Animation ウィンドウにキーが打たれた状態が表示されます。この状態でAnimationウィンドウの縦の白いバーを左右に動かすことで、Sceneウィンドウのライトが回転します。ライトを回転させて、影や光の遷移を見てみてください。

Animationウィンドウの縦の白いバーを左右に動かすことで、Sceneウィンドウのライトが回転します

シェーダー設定のフロー

前提

コラム4回目で紹介した内容になります。シェーダーで設定する要素は多くあります。ここで言う要素とは「影」「ハイライト」「アウトライン」などのことです。なんとなくでこれらの要素の設定を進めていくと「どこを調整したらいいんだろう」「次は何をしたらいいんだっけ」「何をやっているか分からなくなった」となりがちです。
シェーダーで要素を設定していく順番は特に決まりがあるわけではありませんが、このコラムでは、要素を整理し、順番に設定していく方法を紹介します。イラストを描くときの一例として挙げられる、輪郭線→影→光→全体調整という要素作成の流れがわかりやすいため、その順に設定を行います。

また、各テクスチャの作り方は個人によってさまざまな方法があります。このコラムでは、私が行っているテクスチャ（主にマスクテクスチャ）の作り方の概要も紹介します。

要素は以下の6項目に整理し、上から順に設定を行いました。
Ⅰ 準備（ベーステクスチャ・眉毛の描画順変更）
Ⅱ アウトライン（輪郭線）
Ⅲ 影系（影色・影マスク）
Ⅳ 光系（ハイライト・matcap・リムライト）
Ⅴ その他表現（ノーマルマップ・発光設定）
Ⅵ 全体調整・実機確認

その流れが以下のgifとなります。【下図↓】

要素が一つ一つ足されていくことが分かると思います

シェーダーを設定するのが初めての方は「要素のパラメータ（数値）をどれくらいにすればいいの？」「パラメータをいじりすぎてどうなってるかわからなくなった」となると思います。
今回使用したliltoonは初期のパラメータでもいい感じになるように設定がなされているため、まずは初期値から大きく外れない値でスタートするのがおすすめです。「このパラメータを変えるとどのように絵作りが変わるか」を把握するのが第一歩です。全てのパラメータを調整することはほぼなく、初期値でも十分絵作りに使用できるパラメータが多くあります。
そのため、パラメータで戸惑ったときは、要素の右上の歯車マークから「初期化」を行いいったんパラメータをリセットすることをお勧めします。【下図↓】

歯車マークの「初期化」でパラメータと設定テクスチャをリセットできます

作成テクスチャ一覧

今回作成したテクスチャです。【下図↓】
解像度はmatcapサンプラー（512*512pixel）を除き全て4096*4096pixelで作成しました。サンプルデータも合わせてご確認ください。

bodyとclothのモデルは上記のように分かれています

【作成テクスチャ一覧】	body	cloth
ベーステクスチャ	tex_body_chairo	tex_cloth_chairo
アウトラインマスク	tex_body_chairo_outlinemask	tex_cloth_chairo_outlinemask
影色指定テクスチャ	tex_body_chairo_shade1（影色1/影色2/影色3で共用）	tex_cloth_chairo_shade2（影色2） tex_cloth_chairo_shade3（影色3） ※影色1はベーステクスチャと共用
影マスク	tex_body_chairo_shadinggrademap	tex_cloth_chairo_shadinggrademap
ハイライトマスク	tex_body_chairo_highcolormask	tex_cloth_chairo_highcolormask
matcapサンプラー	未使用	tex_cloth_chairo_matcap_sampler
matcapマスク	未使用	tex_cloth_chairo_matcapmask
リムライトマスク	tex_body_chairo_rimlightmask	tex_cloth_chairo_rimlightmask
ノーマルマップテクスチャ	tex_all_chairo_normal	tex_all_chairo_normal
ノーマルマップマスク	tex_body_chairo_normalmask	tex_cloth_chairo_normalmask
発光テクスチャ	tex_body_chairo_emissive	未使用

テクスチャサムネイル・解像度のまとめです。【下図↓】

Ⅰ 準備

まずはUnity上でベーステクスチャをモデルに設定し、モデルにベーステクスチャそのものが表示された状態からスタートします。また、髪より前に眉毛が描画されるようにシェーダーを設定します。

◆ベーステクスチャ
【メインカラー】の「色」に設定します。隣にある色はデフォルトの白（FFFFFF）でOKです。【下図↓】

ベーステクスチャは【メインカラー】の「色」に設定

◆眉毛の描画順変更
初期状態では眉のメッシュが前髪のメッシュに隠れているため、デザインに合わせて眉が前髪より前に描画されるようシェーダーを設定します。【下図↓】描画順の設定についてはliltoon公式ドキュメントをご確認ください。

ここまで終わった状態がこちらです。【下図↓】

Ⅱ アウトライン

◆アウトライン
アウトラインの「色」にはベーステクスチャを設定しました。こうすることで、アウトラインの色がモデルと近しい色となります。次に「マスクと太さ」の数値を「0.08（デフォルト）」から「0.2」とし、ある程度の太さにしておきました。【下図↓】

「色」「マスクと太さ」を主に調整します

アウトライン（輪郭線）は、デフォルトの状態では太さが一定です。【下図左↓】
そのため、アウトラインの太さが調整できるアウトラインマスクを作成し、モデルの部位により太さを変更します。マスクはグレースケールで作成し、「白」で太さが最大、「黒」に近づくにつれて太さが0に（アウトラインが表示されなく）なります。【下図右↓】

アウトラインの太さを変更する理由は主に以下の2つとなります。
・主線の抜きの表現を行う場合（例：髪の毛の毛先などを細くする場合）
・アウトラインの表示の不具合がある場合（例：複雑なメッシュ形状の部分はアウトラインが崩れやすいため、細くしたり消したりする場合）

【アウトラインマスクの作成例】
私がアウトラインマスクを作成するときは、Mayaでモデルに頂点カラーをペイントし、それをテクスチャにベイクして（書き出して）作成することが多いです。その概要を紹介します。

①
Mayaにて、作成したモデルを複製します。

②
複製したモデルの頂点カラーを全て「白」で塗りつぶします。

頂点カラーが白＝赤/緑/青＝1/1/1

モデルの頂点カラーを全て白で塗りつぶした状態

③
アウトラインを細くしたい部分の頂点カラーを、頂点カラーペイントツールを使い「黒」で塗っていきます。以下の画像は例として髪の毛をあげています。先端に行くにつれてアウトラインが細くなるようにしたいので、先端の黒が濃くなるグラデーションにします。【下図↓】

頂点カラーペイントツール

例：髪の毛　先端に行くにつれて黒のグラデーションにする

④
頂点カラーを塗り終わったら、このペイントした頂点カラーをテクスチャにベイクし（書き出し）ます。書き出し方法は、頂点をペイントしたモデルを選択した状態で「頂点カラーペイントツール」の「アトリビュートマップ」→「書き出し」で行います。書き出したテクスチャをアウトラインマスクとして使います。【下図↓】