トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門！

Unity道場スペシャル
トゥーンシェーディングと
ノンフォトリアリスティック系
絵作り入門
ユニティ・テクノロジーズ・ジャパン合同会社
コミュニティエバンジェリスト
小林信行
2016/11/05 Sat

View Slide

自己紹介：小林　信行
ユニティテクノロジーズジャパン合同会社
コミュニティエバンジェリスト　
UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウの普及
をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一人でもあります。
前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブル！』などの
原作付きキャラクターゲームの企画＆監督（クリエィティブ・ディレクター）。
結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、多くの
コンシューマゲームに導入されるきっかけを作りました。
最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。
元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入る
きっかけがGAINAXに入ったことだったので、アニメーションの制作技術に関して
もむやみに詳しいです。

View Slide

『絵づくり講座』NPRシェーダー編では、
トゥーンシェーダーやそれらを含む
NPR系シェーダーについて、その実装の考え方
や、実際の使い方を学びます。
•  『絵づくり講座』NPRシェーダー編では、主にノンフォトリアリスティック系シェーダーを使った絵づくり
に話題を絞り、現場ですぐに役立つ実践的なテクニックについて扱っていこうと思います。

View Slide

本セッションを受講することで得られる知見
•  Unityでの、シェーダーを使った絵づくりの基本知識
•  「ユニティちゃんトゥーンシェーダー」にみる、
トゥーンシェーダー開発の基本テクニック
•  Unity上で実装するNPR系シェーダー開発のポイント
※ NPR = ノンフォトリアリスティック
•  シェーダーを使った様々なカラーマジックの実装の仕方

View Slide

NPR（ノンフォトリアリスティック）系
のゲームって、そもそもどんなものが
あるのだろうか？

View Slide

NPR（ノンフォトリアリスティック）系ゲームはいくつある？
ある日のiOSトップセールスランキングを見てみたら、そもそもフォトリアリスティック系のゲームがひとつもなかった…

View Slide

同じ日、Steamのほうは？
人気の新作および売上げ
上位で、大体半分ぐらいが、
ノンフォトリアリスティック系
の絵づくりをしている。
（この日に関しては、特定の
タイトルが頑張りすぎている
気配があるにはあるが…）

View Slide

NPR系の絵づくりをしているゲームの傾向
•  モバイルの場合、特にNPR系は強い。日本の場合、2D主体であったり、カード系
のゲーム、セルルックの3Dキャラクターが登場するゲームが沢山あるという事情を
差し引いても、日本市場ではNPR系のゲームは人気がある。
⇒プラットフォーム的な事情からいうと、NPR系の絵づくりは、フォトリアリスティックなゲームよりは
　　GPUを酷使しないので、結果「バッテリーに優しい」と言われている。（本当？）
•  デスクトップ・コンソール向けでも、NPR系の絵づくりをしているゲームは多い。
必ずしも２Dやセルアニメ風のキャラ表現のためだけではなく、３D向けにNPR系
のシェーダーを作成し、「独自の絵づくり」をしている例も多い。
What The Box? 　　　　　風ノ旅ビト Ori and the Blind Forest
NPR系のシェーダーで、独自の絵づくりに成功しているゲームの例
http://store.steampowered.com/app/527340/ http://www.jp.playstation.com/scej/title/kazenotabibito/ http://www.oriblindforest.com/

View Slide

独自の「絵づくり（Aesthetics）」に必要
と言われる、シェーダー。
ここでシェーダーについて学んでみよう！
•  Unityをやっていると「シェーダー」という言葉をよく聞きます。ここでは「シェーダー」がどんなもので、
「絵づくり(Aesthetics/エスセティック)」に関してどんな機能を果たしているのか、簡単に説明をします。

View Slide

そもそも「シェーダー」って、なに？
•  「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定
した、小さめのスクリプトのことを指します。
•  Unityの場合には、サーフェイスシェーダー、バーテックスシェーダー、フラグ
メントシェーダー、コンピュートシェーダーの４種類があります。
•  サーフェイスシェーダーは、Unity独自のシェーダー言語であるShaderLabで
通常は書きます。さらにそれ以外のシェーダーは、ShaderLabにCgやHLSL
などのより一般的なシェーダー言語を組み合わせて書かれます。
•  Asset Storeで販売されている「Shader Forge」などを使うと、シェーダー
コードをノードベースで設計できます。
http://docs.unity3d.com/ja/current/Manual/SL-Reference.html

View Slide

