Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
8 likes6,159 views
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
- 2. 自己紹介 ： 小林 信行 ユニティテクノロジーズジャパン合同会社 コミュニティエバンジェリスト UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウの普及 をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一人でもあります。 前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブル！』などの 原作付きキャラクターゲームの企画＆監督（クリエィティブ・ディレクター）。 結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、多くの コンシューマゲームに導入されるきっかけを作りました。 最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。 元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入る きっかけがGAINAXに入ったことだったので、アニメーションの制作技術に関して もむやみに詳しいです。
- 4. 本セッションを受講することで得られる知見 • Unityでの、シェーダーを使った絵づくりの基本知識 • 「ユニティちゃんトゥーンシェーダー」にみる、 トゥーンシェーダー開発の基本テクニック • Unity上で実装するNPR系シェーダー開発のポイント ※ NPR = ノンフォトリアリスティック • シェーダーを使った様々なカラーマジックの実装の仕方
- 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/
- 10. そもそも「シェーダー」って、なに？ • 「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定 した、小さめのスクリプトのことを指します。 • Unityの場合には、サーフェイスシェーダー、バーテックスシェーダー、フラグ メントシェーダー、コンピュートシェーダーの４種類があります。 • サーフェイスシェーダーは、Unity独自のシェーダー言語であるShaderLabで 通常は書きます。さらにそれ以外のシェーダーは、ShaderLabにCgやHLSL などのより一般的なシェーダー言語を組み合わせて書かれます。 • Asset Storeで販売されている「Shader Forge」などを使うと、シェーダー コードをノードベースで設計できます。 http://docs.unity3d.com/ja/current/Manual/SL-Reference.html
- 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 同じもの
- 20. 使い分けのポイント： 「ベストは、マテリアルベースで絵づくりを進めておいて、 ポストエフェクトで補足すること」 • 特に、パフォーマンスとバッテリーの持ちが重視されるモバイル向けでは、 なるべくマテリアルベースで絵づくりを進めておいて、より画面をリッチに したい部分のみにポストエフェクトを足してやるのが、現世代では有効。 （「ないと困る」ような部分には使わない。あくまで追加の味付け要素） • また、低パフォーマンスの機種でも十分に動くように、より軽い処理のみを 載せた「エコノミーモード」を用意するなどの工夫も、よく行われている。 • Vulkan/METAL ＋ 次世代のモバイル向けGPUの組み合わせが普及すれば、 デスクトップレベルのポストエフェクトが、モバイルでも使えるようになる？？？
- 22. ユニティちゃんトゥーンシェーダーとは？ 「ユニティちゃんトゥーンシェーダー」は、セル風3DCG アニメーションの制作現場での要望に応えるような形で 設計された、映像志向のトゥーンシェーダーです。 特に影の制御に重点が置かれた設計になっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 • モバイル環境/WebGLでも動作します • Shader Forgeで確認できる、ノードベースで実装されています ⇒目的に合わせて、カスタマイズができます！ http://unity-chan.com/download/index.php
- 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）とは？ 上図のように、ライトベクトルと法線ベク トルの内積を取ることで、光の当たり 具合を０～１で表現することができる！
- 30. 手描きテクスチャに頼らないNPR系シェーダーの開発 • 『MONUMENT VALLEY』などに代表され る、手描きテクスチャに頼らなくても、 美しい表現ができるNPR系シェーダーを 今回開発してみました。 • その開発に当たって、参考にした様々な ポイントをこのセクションではご紹介しよ うと思います。 ※今回のシェーダーに一番イメージが近いAssetStoreのシェーダー『COLR』 http://www.monumentvalleygame.com/
- 36. 「シャドウにカラーを乗せる」
- 39. NPR系シェーダーでのカラーマジック・その4 l モバイルでも軽く、美しい表現を目指す ⇒GI（グローバルイルミネーション）に頼らなくても、綺麗な影が出るようにする u 「シャドウにカラーを乗せる」+「グラウンドからの照り返し的なイメージのカラーを加える」 その２のカラーシャドウに、グラウンドからの照り返し風に、下からのグラデーションを追加する ⇒World Positionベクトルを使用すると、オブジェクトを配置する高さによってカラーが変化する World Positionの代わりにNormalベクトルを使うと、高さ変化はなくなる オブジェクト全体に、グラウンドからの照り返し風の カラーが入っていることで、上下感が強調される。
- 41. これらを組み合わせて、シェーダーとマテリアル のバリエーションを作成する • ひとつの作品に、雑多なシェーダーを入れるのではなく、 基本となるシェーダーを作った後で、そのカスタムを いくつか作り（今回の場合、３種類）、それぞれにカラーを 割り当てて、様々なマテリアルの質感を表現するように すると、画面全体に統一感が出てくる。 • さらにシーン全体を馴染ませるために、専用のSkybox シェーダーを追加したり、フォグで全体のカラーを馴染ま せたりするとよい。 • マテリアルに割り当てる複数カラーの選択は、 Adobe Color CC (https://color.adobe.com/ja/explore/) などを参考にするとよい。
- 42. バリエーションで作成したシェーダーは３種類。本シェーダーは、スペキュラハイライトをステップ段階で変化できる。 左列がStep=2、右列がStep=50。Step=50だと、通常のぼかし状態になる。
- 44. NPR系シェーダー開発時のヒント l セルシェーダー系は、通常色と陰色のカラー設定に時間をかけること。 色彩設定の専門家やキャラクター設定のスタッフにやってもらうとクオリティがあがる。 l ディレクショナルライトの調整は、特に影周りの設定に注意を払うとよい。特にバイアス系。 l モバイル向けには、なるべくディレクショナルライトを使う。 もし複数のライトが利用できるならば、キーライトとフィルライトの配置に気を配る。 ⇒参考：「光の加法混色」 l 「シルエットが特徴的でわかりやすい」モデルとマテリアルカラーを重視するNPRは相性がよい。 デフォルメ最強。 l テクスチャを使わないならば、必ずしもローポリにすることはない ⇒現世代なら、多少ポリゴン数は増えてもベベルを入れたり、法線を調整してしまったほうが 綺麗なシェーディングはでる。 特にテクスチャに依存しないマテリアルカラー重視の「絵づくり」をするならば、 綺麗なシェーディングが出ることを最優先にしたほうがいい。 u メッシュ密度が高いほうが、シェーディングは綺麗にでる。特に柔らかい形状の場合。 u 頂点法線を編集することで、動くライティングに対してより複雑な変化を与えることができる。
- 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