toonshader4U
by
shop_0761
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ぼくがかんがえた さいきょうの とぅーんしぇーだー てんちょー/筑野えり(@shop_0761)
Slide 2
Slide 2 text
注)スライドが100枚くらいあります 1枚 3秒ペース
Slide 3
Slide 3 text
スライドは公開するので 写真を撮るのを諦めましょう
Slide 4
Slide 4 text
自己紹介 てんちょー/筑野えり(@shop_0761) バ美肉系絵ンジニア 最近はShader書いたり、Vなモデルをセットアップしたり 3Dの身体がほしい 声がいい感じになってきてるので楽しくなってきた Luppetのお手伝いとかをしてたり
Slide 5
Slide 5 text
https://www.udemy.com/unrealengine-4-archviz-vr/?couponCode=TENCHO_435970
Slide 6
Slide 6 text
https://shop-0761.booth.pm/
Slide 7
Slide 7 text
http://shop-0761.hatenablog.com/entry/2016/12/08/000026
Slide 8
Slide 8 text
このとき以来のMaterialネタ!
Slide 9
Slide 9 text
おしながき 1. きっかけ 2. 機能のせつめい 3. 作例
Slide 10
Slide 10 text
きっかけ
Slide 11
Slide 11 text
UE4やろうよー
Slide 12
Slide 12 text
いいけど キャラクターが可愛くなる Shaderある?
Slide 13
Slide 13 text
U○○○○の○○Sみたいなやつ
Slide 14
Slide 14 text
………
Slide 15
Slide 15 text
ない!!!
Slide 16
Slide 16 text
ということで作りました UE4.22 Deferred想定
Slide 17
Slide 17 text
今回はニアちゃんをお借りして 調整しています ねぎぽよ ❣/ニアちゃん https://twitter.com/CST_negi
Slide 18
Slide 18 text
できたものがこちら
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
機能のせつめい
Slide 21
Slide 21 text
基本的な機能 - Default Lit - ベース/1影 - RimLight - Matcap - Outline - Sphericalize - Fake Custom Stencil など
Slide 22
Slide 22 text
基本的な機能 - Default Lit - ベース/1影 - RimLight - Matcap - Outline - Sphericalize - Fake Custom Stencil など
Slide 23
Slide 23 text
Default Lit のいいところ
Slide 24
Slide 24 text
Default Litのいいところ - 影が落ちる - Lightの影響を受けられる - 複数光源対応が何も考えずにできる - 必要とあらばUnlitにできる
Slide 25
Slide 25 text
実際に違いを見てみましょう
Slide 26
Slide 26 text
Unlit
Slide 27
Slide 27 text
Default Lit
Slide 28
Slide 28 text
板をおいた
Slide 29
Slide 29 text
Lightの色を変える
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
よりみち
Slide 34
Slide 34 text
RenderView.Hogehoge
Slide 35
Slide 35 text
light Colorや向きを取得したい
Slide 36
Slide 36 text
BluePrintは使いたくない!
Slide 37
Slide 37 text
見つけました
Slide 38
Slide 38 text
https://gist.github.com/shop-0761/f83064b332bb038e1d8f96e1d2149f04 めっちゃある!
Slide 39
Slide 39 text
Directional Light Direction
Slide 40
Slide 40 text
Directional Light Color
Slide 41
Slide 41 text
Sky Light Color
Slide 42
Slide 42 text
Translated World To View
Slide 43
Slide 43 text
意外といっぱい情報が取れる
Slide 44
Slide 44 text
いつ変わるかわからないので 各自…自己責任で…
Slide 45
Slide 45 text
Fake Custom Stencil 勝手に名前つけた
Slide 46
Slide 46 text
眉だけアニメみたいに 前に描画したい!
Slide 47
Slide 47 text
うーーーーーん
Slide 48
Slide 48 text
U○○○○ではstencilでやってるよ
Slide 49
Slide 49 text
UE4にもあるけど PostProcessになっちゃう
Slide 50
Slide 50 text
Material単体で完結させたい
Slide 51
Slide 51 text
エンジン改造もしたくない!
Slide 52
Slide 52 text
ので思いつきました
Slide 53
Slide 53 text
結果から先に
Slide 54
Slide 54 text
Before
Slide 55
Slide 55 text
After
Slide 56
Slide 56 text
Before
Slide 57
Slide 57 text
After
Slide 58
Slide 58 text
意外とわるくないのでは?
Slide 59
Slide 59 text
これは眉だけ カメラ方向に押し出しています 押し出したい箇所(今回は眉)が 別マテリアルのほうが安全
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
ので後頭部から見ても 眉が見えない! さすがに頭がペラペラだと無理
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Outline
Slide 64
Slide 64 text
Materialだけで完結させ(2回目
Slide 65
Slide 65 text
他のShaderでも複数回の メッシュをレンダリングしてる
Slide 66
Slide 66 text
しゃーないか!
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Materialで済ませるメリット
Slide 69
Slide 69 text
Material で済ませるいいところ - 調整箇所がMaterial だけで済む - モデル/Material ごとに太さが調整できる - Outline Mask が使える
Slide 70
Slide 70 text
OutlineMaskなし
Slide 71
Slide 71 text
OutlineMaskあり
Slide 72
Slide 72 text
Sphericalize と勝手に呼んでる
Slide 73
Slide 73 text
モデルが持ってるNormalを 無理やり球状にする
Slide 74
Slide 74 text
http://historia.co.jp/archives/11921/
Slide 75
Slide 75 text
これよんで!おわり! これの簡易版を使ってる
Slide 76
Slide 76 text
Alpha 0 髪
Slide 77
Slide 77 text
Alpha 1 髪
Slide 78
Slide 78 text
よりみち 2
Slide 79
Slide 79 text
Half Lambert
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
なんか白すぎない??
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Pow 2.2 をするとそれっぽい http://compojigoku.blog.fc2.com/blog-entry-23.html これと同じ話かも
Slide 84
Slide 84 text
作例
Slide 85
Slide 85 text
ここまでに作ったMaterialで 実際に調整してみた
Slide 86
Slide 86 text
Default Lit の Textureだけ
Slide 87
Slide 87 text
Unlit の Textureだけ
Slide 88
Slide 88 text
今回作ったやつ
Slide 89
Slide 89 text
Texture塗り直し
Slide 90
Slide 90 text
目にHigh Light追加
Slide 91
Slide 91 text
Outlineを調整
Slide 92
Slide 92 text
Texture描き足し
Slide 93
Slide 93 text
Directional Lightの調整
Slide 94
Slide 94 text
(時間がなかったので)気 合でポーズを つくります
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
PostProcess Off
Slide 97
Slide 97 text
PostProcess ON
Slide 98
Slide 98 text
PostProcess Off
Slide 99
Slide 99 text
PostProcess ON
Slide 100
Slide 100 text
整理したらMaterialは 公開予定です
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
おわり! なにかあれば Twitter: @ shop_0761 https://twitter.com/shop_0761