共通のジオメトリ
Standarｄ Shader
によるマテリアル
ユニティちゃんShader
によるマテリアル
異なるレンダリング
結果（絵づくり）
どちらかと言うと、フォト系で
クレイドールの質感に近い
よりイラスト寄りで、
２D絵のイメージに
近い
このように、同じジオメトリであっても、
適用するマテリアル/シェーダーが変われば、
レンダリング結果は大きく変わります。

View Slide

Shader Forgeを使えば、ノードベースでシェーダーコードを
設計できる
https://www.assetstore.unity3d.com/jp/#!/content/14147

View Slide

ノードベースでシェーダーを設計する利点は、シェーダーの機能をブロック毎に
トライアンドエラーを繰り返しながら、設計できることにある。
またノードでロジックを組むことで、ある表現に必要なノードによるロジックパターン
（ノードパターン）が確認しやすくなる。
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct VertexInput {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct VertexOutput {
float4 pos : SV_POSITION;
float4 posWorld : TEXCOORD0;
float3 normalDir : TEXCOORD1;
};
VertexOutput vert (VertexInput v) {
VertexOutput o = (VertexOutput)0;
o.normalDir = UnityObjectToWorldNormal(v.normal);
o.posWorld = mul(_Object2World, v.vertex);
o.pos = mul(UNITY_MATRIX_MVP, v.vertex );
TRANSFER_VERTEX_TO_FRAGMENT(o)
return o;
}
float4 frag(VertexOutput i) : COLOR {
i.normalDir = normalize(i.normalDir);
float3 normalDirection = i.normalDir;
float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);
float node_64 = max(0,dot(i.normalDir,lightDirection));
float3 emissive = float3(node_64,node_64,node_64);
float3 finalColor = emissive;
return fixed4(finalColor,1);
}
ENDCG
同じもの

View Slide

マテリアルベースのシェーダーか？
それとも
カメラベースのポストエフェクトか？
•  NPR系の絵づくりをする際に、アプローチとしては２つの手法が考えられます。
「マテリアルベースのシェーダー」を開発するか、「カメラベースのポストエフェクト」を開発するか、
ですが、ここではAsset Storeで頒布されているアセットを例に両者を比べてみましょう。

View Slide

NPR系の絵づくりには、技術的に大きく分けて
2つのアプローチがある
1.  NPR系のシェーダーを開発して、（Unlitの）マテリアルベースで「NPR系の絵づくり」をする。
2.  イメージエフェクトとして、カメラベースのポストエフェクトで「NPR系の絵づくり」をする。
適用例

View Slide

NPR系の絵づくりには、技術的に大きく分けて
2つのアプローチがある
1.  NPR系のシェーダーを開発して、（Unlitの）マテリアルベースで「NPR系の絵づくり」をする。
2.  イメージエフェクトとして、カメラベースのポストエフェクトで「NPR系の絵づくり」をする。
適用例
「マテリアルベース」
負荷は軽い傾向
（Unlit系なら、
さらに負荷は軽い）
モバイルに最適
「ポストエフェクトベース」
画面全体にかけるので、
負荷は重い傾向
デスクトップ/コンソール
向き

View Slide

MatCapシェーダーは、軽い割には効果が高い
 Zbrushなどでも使われている「MatCap」は、描画負担が軽い割には、
テクスチャの工夫次第で様々なNPR系の絵づくりを楽しむことができる。
 ライトを使わないUnlit系マテリアルシェーダーの中でも、優れもの。
 ひとつは押さえておきたい。（実装もそれほど難しくはない）
↑ https://www.assetstore.unity3d.com/en/#!/content/8221
← Zbrush系のサイトで、様々なMatCapが公開されている。自分で作るのも難しくはない。

View Slide

トゥーンラインにも
マテリアルベースと
ポストエフェクトベースの
２系統がある
•  ほとんどの「トゥーンシェーダー」は、「トゥーンカラーシェーダー」と「トゥーンラインシェーダー」の組み
合わせで実現されます。トゥーンカラーシェーダーの多くはカスタムライティングに基づくマテリアル
ベースで設計されますが、トゥーンラインに関しては、２系統の実装方式があります。

View Slide

「トゥーンライン」に見る、処理系による線表示の違い
ノーマル反転によるマテリアルベースのトゥーンライン（アウ
トライン）表示は軽い分、クリース線や交差線は出ない。
またハードエッジに弱い等の弱点があるが、処理は軽く、
線の入り抜きなどの制御もしやすい。
古いハードウェアでも対応できるので、互換性が高い。
イメージエフェクトによるトゥーンラインの表示では、
アウトラインだけでなく、クリース線や交差線も表示
できる一方で、線の入り抜きなどの制御はしにくい。
またポストエフェクトとして処理される分、モバイル
では負荷が高くなる可能性がある。
ノーマル反転によるマテリアルベースのトゥーンライン表示カメラベースのポストエフェクトによるトゥーンライン表示

