toonshader4U

これの資料です
https://ue4allstudy.connpass.com/event/129917/

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