Unite2017 tokyo toonshadermaniax
•
12 gefällt mir•7,113 views
Unite 2017 Tokyo「Unityで楽しむノンフォトリアルな絵づくり講座：トゥーンシェーダー・マニアクス」のスライドです。
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Unite2017 tokyo toonshadermaniax
Ähnlich wie Unite2017 tokyo toonshadermaniax (20)
Mehr von 小林 信行
Mehr von 小林 信行 (19)
Unite2017 tokyo toonshadermaniax
- 2. 自己紹介 ： 小林 信行 ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウ の普及をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一 人でもあります。 前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブ ル！』などの原作付きキャラクターゲームの企画＆監督（クリエィティ ブ・ディレクター）。 結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、 多くのコンシューマゲームに導入されるきっかけを作りました。 最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。 元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入 るきっかけがGAINAXに入ったことだったので、アニメーションの制作技術 に関してもむやみに詳しいです。
- 3. 本セッションを受講することで 得られる知見 1. NPR系シェーダーである「ユニティちゃんトゥーン シェーダー Ver.2.0」（UTS2）が実装している機能に ついて知ることができる。 2. UTS2の開発を通じて得られた、トゥーンシェーダーを 開発する上での技術的なポイントを知ることができる。
- 7. Unite 2017 Tokyoでトゥーンシェーダー/ セルルックに関係のあるセッション 全部で４セッション • 「魔法使いプリキュア！」EDでのUnity映像表現の詳細解説 • セルシェーダーを使用した3Dキャラアプリの開発事例 • Unityで楽しむノンフォトリアルな絵づくり講座：トゥーンシェーダー・マニアクス • 「オルタナティブガールズ」～50cmの距離感で3D美少女を最高にかわいく魅せる方法〜
- 8. 実際に、美しいトゥーン/セルルック表現を 実現しているゲームはすぐ話題になります 『崩壊3rd』 miHoYo Inc. 『アイドルマスター シンデレラガールズ ビューイングレボリューション』 株式会社バンダイナムコエンターテインメント
- 9. みんな大好き「トゥーンシェーダー」 （下手したら、フォトリアルよりも好きなのかも？） • でも、ハイエンドの、映像制作にも耐えうるレベルのトゥーンシェーダーは、 多くのゲームエンジンには「標準」で付属しない。 • 何故：技術的にはNPR（ノンフォトリアリスティック）関連は流行ではない。 ＝ある意味、「枯れた技術」の集まりである。 • 一方：NPR表現は、作品/タイトル毎に「絵づくり」をする上で、 「ウリ」となる重要な要素である。 ＝より、アーティスト/コンシューマ好みの表現手段である。 • エンジニア的な関心よりは、アーティスト的関心に導かれて 設計した方が、よいものができそう。
- 10. だから「作っちゃいました」： ユニティちゃんトゥーンシェーダーVer.2.0 • Q: なんで「Ver.2.0」なの？ ⇒ A: すでに「Ver.1.0」は公開されているからです。
- 11. Ver.1.0からの機能強化項目：13項目以上 コードもゼロから一新しました！ ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 （そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました） • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色（明色）/１影/２影＋ハイカラー指定、及び通常色（明色）/１影の 間、１影/２影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。
- 12. Ver.1.0からの機能強化項目：13項目以上 コードもゼロから一新しました！ ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 （そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました） • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色（明色）/１影/２影＋ハイカラー指定、及び通常色（明色）/１影の 間、１影/２影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。 ユニティちゃんトゥーンシェーダー Ver.1.0の機能（基本機能） ユニティちゃんトゥーンシェーダー Ver.2.0の機能（追加機能）
- 14. セルルック イラスト風ルック
- 15. セルルック3DCGアニメ制作者向け： PSOFT Pencil+ 4 Line for Unityへの対応 UTS2は、映像向けのより高品位なトゥーンライン シェーダーであるPencil+ 4 Line for Unityと組み合わせ て使用できるバリエーションを標準で持っています。
- 19. セルルック3DCGアニメ制作者向け： UST2+PSOFT Pencil+ 4 Line for Unityの意義 1. 3ds Maxがメインのスタジオ以外でも、Pencil+ Lineの美しい トゥーンラインが使える！ 2. 映像制作パイプラインは、マーザ・アニメーションプラネットの 皆様による『The Gift』の事例（Unite 2016 Tokyo）が使える！ （Alembic Importer + Frame Capturer） ⇒既存の3DCGアニメ映像制作のパイプラインを 大きく改変することなく、選択の幅が広くなる！
- 20. Pencil+ 4 Line for Unity + UTS2セルルック作例： 『あんさんぶるスターズ！』 ©2014 Happy Elements K.K
- 21. 『あんさんぶるスターズ！』 ©2014 Happy Elements K.K
- 22. 『あんさんぶるスターズ！』 ©2014 Happy Elements K.K
- 23. 『あんさんぶるスターズ！』 ©2014 Happy Elements K.K
- 24. 『あんさんぶるスターズ！』 ©2014 Happy Elements K.K
- 25. 『あんさんぶるスターズ！』 ©2014 Happy Elements K.K
- 27. UTS2: Unity5 のGIシステムへの対応 ユニティちゃんシェーダー 「ユニティちゃんシェーダー」を含む、従来のリアル タイムトゥーンシェーダーは、主にEmission（自己発 光）に接続する形で、最終カラーを出力していたので、 カラーが綺麗にでる代わりに、実際のアニメーション では必要となるような、シーンカラーやシーンライト への馴染ませは苦手とするシチュエーションが多くあ りました。 実際のセルアニメーションの制作現場でも、「撮影」 と呼ばれる段階でのカラーグレーディング工程を経て、 キャラと背景とを馴染ませる工程が必要でした。
- 28. UTS2: Unity5 のGIシステムへの対応 UTS2では、ポイントライトを含む様々な ライトの他に、Unity5のGIシステムにも対応 しました。 事前に配置したベイク用ポイントライトと Light Probeから、UTS2がシーンのライティ ング情報を読み取り、キャラクターのカラー へと美しく反映させるようになりました。 ユニティちゃんトゥーンシェーダー Ver.2.0
- 29. UTS2: Unity5 のGIシステムへの対応 ユニティちゃんトゥーンシェーダー Ver.2.0ユニティちゃんシェーダー ユニティちゃんへのライティング の影響は変わりません。 ユニティちゃんがライティングの影響を受け ることが可能。
- 45. ライトカラー の反映なし ライトカラー 反映を各色で ON/OFFできる 影色にのみ ライトカラー を反映 『もえたん』©三才ブックス 影色にのみ、淡い紫色の ライトカラーを反映させている。 ©カラー
- 46. UTS2：用途に合わせて、影の制御用に 使われる補助マップに２つの方式が選べる Ø Toon_DoubleShadeWithFeather系（標準トゥーンシェーダー） ⇒・通常色/１影色/２影色+ハイカラー指定の他、各色の境界ぼかし などの基本機能を備える ・ライティングと関係なく、常に決まった位置に影を配置できる 「ポジションマップ」を持つ Ø Toon_ShadingGradeMap系（拡張トゥーンシェーダー） ⇒・基本機能は、 Toon_DoubleShadeWithFeather系と同じ ・「ポジションマップ」のように、常に決まった位置に影を配置する のではなく、特定の位置に影を掛かりやすいようにする 「シェーディンググレードマップ」を持つ
- 47. UTS2：用途に合わせて、影の制御用に 使われる補助マップに２つの方式が選べる Ø Toon_DoubleShadeWithFeather系（標準トゥーンシェーダー） ⇒・通常色/１影色/２影色+ハイカラー指定の他、各色の境界ぼかし などの基本機能を備える ・ライティングと関係なく、常に決まった位置に影を配置できる 「ポジションマップ」を持つ Ø Toon_ShadingGradeMap系（拡張トゥーンシェーダー） ⇒・基本機能は、 Toon_DoubleShadeWithFeather系と同じ ・「ポジションマップ」のように、常に決まった位置に影を配置する のではなく、特定の位置に影を掛かりやすいようにする 「シェーディンググレードマップ」を持つ
- 53. UTS2：その他、提供されている共通機能 1. リムライト、MatCap、「天使の輪」などのエフェクト的なハイライト機能 2. 「瞳の前髪への透過」などを簡単に指定できるステンシル機能を プリセットしたシェーダーバリエーション 3. クリッピングマスクやαチャンネルなどで、簡単にマテリアルをUV単位で クリッピングし、複数マテリアルを同一メッシュに割り当て可能 4. 高機能な、リアルタイム向け「反転アウトライン」 Ø ラインカラーとマテリアルカラーとのブレンドのON/OFF Ø UV単位で指定する「アウトラインサンプラー」マップを用いた、アウトラインの太さ調整 Ø カメラ距離に応じた、アウトラインの太さ調節 Ø カメラ奥行き方向へのアウトラインオフセット機能
- 57. しばしば見かける、トゥーンシェーダーの 「いたしません（できません）」リスト 1. 「各マテリアル毎のカラー設定」のような形で、 各パーツに塗られるカラーを直接指定することができません。 2. セルフシャドウが使えません。 もしくは使えても、濁った黒っぽい影しか落とせません。 3. 各パーツへの影（シェイド）のかかり具合を調整するのに、 複数のライトや複雑なライトリンキングがないとできません。 4. 各色間の境界ぼかしが発生する位置が固定で、 調整するにはテクスチャベースで修正しないとできません。 5. ポイントライトや、GIなどの環境光には、反応できません。
- 58. しばしば見かける、トゥーンシェーダーの 「いたしません（できません）」リスト 1. 「各マテリアル毎のカラー設定」のような形で、 各パーツに塗られるカラーを直接指定することができません。 2. セルフシャドウが使えません。 もしくは使えても、濁った黒っぽい影しか落とせません。 3. 各パーツへの影（シェイド）のかかり具合を調整するのに、 複数のライトや複雑なライトリンキングがないとできません。 4. 各色間の境界ぼかしが発生する位置が固定で、 調整するにはテクスチャベースで修正しないとできません。 5. ポイントライトやGIなどの環境光には、反応できません。 ユニティちゃん トゥーンシェ－ダー Ver.2.0なら、 すべてできます！
- 59. Toon_DoubleShadeWithFeather Toon_ShadingGradeMap ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 （そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました） • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色（明色）/１影/２影＋ハイカラー指定、及び通常色（明色）/１影の 間、１影/２影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。 ユニティちゃんトゥーンシェーダーVer.2.0の機能リスト
- 60. Toon_DoubleShadeWithFeather Toon_ShadingGradeMap ユニティちゃんトゥーンシェーダーは以下のような特徴をもっています。 • アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 ユニティちゃんトゥーンシェーダーVer2.0では、上に加えてさらに以下のよう な仕様に対応しました。 • Unityのシステムシャドウに対応しました。レシーブシャドウ、キャスト シャドウが利用できます。 （そのため、ユニティちゃんトゥーンシェーダーで利用していた、 Mesh_Shadowsグループは不要になりました） • Forwardレンダリングの可能範囲内で、複数のライトカラーに対応しまし た。 メインとしてルックを設定するために使われるディレクショナルライトの 他、リアルタイムのポイントライト等にも対応しています。 • 通常色（明色）/１影/２影＋ハイカラー指定、及び通常色（明色）/１影の 間、１影/２影 の間の境界ぼかしができるようになった。 そのおのおのに対し、ライティングと関係なく固定配置ができるポジショ ンマップを持つことが可能です。 • カメラからの距離に応じてアウトラインの幅が調整可能です。 • MatCapに専用ノーマルマップを設定することで、スペキュラマスクとし て指定できるようになった。 • MatCapの調整機能を追加。 • クリッピングマスクによるマテリアルの分割使用ができるようになった。 • ステンシルマスクによる指定パーツの透過処理ができるようになった。 • 拡張として、Toon_ShadingGradeMap.shaderを追加しました。 • Light ProbeやAmbient Source等のGIシステムに対応しました。 • アウトラインオフセットに対応しました。 • 「天使の輪」機能を搭載しました。 • 各カラーごとにライトカラーを影響させるか制御できるようになりました。 これら機能を、 どのように 実装しているのか、 みていきましょう！ ユニティちゃんトゥーンシェーダーVer.2.0の機能リスト
- 66. Normal Vector：頂点法線とノーマルマップ ←4頂点しかないQuadでも、 ノーマルマップを割り当ててやると、 でっぱりがあるように見える。 ※ライティングされるから （フラグメントシェーダーの機能） UVマップ 頂点法線 Vertex Normal ノーマルマップ （タンジェントスペース） シェーダー内でライティング計算に 使用する時には、World Normalに 変換される。 ✓
- 70. Light / View / Half Vector Light Vector View Vector Half Vector レンダリング対象となっているカレントライトへの方向を出力する。 ジオメトリ上の現在位置からのカメラの方向を、ワールド座標で出力する。 ビューおよびライトベクトルの中間点を示す方向であるハーフディレクション を出力する。これはBlinn-Phongスペキュラモデルで普通使われるもの。
- 72. 内積/ Dot Product とは？ A → B →θ A → ｜ ｜ B → ｜ ｜cosθA → B → ・ = このオレンジ部の長さは、 A → ｜ ｜cosθ 特に、 が長さ1の時、オレンジ部の長さはcosθとなる。A → 内積とは、２つのベクトルがなす角度の状態を示すスカラー値 のこと。特に2つのベクトルがノーマライズされている場合には、 内積が即、２つのベクトルの内角のcosθの値となっている。
- 73. 内積/ Dot Product とは？ 上図のように、ライトベクトルと ノーマルベクトルの内積を取ること で、光の当たり具合を０～１で 表現することができる！ 内積がマイナスは、 「光が当たっていない」 ことを示している。
- 74. 「ノーマルベクトルとその他ベクトルと の内積」を取ると、何が得られるのか？ Light Vectorノードとの内積 をとって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 One Minusで反転し、リムライトの 状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ （グロッシイ)反射の状態を得る。
- 75. Light Vectorノードとの内積 をとって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 One Minusで反転し、リムライトの 状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ （グロッシイ)反射の状態を得る。 塗り分けマスク 作成 ハイカラー （スペキュラ） 作成 リムライト 作成 「ノーマルベクトルとその他ベクトルと の内積」を取ると、何が得られるのか？
- 77. Light Vectorノードとの内積 をとって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 One Minusで反転し、リムライトの 状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ （グロッシイ)反射の状態を得る。 塗り分けマスク 作成 ハイカラー （スペキュラ） 作成 リムライト 作成 • これらの「ノーマルベクトルとその他ベクトルとの内積」計算は、 その結果を見れば、「全てなんらかのカラー合成用のマスクを作っている」 工程だと考えることができる。 • 実際、Photoshopでイラストを描くときにも、レイヤー単位でマスクを 作成して様々なカラー合成を行うが、トゥーンシェーダー内でやっている こともまったく同じ工程である。 「ノーマルベクトルとその他ベクトルと の内積」を取ると、何が得られるのか？
- 80. 塗り分けマスクの調整範囲の拡張：Half Lambert 最も基本的なHalf Lambertのノード例 • Half Lambertとは、通常-1～１の範囲で示されるライティングの状態を、 0～１の範囲にリマップし直すことです。 結果、陰影の入り方が柔らかめになり、 黒100%だった影部分にグレー階調が入ります。
- 81. 塗り分けマスクの調整範囲の拡張：Half Lambert Half Lambertの場合Lambertの場合 • 黒100%だった影部分にグレー階調が入ることで、 Photoshopなどが搭載している「レベル調整」が 影が落ちる階調の全域で機能することになります。 結果、塗り分けマスクの調整範囲が拡張されます。
- 85. 塗り分けマスク作成と塗り分けの実行 ：Ramp Shader 塗り分けマスク作成 塗り分け実行 通常色/影色指定 • ランプシェーダーも、Half Lambertモデルから作る ことができます。 • その際、StepノードとLerpノードの２つのノードを 使用します。Stepノードで２値のマスクを作成し、 そのマスクに従って、通常色と影色を塗り分けます。 Lerp Step マスク情報
- 91. 1. Light Attenuationノード は、システムシャドウ （この場合、特にセルフ シャドウやレシーブシャド ウ）を得るノード。 2. Fallbackの設定を VertexLitなどにする。 システムシャドウを得る：Light Attenuation
- 92. • Light Attenuationの作る影は、リニ アカラースペースでも、グレーの階調 がHalf Lambertよりもきつめに出る 傾向がある システムシャドウを得る：Light Attenuation Light Attenuation のみ Half Lambertのみ
- 93. • Light Attenuationの評価をHalf Lambertに 乗算すると、特に形状を強調する影の出方が Half Lambertのみの時よりも、きつくなる。 システムシャドウを得る：Light Attenuation Light Attenuation ×Half Lambert Half Lambertのみ
- 94. • Light Attenuationのつくる影を同様にHalfにし、階調を 馴染ませてやると、Half Lambertとの相性がよくなる。 システムシャドウを得る：Light Attenuation Half Light Attenuation ×Half Lambert Half Lambertのみ Half Light Attenuation
- 95. • 両者を比較するとこんな感じ システムシャドウを得る：Light Attenuation Half Light Attenuation ×Half Lambert Half Lambertのみ Light Attenuation ×Half Lambert Half Lambertのみ
- 96. • Shader Forgeのサンプルな どでも、それまでのノード チェーンの一番最後に接続 されて、評価されることが 多い。 ここまでの ノードチェーン の末端 Light Attenuation システムシャドウを得る：Light Attenuation ノードの挿入位置
- 98. 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー （スペキュラ） 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) 内積 内積 内積 Transform Lerp Remap マスク情報 Light Attenuationで扱えるのは、ライトの減衰だけ。 「減衰」だけではカラーシャドウは即、扱えない！ UTS2：システムシャドウはどこに入れる？
- 102. • Half Lamberモデルをそのまま塗 り分けマスクに使うのではなく、 Half Light Attenuation× Half Lambertモデルを塗り分けマスク として使うことで、システムシャ ドウの情報が塗り分けマスクにも 追加されることになる。 二値化してみるとわかりやすい。 塗り分けマスクへの追加情報の加え方 Half Light Attenuation ×Half Lambert Half Lambertのみ 光源との間に遮蔽物を 置くと、こちらには影 がかかる 二値化した結果
- 104. UTS2のノード構成概念図 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー （スペキュラ） 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) ??? 内積 内積 内積 Transform Lerp Remap マスク情報 この位置に入れる べきノードは？
- 105. UTS2のノード構成概念図 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー （スペキュラ） 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) System GI (ShadeSH9) 内積 内積 内積 Transform Lerp Remap マスク情報
- 107. UTS2：アウトライン関連は？ 塗り分けマスク 作成 塗り分け実行 通常色/1影色/2 影色指定 コンポジット 実行 ハイカラー （スペキュラ） 作成 MatCap 作成 リムライト 作成 アウトライン 関連 マスター ノードNormal Vector Light Vector View Vector Half Vector View座標変換 System Shadow (Light Attenuation) System GI (ShadeSH9) 内積 内積 内積 Transform Lerp Remap マスク情報 ノーマル反転
- 111. ノードが複雑になってきたら、 Set / Get ノードで機能毎に分割するとよい Setノード Getノード • Setした内容がプルダウンで 選べるだけでなく、後にコー ドで読む時に機能毎の計算結 果が変数化されているので、 扱いやすい。 • ノードベースで組まれている シェーダーをコード加工をす る時には、特に便利。
- 112. まとめ 1. トゥーンシェーダーとは、 「あるオブジェクトへの光の当たり具合に基づいて、そのオブジェクト を指定のカラーで塗り分けるシェーダー」である。 2. 「光の当たり具合」をどのようにマスク値として評価するかによって トゥーンシェーダーごとの特徴や機能の違いがあらわれる。 3. 「光の当たり具合」を求めるのに最も重要なベクトルは、ノーマル（法 線）ベクトルである。ノーマルベクトルは、シェーダーの様々な場所で 使われている。 4. ノーマルベクトルとその他のベクトルとの「内積」を求めることで、用 途別に様々な合成用マスクを作ることができる。 これらの合成用マスクは、Photoshopなどで2Dイラストを作る時に作 成する「レイヤー合成用のマスク」にあたるものである。
- 113. 最後に • 「そもそも、何故トゥーンシェーダーを組んでみようと思ったのか？」というと、 何年か前に「ラノベの表紙を飾るイラストで使われているPhotoshopの技法は、 トゥーン系のシェーダーで再現できるのではないか？」と気づいたからです。 • ただ当時は、それを自分の手で組むのではなく、シェーダーを書けるエンジニアに発注 しました。でもなかなか自分好みの思い通りのシェーダーを組んでもらうことはできな かった。当時、シェーダーの学習コストは高く、しかもノウハウがほとんど公開されて いなかったので、どこから手を付ければよいか、自分自身がわからなかったからです。 • 今回、こうして「ユニティちゃんトゥーンシェーダーVer.2.0」を開発して、公開でき るようになったのは、シェーダーの学習がエンジニア以外にも大きく開かれた時代が来 たからです。特にUnityの「Try & Errorのイテレーションが速い」環境は、シェーダー 学習にも大変役だちました。 「絵づくりの完成形」は各アーティストの中にあるものです。 今後は自らシェーダーを書くアーティストが増えていくことを 願いつつ、〆の言葉とさせていただきます。
- 115. Thank you!