View Slide

使い分けのポイント：
「ベストは、マテリアルベースで絵づくりを進めておいて、
ポストエフェクトで補足すること」
•  特に、パフォーマンスとバッテリーの持ちが重視されるモバイル向けでは、
なるべくマテリアルベースで絵づくりを進めておいて、より画面をリッチに
したい部分のみにポストエフェクトを足してやるのが、現世代では有効。
（「ないと困る」ような部分には使わない。あくまで追加の味付け要素）
•  また、低パフォーマンスの機種でも十分に動くように、より軽い処理のみを
載せた「エコノミーモード」を用意するなどの工夫も、よく行われている。

•  Vulkan/METAL ＋次世代のモバイル向けGPUの組み合わせが普及すれば、
デスクトップレベルのポストエフェクトが、モバイルでも使えるようになる？？？

View Slide

トゥーンシェーダーの実例として
「ユニティちゃんトゥーンシェーダー」
を見てみよう！
•  トゥーンシェーダーとは、NPR系シェーダーの系譜としては、「あるオブジェクトへの光の当たり具合に
基づいて、そのオブジェクトを指定のカラーで塗り分けるシェーダー」にあたります。
ここでは「ユニティちゃんトゥーンシェーダー」を例に、その仕組みを見てみましょう。

View Slide

ユニティちゃんトゥーンシェーダーとは？
 「ユニティちゃんトゥーンシェーダー」は、セル風3DCG
アニメーションの制作現場での要望に応えるような形で
設計された、映像志向のトゥーンシェーダーです。
 特に影の制御に重点が置かれた設計になっています。
•  アウトラインの入り抜き調整は、テクスチャで指定可能
•  必ず影にしたい場所をテクスチャで指定可能
•  ノーマル色と影色の混合部のぼけ足を調整可能
•  ライトの位置を変えずに影色の支配域を変更可能
•  モバイル環境/WebGLでも動作します
•  Shader Forgeで確認できる、ノードベースで実装されています
⇒目的に合わせて、カスタマイズができます！
http://unity-chan.com/download/index.php

View Slide

ユニティちゃんトゥーンシェーダーのノードグラフ
トゥーンシェーダーとは、
「あるオブジェクトへの光の当たり
具合に基づいて、そのオブジェクト
を指定のカラーで塗り分ける
シェーダー」である。
陰部分のマスクの調整　※今回は解説しない
アウトラインの調整　
※今回は解説しない
光の当たり具合を元に、
通常色と陰色を割り当てる
光の当たり具合を求める

View Slide

光の当たり具合を求めるノードパターン
Normal Directionノード
ワールド空間でのメッシュの法線方向
を出力する。チェックをつけるとノーマ
ルマップを考慮する。
Light Directionノード
レンダリング対象となるカレントライト
の方向を出力する。
Dot Productノード
AとBの２つのベクトルの内積をとる。
「内積」は、２つのベクトルが構成する
角度の開き具合を表している。
上図のように、ライトベクトルと法線ベクトルの内積を取ることで、
光の当たり具合を、
０（光が全く当たっていない）～１（光が真正面から当たっている）
の範囲で表現することができる！

View Slide

A
→
B
→
θ
A
→
｜｜ B
→
｜｜
cosθ
A
→
B
→
・ =
このオレンジ部の長さは、 A
→
｜｜
cosθ
特に、　　が長さ1の時、オレンジ部の長さはcosθとなる。
A
→
内積とは、２つのベクトルがなす角度の状態を示すスカラー値のこと。
特に2つのベクトルがノーマライズされている場合には、内積が即、
２つのベクトルの内角のcosθの値となっている。
内積（Dot Product）とは？
上図のように、ライトベクトルと法線ベク
トルの内積を取ることで、光の当たり
具合を０～１で表現することができる！

View Slide

マスク値を元に通常色と陰色を割り当てるノードパターン
Lerpノード
マスク値として与えられるTに
応じて、A、Bを混ぜるノード
「光の当たり具合」が
マスク値Tとして接続される
※「光の当たり具合」をどのように
　　マスク値として評価するかによって　　
　　トゥーンカラーシェーダーごとの特徴が出る。
通常色
陰色

View Slide

