Тёмный

Toon Shader From Scratch - Explained! 

eleonora
Подписаться 3,5 тыс.
Просмотров 106 тыс.
50% 1

Опубликовано:

 

16 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 180   
@SarahJaneNg
@SarahJaneNg 4 года назад
Amazing. Thank you for doing this. I have wanted to see if it were possible to do a Toon Shader for a long time, but it's something that I have been pushing away from me because I felt that Shaders were not something that I would be able to do at the level I am at, but it seems to be quite simple after all..
@eleonora6621
@eleonora6621 4 года назад
Thank you, that is so kind of you! I'm glad it was useful!
@stevenkearney9629
@stevenkearney9629 4 года назад
For anyone who does just wants to copy paste the shader code, here it is: Shader "Unlit/ToonShader" { Properties { _MainTex ("Texture", 2D) = "white" {} _Brightness("Brightness", Range(0,1)) = 0.3 _Strength("Strength", Range(0,1)) = 0.5 _Color("Color", COLOR) = (1,1,1,1) _Detail("Detail", Range(0,1)) = 0.3 } SubShader { Tags { "RenderType"="Opaque" } LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; float3 normal : NORMAL; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; half3 worldNormal: NORMAL; }; sampler2D _MainTex; float4 _MainTex_ST; float _Brightness; float _Strength; float4 _Color; float _Detail; float Toon(float3 normal, float3 lightDir) { float NdotL = max(0.0,dot(normalize(normal), normalize(lightDir))); return floor(NdotL / _Detail); } v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); o.worldNormal = UnityObjectToWorldNormal(v.normal); return o; } fixed4 frag (v2f i) : SV_Target { // sample the texture fixed4 col = tex2D(_MainTex, i.uv); col *= Toon(i.worldNormal, _WorldSpaceLightPos0.xyz) * _Strength * _Color + _Brightness; return col; } ENDCG } } }
@lolcat69
@lolcat69 4 года назад
Bibbidi Bobbidi, your code is my property kiddo
@Luckysury333
@Luckysury333 3 года назад
@@lolcat69 **OUR** CODE
@danielhuang6668
@danielhuang6668 3 года назад
@@Luckysury333 DANI DEV
@alpkurt4481
@alpkurt4481 3 года назад
do you even wear a cap bro
@DuckSpasm
@DuckSpasm 3 года назад
my hero, bro.
@AeroAndZero
@AeroAndZero 3 года назад
The Original Toon shader doesn't cast shadows so I modified the code so that It now cast shadows Shader "Unlit/ToonShader" { Properties { _MainTex ("Texture", 2D) = "white" {} _Brightness("Brightness", Range(0,1)) = 0.3 _Strength("Strength", Range(0,1)) = 0.5 _Color("Color", COLOR) = (1,1,1,1) _Detail("Detail", Range(0,1)) = 0.3 } SubShader { Tags { "RenderType"="Opaque" } LOD 100 //Pass for Toon shader Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; float3 normal : NORMAL; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; half3 worldNormal: NORMAL; }; sampler2D _MainTex; float4 _MainTex_ST; float _Brightness; float _Strength; float4 _Color; float _Detail; float Toon(float3 normal, float3 lightDir) { float NdotL = max(0.0,dot(normalize(normal), normalize(lightDir))); return floor(NdotL / _Detail); } v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); o.worldNormal = UnityObjectToWorldNormal(v.normal); return o; } fixed4 frag (v2f i) : SV_Target { // sample the texture fixed4 col = tex2D(_MainTex, i.uv); col *= Toon(i.worldNormal, _WorldSpaceLightPos0.xyz) * _Strength * _Color + _Brightness; return col; } ENDCG } //Pass for Casting Shadows Pass { Name "CastShadow" Tags { "LightMode" = "ShadowCaster" } CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile_shadowcaster #include "UnityCG.cginc" struct v2f { V2F_SHADOW_CASTER; }; v2f vert( appdata_base v ) { v2f o; TRANSFER_SHADOW_CASTER(o) return o; } float4 frag( v2f i ) : COLOR { SHADOW_CASTER_FRAGMENT(i) } ENDCG } } }
@riloud3875
@riloud3875 3 года назад
Thank you! :)
@J3R3MI6
@J3R3MI6 2 года назад
Awesome 👏🏼
@acrilly
@acrilly 2 года назад
THANK YOUUUUUUUUU
@andresbocchigliere3227
@andresbocchigliere3227 2 года назад
Nice! How about if i want to receive Shadows too ? with that code is casting but not recieving... pls Help!!! Thanks in Advance
@haydenever6557
@haydenever6557 2 года назад
@@andresbocchigliere3227 it surely is because it's an unlit shader. I didn't try this one out yet but if you create a lit one it will most likely receive shadows (let's now hope that it doesn't receive it with the normal shading :') but with this code to cast shadows it must be working ig, I'll try this out when I can)
@Danee2108
@Danee2108 4 года назад
Imagine being so good at explaining that you're underrated That's you. You need more subs. Thanks for the video.
@CorleoBabar
@CorleoBabar 3 года назад
Fantastic video. Every other tutorial I've seen for this type of effect always try incorporating superfluous features which require C# coding and things like that, really appreciate the simplicity of just using CG.
@SebLeCaribou
@SebLeCaribou 3 года назад
I am blown away by the quality and simplicity of this. I'm new to Unity and 3D rendering in general and this is immensly helpful! I'll share as much as possible :D
@pratyushbarikdev
@pratyushbarikdev 4 года назад
I have watched so many videos related to this. But no one explained the dot product and the floor to group part. Now it just clicked. Thank you.
@ulrikdiamantedesouza5141
@ulrikdiamantedesouza5141 2 года назад
Girl!!! i'm brazilian guy, i undestand all, and I LOVE the tutorial! Congratz!
@HarukaxYuuki
@HarukaxYuuki 3 года назад
Nice, I might end up using this for my videogame project in class
@ParkerGameDev
@ParkerGameDev 2 года назад
you are a stunning teacher the way you simplifed the proccess to that extent, yet kept the same effect is brilliant!
@gleb_pho9295
@gleb_pho9295 3 дня назад
Very helpful video! Made shaders feel 5% less scary to me tysm
@thelonlypanda1
@thelonlypanda1 3 года назад
I like how you say consider subscribing instead of like how everyone else just tells you to subscribe
@qwerty273
@qwerty273 3 года назад
How Wind Waker’s cel shading works, is that it shades the object with values from 0-255 (0 being black, and 255 being white), then looks in a texture at the coordinate of the pixel’s color value to find the final color. The texture is about 47.5% black on the left, 47.5% white on the right, and a smooth gradient from black to white in the middle 5% (rough approximation from memory on the percentage). Wind Waker’s cel shading is very interesting, it’s so simple, yet looks so good. Great video btw, cel shading is very interesting, and cool.
@ARKTEAM
@ARKTEAM 2 года назад
With all due respect, i love you! Thank you. I´m starting with shader scripts, and this video make me understand the concepts of this
@lanefaulhaber875
@lanefaulhaber875 Год назад
This video is exactly what I was looking for!! Thank you so much for the help!
@LaurynasJatuzis
@LaurynasJatuzis 4 года назад
Hey! Love this tutorial! Really nice and informative ^^ Maybe you could make some tutorials regarding basic shader programming? Would be awesome!
@eleonora6621
@eleonora6621 4 года назад
I would love to make more of these for sure!
@LucciHs
@LucciHs 4 года назад
you channel deserves so much more followers ! I had both me and my boyfriend following you!!!
@eleonora6621
@eleonora6621 4 года назад
Thank you for your kind words!! xxx
@A.P.0000
@A.P.0000 2 года назад
Works like a charm. Thanks for providing this.
@A.P.0000
@A.P.0000 2 года назад
After testing the shader a bit in unity i found out that the model is not receiving any shadows from outside sources. For example a building casting a shadow on the ground has no effect on the character that this toon shader has been applied to. Although the shader is visually very good, this sitution makes it some what less useful for practical use. I dont know how to fix this but if anyone can chime in to improve this, it will be appreciated and beneficial for everyone.I am not mentioning that the model does not cast any shadows as someone in the commets below has already provided a fix for that.
@stankeyal3390
@stankeyal3390 4 года назад
Wow this is an excellent tutorial, concrete and simple, yet deep. Thank you for sharing your knowledge. Any chances you give us a little hint on how to add a "transparent" funcion?
@huyskn
@huyskn 4 года назад
Wow, this tutorial is amazing. I love all the customizable options that you added as well! And this only in an 8min video, awesome :D Any chance you could add an outline as well to this? (I know nothing about shaders :p)
@johannseys2354
@johannseys2354 4 года назад
Thanks a lot for this tutorial. Nice explanations and finally someone who is not using shader graph! That was really helpful!
@franciscomarques7984
@franciscomarques7984 4 года назад
Hi I came from the Facebook, I love the result,Nice work 🤗🤗
@lj1643
@lj1643 Год назад
Best video ever! Thank you so much!
@Rotcivcom
@Rotcivcom 4 года назад
Great video. Very easy to follow and understand
@maddas2128
@maddas2128 4 года назад
what a good and solid content you have! Lvl up! +1 Atk +2 Def +1 Sub
@ItsVanAken
@ItsVanAken Год назад
This video was amazing. Thank you so much!!!
@gustavodort5812
@gustavodort5812 4 года назад
It was a little too fast for me, but I'll watch it again until I get it! I've been working with Unity for 9 years now but I've been too lazy to learn shaders. Thank you so much for your video and please keep doing more!
@eleonora6621
@eleonora6621 4 года назад
Thank you for the kind words! Please feel free to drop me a message on discord if you have any questions!
@DePistolero
@DePistolero 4 года назад
This was spot on!!! Thank you!!!
@denizdemir9255
@denizdemir9255 4 года назад
is this the best shader tutorial ever, or what?? great job!! im just wondering if this will look as good for other objects as well, like a person?
@ReasonMakes
@ReasonMakes 3 года назад
This is fantastic. Thank you
@andrepiazza8580
@andrepiazza8580 3 года назад
Very good and simple! excelent job! please, more tutorials like this!!!!
@anicepineapple9067
@anicepineapple9067 4 года назад
Awesome video! My fears of working with shaders have been squashed.
@infokubarcade
@infokubarcade 4 года назад
This was super interesting ! Thanks !
@michaelstankowski4389
@michaelstankowski4389 4 года назад
This was actual helpful! Thanks a lot
@acidix_games
@acidix_games 3 года назад
I have an issue with the shader, I’m not sure what it is, but it’s either that sometime it will randomly show what the camera sees as a texture, or it becomes super reflective. Why does this happen?
@petelovag1660
@petelovag1660 4 года назад
I cant thank you enough for making this tutorial
@ahasanulhaque5906
@ahasanulhaque5906 4 года назад
It's a great video you made. Good content, good presentation, everything needed is good. I have to keep an eye on your videos. Keep it up. ^_^
@万言-y4y
@万言-y4y 4 года назад
thanks ! its very helpful and inspired turtial !
@namestring9884
@namestring9884 4 года назад
你的教程真的太经典了,网络上非常稀少。希望老师更多教程
@a.hendblade5291
@a.hendblade5291 2 года назад
here is a question, how would I go about including a normal map with this cell shader?
@deadeagle-archived
@deadeagle-archived 4 года назад
Pretty cool! Thanks for the knowledge without dumb talking/making things complex :D
@deadeagle-archived
@deadeagle-archived 4 года назад
@eleonora Is there perhaps a chance of you creating a pixel shader turorial? Totally asking for a friend :)
@LexGear
@LexGear 4 года назад
How hard would it be to add casted shadows to this?
@MemoriaThavron
@MemoriaThavron 4 года назад
This was a really good tutorial!
@wikiti-yt
@wikiti-yt 4 года назад
Just saw this tutorial on gamedev.net, and instantly subscribed.
@josephpamanes5181
@josephpamanes5181 4 года назад
Hi! and thanks for this awesome tutorial, great splaning btw i wanted to ask ¿what program do you use to write script?
@aedwardc
@aedwardc 2 года назад
Tight, Ty
@VEOdev
@VEOdev 2 года назад
Amazing video , Does it work for URP ?
@HadiLePanda
@HadiLePanda 4 года назад
Simple and informative video, ty ^^
@eleonora6621
@eleonora6621 4 года назад
Thank you for the kind words!
@Marci-Ana-GMM
@Marci-Ana-GMM 2 года назад
Hi. can you check the cartoon and the comic reshade of the reshade software, both of them are good but also they bring some visuals problems to the game (you should check that, maybe you can fix those things)
@defender2212
@defender2212 4 года назад
This is beyond science
@staticphoenixstudios
@staticphoenixstudios 3 года назад
Hello eleonora could I ask if there is a way to add transparency to this shader at all?? If so may I request to see it, it would be a great help. Thank you
@chenwang6089
@chenwang6089 6 месяцев назад
Oh my god, you are my Lady Luck!!!
@SmashedPotatoStudios
@SmashedPotatoStudios 3 года назад
this is aewsome
@deepdarkguz9ka729
@deepdarkguz9ka729 3 года назад
Simple and useful!
@urish3d
@urish3d 2 года назад
Good evening, very good tutorial. But how would I make Point Light influence and create shadow, thank you very much
@ruchirraj5300
@ruchirraj5300 3 года назад
Which illustration/Drawing software were you using at 2:10 ?
@SonictheHedgehogInRealLife
@SonictheHedgehogInRealLife 3 года назад
Is there anyway i can change the colors of the highlights and shadows? have them set to a specific color. im trying to make a 3d sonic 1 that looks like pixel art and i have the 3d loop im testing this on. the lighting thanks to this tutorial is really good except the colors of the shadows and highlights is slightly off if there was only a way to change that.
@RealformStudioXR
@RealformStudioXR 4 года назад
Great shader effect, Do you know if this may work on URP? have you ever tested on?
@GamingTardigrade
@GamingTardigrade 2 года назад
I tested it in URP, it worked. Make sure to still use non-URP shaders for this though.
@daniyalniazi1771
@daniyalniazi1771 3 года назад
Hi, I was just having a small problem, every time I move my back, the shades get dark as if under a shadow but when I get close, they light up as if the light is hitting that object directly
@INeatFreak
@INeatFreak 4 года назад
Hey. Does this shader affect performance a lot? I am thinking about using in it for mobile.
@GuillermoFerrari
@GuillermoFerrari 4 года назад
I want to know too
@nuggetslug
@nuggetslug 4 года назад
It should be fine, this added very little logic to the shader. Its simple enough to just test out yourself!
@moonmail3422
@moonmail3422 4 года назад
@@nuggetslug If it was an issue though you could just resort to pre-rendered sprites.
@KaineReiN
@KaineReiN 4 года назад
How do you make the object with this shader cast shadow? I added the shader to my gameobjects and suddenly they don't cast shadow anymore. Can you please help me?
@izzydev9919
@izzydev9919 3 года назад
It works perfectly for objects with textures, but how do I do it for objects without textures (Just a single base colour)? If I try to do it normally, it works but the object becomes quite light/white
@eliasmarnev
@eliasmarnev 4 года назад
really amazing!! what is the difference with using nodes? i'm starting to try to do this on my models but i want the best performance possible for mobile games :)
@Markkaz88
@Markkaz88 4 года назад
There is a bug in the code in the video in the Toon function. The floor method will return an integer that can be larger than 1. As the result from the Toon function should be between 0 and 1 the code will give you black and white and nothing in between. The way to solve it, is by multiplying by the _Detail variable again before returning: return floor(NdotL / _Detail) * _Detail;
@Terror1046
@Terror1046 4 года назад
The return value gets multiplied by strength and it is supposed to be able to go above 1.... This is not a Bug
@Markkaz88
@Markkaz88 4 года назад
Maybe, but for me the provided code didnt work. They way to make it work was to add the addition i mentioned above. In the node graph they block is called posterize, which does exactly the same thing
@Markkaz88
@Markkaz88 4 года назад
Not sure how to edit a comment, but auto complete change the into they.
@Terror1046
@Terror1046 4 года назад
@@Markkaz88 maybe you didn't declare the property for the strength multiplier correctly. That would explain why the extra multiplication of _Detail made yours look better. Whatever at least it works :) for me the above code works correctly
@ViniciusBeni
@ViniciusBeni 4 года назад
Hey, good night. I am a beginner in unity and would like to know how I make this shader to cast shadows and add metallic properties, is it possible?
@neozoid7009
@neozoid7009 Год назад
How to add shadows so that it can receive and cast shadows ??
@joshuamalcolm2807
@joshuamalcolm2807 4 года назад
any suggestions on how you might add the ability to change the shadow colours?
@CuongNguyen-ov5st
@CuongNguyen-ov5st 4 года назад
thank you very much!
@Yumenoki99
@Yumenoki99 3 года назад
Hey! I followed this without shader coding experience and the result looks great, thank you! :3 I was wondering if I can somehow access the written toon shader within a curved world shader made in Shader Graph? I am going for a toon shaded round planet and I am not sure if I would be able to translate the written toon shader into the shader graph at my current skill level qwq
@noskcornarezano4173
@noskcornarezano4173 4 года назад
Hi! Thank you for this. I really like the result. Is there a way I can get shadows from it? my character is like floating in the grass? xD
@thelowendstudio
@thelowendstudio 3 года назад
Cool !!! Thank you:)
@ponzgamer8303
@ponzgamer8303 3 года назад
cool.. can we do the same shader for unity terrain ?
@bruno6919
@bruno6919 4 года назад
Great tutorial.
@AngelGRP
@AngelGRP 4 года назад
Excelent, thanl you so much!
@rangerracing7209
@rangerracing7209 2 года назад
Can u add outline?
@monasrivastava9373
@monasrivastava9373 4 года назад
Plz can you do a toon shader for environment plz plz plz plz plz
@neozoid7009
@neozoid7009 Год назад
does this support shadows ?
@NimbusTheSkyKid
@NimbusTheSkyKid 2 года назад
Amazing, does anyone know how to also add an outline?
@blackulrich
@blackulrich 4 года назад
I want to add transparency to this shader, how can I do it?
@uicosole
@uicosole 4 года назад
Nice tutorial! But how do i let it cast shadows on itself? And is there any way to let the ambient color of the world affect the shaded object? It doesn't seem to do that right now
@uicosole
@uicosole 4 года назад
oh, it doesnt seem like it interacts with the world at all,, is there a way to make it do that? or would i have to use a surface shader for that?
@lld5461
@lld5461 4 года назад
I can not get the step after use the floor function,Is there any points
@onewayroad3765
@onewayroad3765 3 года назад
Is there a way to smooth the shade edge?
@hheamda212
@hheamda212 4 года назад
Hey, thanks for the video.... but pointlight and spotlight is dissapeared ... it can only on directional light
@billjeason6635
@billjeason6635 4 года назад
Can this project working in the HDRP?
@mldanny1899
@mldanny1899 3 года назад
How come other lights dont effect how the toon light glows?
@karjalanp11rakka
@karjalanp11rakka 2 года назад
Old video but still helpful.
@pavloivasiuk5487
@pavloivasiuk5487 3 года назад
How to add fade in effect to this shader ?
@shmuelisrl
@shmuelisrl 2 года назад
I see a glaring problem with this. the normal can't give you occlusion shadows [casted or casting] so this can't really be a functional shader
@enricllopis9304
@enricllopis9304 4 года назад
Any way to make it able to cast shadows?
@Santi-zu4pu
@Santi-zu4pu 4 года назад
Is it possible to make it interact with the lights and shadows in the scene?? Like, if its under a shadow it doesnt shine
@DRYstudios1994
@DRYstudios1994 4 года назад
I know that Roystan created a toon shader that can do that.
@BeastCarzz
@BeastCarzz Год назад
you are amazing ❤❤❤❤❤❤❤❤❤❤
@AlecAndersonZx
@AlecAndersonZx 4 года назад
I'm really interested in this game "Bread of the Wild" that you mentioned. Sounds fun
@gavintantleff
@gavintantleff 4 года назад
Alec Anderson haha
@zerghector
@zerghector 4 года назад
Which Editor are you using?
@eleonora6621
@eleonora6621 4 года назад
I'm using Atom!
@zerghector
@zerghector 4 года назад
@@eleonora6621 Thanks!!!!!!!!
@iamkengi
@iamkengi 4 года назад
thank you!
@alexts1299
@alexts1299 3 года назад
WoW
@lithium534
@lithium534 4 года назад
I have everything working only strength gives me error.
@AniketSingh-hr8mi
@AniketSingh-hr8mi 4 года назад
Nice
@Villio.
@Villio. 4 года назад
It's looking so good 😭😭 that I watched it and I know only blender😭😭
@mooooooon9296
@mooooooon9296 4 года назад
can we do this in unity 2018 ?
@eleonora6621
@eleonora6621 4 года назад
I think it should work, if you run into any issues drop a message in the discord and I'll try to help :)
@LexGear
@LexGear 2 года назад
Me staring at the TV wondering why my homecooked meal looks nothing like the picture.
Далее
How we built the toon shading | Open Projects Devlog
10:08
moto tag - AirTag для Android
00:47
Просмотров 428 тыс.
Mübariz İbrahimovun atası vəfat etdi
00:14
Просмотров 144 тыс.
I Created My Own Custom 3D Graphics Engine
26:29
Просмотров 95 тыс.
Moebius-style 3D Rendering | Useless Game Dev
8:12
Просмотров 840 тыс.
I Made Popular App Icons ULTRA Realistic
11:50
Просмотров 137 тыс.
Dear Game Developers, Stop Messing This Up!
22:19
Просмотров 720 тыс.
Introduction to shaders: Learn the basics!
34:50
Просмотров 346 тыс.
PERFECT Anime/Toon Shading in Blender 4.0!
17:34
Просмотров 183 тыс.
How to Create a Toon Shader
10:19
Просмотров 34 тыс.
Cel Shading - Devlog 3
11:09
Просмотров 47 тыс.