Posted at
Unity #2Day 11

ユニティちゃんトゥーンシェーダー2利用ガイド


はじめに

はじめまして、Unity #2 Advent Calendar 2018 11日目担当のりつかです。

ユニティちゃんトゥーンシェーダー2(以下UTS2)の利用ガイドになります。

バージョンは下記を使用します。

Unity: 2017.4.9f1

ユニティちゃんトゥーンシェーダー2:v.2.0.5


準備

UTS2_ShaderOnly_v2.0.5_Release.unitypackageをダブルクリックして、シェーダーを導入します。

モデルをはSDユニティちゃんを使用します。

before.png

公式リファレンスがこちら

各機能の解説や使い分け等もしっかり書かれているためよく読んでおきましょう。

以降では、ざっと触るのに必要な機能だけ説明します。


アニメっぽさの構成要素を知る

UTS2を使う目的は、アニメっぽい表現に近づけたいからだと思います。

UTS2は、細かくパラメーターが分かれているため、表現したいことが色々できるようになっています。

しかしながら、調整可能な項目が多すぎて、「うっ、よく分からん」となりがちなのでポイントだけ紹介します。とりあえず今回はアニメっぽさを出そうと思います。



参考に画像を用意しました。ベースとなる基本色、一段階暗くなった影色、直接光が当たっているハイライト、輪郭線であるアウトライン。

これら4つの要素を3Dモデル上で再現できればアニメ風に近づけそうです。


UTS2で再現する

UTS2で基本色、影色、ハイライト、アウトラインを再現していきましょう。

まずお目にかかるは、大量のシェーダー群です。

スクリーンショット 2018-07-01 23.50.25.png

なじみがないグラフィックス用語に圧倒されますが、Toon_DoubleShadeWithFeatherが標準のシェーダーですので、とりあえずこれを使います。Featherはぼかしの意味らしいです。今回の例では、服と顔にToon_DoubleShadeWithFeather、髪にAngelRing/Toon_ShadingGradeMapを割り当てます。


基本色

プロパティ
解説

BaseMap
基本となるテクスチャ

BaseColor
カラーを直接指定

Is_LightColor_BASE
ライトの色を基本色に乗算する場合にON

まず基本色を設定します。



今回は雑ながらシンプルに塗りつぶしたテクスチャを用意しました。

用意されたモデルは既に基本となるテクスチャを持っていると思いますので、BaseMapにそのテクスチャをペタリと設定します。

BaseColorBaseMap未設定の場合に、カラーを直接指定できます。

また、BaseMapが設定されている場合は基本色に乗算されます。テクスチャの色を暗く調整したい場合に使えそうですが、あんまり出番はなさそうです。

何度か出てくるIs_LightColor_xxは、ライトの色を乗算する場合にチェックを付けます。

余談ですが、新規シーンで作成されているDirectional Lightは黄色を帯びているので、初期状態では黄色が乗算されます。


影色

プロパティ
解説

1st_ShadeMap
影色1用テクスチャ

USE BaseMap as 1st_ShadeMap
BaseMapを1st_ShadeMapとして使う

1st_ShadeColor
影色1にカラーを乗算する

Is_LightColor_1st_Shade
ライトの色を影色1に乗算する

Set_SystemShadowsToBase
Unityのシャドウシステムを使う

Tweak_SystemShadowsLevel
Unityのシステムシャドウのレベル調整

BaseColor_Step
基本色と影色1の割合を調整します。

Base/Shade_Feather
基本色と影色1の境目をぼかします。

Set_1st_ShadePosition
影が落ちる場所をテクスチャで指定できます。

続いて影色を設定します。

上で並べられたプロパティ以外に、2ndがつくプロパティもありますがそれらは影色を2段階で表現する場合に使用します。今回の例では、影を1段階のみで表示するため、1stが付いているプロパティを調整します。

1st_ShadeMapは影色の基本となるテクスチャですが、指定しなくてかまいません。

影色用テクスチャを用意せずとも、USE BaseMap as 1st_ShadeMap1st_ShadeColorを組み合わせて、1段階暗い影色を再現できます。

1st_ShadeColor_Stepで影色の表示割合を指定できます。1st_ShadeColor_Featherはぼかしです。ベースカラーと影色の境目を目立たなくしたい場合に利用します。Tweak_SystemShadowsLevelを使って、基本色と影色1の比率を微調整することもできます。

ライトの当たる方向を考えながら、一番良い影が出るように1st_ShadeColor_StepTweak_SystemShadowsLevelを調整するわけですが、顔に変な影ができるとイメージが損なわれるため、あえて顔に影色は指定しないとかもありだと思います。また、Set_1st_ShadePositionで影を落としたい場所を指定することができます。


ハイライト

ハイライトにも色々ありますが、ここでは髪にリング状に描かれることの多いハイライトを扱います。リファレンスでは、「天使の輪」と呼ばれているため、ここではその呼び方に倣います。

プロパティ
解説

AngelRing
天使の輪をONにする

AngelRing_Sampler
天使の輪のテクスチャを指定する

AngelRing_Color
天使の輪に乗算するカラーを指定する

Is_LightColor_AR
ライトの色を天使の輪に反映する場合にON

AR_OffsetU
天使の輪を縦方向に調整する

AR_OffsetV
天使の輪を横方向に調整する

上で並べられらプロパティはAngelRingシェーダーのみが持っていますので、専用のマテリアルを用意しましょう。

使用に当たって、Maya、Blender等のツールで髪メッシュに2つめのUVを設定し、ハイライト用のテクスチャの用意する必要があります。DCCツールの知識が必要になり、若干ハードル高めなので後回しでもよいと思います。


アウトライン

プロパティ
解説

OUTLINE MODE
NML / POSのどちらかを指定する

Outline_Width
アウトラインの幅を調整する

Outline_Sampler
アウトラインの幅をテクスチャで設定する

Outline_Color
アウトラインのカラーを指定する

Is_BlendeBaseColor
基本色にアウトラインのカラーをなじませる

最後にアウトラインを設定します。

OUTLINE MODEは、キャラクターの場合はNML(法線反転方式)を指定します。

Outline_Widthでアウトラインの幅を設定します。Outline_Widthについて、注意書きがついています。


※注意:この値は、Unityへのモデルインポート時のスケールに依存しますので、取り込みスケールが1でない時には注意してください。


何が起きるかというと...。



アウトラインが異様に大きかったりということが起きます...

Outline_Samplerはアウトラインの幅をテクスチャで指定する際に利用します。アウトラインを細かく調整したい場合に使うことになります。


おわり

ざっと基本的な機能だけ拾ってみました。ここで取り上げた要素以外にも、リムライトはお手軽かつ印象が変わるので一度試してもらいたいです。

image.png

unity.png

この記事のコンテンツは、『ユニティちゃんライセンス』で提供されています。

Unity #2 Advent Calendar 2018 12日目はjukey17さんです。