Upgrade to Pro — share decks privately, control downloads, hide ads and more …

toonshader4U

 toonshader4U

shop_0761

May 25, 2019
Tweet

More Decks by shop_0761

Other Decks in Programming

Transcript

  1. ぼくがかんがえた
    さいきょうの
    とぅーんしぇーだー
    てんちょー/筑野えり(@shop_0761)

    View Slide

  2. 注)スライドが100枚くらいあります
    1枚 3秒ペース

    View Slide

  3. スライドは公開するので
    写真を撮るのを諦めましょう

    View Slide

  4. 自己紹介
    てんちょー/筑野えり(@shop_0761)
    バ美肉系絵ンジニア
    最近はShader書いたり、Vなモデルをセットアップしたり
    3Dの身体がほしい
    声がいい感じになってきてるので楽しくなってきた
    Luppetのお手伝いとかをしてたり

    View Slide

  5. https://www.udemy.com/unrealengine-4-archviz-vr/?couponCode=TENCHO_435970

    View Slide

  6. https://shop-0761.booth.pm/

    View Slide

  7. http://shop-0761.hatenablog.com/entry/2016/12/08/000026

    View Slide

  8. このとき以来のMaterialネタ!

    View Slide

  9. おしながき
    1. きっかけ
    2. 機能のせつめい
    3. 作例

    View Slide

  10. きっかけ

    View Slide

  11. UE4やろうよー

    View Slide

  12. いいけど
    キャラクターが可愛くなる
    Shaderある?

    View Slide

  13. U○○○○の○○Sみたいなやつ

    View Slide

  14. ………

    View Slide

  15. ない!!!

    View Slide

  16. ということで作りました
    UE4.22
    Deferred想定

    View Slide

  17. 今回はニアちゃんをお借りして
    調整しています
    ねぎぽよ ❣/ニアちゃん
    https://twitter.com/CST_negi

    View Slide

  18. できたものがこちら

    View Slide

  19. View Slide

  20. 機能のせつめい

    View Slide

  21. 基本的な機能
    - Default Lit
    - ベース/1影
    - RimLight
    - Matcap
    - Outline
    - Sphericalize
    - Fake Custom Stencil など

    View Slide

  22. 基本的な機能
    - Default Lit
    - ベース/1影
    - RimLight
    - Matcap
    - Outline
    - Sphericalize
    - Fake Custom Stencil など

    View Slide

  23. Default Lit のいいところ

    View Slide

  24. Default Litのいいところ
    - 影が落ちる
    - Lightの影響を受けられる
    - 複数光源対応が何も考えずにできる
    - 必要とあらばUnlitにできる

    View Slide

  25. 実際に違いを見てみましょう

    View Slide

  26. Unlit

    View Slide

  27. Default Lit

    View Slide

  28. 板をおいた

    View Slide

  29. Lightの色を変える

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. よりみち

    View Slide

  34. RenderView.Hogehoge

    View Slide

  35. light Colorや向きを取得したい

    View Slide

  36. BluePrintは使いたくない!

    View Slide

  37. 見つけました

    View Slide

  38. https://gist.github.com/shop-0761/f83064b332bb038e1d8f96e1d2149f04
    めっちゃある!

    View Slide

  39. Directional Light Direction

    View Slide

  40. Directional Light Color

    View Slide

  41. Sky Light Color

    View Slide

  42. Translated World To View

    View Slide

  43. 意外といっぱい情報が取れる

    View Slide

  44. いつ変わるかわからないので
    各自…自己責任で…

    View Slide

  45. Fake Custom Stencil
    勝手に名前つけた

    View Slide

  46. 眉だけアニメみたいに
    前に描画したい!

    View Slide

  47. うーーーーーん

    View Slide

  48. U○○○○ではstencilでやってるよ

    View Slide

  49. UE4にもあるけど
    PostProcessになっちゃう

    View Slide

  50. Material単体で完結させたい

    View Slide

  51. エンジン改造もしたくない!

    View Slide

  52. ので思いつきました

    View Slide

  53. 結果から先に

    View Slide

  54. Before

    View Slide

  55. After

    View Slide

  56. Before

    View Slide

  57. After

    View Slide

  58. 意外とわるくないのでは?

    View Slide

  59. これは眉だけ
    カメラ方向に押し出しています
    押し出したい箇所(今回は眉)が
    別マテリアルのほうが安全

    View Slide

  60. View Slide

  61. ので後頭部から見ても
    眉が見えない!
    さすがに頭がペラペラだと無理

    View Slide

  62. View Slide

  63. Outline

    View Slide

  64. Materialだけで完結させ(2回目

    View Slide

  65. 他のShaderでも複数回の
    メッシュをレンダリングしてる

    View Slide

  66. しゃーないか!

    View Slide

  67. View Slide

  68. Materialで済ませるメリット

    View Slide

  69. Material で済ませるいいところ
    - 調整箇所がMaterial だけで済む
    - モデル/Material ごとに太さが調整できる
    - Outline Mask が使える

    View Slide

  70. OutlineMaskなし

    View Slide

  71. OutlineMaskあり

    View Slide

  72. Sphericalize
    と勝手に呼んでる

    View Slide

  73. モデルが持ってるNormalを
    無理やり球状にする

    View Slide

  74. http://historia.co.jp/archives/11921/

    View Slide

  75. これよんで!おわり!
    これの簡易版を使ってる

    View Slide

  76. Alpha 0

    View Slide

  77. Alpha 1

    View Slide

  78. よりみち 2

    View Slide

  79. Half Lambert

    View Slide

  80. View Slide

  81. なんか白すぎない??

    View Slide

  82. View Slide

  83. Pow 2.2 をするとそれっぽい
    http://compojigoku.blog.fc2.com/blog-entry-23.html
    これと同じ話かも

    View Slide

  84. 作例

    View Slide

  85. ここまでに作ったMaterialで
    実際に調整してみた

    View Slide

  86. Default Lit の Textureだけ

    View Slide

  87. Unlit の Textureだけ

    View Slide

  88. 今回作ったやつ

    View Slide

  89. Texture塗り直し

    View Slide

  90. 目にHigh Light追加

    View Slide

  91. Outlineを調整

    View Slide

  92. Texture描き足し

    View Slide

  93. Directional Lightの調整

    View Slide

  94. (時間がなかったので)気
    合でポーズを
    つくります

    View Slide

  95. View Slide

  96. PostProcess Off

    View Slide

  97. PostProcess ON

    View Slide

  98. PostProcess Off

    View Slide

  99. PostProcess ON

    View Slide

  100. 整理したらMaterialは
    公開予定です

    View Slide

  101. View Slide

  102. おわり!
    なにかあれば
    Twitter: @ shop_0761
    https://twitter.com/shop_0761

    View Slide