トゥーンシェーダーの本質は、
光の当たり方を元に、オブジェクトを
通常色と陰色の２種類のテクスチャで
塗り分けることだから、
両者に違うタッチのテクスチャを割り当て、
カメラ側でカラーを乗せることもできる。
unity-chan! In 《Tank!》

View Slide

リッチなカラー表現ができる
NPR系シェーダーを作ってみよう！
•  今まで見てきたとおり、NPR系シェーダーと言っても、様々なパターンが考えられます。
ここでは、手描きのテクスチャに頼らずに、カラーだけで複雑なマテリアルパターンを作成できる
シェーダーを開発してみました。

View Slide

「NPR系の絵づくり」というと、ついつい
「テクスチャリッチな方向の絵づくり」
のみを思い浮かべがちですが…
ここではちょっと違ったアプローチも
考えてみましょう！

View Slide

手描きテクスチャに頼らないNPR系シェーダーの開発
•  『MONUMENT VALLEY』などに代表され
る、手描きテクスチャに頼らなくても、
美しい表現ができるNPR系シェーダーを
今回開発してみました。
•  その開発に当たって、参考にした様々な
ポイントをこのセクションではご紹介しよ
うと思います。
※今回のシェーダーに一番イメージが近いAssetStoreのシェーダー『COLR』
http://www.monumentvalleygame.com/

View Slide

作成したNPR系シェーダーのサンプル画面

View Slide

「モバイルでも軽く、美しい表現」
を目指したい
「少ないライト」で
「リッチなカラー表現」ができる。
しかも
「テクスチャに依存しない」
作成したNPR系シェーダーのポイント

View Slide

NPR系シェーダーでのカラーマジック・その１
l  モバイルでも軽く、美しい表現を目指す
⇒ライトが少なくても、複雑なカラー変化をするシェーダをつくる
u  「オブジェクトを見る角度によって、設定したカラーが変化する」
メインカラーに乗せたTint（淡彩）が、オブジェクトを見る角度によって微妙に変化する
⇒ビューベクトルとライトベクトルの内積を利用する
カメラ位置とライトの配置が変化することで、
カラーティントが変わっていく

View Slide

「オブジェクトを見る角度によって、設定したカラーが変化する」
※このシェーダーは、Unlitで十分にカラーが出るものに、
さらにライトによる効果を足しているので、影色がキツく出る場合には、
ディレクショナルライトのShadow Strengthを抑えめに調整する。

View Slide

NPR系シェーダーでのカラーマジック・その2

⇒GI（グローバルイルミネーション）に頼らなくても、綺麗な影が出るようにする
u  「シャドウにカラーを乗せる」
影をカラーシャドウとすることで、「黒系ではない」影を出すことができる
⇒影にカラーを入れると、それだけで綺麗に見えるし、複雑なライティングが設定されている
ように感じるもの
自身に落ちる「フォールオフ」と相手から落とされる
「キャストシャドウ」の両方にカラーが入っている
床のマテリアルもカラーシャドウシェーダーで作る

View Slide

「シャドウにカラーを乗せる」

View Slide

⇒その１の効果に、シャドウ側にのみフレネル効果を足すことで、シャドウ側の形状を強調する
u  「オブジェクトを見る角度によって、設定したカラーが変化する」
＋「シャドウ側にフレネル効果を足す」
⇒シャドウ側が淡くライティングされるフィルライト効果が出るので、
　　シーン内のライトがよりたくさんあるように感じられる
視点が変わるとカラーティントも変化するが、その分
フレネル効果が目立ってくるので、カラーがより複雑に
変化する

View Slide

「オブジェクトを見る角度によって、設定したカラーが変化する」
＋「シャドウ側にフレネル効果を足す」

View Slide


⇒GI（グローバルイルミネーション）に頼らなくても、綺麗な影が出るようにする
u  「シャドウにカラーを乗せる」+「グラウンドからの照り返し的なイメージのカラーを加える」
その２のカラーシャドウに、グラウンドからの照り返し風に、下からのグラデーションを追加する
⇒World　Positionベクトルを使用すると、オブジェクトを配置する高さによってカラーが変化する
　　World Positionの代わりにNormalベクトルを使うと、高さ変化はなくなる
オブジェクト全体に、グラウンドからの照り返し風の
カラーが入っていることで、上下感が強調される。

View Slide

「シャドウにカラーを乗せる」+「グラウンドからの照り返し的なイメージのカラーを加える」

View Slide

