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.

【Unity道場スペシャル 2017京都】トゥーンシェーダー・マニアクス2

4,607 views

Published on

2017/11/18に開催されたUnity道場スペシャル 2017京都の講演スライドです。
講師: 小林 信行(ユニティ・テクノロジーズ・ジャパン合同会社)

トゥーンシェーダー・マニアクス 2
内容 Unite 2017 Tokyoでご好評をいただきました、『トゥーンシェーダー・マニアクス』の第2弾です。今回は主に、「ユニティちゃんトゥーンシェーダー2.0」の使いこなし面をお話するつもりです。

こんな人におすすめ
・トゥーンシェーダーの開発に関心のあるUnityエンジニア
・アーティストアニメーション&映像業界のエンジニア
・アーティスト3DCG技術の基礎知識があり、関連する用語に慣れている人

受講者が得られる知見
・カスタムライティングを利用したフォワードベースのトゥーンシェーダーの開発の実際
・カスタムライティングとUnityのシステムライティングとのなじませ方
・ノードベースコードエディタの出力するコードのカスタマイズの仕方

Unityのイベント資料はこちらから:
https://www.slideshare.net/UnityTechnologiesJapan/clipboards

Published in: Technology
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

【Unity道場スペシャル 2017京都】トゥーンシェーダー・マニアクス2

  1. 1. トゥーンシェーダー・マニアクス 2 ―ユニティちゃんトゥーンシェーダー2.0徹底解説― ユニティ・テクノロジーズ・ジャパン合同会社/コミュニティエバンジェリスト 小林信行 2017/11/18
  2. 2. ユニティ・テクノロジーズ・ジャパン所属の コミュニティエバンジェリスト。 UnityやMayaをはじめとする各種3Dツール の研究、ゲーム制作、企画書の書き方や シナリオディレクションのノウハウの普及を 通じて、Unityデベロッパーコミュニティの 支援活動をしています。 自己紹介 小林信行 NobuyukiKobayashi
  3. 3. 「アーカイブを落としてみたけど、 ユニティちゃんトゥーンシェーダー2.0 難しそう…」 と思って、そのままプロジェクトを 閉じてしまった人、いませんか?
  4. 4. 今回は、マニュアルには載っていない ユニティちゃんトゥーンシェーダー2.0 の使いこなしや、ゼロからシェーダー を設定する時のコツを紹介します! ユニティちゃんトゥーンシェーダー2.0の技術的側面は、 Unite 2017 Tokyoの 「トゥーンシェーダー・マニアクス」をどうぞ!
  5. 5. 本セッションの内容に関して、ご質問等 ございましたら、Twitterハッシュタグ #Unity道場 まで、お問い合わせください!
  6. 6. ユニティちゃんトゥーンシェーダー2.0 の紹介 1.
  7. 7. ユニティちゃんトゥーンシェーダー2.0とは? ユニティちゃんトゥーンシェーダー2.0 iOS/METAL/Linear Colorでの表示 Unity5.6.x以上で利用 できる映像指向の本格派 トゥーンシェーダー。 セルシェーディングから イラスト風シェーディング まで、幅広い絵づくりが 楽しめます。 リニアカラーが使える環境 ならば、Windows/Mac/iOS/ Android/PlayStation 4/ Xbox One/Switchなどの 幅広いプラットフォーム上で 共通の絵づくりができます。 http://unity-chan.com/ ダウンロードコーナーより UCL2.0で提供中!
  8. 8. ユニティちゃんトゥーン シェーダー2.0 + プリレンダー作例
  9. 9. ユニティちゃんトゥーンシェーダー2.0 リアルタイムレンダー作例: C92 「 The Phantom Knowledge 」
  10. 10. 【VR✕HEARTalk】 Catch Unity-chan's HEART!
  11. 11. 【VR✕HEARTalk】 Catch Unity-chan's HEART!
  12. 12. シェーダーとそのセッティングによる 見え方の違い 2.
  13. 13. Unityでは、PBRからNPRまで、幅広い絵づくりが可能 PBR Physically Based Rendering NPR NON-Photo Realistic
  14. 14. Unityでは、ハイエンドからカジュアルまで、幅広い絵づくりが可能 High end DARK AVENGERⅢ / ネクソン Casual 神巫女 / フライハイワークス
  15. 15. シェーダーキャリブレーションシーンのセットアップ まずは共通のライティング条件下にあるシェーダー キャリブレーションシーンを作ることから始める。 今回は、物理ベースレンダリング環境下で、 リニアカラースペースにプロジェクトを設定した他は、 近距離での影の精度をなるべく高くする設定にして ある。 リニアカラーへの セッティングは、 Build Settings内 のPlayerSettings から行う。
  16. 16. ユニティちゃんシェーダー SDユニティちゃんモデルに付 属する「ユニティちゃんシェー ダー」 PBR環境下でも、手描きのディ フューズマップのカラーを素直 に表示する。 スポットライトやシステムGIな どの影響は受けない。 手で高品質のマップを描くこと ができれば、PBR環境でもキャ ラクター用シェーダーとして、 十分に活用できる。
  17. 17. スタンダードシェーダー (フルセットアップ) PBR向けにすべてのマップを 作成してセッティングしてみた 例。 PBRの定義に則って、アルベド、 メタリック、スムーズネス、ノー マル、オクルージョンの各マッ プを割り当てた他、エミッション マップも追加で割り当ててみた。 ディズニーやピクザーなどの CGアニメ風のルックになる。 よくできたフィギュアやビスクド ールのような質感。
  18. 18. ユニティちゃんトゥーン シェーダー2.0 (イラスト風ルック) セルシェーディングに対応でき るように、なるべくシンプルな通 常色マップと影色用マップを用 意して、シェーディング影の部 分はユニティちゃんトゥーンシ ェーダー2.0に任せた作例。 シェーダープロパティを調整す ることで、ブラシ風のシェーディ ング影を入れることができる。
  19. 19. ユニティちゃんトゥーン シェーダー2.0 (セル風ルック) まったく同じマップを使ってい ても、シェーダープロパティの 調整で、完全なセルルックにす ることもできる。
  20. 20. ゼロから始める ユニティちゃんトゥーンシェーダー2.0 3.
  21. 21. 最新版のアーカイブは、ユニティちゃんオフィシャルホームページの ダウンロードコーナーより利用できます。 ユニティちゃんトゥーンシェーダー2.0をダウンロードする
  22. 22. ユニティちゃんトゥーンシェーダー2.0のアーカイブを解凍し、 中のマニュアルを読む ⇒マニュアルには、日本語版と英語版があります。 使用上の注意やTipsなどが、マニュアルに書かれています。 ダウンロードしたら、真っ先にやるべきこと Assets/Sample フォルダ内には、 シェーダー設定の サンプルがある。
  23. 23. 1. カラースペースをリニアにする ⇒カラーの階調変化が正確に捉えられる。 2. シーン内のディレクショナルライトのカラーを白系にする ⇒新規に作成したシーン内のディレクショナルライトは、 太陽の色を反映して黄みがかっているため。 3. シェーダーキャリブレーション用のシーンを作っておくとよい ⇒Lightingウィンドウの設定も含めて、シェーダーキャリブレーション用のシーン を前もって作っておくと、何かと捗る。 ハイメッシュのスフィアもしくはシェーダーボールのモデルがシーン内に 配置されているとなおよい。 ゼロからシェーダーを設定する際のUnity Editor側の準備
  24. 24. File>Build Settings>Player Settings
  25. 25. ディレクショナルライトのカラーを白系にする
  26. 26. Hiカラー 通常(ノーマル) 1号影(1影) 2号影(2影) ユニティちゃん 髪の毛カラー設定 アニメーション制作では、 各シーン単位でパーツごとに カラー設計がなされる。 カラー設定が直接指定 できる これらのカラー設計をする、 色彩設計の専門スタッフが いるのが普通。 UTS2.0の特長
  27. 27. 光源方向を考慮しつつ、強力なカラー塗り分けの制御が可能 UTS2.0の特長
  28. 28. 専用マップによる明色/影色の制御 UTS2.0の特長
  29. 29. 1. シェーダープロパティは、すべて設定する必要はない ⇒最後までまったく触れないプロパティがあってもかまわない 2. 最低限必要なのは、通常色と1影色の指定のみ ⇒まずは、シェーダーボール上で、通常色と1影色を配置してみることから設定を 始めるとよい。他の多くのパラメタは、上の2つがほぼ決まってから、設定し始め ると効率がよい。 3. 沢山あるシェーダープロパティは、トライ&エラーを繰り返し ながら、どんなルックがありえるのか、探索するためにある UTS2.0のシェーダープロパティの数を見て、 そのままプロジェクトを閉じてしまった人向けのTips
  30. 30. 光源方向とライトカラー、 およびシェーダーによっ て決まる要素 GI(グローバルイルミ ネーション)のカラー で決まる要素 ライトのシャドウタイプ で決まる要素。 (キャストシャドウのカラ ーは、GIとシェーダーに 依存する。) ポストエフェクトで 設定する要素
  31. 31. 基本的なシェーダー設定の手順 左のようなシェーダーボールを 新規に設定してみましょう。 実際に設定したシェーダーは、 キャラクターの肌表現などに使 えます。 肌色の設計は、結構難しいので、 NPR系のシェーダーの実力をみ るのにはちょうどよい課題です。
  32. 32. 新規にマテリアルを作成し、UTS2.0を割り当てる 新規にマテリアルを作成して、 ユニティちゃんトゥーンシェーダー2.0 (UTS2.0)を割り当てます。 ここでは、 Toon_DoubleShadeWithFeatherを 使います。 次に作成したマテリアルをシェーダー ボールに割り当てます。
  33. 33. ざっくりと通常色と1影色で塗り分ける
  34. 34. 1影色の領域をいい感じに調整する
  35. 35. 通常色と1影色の境界をぼかす
  36. 36. メリハリをつけるために2影色を足す
  37. 37. 2影色をぼかし、立体感を強調する
  38. 38. 反射表現として、ハイカラーを足す
  39. 39. ハイカラーを強くする
  40. 40. リムライトを追加してエッジを強調する
  41. 41. アウトラインを追加し、下地のカラーに馴染ませる
  42. 42. Unite 2017 Tokyo以降に強化された 機能の紹介 4.
  43. 43. u リムライトの機能強化(2.0.1〜2.0.2) u ハイカラーマスクおよびリムライトマスクの搭載(2.0.3) ⇒これらの機能は、主にハイライトとして使われる、リムライトやハイカラーを より細かく制御するために搭載されました。 u モバイル版の搭載とiOS/OSX METAL使用時の注意の追加(2.0.2) ⇒複数ライトなど、モバイルでは重い機能を省くことで、大幅に軽減しました。 ⇒iOS/OSX METAL環境では、「カリングなし」の設定を使わないように、 注意を追加しました UTS2.0.1〜2.0.3で搭載された機能
  44. 44. アーティストは、絵を仕上げるまでの過程で、 様々な効果を入れるために、手でマスクを 切っていきます。左のイラストにも塗り分け用 のマスクの他、ハイカラーやリムライト等の 効果をみることができます。 これらの多くは、光源とそれへの向きを考慮 しつつ設計されるものです。 通常色/影色の 塗り分けマスク ハイカラー (スペキュラ) リムライト イラストに含まれる各マスク効果をさらに調整する
  45. 45. 通常色/影色の 塗り分けマスク ハイカラー (スペキュラ) リムライト ユニティちゃんトゥーン シェーダー2.0では、左の ような部分にそれぞれの マスク効果が出ています。 これらのマスク効果は リアルタイムに計算されて いますので、光やモーション の変化に応じて違和感なく 表示されます。
  46. 46. リムライトに追加された、光源方向マスク 光源方向 通常のリムライト (リムライトは光源とは関係 なく、エッジ部分に出る) 通常のリムライト + 光源方向マスク 通常のリムライト + 光源方向マスク + 光源反対方向リムライト リムライト がカット 別カラーの リムライト が追加
  47. 47. 光源方向から のリムライト 光源方向とは 反対側のリムライト
  48. 48. ハイカラーマスク&リムライトマスクの効果 肌のハイカラーやリムラ イトがカメラの角度によっ ては、ひどくテカってしまう のをマスクで抑えている
  49. 49. ところで、 って知ってます? 5.
  50. 50. ntnyさんが、 放送やってるよ! 京野 光平 a.k.a. ntny unityjp
  51. 51. u 2影色を「照り返し」として使う u ライトカラーの影響をON/OFFする u 板ポリを使ったパキッとした影の入れ方 u Canvas/Imageを使ったフレア効果 ⇒詳しくは、 をみるべし! 「UnitychanShader2.0の使い方」で紹介されたTips ここでは、ちょっとだけ紹介…
  52. 52. ライトカラーの 反映なし ライトカラーの 反映を各色で ON/OFFできる 影色にのみ ライトカラーを 反映 『もえたん』©三才ブックス 影色にのみ、淡い紫色の ライトカラーを反映させている。 ©カラー
  53. 53. こういうスパンと切ったような影は どう作るのか? こういう影はどうやって作る?
  54. 54. 左図のように、Shadow Onlyのプレーンを被写 体に差し込むことで、簡 単にスパンと切ったよう な影を落とすことがで きます。 ただし、このプレーンは、 カメラには写りません が、背景にも同時に影 を落とすので注意! カメラアングルを選び ますが、顔のアップなど、 背景をほぼ飛ばせるカ ットでは、効果的な演出 ができます。
  55. 55. 2影色を照り返し的に使う ユニティちゃんトゥーンシェーダー2.0 は、光源方向を考慮しつつ自由にカラ ーがおけますので、本来なら一番暗い 部分の2影のところにも明るいカラー を置くことできます。 このようなカラー配置をすることで、2 影色を環境からの照り返しのように使 うことができます。
  56. 56. ステージライティングにみる、 ライトプローブの配置 6.
  57. 57. 「ステージの環境光がキャラに反映する」ことで、「キャラが空間内を移動している感覚」がより強くなる。
  58. 58. u シェーダー側とLightingウィンドウ側の設定 「GI_Intensity」と「Indirect Intensity」 u ベイク用ポイントライトの配置 u ライトプローブの配置 システムGIによる環境光をキャラクターに反映するには?
  59. 59. シェーダー側: GI_Intensity 0以上に設定すること で、UnityのLightingウ ィンドウ内で管理され ているGIシステムに対 応する。 GI_Intensityが1の時、 GIの強度が100%とな る。 Lighting設定側: Indirect_Intensity リアルタイムライトおよ び焼き付けられたライト マップに保存された Indirectライトの明るさ を変化させる。1より大き な値はIndirectライトの 強度を増加させ、1よりも 小さい値はIndirectライ ト強度を減少させる。この2つのパラメタの掛け算として、シェーダー側で指定 するキャラクターのカラーに「環境からの補助光(カラー)」 として最終的に加えられる、GIの強度が決まる。
  60. 60. ポイントライトの配置。 ステージ上のプロップの配置を参考に、 各カラーライトの位置を決めていく。
  61. 61. u ベイク用ポイントライトは、左図 のように、各ライトの領域が互い に重なり合いながら、ステージ 上をまんべんなく、 カラーで空 間を分割するように配置する。 u 配置する高さも、カラーライトご とに変えることで、リズムを付け る。 u 各ライトのインテンシティは、青 系のライトは強めに、黄〜緑系 のライトは抑えめにする。
  62. 62. ライトプローブの高さは、ユニティちゃんの背の高さ を参考に、広さはユニティちゃんの動き回る範囲を 参考に、ステージ上に配置していく。
  63. 63. ポイントライトの明るさとカラー 情報が、ライトプローブにベイ クされたステージ。この中をキ ャラが移動することで、キャラ シェーダーにGIが反映される。 メイン光源のリアルタイムディ レクショナルライト側にも、Y軸 の首振りとインテンシティ変化 のアニメーションが付いている ので、ライトプローブによる事前 計算のGIと組み合わさって、リ アルタイムが1灯しかなくても、 様々なライティング状況を楽 しめる。
  64. 64. よい作例ができたら、#unitychanで ツィートしてください! 最後に
  65. 65. UTS2.0.3で搭載された「リムライトマスク」 なども使いこなしていて、各パーツの質感も きちんと出ているステキな作例です。 暁ゆ~き @AkatsukiWorks さんの作例 https://twitter.com/i/moments/856781628466528257
  66. 66. Thank You!

×