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

Transcript

1. Unity道場スペシャル トゥーンシェーディングと ノンフォトリアリスティック系 絵作り入門 ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト 小林信行 2016/11/05 Sat
2. 自己紹介 ： 小林　信行 ユニティテクノロジーズジャパン合同会社 コミュニティエバンジェリスト　 UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウの普及 をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一人でもあります。 前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブル！』などの 原作付きキャラクターゲームの企画＆監督（クリエィティブ・ディレクター）。 結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、多くの コンシューマゲームに導入されるきっかけを作りました。 最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。 元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入る きっかけがGAINAXに入ったことだったので、アニメーションの制作技術に関して もむやみに詳しいです。
3. 『絵づくり講座』NPRシェーダー編では、 トゥーンシェーダーやそれらを含む NPR系シェーダーについて、その実装の考え方 や、実際の使い方を学びます。 •  『絵づくり講座』NPRシェーダー編では、主にノンフォトリアリスティック系シェーダーを使った絵づくり に話題を絞り、現場ですぐに役立つ実践的なテクニックについて扱っていこうと思います。
4. 本セッションを受講することで得られる知見 •  Unityでの、シェーダーを使った絵づくりの基本知識 •  「ユニティちゃんトゥーンシェーダー」にみる、 トゥーンシェーダー開発の基本テクニック •  Unity上で実装するNPR系シェーダー開発のポイント ※ NPR = ノンフォトリアリスティック •  シェーダーを使った様々なカラーマジックの実装の仕方
5. NPR（ノンフォトリアリスティック）系 のゲームって、そもそもどんなものが あるのだろうか？
6. NPR（ノンフォトリアリスティック）系ゲームはいくつある？ ある日のiOSトップセールスランキングを見てみたら、そもそもフォトリアリスティック系のゲームがひとつもなかった…
7. 同じ日、Steamのほうは？ 人気の新作および売上げ 上位で、大体半分ぐらいが、 ノンフォトリアリスティック系 の絵づくりをしている。 （この日に関しては、特定の タイトルが頑張りすぎている 気配があるにはあるが…）
8. 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/
9. 独自の「絵づくり（Aesthetics）」に必要 と言われる、シェーダー。 ここでシェーダーについて学んでみよう！ •  Unityをやっていると「シェーダー」という言葉をよく聞きます。ここでは「シェーダー」がどんなもので、 「絵づくり(Aesthetics/エスセティック)」に関してどんな機能を果たしているのか、簡単に説明をします。
10. そもそも「シェーダー」って、なに？ •  「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定 した、小さめのスクリプトのことを指します。 •  Unityの場合には、サーフェイスシェーダー、バーテックスシェーダー、フラグ メントシェーダー、コンピュートシェーダーの４種類があります。 •  サーフェイスシェーダーは、Unity独自のシェーダー言語であるShaderLabで 通常は書きます。さらにそれ以外のシェーダーは、ShaderLabにCgやHLSL などのより一般的なシェーダー言語を組み合わせて書かれます。 •  Asset Storeで販売されている「Shader Forge」などを使うと、シェーダー コードをノードベースで設計できます。 http://docs.unity3d.com/ja/current/Manual/SL-Reference.html
11. 共通のジオメトリ Standarｄ Shader によるマテリアル ユニティちゃんShader によるマテリアル 異なるレンダリング 結果（絵づくり） どちらかと言うと、フォト系で クレイドールの質感に近い よりイラスト寄りで、 ２D絵のイメージに 近い このように、同じジオメトリであっても、 適用するマテリアル/シェーダーが変われば、 レンダリング結果は大きく変わります。
12. Shader Forgeを使えば、ノードベースでシェーダーコードを 設計できる https://www.assetstore.unity3d.com/jp/#!/content/14147
13. ノードベースでシェーダーを設計する利点は、シェーダーの機能をブロック毎に トライアンドエラーを繰り返しながら、設計できることにある。 またノードでロジックを組むことで、ある表現に必要なノードによるロジックパターン （ノードパターン）が確認しやすくなる。  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 同じもの
14. マテリアルベースのシェーダーか？ それとも カメラベースのポストエフェクトか？ •  NPR系の絵づくりをする際に、アプローチとしては２つの手法が考えられます。 「マテリアルベースのシェーダー」を開発するか、「カメラベースのポストエフェクト」を開発するか、 ですが、ここではAsset Storeで頒布されているアセットを例に両者を比べてみましょう。
15. NPR系の絵づくりには、技術的に大きく分けて 2つのアプローチがある 1.  NPR系のシェーダーを開発して、（Unlitの）マテリアルベースで「NPR系の絵づくり」をする。 2.  イメージエフェクトとして、カメラベースのポストエフェクトで「NPR系の絵づくり」をする。 適用例
16. NPR系の絵づくりには、技術的に大きく分けて 2つのアプローチがある 1.  NPR系のシェーダーを開発して、（Unlitの）マテリアルベースで「NPR系の絵づくり」をする。 2.  イメージエフェクトとして、カメラベースのポストエフェクトで「NPR系の絵づくり」をする。 適用例 「マテリアルベース」 負荷は軽い傾向 （Unlit系なら、 さらに負荷は軽い） モバイルに最適 「ポストエフェクトベース」 画面全体にかけるので、 負荷は重い傾向 デスクトップ/コンソール 向き
17. MatCapシェーダーは、軽い割には効果が高い ​ Zbrushなどでも使われている「MatCap」は、描画負担が軽い割には、 テクスチャの工夫次第で様々なNPR系の絵づくりを楽しむことができる。 ​ ライトを使わないUnlit系マテリアルシェーダーの中でも、優れもの。 ​ ひとつは押さえておきたい。（実装もそれほど難しくはない） ↑ https://www.assetstore.unity3d.com/en/#!/content/8221 ← Zbrush系のサイトで、様々なMatCapが公開されている。自分で作るのも難しくはない。
18. トゥーンラインにも マテリアルベースと ポストエフェクトベースの ２系統がある •  ほとんどの「トゥーンシェーダー」は、「トゥーンカラーシェーダー」と「トゥーンラインシェーダー」の組み 合わせで実現されます。トゥーンカラーシェーダーの多くはカスタムライティングに基づくマテリアル ベースで設計されますが、トゥーンラインに関しては、２系統の実装方式があります。
19. 「トゥーンライン」に見る、処理系による線表示の違い ノーマル反転によるマテリアルベースのトゥーンライン（アウ トライン）表示は軽い分、クリース線や交差線は出ない。 またハードエッジに弱い等の弱点があるが、処理は軽く、 線の入り抜きなどの制御もしやすい。 古いハードウェアでも対応できるので、互換性が高い。 イメージエフェクトによるトゥーンラインの表示では、 アウトラインだけでなく、クリース線や交差線も表示 できる一方で、線の入り抜きなどの制御はしにくい。 またポストエフェクトとして処理される分、モバイル では負荷が高くなる可能性がある。 ノーマル反転によるマテリアルベースのトゥーンライン表示 カメラベースのポストエフェクトによるトゥーンライン表示
20. 使い分けのポイント： 「ベストは、マテリアルベースで絵づくりを進めておいて、 ポストエフェクトで補足すること」 •  特に、パフォーマンスとバッテリーの持ちが重視されるモバイル向けでは、 なるべくマテリアルベースで絵づくりを進めておいて、より画面をリッチに したい部分のみにポストエフェクトを足してやるのが、現世代では有効。 （「ないと困る」ような部分には使わない。あくまで追加の味付け要素） •  また、低パフォーマンスの機種でも十分に動くように、より軽い処理のみを 載せた「エコノミーモード」を用意するなどの工夫も、よく行われている。 •  Vulkan/METAL ＋ 次世代のモバイル向けGPUの組み合わせが普及すれば、 デスクトップレベルのポストエフェクトが、モバイルでも使えるようになる？？？
21. トゥーンシェーダーの実例として 「ユニティちゃんトゥーンシェーダー」 を見てみよう！ •  トゥーンシェーダーとは、NPR系シェーダーの系譜としては、「あるオブジェクトへの光の当たり具合に 基づいて、そのオブジェクトを指定のカラーで塗り分けるシェーダー」にあたります。 ここでは「ユニティちゃんトゥーンシェーダー」を例に、その仕組みを見てみましょう。
22. ユニティちゃんトゥーンシェーダーとは？ ​ 「ユニティちゃんトゥーンシェーダー」は、セル風3DCG アニメーションの制作現場での要望に応えるような形で 設計された、映像志向のトゥーンシェーダーです。 ​ 特に影の制御に重点が置かれた設計になっています。 •  アウトラインの入り抜き調整は、テクスチャで指定可能 •  必ず影にしたい場所をテクスチャで指定可能 •  ノーマル色と影色の混合部のぼけ足を調整可能 •  ライトの位置を変えずに影色の支配域を変更可能 •  モバイル環境/WebGLでも動作します •  Shader Forgeで確認できる、ノードベースで実装されています ⇒目的に合わせて、カスタマイズができます！ http://unity-chan.com/download/index.php
23. ユニティちゃんトゥーンシェーダーのノードグラフ トゥーンシェーダーとは、 「あるオブジェクトへの光の当たり 具合に基づいて、そのオブジェクト を指定のカラーで塗り分ける シェーダー」である。 陰部分のマスクの調整　※今回は解説しない アウトラインの調整　 ※今回は解説しない 光の当たり具合を元に、 通常色と陰色を割り当てる 光の当たり具合を求める
24. 光の当たり具合を求めるノードパターン Normal Directionノード ワールド空間でのメッシュの法線方向 を出力する。チェックをつけるとノーマ ルマップを考慮する。 Light Directionノード レンダリング対象となるカレントライト の方向を出力する。 Dot Productノード AとBの２つのベクトルの内積をとる。 「内積」は、２つのベクトルが構成する 角度の開き具合を表している。 上図のように、ライトベクトルと法線ベクトルの内積を取ることで、 光の当たり具合を、 ０（光が全く当たっていない）～１（光が真正面から当たっている） の範囲で表現することができる！
25. A → B → θ A → ｜ ｜ B → ｜ ｜ cosθ A → B → ・ = このオレンジ部の長さは、 A → ｜ ｜ cosθ 特に、　　が長さ1の時、オレンジ部の長さはcosθとなる。 A → 内積とは、２つのベクトルがなす角度の状態を示すスカラー値のこと。 特に2つのベクトルがノーマライズされている場合には、内積が即、 ２つのベクトルの内角のcosθの値となっている。 内積（Dot Product）とは？ 上図のように、ライトベクトルと法線ベク トルの内積を取ることで、光の当たり 具合を０～１で表現することができる！
26. マスク値を元に通常色と陰色を割り当てるノードパターン Lerpノード マスク値として与えられるTに 応じて、A、Bを混ぜるノード 「光の当たり具合」が マスク値Tとして接続される ※「光の当たり具合」をどのように 　　マスク値として評価するかによって　　 　　トゥーンカラーシェーダーごとの特徴が出る。 通常色 陰色
27. トゥーンシェーダーの本質は、 光の当たり方を元に、オブジェクトを 通常色と陰色の２種類のテクスチャで 塗り分けることだから、 両者に違うタッチのテクスチャを割り当て、 カメラ側でカラーを乗せることもできる。 unity-chan! In 《Tank!》
28. リッチなカラー表現ができる NPR系シェーダーを作ってみよう！ •  今まで見てきたとおり、NPR系シェーダーと言っても、様々なパターンが考えられます。 ここでは、手描きのテクスチャに頼らずに、カラーだけで複雑なマテリアルパターンを作成できる シェーダーを開発してみました。
29. 「NPR系の絵づくり」というと、ついつい 「テクスチャリッチな方向の絵づくり」 のみを思い浮かべがちですが… ここではちょっと違ったアプローチも 考えてみましょう！
30. 手描きテクスチャに頼らないNPR系シェーダーの開発 •  『MONUMENT VALLEY』などに代表され る、手描きテクスチャに頼らなくても、 美しい表現ができるNPR系シェーダーを 今回開発してみました。 •  その開発に当たって、参考にした様々な ポイントをこのセクションではご紹介しよ うと思います。 ※今回のシェーダーに一番イメージが近いAssetStoreのシェーダー『COLR』 http://www.monumentvalleygame.com/
31. 作成したNPR系シェーダーのサンプル画面
32. 「モバイルでも軽く、美しい表現」 を目指したい 「少ないライト」で 「リッチなカラー表現」ができる。 しかも 「テクスチャに依存しない」 作成したNPR系シェーダーのポイント
33. NPR系シェーダーでのカラーマジック・その１ l  モバイルでも軽く、美しい表現を目指す ⇒ライトが少なくても、複雑なカラー変化をするシェーダをつくる u  「オブジェクトを見る角度によって、設定したカラーが変化する」 メインカラーに乗せたTint（淡彩）が、オブジェクトを見る角度によって微妙に変化する ⇒ビューベクトルとライトベクトルの内積を利用する カメラ位置とライトの配置が変化することで、 カラーティントが変わっていく
34. 「オブジェクトを見る角度によって、設定したカラーが変化する」 ※このシェーダーは、Unlitで十分にカラーが出るものに、 さらにライトによる効果を足しているので、影色がキツく出る場合には、 ディレクショナルライトのShadow Strengthを抑えめに調整する。
35. NPR系シェーダーでのカラーマジック・その2 l  モバイルでも軽く、美しい表現を目指す ⇒GI（グローバルイルミネーション）に頼らなくても、綺麗な影が出るようにする u  「シャドウにカラーを乗せる」 影をカラーシャドウとすることで、「黒系ではない」影を出すことができる ⇒影にカラーを入れると、それだけで綺麗に見えるし、複雑なライティングが設定されている ように感じるもの 自身に落ちる「フォールオフ」と相手から落とされる 「キャストシャドウ」の両方にカラーが入っている 床のマテリアルもカラーシャドウシェーダーで作る
36. 「シャドウにカラーを乗せる」
37. NPR系シェーダーでのカラーマジック・その3 l  モバイルでも軽く、美しい表現を目指す ⇒その１の効果に、シャドウ側にのみフレネル効果を足すことで、シャドウ側の形状を強調する u  「オブジェクトを見る角度によって、設定したカラーが変化する」 ＋「シャドウ側にフレネル効果を足す」 ⇒シャドウ側が淡くライティングされるフィルライト効果が出るので、 　　シーン内のライトがよりたくさんあるように感じられる 視点が変わるとカラーティントも変化するが、その分 フレネル効果が目立ってくるので、カラーがより複雑に 変化する
38. 「オブジェクトを見る角度によって、設定したカラーが変化する」 ＋「シャドウ側にフレネル効果を足す」
39. NPR系シェーダーでのカラーマジック・その4 l  モバイルでも軽く、美しい表現を目指す ⇒GI（グローバルイルミネーション）に頼らなくても、綺麗な影が出るようにする u  「シャドウにカラーを乗せる」+「グラウンドからの照り返し的なイメージのカラーを加える」 その２のカラーシャドウに、グラウンドからの照り返し風に、下からのグラデーションを追加する ⇒World　Positionベクトルを使用すると、オブジェクトを配置する高さによってカラーが変化する 　　World Positionの代わりにNormalベクトルを使うと、高さ変化はなくなる オブジェクト全体に、グラウンドからの照り返し風の カラーが入っていることで、上下感が強調される。
40. 「シャドウにカラーを乗せる」+「グラウンドからの照り返し的なイメージのカラーを加える」
41. これらを組み合わせて、シェーダーとマテリアル のバリエーションを作成する •  ひとつの作品に、雑多なシェーダーを入れるのではなく、 基本となるシェーダーを作った後で、そのカスタムを いくつか作り（今回の場合、３種類）、それぞれにカラーを 割り当てて、様々なマテリアルの質感を表現するように すると、画面全体に統一感が出てくる。 •  さらにシーン全体を馴染ませるために、専用のSkybox シェーダーを追加したり、フォグで全体のカラーを馴染ま せたりするとよい。 •  マテリアルに割り当てる複数カラーの選択は、 Adobe Color CC (https://color.adobe.com/ja/explore/) などを参考にするとよい。
42. バリエーションで作成したシェーダーは３種類。本シェーダーは、スペキュラハイライトをステップ段階で変化できる。 左列がStep=2、右列がStep=50。Step=50だと、通常のぼかし状態になる。
43. スペキュラハイライトのステップ段階変化の例。左上Step=2、右上Step=3、左下Step=4、右下Step=50。 Step=5～１５ぐらいだと、むしろマッハバンドのようなアーティファクトが発生しているように見えてしまう。
44. NPR系シェーダー開発時のヒント l  　セルシェーダー系は、通常色と陰色のカラー設定に時間をかけること。 　色彩設定の専門家やキャラクター設定のスタッフにやってもらうとクオリティがあがる。 l  　ディレクショナルライトの調整は、特に影周りの設定に注意を払うとよい。特にバイアス系。 l  　モバイル向けには、なるべくディレクショナルライトを使う。 　もし複数のライトが利用できるならば、キーライトとフィルライトの配置に気を配る。 ⇒参考：「光の加法混色」 l  　「シルエットが特徴的でわかりやすい」モデルとマテリアルカラーを重視するNPRは相性がよい。 　デフォルメ最強。 l  　テクスチャを使わないならば、必ずしもローポリにすることはない ⇒現世代なら、多少ポリゴン数は増えてもベベルを入れたり、法線を調整してしまったほうが 　　綺麗なシェーディングはでる。 　　特にテクスチャに依存しないマテリアルカラー重視の「絵づくり」をするならば、 　　綺麗なシェーディングが出ることを最優先にしたほうがいい。 u  メッシュ密度が高いほうが、シェーディングは綺麗にでる。特に柔らかい形状の場合。 u  頂点法線を編集することで、動くライティングに対してより複雑な変化を与えることができる。
45. メッシュ密度とシェーディングへの影響
46. 頂点法線の編集とシェーディングへの影響 真ん中のキューブのシェーディングは、どちらかと言えば、 球のそれに似ているのがわかると思う。 それは、真ん中のキューブは元々の頂点法線を、 球の頂点法線に沿って、前もって変形してあるため。
47. 光を混ぜてみよう～色環と補色、光の加法混色 •  色環上で補色関係にあるカラー同士をライトにして合成すると、 ホワイトのライトができる。これを光の加法混色という。 •  この原理を使って、キーライトとフィルライトのカラー を変えることで、より複雑なライティングが可能となる。
48. キーライト、フィルライト、バックライト配置の一例。 カメラの向きと同じ向きのライトがないことに注意。 Fill Light Key Light 主要なライトはおおよそ補色関係 になっている。
49. ポイントライトを使った空間の分割の例 高さとキャラまでの距離を変えて、 ポイントライトを配置する。 ステージ風の照明の見せ方でもある。
50. 参考文献&サイト 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