Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unite2017 tokyo toonshadermaniax

2,878 views

Published on

Unite 2017 Tokyo「Unityで楽しむノンフォトリアルな絵づくり講座:トゥーンシェーダー・マニアクス」のスライドです。

Published in: Engineering
  • Be the first to comment

Unite2017 tokyo toonshadermaniax

  1. 1. Unityで楽しむノンフォトリアルな絵づくり講座: トゥーンシェーダー・マニアクス 小林信行 コミュニティエバンジェリスト Unity Technologies Japan合同会社 2017/05/09
  2. 2. 自己紹介 : 小林 信行 ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウ の普及をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一 人でもあります。 前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブ ル!』などの原作付きキャラクターゲームの企画&監督(クリエィティ ブ・ディレクター)。 結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、 多くのコンシューマゲームに導入されるきっかけを作りました。 最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。 元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入 るきっかけがGAINAXに入ったことだったので、アニメーションの制作技術 に関してもむやみに詳しいです。
  3. 3. 本セッションを受講することで 得られる知見 1. NPR系シェーダーである「ユニティちゃんトゥーン シェーダー Ver.2.0」(UTS2)が実装している機能に ついて知ることができる。 2. UTS2の開発を通じて得られた、トゥーンシェーダーを 開発する上での技術的なポイントを知ることができる。
  4. 4. ユニティちゃん トゥーンシェーダー Ver.2.0 (UTS2) が実装する機能について 第1部
  5. 5. Q: ここ1年間の『CGWORLD』誌にて セルルック/トゥーンシェーダー関連の記事 が載っていた号は、どの号でしょうか?
  6. 6. Q: ここ1年間の『CGWORLD』誌にて セルルック/トゥーンシェーダー関連の記事 が載っていた号は、どの号でしょうか? A: 全号です。 ※内容は、セルルック3DCGアニメ、トゥーン シェーダーを使ったゲーム等様々ですが、毎号 何らかの記事が掲載されていました。
  7. 7. Unite 2017 Tokyoでトゥーンシェーダー/ セルルックに関係のあるセッション 全部で4セッション • 「魔法使いプリキュア!」EDでのUnity映像表現の詳細解説 • セルシェーダーを使用した3Dキャラアプリの開発事例 • Unityで楽しむノンフォトリアルな絵づくり講座:トゥーンシェーダー・マニアクス • 「オルタナティブガールズ」~50cmの距離感で3D美少女を最高にかわいく魅せる方法〜
  8. 8. 実際に、美しいトゥーン/セルルック表現を 実現しているゲームはすぐ話題になります 『崩壊3rd』 miHoYo Inc. 『アイドルマスター シンデレラガールズ ビューイングレボリューション』 株式会社バンダイナムコエンターテインメント
  9. 9. みんな大好き「トゥーンシェーダー」 (下手したら、フォトリアルよりも好きなのかも?) • でも、ハイエンドの、映像制作にも耐えうるレベルのトゥーンシェーダーは、 多くのゲームエンジンには「標準」で付属しない。 • 何故:技術的にはNPR(ノンフォトリアリスティック)関連は流行ではない。 =ある意味、「枯れた技術」の集まりである。 • 一方:NPR表現は、作品/タイトル毎に「絵づくり」をする上で、 「ウリ」となる重要な要素である。 =より、アーティスト/コンシューマ好みの表現手段である。 • エンジニア的な関心よりは、アーティスト的関心に導かれて 設計した方が、よいものができそう。
  10. 10. だから「作っちゃいました」: ユニティちゃんトゥーンシェーダーVer.2.0 • Q: なんで「Ver.2.0」なの? ⇒ A: すでに「Ver.1.0」は公開されているからです。
  11. 11. Ver.1.0からの機能強化項目:13項目以上 コードもゼロから一新しました! ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 (そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました) • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色(明色)/1影/2影+ハイカラー指定、及び通常色(明色)/1影の 間、1影/2影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。
  12. 12. Ver.1.0からの機能強化項目:13項目以上 コードもゼロから一新しました! ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 (そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました) • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色(明色)/1影/2影+ハイカラー指定、及び通常色(明色)/1影の 間、1影/2影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。 ユニティちゃんトゥーンシェーダー Ver.1.0の機能(基本機能) ユニティちゃんトゥーンシェーダー Ver.2.0の機能(追加機能)
  13. 13. UTS2:セルルックからイラスト風ルック までカバーする、幅広い表現力 このSDユニティちゃんは、 同じテクスチャから作られています。 違いはUTS2でのシェーダープロパティ の設定値のみです。 セルルック イラスト風ルック
  14. 14. セルルック イラスト風ルック
  15. 15. セルルック3DCGアニメ制作者向け: PSOFT Pencil+ 4 Line for Unityへの対応 UTS2は、映像向けのより高品位なトゥーンライン シェーダーであるPencil+ 4 Line for Unityと組み合わせ て使用できるバリエーションを標準で持っています。
  16. 16. セルルック3DCGアニメ制作者向け: UST2+PSOFT Pencil+ 4 Line for Unityの意義 1. 3ds Maxがメインのスタジオ以外でも、Pencil+ Lineの美しい トゥーンラインが使える! 2. 映像制作パイプラインは、マーザ・アニメーションプラネットの 皆様による『The Gift』の事例(Unite 2016 Tokyo)が使える! (Alembic Importer + Frame Capturer) ⇒既存の3DCGアニメ映像制作のパイプラインを 大きく改変することなく、選択の幅が広くなる!
  17. 17. Pencil+ 4 Line for Unity + UTS2セルルック作例: 『あんさんぶるスターズ!』 ©2014 Happy Elements K.K
  18. 18. 『あんさんぶるスターズ!』 ©2014 Happy Elements K.K
  19. 19. 『あんさんぶるスターズ!』 ©2014 Happy Elements K.K
  20. 20. 『あんさんぶるスターズ!』 ©2014 Happy Elements K.K
  21. 21. 『あんさんぶるスターズ!』 ©2014 Happy Elements K.K
  22. 22. 『あんさんぶるスターズ!』 ©2014 Happy Elements K.K
  23. 23. UTS2:ゲームシーンをさらに美しく! Unity5 のGIシステムへの対応 UTS2は、Unity5が搭載 するGIシステムに対応。 ステージ上の複雑なライ ティングにトゥーンシェー ディングされたキャラク ターが美しく反応します。
  24. 24. UTS2: Unity5 のGIシステムへの対応 ユニティちゃんシェーダー 「ユニティちゃんシェーダー」を含む、従来のリアル タイムトゥーンシェーダーは、主にEmission(自己発 光)に接続する形で、最終カラーを出力していたので、 カラーが綺麗にでる代わりに、実際のアニメーション では必要となるような、シーンカラーやシーンライト への馴染ませは苦手とするシチュエーションが多くあ りました。 実際のセルアニメーションの制作現場でも、「撮影」 と呼ばれる段階でのカラーグレーディング工程を経て、 キャラと背景とを馴染ませる工程が必要でした。
  25. 25. UTS2: Unity5 のGIシステムへの対応 UTS2では、ポイントライトを含む様々な ライトの他に、Unity5のGIシステムにも対応 しました。 事前に配置したベイク用ポイントライトと Light Probeから、UTS2がシーンのライティ ング情報を読み取り、キャラクターのカラー へと美しく反映させるようになりました。 ユニティちゃんトゥーンシェーダー Ver.2.0
  26. 26. UTS2: Unity5 のGIシステムへの対応 ユニティちゃんトゥーンシェーダー Ver.2.0ユニティちゃんシェーダー ユニティちゃんへのライティング の影響は変わりません。 ユニティちゃんがライティングの影響を受け ることが可能。
  27. 27. UTS2:セル画風3DCGアニメーションの 制作現場での要望に応える形での基本設計 2つの重要な基本設計: 1. いわゆる「影」は色設計担当者が作成しやすいような「影色設定」を 使う方式を採用。 ⇒・セルフシャドウにも「影色」が適用される。 ・各色に対するライトの影響を、自由にON/OFFできる 2. 各パーツの形状(フォルム)を強調する「影」や、キャラクターの デザイン上、光源の位置や強さとは関係なく、必ず必要となる「影」 が出しやすいように設計。 ⇒・少ないライトで、明色部分と影色部分の塗り分けが制御できる。 ・塗り分けの調整に、用途に合わせ2つの手段がある。
  28. 28. Hi(カラー) 通常(ノーマル) 1号影(1影) 2号影(2影) ユニティちゃん 髪の毛カラー設定 アニメーション制作では、 各シーン単位でパーツごと にカラー設計がなされる。 影色設定とは? これらのカラー設計をする、 色彩設計の専門スタッフが いるのが普通。
  29. 29. アニメーション制作では、 多くの影は、光源方向を 意識しつつ、各パーツの 形状(フォルム)を強調 するための目的で置く。 形状(フォルム)を 強調する影とは? 腕やおさげの影などが特徴 的だが、基本となる形状が 「円柱」であることを意識 した影付けがなされている。 一方、セルフシャドウは、 演出的意図がある場合以外は、 手描きアニメでは避ける。
  30. 30. UTS2:セル画風3DCGアニメーションの 制作現場での要望に応える形での基本設計 2つの重要な基本設計: 1. いわゆる「影」は色設計担当者が作成しやすいような「影色設定」を 使う方式を採用。 ⇒・セルフシャドウにも「影色」が適用される。 ・ライトカラーの反映を、各色でON/OFFできる 2. 各パーツの形状(フォルム)を強調する「影」や、キャラクターの デザイン上、光源の位置や強さとは関係なく、必ず必要となる「影」 が出しやすいように設計。 ⇒・少ないライトで、明色部分と影色部分の塗り分けが制御できる。 ・塗り分けの調整に、用途に合わせ2つの手段がある。
  31. 31. ライトを動かさずに、各影の領域を指定できる
  32. 32. ライトカラー の反映なし ライトカラー 反映を各色で ON/OFFできる 影色にのみ ライトカラー を反映 『もえたん』©三才ブックス 影色にのみ、淡い紫色の ライトカラーを反映させている。
  33. 33. ライトカラー の反映なし ライトカラー 反映を各色で ON/OFFできる 影色にのみ ライトカラー を反映 『もえたん』©三才ブックス 影色にのみ、淡い紫色の ライトカラーを反映させている。 ©カラー
  34. 34. UTS2:用途に合わせて、影の制御用に 使われる補助マップに2つの方式が選べる Ø Toon_DoubleShadeWithFeather系(標準トゥーンシェーダー) ⇒・通常色/1影色/2影色+ハイカラー指定の他、各色の境界ぼかし などの基本機能を備える ・ライティングと関係なく、常に決まった位置に影を配置できる 「ポジションマップ」を持つ Ø Toon_ShadingGradeMap系(拡張トゥーンシェーダー) ⇒・基本機能は、 Toon_DoubleShadeWithFeather系と同じ ・「ポジションマップ」のように、常に決まった位置に影を配置する のではなく、特定の位置に影を掛かりやすいようにする 「シェーディンググレードマップ」を持つ
  35. 35. UTS2:用途に合わせて、影の制御用に 使われる補助マップに2つの方式が選べる Ø Toon_DoubleShadeWithFeather系(標準トゥーンシェーダー) ⇒・通常色/1影色/2影色+ハイカラー指定の他、各色の境界ぼかし などの基本機能を備える ・ライティングと関係なく、常に決まった位置に影を配置できる 「ポジションマップ」を持つ Ø Toon_ShadingGradeMap系(拡張トゥーンシェーダー) ⇒・基本機能は、 Toon_DoubleShadeWithFeather系と同じ ・「ポジションマップ」のように、常に決まった位置に影を配置する のではなく、特定の位置に影を掛かりやすいようにする 「シェーディンググレードマップ」を持つ
  36. 36. 2つの影制御用マップの効果 シェーディンググレードマップ ポジションマップ
  37. 37. UTS2:ポジションマップの効果 ライトや影の状態に関係なく常に2影を表示したい場所は、1影の ポジションマップと2影のポジションマップを重ねて指定する。 常に2影が表示されている領域は、影の中でも常に2影が表示され る領域になる。 一方、明るいところでは2影が表示されない領域(2影のポジショ ンマップでは指定されているが、1影のポジションマップ外になっ ている領域)は、影の中に入った時のみ2影が表示される。
  38. 38. UTS2:シェーディンググレードマップの効果 シェーディンググレードマップを使うことで、部分的に 影の出やすさを制御する。 通常のトゥーンシェーダーにShading Grade Map (シェーディングの掛かり方傾斜マップ)を足すことで、 UV単位で1影および2影の掛かりやすさを制御できます。
  39. 39. UTS2:どんな用途に使い分ける? Ø Toon_DoubleShadeWithFeather系(標準トゥーンシェーダー) ⇒・「ポジションマップ」を使って、常に影が落ちる部分を指定する。 例:首にかかる頭の落ち影、デザイン的な鼻の横影… (ライトに照らされていても、消えない固定影を指定できる) Ø Toon_ShadingGradeMap系(拡張トゥーンシェーダー) ⇒・「シェーディンググレードマップ」を使って、影が現れやすい 場所を指定する。 例:前髪の形状に沿った影、服のしわ… (ライトで照らされている時は、現れない固定影を指定できる)
  40. 40. UTS2:どんな用途に使い分ける? Ø Toon_DoubleShadeWithFeather系(標準トゥーンシェーダー) ⇒・「ポジションマップ」を使って、常に影が落ちる部分を指定する。 例:首にかかる頭の落ち影、デザイン的な鼻の横影… (ライトに照らされていても、消えない固定影を指定できる) Ø Toon_ShadingGradeMap系(拡張トゥーンシェーダー) ⇒・「シェーディンググレードマップ」を使って、影が現れやすい 場所を指定する。 例:前髪の形状に沿った影、服のしわ… (ライトで照らされている時は、現れない固定影を指定できる)
  41. 41. UTS2:その他、提供されている共通機能 1. リムライト、MatCap、「天使の輪」などのエフェクト的なハイライト機能 2. 「瞳の前髪への透過」などを簡単に指定できるステンシル機能を プリセットしたシェーダーバリエーション 3. クリッピングマスクやαチャンネルなどで、簡単にマテリアルをUV単位で クリッピングし、複数マテリアルを同一メッシュに割り当て可能 4. 高機能な、リアルタイム向け「反転アウトライン」 Ø ラインカラーとマテリアルカラーとのブレンドのON/OFF Ø UV単位で指定する「アウトラインサンプラー」マップを用いた、アウトラインの太さ調整 Ø カメラ距離に応じた、アウトラインの太さ調節 Ø カメラ奥行き方向へのアウトラインオフセット機能
  42. 42. UTS2の開発を通じて得られた、 トゥーンシェーダーを構築する上での 技術的なポイント 第2部
  43. 43. これ以降、シェーダーのロジック部分は、 Shader Forgeのノードで確認していきます。
  44. 44. しばしば見かける、トゥーンシェーダーの 「いたしません(できません)」リスト 1. 「各マテリアル毎のカラー設定」のような形で、 各パーツに塗られるカラーを直接指定することができません。 2. セルフシャドウが使えません。 もしくは使えても、濁った黒っぽい影しか落とせません。 3. 各パーツへの影(シェイド)のかかり具合を調整するのに、 複数のライトや複雑なライトリンキングがないとできません。 4. 各色間の境界ぼかしが発生する位置が固定で、 調整するにはテクスチャベースで修正しないとできません。 5. ポイントライトや、GIなどの環境光には、反応できません。
  45. 45. しばしば見かける、トゥーンシェーダーの 「いたしません(できません)」リスト 1. 「各マテリアル毎のカラー設定」のような形で、 各パーツに塗られるカラーを直接指定することができません。 2. セルフシャドウが使えません。 もしくは使えても、濁った黒っぽい影しか落とせません。 3. 各パーツへの影(シェイド)のかかり具合を調整するのに、 複数のライトや複雑なライトリンキングがないとできません。 4. 各色間の境界ぼかしが発生する位置が固定で、 調整するにはテクスチャベースで修正しないとできません。 5. ポイントライトやGIなどの環境光には、反応できません。 ユニティちゃん トゥーンシェ-ダー Ver.2.0なら、 すべてできます!
  46. 46. Toon_DoubleShadeWithFeather Toon_ShadingGradeMap ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 (そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました) • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色(明色)/1影/2影+ハイカラー指定、及び通常色(明色)/1影の 間、1影/2影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。 ユニティちゃんトゥーンシェーダーVer.2.0の機能リスト
  47. 47. Toon_DoubleShadeWithFeather Toon_ShadingGradeMap ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 (そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました) • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色(明色)/1影/2影+ハイカラー指定、及び通常色(明色)/1影の 間、1影/2影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。 これら機能を、 どのように 実装しているのか、 みていきましょう! ユニティちゃんトゥーンシェーダーVer.2.0の機能リスト
  48. 48. トゥーンシェーダーとは、 「あるオブジェクトへの光の当たり具合に 基づいて、そのオブジェクトを指定の カラーで塗り分けるシェーダー」 である。 実装の原理
  49. 49. 塗り分けマスク作成 ハイカラー(スペキュラ)作成 塗り分け実行 通常色/1影色 /2影色指定 リムライト作成 MatCap作成 アウトライン関連 コンポジット実行 Toon_DoubleShadeWithFeather
  50. 50. 塗り分けマスク作成 ハイカラー(スペキュラ)作成 塗り分け実行 通常色/1影色 /2影色指定 リムライト作成 MatCap作成 アウトライン関連 コンポジット実行 Toon_ShadingGradeMap
  51. 51. UTS2のノード構成概念図 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノード
  52. 52. UTS2:どんな入力情報が必要? 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換
  53. 53. Normal Vector:頂点法線とノーマルマップ ←4頂点しかないQuadでも、 ノーマルマップを割り当ててやると、 でっぱりがあるように見える。 ※ライティングされるから (フラグメントシェーダーの機能) UVマップ 頂点法線 Vertex Normal ノーマルマップ (タンジェントスペース) シェーダー内でライティング計算に 使用する時には、World Normalに 変換される。 ✓
  54. 54. 頂点法線の編集とシェーディングへの影響 真ん中のキューブのシェーディングは、どちらかと言えば、 球のそれに似ているのがわかると思う。 それは、真ん中のキューブは元々の頂点法線を、 球の頂点法線に沿って、前もって変形してあるため。
  55. 55. 頂点法線の編集とノーマルマップを 組み合わせると? Q:頂点法線を編集したQuadに、ノーマルマップを当ててライティングする とどうなるか? + Quadの外側方向に、 頂点法線を編集する (中央に凸があるイメージ)
  56. 56. 頂点法線の編集とノーマルマップを 組み合わせると? A:ライティングした時に、主に頂点法線の影響を受けつつ、 ノーマルマップ側のほうも、頂点法線のシェーディング結果を受ける。 左:通常のQuad 右:頂点法線編集済
  57. 57. Light / View / Half Vector Light Vector View Vector Half Vector レンダリング対象となっているカレントライトへの方向を出力する。 ジオメトリ上の現在位置からのカメラの方向を、ワールド座標で出力する。 ビューおよびライトベクトルの中間点を示す方向であるハーフディレクション を出力する。これはBlinn-Phongスペキュラモデルで普通使われるもの。
  58. 58. UTS2:入力情報をどう加工する? 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 内積 内積 内積 Transform
  59. 59. 内積/ Dot Product とは? A → B →θ A → | | B → | |cosθA → B → ・ = このオレンジ部の長さは、 A → | |cosθ 特に、 が長さ1の時、オレンジ部の長さはcosθとなる。A → 内積とは、2つのベクトルがなす角度の状態を示すスカラー値 のこと。特に2つのベクトルがノーマライズされている場合には、 内積が即、2つのベクトルの内角のcosθの値となっている。
  60. 60. 内積/ Dot Product とは? 上図のように、ライトベクトルと ノーマルベクトルの内積を取ること で、光の当たり具合を0~1で 表現することができる! 内積がマイナスは、 「光が当たっていない」 ことを示している。
  61. 61. 「ノーマルベクトルとその他ベクトルと の内積」を取ると、何が得られるのか? Light Vectorノードとの内積 をとって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 One Minusで反転し、リムライトの 状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ (グロッシイ)反射の状態を得る。
  62. 62. Light Vectorノードとの内積 をとって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 One Minusで反転し、リムライトの 状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ (グロッシイ)反射の状態を得る。 塗り分けマスク 作成 ハイカラー (スペキュラ) 作成 リムライト 作成 「ノーマルベクトルとその他ベクトルと の内積」を取ると、何が得られるのか?
  63. 63. UTS2:ノーマルマップからスペキュラマスクを作る UTS2では、MatCapに適用できる追加ノーマルマップを、スペキュラの出方を 調整する「スペキュラマスク」に使用している。(髪の光沢表現等) 上のシェーダーでも、ボールに貼られている千代紙の質感(紙繊維のタッチ)は、 ノーマルマップをスペキュラマスクとして使用することで表現している。 影側に入っても、スペキュラが軽く反射しているので、千代紙の質感が失われない。
  64. 64. Light Vectorノードとの内積 をとって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 One Minusで反転し、リムライトの 状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ (グロッシイ)反射の状態を得る。 塗り分けマスク 作成 ハイカラー (スペキュラ) 作成 リムライト 作成 • これらの「ノーマルベクトルとその他ベクトルとの内積」計算は、 その結果を見れば、「全てなんらかのカラー合成用のマスクを作っている」 工程だと考えることができる。 • 実際、Photoshopでイラストを描くときにも、レイヤー単位でマスクを 作成して様々なカラー合成を行うが、トゥーンシェーダー内でやっている こともまったく同じ工程である。 「ノーマルベクトルとその他ベクトルと の内積」を取ると、何が得られるのか?
  65. 65. UTS2:マスクの調整範囲を拡張したい! 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 内積 内積 内積 Transform
  66. 66. 塗り分けマスクの調整範囲の拡張:Half Lambert 内積がマイナスは、 「光が当たっていない」 ことを示している。 通常の内積計算では、-1~0 の範囲は、 黒100%になってしまう。 ⇒ここを0~0.5にリマップすることで、 マスクの調整範囲を拡張することがで きる。
  67. 67. 塗り分けマスクの調整範囲の拡張:Half Lambert 最も基本的なHalf Lambertのノード例 • Half Lambertとは、通常-1~1の範囲で示されるライティングの状態を、 0~1の範囲にリマップし直すことです。 結果、陰影の入り方が柔らかめになり、 黒100%だった影部分にグレー階調が入ります。
  68. 68. 塗り分けマスクの調整範囲の拡張:Half Lambert Half Lambertの場合Lambertの場合 • 黒100%だった影部分にグレー階調が入ることで、 Photoshopなどが搭載している「レベル調整」が 影が落ちる階調の全域で機能することになります。 結果、塗り分けマスクの調整範囲が拡張されます。
  69. 69. UTS2:マスク作成と塗り分けの実行 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 内積 内積 内積 Transform Lerp Step
  70. 70. 塗り分けマスク作成と塗り分けの実行 :Ramp Shader Step (A<=B)ノード AがBと同じかそれ以下の場合、 1を出力。それ以外は0を出力する。 2値化の閾値を設定するノード Lerpノード マスク値として与えられるTに 応じ、A/Bで塗り分けるノード マスク情報 Lerp Step
  71. 71. 塗り分けマスク作成と塗り分けの実行 :Ramp Shader
  72. 72. 塗り分けマスク作成と塗り分けの実行 :Ramp Shader 塗り分けマスク作成 塗り分け実行 通常色/影色指定 • ランプシェーダーも、Half Lambertモデルから作る ことができます。 • その際、StepノードとLerpノードの2つのノードを 使用します。Stepノードで2値のマスクを作成し、 そのマスクに従って、通常色と影色を塗り分けます。 Lerp Step マスク情報
  73. 73. 0~1の範囲で連続するマスク情報を、 二値化したり、境界ぼかしを入れていく Step Remap
  74. 74. 0~1の範囲で連続するマスク情報を、 二値化するStepノード Step
  75. 75. 0~1の範囲で連続するマスク情報を、 二値化し境界ぼかしを入れるRemapノード Remap
  76. 76. UTS2:塗り分けは「境界ぼかし」方式で 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 内積 内積 内積 Transform Lerp Remap マスク情報
  77. 77. UTS2のノード構成概念図 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 内積 内積 内積 Transform Lerp Remap マスク情報 l ここまでのノード構成で表現できるのは、 「シェーディング」(形状を強調する影)だけ。 l ここにセルフシャドウなどの、他のオブジェクト からキャストされるシャドウ(レシーブシャドウ) を加えるためには、ここまでのノード構成に Unityのシステムシャドウを追加する必要がある。
  78. 78. 1. Light Attenuationノード は、システムシャドウ (この場合、特にセルフ シャドウやレシーブシャド ウ)を得るノード。 2. Fallbackの設定を VertexLitなどにする。 システムシャドウを得る:Light Attenuation
  79. 79. • Light Attenuationの作る影は、リニ アカラースペースでも、グレーの階調 がHalf Lambertよりもきつめに出る 傾向がある システムシャドウを得る:Light Attenuation Light Attenuation のみ Half Lambertのみ
  80. 80. • Light Attenuationの評価をHalf Lambertに 乗算すると、特に形状を強調する影の出方が Half Lambertのみの時よりも、きつくなる。 システムシャドウを得る:Light Attenuation Light Attenuation ×Half Lambert Half Lambertのみ
  81. 81. • Light Attenuationのつくる影を同様にHalfにし、階調を 馴染ませてやると、Half Lambertとの相性がよくなる。 システムシャドウを得る:Light Attenuation Half Light Attenuation ×Half Lambert Half Lambertのみ Half Light Attenuation
  82. 82. • 両者を比較するとこんな感じ システムシャドウを得る:Light Attenuation Half Light Attenuation ×Half Lambert Half Lambertのみ Light Attenuation ×Half Lambert Half Lambertのみ
  83. 83. • Shader Forgeのサンプルな どでも、それまでのノード チェーンの一番最後に接続 されて、評価されることが 多い。 ここまでの ノードチェーン の末端 Light Attenuation システムシャドウを得る:Light Attenuation ノードの挿入位置
  84. 84. UTS2:システムシャドウはどこに入れる? 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) 内積 内積 内積 Transform Lerp Remap マスク情報
  85. 85. 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) 内積 内積 内積 Transform Lerp Remap マスク情報 Light Attenuationで扱えるのは、ライトの減衰だけ。 「減衰」だけではカラーシャドウは即、扱えない! UTS2:システムシャドウはどこに入れる?
  86. 86. 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) 内積 内積 内積 Transform Lerp Remap マスク情報 UTS2:システムシャドウはどこに入れる? 明度が低いセルフシャドウ になってしまう
  87. 87. 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) 内積 内積 内積 Transform Lerp Remap マスク情報 塗り分けマスクに 混ぜるのが正解 UTS2:システムシャドウはどこに入れる?
  88. 88. 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) 内積 内積 内積 Transform Lerp Remap マスク情報 塗り分けマスクに 混ぜるのが正解 UTS2:システムシャドウはどこに入れる? 塗り分けマスクのほうに、システムシャドウの情報を 混ぜてやることで、初めてカラーシャドウが扱えるよ うになる。
  89. 89. • Half Lamberモデルをそのまま塗 り分けマスクに使うのではなく、 Half Light Attenuation× Half Lambertモデルを塗り分けマスク として使うことで、システムシャ ドウの情報が塗り分けマスクにも 追加されることになる。 二値化してみるとわかりやすい。 塗り分けマスクへの追加情報の加え方 Half Light Attenuation ×Half Lambert Half Lambertのみ 光源との間に遮蔽物を 置くと、こちらには影 がかかる 二値化した結果
  90. 90. 塗り分けマスクへの追加情報の加え方 • 調整マップなども、 塗り分けマスクを作る 段階で、追加情報とし て加えていく。
  91. 91. UTS2のノード構成概念図 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) ??? 内積 内積 内積 Transform Lerp Remap マスク情報 この位置に入れる べきノードは?
  92. 92. UTS2のノード構成概念図 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) System GI (ShadeSH9) 内積 内積 内積 Transform Lerp Remap マスク情報
  93. 93. 追加光としてのシステムGIの合成 • 追加光として のGIの合成は、 コンポジット の最終段階で おこなう。 System GIデコードを する、ShadeSH9()
  94. 94. UTS2:アウトライン関連は? 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー (スペキュラ) 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) System GI (ShadeSH9) 内積 内積 内積 Transform Lerp Remap マスク情報 ノーマル反転
  95. 95. 「トゥーンライン」に見る、処理系による線表示の違い ノーマル反転によるマテリアルベースのトゥーンライン(ア ウトライン)表示は軽い分、クリース線や交差線は出ない。 またハードエッジに弱い等の弱点があるが、処理は軽く、 線の入り抜きなどの制御もしやすい。 古いハードウェアでも対応できるので、互換性が高い。 イメージエフェクトによるトゥーンラインの表示では、 アウトラインだけでなく、クリース線や交差線も表示で きる一方で、線の入り抜きなどの制御はしにくい。また ポストエフェクトとして処理される分、モバイルでは負 荷が高くなる可能性がある。 ノーマル反転によるマテリアルベースのトゥーンライン表示 カメラベースのポストエフェクトによるトゥーンライン表示 ノーマル反転
  96. 96. 保守性向上のため、アウトライン処理は cgincで外部ファイル化してある Cgincによる読み込み処理
  97. 97. 最後に、 ノードベースシェーダーエディタ のコードをカスタマイズしたい 人向けのTipsです
  98. 98. ノードが複雑になってきたら、 Set / Get ノードで機能毎に分割するとよい Setノード Getノード • Setした内容がプルダウンで 選べるだけでなく、後にコー ドで読む時に機能毎の計算結 果が変数化されているので、 扱いやすい。 • ノードベースで組まれている シェーダーをコード加工をす る時には、特に便利。
  99. 99. まとめ 1. トゥーンシェーダーとは、 「あるオブジェクトへの光の当たり具合に基づいて、そのオブジェクト を指定のカラーで塗り分けるシェーダー」である。 2. 「光の当たり具合」をどのようにマスク値として評価するかによって トゥーンシェーダーごとの特徴や機能の違いがあらわれる。 3. 「光の当たり具合」を求めるのに最も重要なベクトルは、ノーマル(法 線)ベクトルである。ノーマルベクトルは、シェーダーの様々な場所で 使われている。 4. ノーマルベクトルとその他のベクトルとの「内積」を求めることで、用 途別に様々な合成用マスクを作ることができる。 これらの合成用マスクは、Photoshopなどで2Dイラストを作る時に作 成する「レイヤー合成用のマスク」にあたるものである。
  100. 100. 最後に • 「そもそも、何故トゥーンシェーダーを組んでみようと思ったのか?」というと、 何年か前に「ラノベの表紙を飾るイラストで使われているPhotoshopの技法は、 トゥーン系のシェーダーで再現できるのではないか?」と気づいたからです。 • ただ当時は、それを自分の手で組むのではなく、シェーダーを書けるエンジニアに発注 しました。でもなかなか自分好みの思い通りのシェーダーを組んでもらうことはできな かった。当時、シェーダーの学習コストは高く、しかもノウハウがほとんど公開されて いなかったので、どこから手を付ければよいか、自分自身がわからなかったからです。 • 今回、こうして「ユニティちゃんトゥーンシェーダーVer.2.0」を開発して、公開でき るようになったのは、シェーダーの学習がエンジニア以外にも大きく開かれた時代が来 たからです。特にUnityの「Try & Errorのイテレーションが速い」環境は、シェーダー 学習にも大変役だちました。 「絵づくりの完成形」は各アーティストの中にあるものです。 今後は自らシェーダーを書くアーティストが増えていくことを 願いつつ、〆の言葉とさせていただきます。
  101. 101. UTS2の公開先&ライセンス情報 ユニティちゃんオフィシャルHP (http://unity-chan.com/) 『DATA DOWLOAD』より配布中。 詳しい日英マニュアル付き! UCL2.0ライセンスにて、 商用/非商用を問わず、 無料でご利用いただけます!
  102. 102. Thank you!

×