これらを組み合わせて、シェーダーとマテリアル
のバリエーションを作成する
•  ひとつの作品に、雑多なシェーダーを入れるのではなく、
基本となるシェーダーを作った後で、そのカスタムを
いくつか作り（今回の場合、３種類）、それぞれにカラーを
割り当てて、様々なマテリアルの質感を表現するように
すると、画面全体に統一感が出てくる。
•  さらにシーン全体を馴染ませるために、専用のSkybox
シェーダーを追加したり、フォグで全体のカラーを馴染ま
せたりするとよい。
•  マテリアルに割り当てる複数カラーの選択は、
Adobe Color CC (https://color.adobe.com/ja/explore/)
などを参考にするとよい。

View Slide

バリエーションで作成したシェーダーは３種類。本シェーダーは、スペキュラハイライトをステップ段階で変化できる。
左列がStep=2、右列がStep=50。Step=50だと、通常のぼかし状態になる。

View Slide

スペキュラハイライトのステップ段階変化の例。左上Step=2、右上Step=3、左下Step=4、右下Step=50。
Step=5～１５ぐらいだと、むしろマッハバンドのようなアーティファクトが発生しているように見えてしまう。

View Slide

NPR系シェーダー開発時のヒント
l  　セルシェーダー系は、通常色と陰色のカラー設定に時間をかけること。
　色彩設定の専門家やキャラクター設定のスタッフにやってもらうとクオリティがあがる。
l  　ディレクショナルライトの調整は、特に影周りの設定に注意を払うとよい。特にバイアス系。
l  　モバイル向けには、なるべくディレクショナルライトを使う。
　もし複数のライトが利用できるならば、キーライトとフィルライトの配置に気を配る。
⇒参考：「光の加法混色」
l  　「シルエットが特徴的でわかりやすい」モデルとマテリアルカラーを重視するNPRは相性がよい。
　デフォルメ最強。
l  　テクスチャを使わないならば、必ずしもローポリにすることはない
⇒現世代なら、多少ポリゴン数は増えてもベベルを入れたり、法線を調整してしまったほうが
　　綺麗なシェーディングはでる。
　　特にテクスチャに依存しないマテリアルカラー重視の「絵づくり」をするならば、
　　綺麗なシェーディングが出ることを最優先にしたほうがいい。
u  メッシュ密度が高いほうが、シェーディングは綺麗にでる。特に柔らかい形状の場合。
u  頂点法線を編集することで、動くライティングに対してより複雑な変化を与えることができる。

View Slide

メッシュ密度とシェーディングへの影響

View Slide

頂点法線の編集とシェーディングへの影響
真ん中のキューブのシェーディングは、どちらかと言えば、
球のそれに似ているのがわかると思う。
それは、真ん中のキューブは元々の頂点法線を、
球の頂点法線に沿って、前もって変形してあるため。

View Slide

光を混ぜてみよう～色環と補色、光の加法混色
•  色環上で補色関係にあるカラー同士をライトにして合成すると、
ホワイトのライトができる。これを光の加法混色という。
•  この原理を使って、キーライトとフィルライトのカラー
を変えることで、より複雑なライティングが可能となる。

View Slide

キーライト、フィルライト、バックライト配置の一例。
カメラの向きと同じ向きのライトがないことに注意。
Fill Light
Key Light
主要なライトはおおよそ補色関係
になっている。

View Slide

ポイントライトを使った空間の分割の例
高さとキャラまでの距離を変えて、
ポイントライトを配置する。
ステージ風の照明の見せ方でもある。

View Slide

参考文献&サイト
l  SHADER FORGE Nodes http://acegikmo.com/shaderforge/nodes/
l  Shader Forge Wiki http://acegikmo.com/shaderforge/wiki/
l  『ゲームを動かす数学・物理』堂前嘉樹 / SBクリエイティブ / 2015
l  World-Building: Shaders and Aesthetics http://polyknightgames.com/world-building-
shaders-and-aesthetics/
l  Unity Asset Store https://www.assetstore.unity3d.com
l  Unity道場11 Shader Forge 101 ～ShaderForgeを使って学ぶシェーダー入門～
基本操作とよく使われるノード編
http://www.slideshare.net/nyaakobayashi/unity11-shader-forge-101-shaderforge
l  Unity道場14 Shader Forge 102 ～ShaderForgeを使って学ぶシェーダー入門～
カスタムライティング/トゥーンシェーダー編
http://www.slideshare.net/nyaakobayashi/unity-14-shader-forge-102-shaderforge

View Slide

View Slide

トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門！

トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門！

unitydojo

More Decks by unitydojo

Featured

Transcript