Here I'll post clarifications and additions to the video! I mentioned we're using the Phong lighting model throughout the video, but we're actually using a modification of the original Phong model called Blinn-Phong. The Phong model uses r⋅v for the specular component (where r is a reflection of light direction, l, in n), whereas Blinn-Phong changes that to n⋅h, which I use in the video.
Great tutorial but for some reason my unity keeps saying this error message when I try and do the code you did at 3:34 : Shader error in ":Parse error : syntax error unexpected TVAL_ID at line 5
Another great shader video! The way you break it down into sections is great too, really helps to understand what's going on and how the shader achieves its effect.
Thanks! Lately I've been trying to add sections more because I also find them helpful when watching or reading a tutorial. Some of my much older videos are shorter but they're also just a big block of information!
I think I need to come back to this when I understand more about how Unity coding works but I like how you explained the different types of lighting at the beginning
Thanks! I have a feeling that making a few videos based on theory like that might be something that's useful for people, so it's something I'll consider focusing on!
Hi, this video was a massive help. Tip for others: Step and SmoothStep actually run and output per channel (RGB) so you can introduce unintentional artifacting at the edge of your colour changes if using using non-perfect-white lights (1,1,1) in your scene. To get cleaner edges: before doing your Diffuse SmoothStep, Subtract two of your colour channels (Green Y, Blue Z), so you effectively perform the SmoothStep on a single channel (Red X). Then you have several techniques to add the Green and Blue back in, for example a Combine with all channels fed the Red value. Note if you are going hard into diffierent coloured lights but want to use the above, you may want to re-add tints from the light colour back in directly. Update: Having considered the problem further, combining your RGB to a single balanced brightness channel and doing the Step on that would be more effective than basing just off Red.
The immense satisfaction I feel when I'm having to explain to a dev how we as a publisher want a game stylised and I can pull out the WELL I KNOW A GUY card
Hello! If anyone is struggling with shadows not applying to objects with the cel shader material, all you have to do is go to the shader graph, and correct the material from Unlit to Lit, and you could also drag the overall output to the emission AND base color :) Hope that helped
I feel like in order to be able to design shaders of this complexity on your own, you need to be an actual professional or otherwise be nearly fulltime occupied with this. For everyone else, you can only replicate this sort of stuff by following videos such as this one lol. Thanks for the upload.
I very much felt the same way when I started out with shaders, but I'm thankful tools like Shader Graph have made things a bit more approachable. I spent a lot of time at the start following tutorials until bits of it here and there started clicking, but they did eventually all click and I hope they do for you too!
Great information here, but moves so fast that it's difficult to follow along if you're trying to learn through re-creating in real time. A lot of stressful pausing, rewinding, oop it went too fast, rewind again, etc.
Very deserved Like and sub, great info thank you so much, you saved me from buying a cell shader from the asset store! In addition I got to understand how it works too
When I try to make the GetAdditionalLights subgraph I get the error "Undeclared Identifier GetAdditionalLights_half at line 184" . I've followed your instructions exactly. Going through the code it seems I named all the variables correctly so I'm not sure what's going on here. EDIT: I fixed it. Name of the node had a typo.
I'm pretty sure Breath of the Wild only uses one light source (I'm 100% sure WW does because of a certain effect it uses). But I'm wondering how it would be possible to define this shader with one source at a time and be able to switch between legal sources depending on distance/priority. So if you are near a lamp that you want to light up your character, it would take the over the main shading (passing on its own lit/shadow profile) and if you were near no other source the environmental directional light would take over. (I remember in WW you could see two torches near Link and it would jump between the two depending on distance.) Obviously this kind of effect would require good light placement so that two sources are never battling each other similar to two planes on top of one another clipping to infinity. Edit: I'm new to shader math so if this is obvious just ignore lol.
Does this work in built-in RP? I tried it, and everything works just fine until the very end. When I try to set the base color to the sum of the light sources, I get the magenta checkers of death in the preview and in the material.
@Daniel Ilett Sir, might you be persuaded to expand this to include received shadows? Edit: Hmm now I'm a bit confused, because the Lighting.hlsl file does seem to include some shadow stuff. The thing is, when I move my mesh into the shadow of a building, it is still fully lit by the directional light 😒
I was able to add received shadows by changing the graph from Unlit to Lit, and then sending the output to the emission instead of the base color. It worked quite nicely 😁
I've seen solutions to add shadows to this but whenever I use a point light the objects no longer have shadows. Do you have a better method to add shadows to this shader?
This tutorial slaps. However, when I connect everything up, unity hits me with a "Shader error in 'Master': 'MainLight_float': output parameter 'Direction' not completely initialized at Assets/Graphics/Lighting.hlsl(1) (on d3d11)"
Hello. I did more or less the same things with HLSL in my custom VR engine. I'm asking, why not doing the whole in HLSL? And is it efficient? BTW thanks for your video. I didn't think we could do so complicated with shader graphs
Doing this yourself directly in HLSL is almost certainly more efficient, but also a lot more complicated for a beginner (especially when you factor in depth passes, shadow passes etc, which Shader Graph does for you). The fact that Shader Graph lacks good support for custom lighting (even in later versions, you can get the main light direction and that's it) is restrictive, so this is an imperfect solution shown in the video, but yes it's nice that we can at least use a bit of HLSL code in graphs like this. It opens up a lot of complex possibilities!
Thx for the answer. After 20 years of low level custom engine programming, I'm new to Unity and allways be surprised how doing complex stuffs can now be easy for a non expert with these tools ;)
awesome tutorial, but was wondering, the cel shading article on your site seems to be missing? tried going there to find it manually but couldn't. would be great to have that written version if it's possible.
Hey, I actually do have a version of this on my website - I just made it before I started making TH-cam tutorials! This version was also an "introduction to Shader Graph" tutorial and it's a bit outdated since it uses Unity 2019.3, but it's there: danielilett.com/2020-03-21-tut5-1-urp-cel-shading/
Daniel, thanks for the video. I got it working perfectly. One question though: When it comes to things like link's blue shirt, how would the white line details be done? This setup doesn't seem like it's designed to work with textures, so I am assuming models would be split up into separate objects for each object that needs to be its own color. Is this correct? I would need to have all those white lines on the blue shirt be separate models so they can have a version of this shader applied to them, yes? That is my understanding of how this works. Great video!
During 10:26, you start explaining these two sub-graphs for any additional light in the scene, as at that point it only works for the main light source (most likely the sun), and you've mentioned how there is nothing to handle loops in the shader graphs So your easy/quick solution was simply to copy the "main section" of each subgraph and paste it for multiple additional lights, my question in this comment is: Do we paste that section as many lights as there is in the scene? Idk, maybe for example let's say some hallway with a bunch of firelamps, let's say 30, 15 for each side, do we have to copy and paste that section for BOTH subgraphs 29 times (29 because it's minus the original)? And you shortly after say "It's up to 8", so there is no way to handle too many lights in this style? It's just out of curiosity, if I'm ever using this I doubt I'd have more lights sources other than the sun anyways
This sort of shader is something I've been looking to make on my own for a while! I do seem to be having trouble casting shadows onto objects that use shader though. Is there any way I would be able to fix that?
Hi, I just completed the tutorial, which is great ! Do you have any idea not to make the model look shinny ? I understood the settings for the specular, but it always have that shinny look that I think doesn't look great with skin or fur for example. If you have any idea to "fix" that, I would greatly appreciate it
So far the previews seem to broken and I don't think I messed up, hopefully it works in application Edit: Figured it out make sure to set values to the properties (me stupid)
I think you might need to make the shader in a different way for HDRP unfortunately. I don't really use HDRP myself, but I believe it treats lighting quite differently to URP so unfortunately the custom lighting code isn't transferrable between the two. From what I've read online, it looks like the easiest way to do something similar in HDRP is to use an Unlit material and manually send over the position/orientation of each of your lights to the shader through scripts (although I could be wrong).
Hi guys, maybe one of you can help. I always get the error: Shader error in 'Master': undeclared identifier 'AdditionalLight_half' at line 189 (on d3d11) the same for MainLight I have checked the correct names of the hlsl files and the parameters but I haven't solved it yet.
Nice looking Genshin Impact shader without Outlines but is not Breath of the Wild it have to mutch Frensel/White/Shimmer Edges but it still looks nice thought
Amazing tutorial! One of the best in the subject. How would applying this effect to the 2D renderer work? I'm trying to replicate the effect used in laigter software, had lots of trouble getting the light information in shader graph. Ended using shader lab, add some okish results. Would you recommend using shader graph? Is it possible even? If so the code snippet works? (Sorry for asking so many questions, but there's not a lot of info in the subject out there :( )
Hi, thanks for the super helpful video. I am experience one issue though. The line #ifdef SHADERGRAPH_PREVIEW is giving me this error "Preprocessor directive expected". Any help would be appreciated, thanks for reading. I'll be trouble shooting it using the Unity manual on this area.
"AdditiionalLight_float" cannot convert output parameter from "float3" to "float" when creating the addiitional light function, i've set it up the exact same way as main light no idea why i'm getting this error, any iideas?
You need to change the name to "AdditionalLight". It has to be the same name as the void method. If iets different it will not work. I made the same mistake. I forgot to change the name "MainLight" to "AdditionalLight" in the GetAddiotionalLight parameter above the source.
I ran into this error too, even though I've checked that the "name" parameter has the exact same text as the void method. did you find a way to solve it? Edit: I'd forgotten to add the index input lol
You can put the code for the additional lights inside the same file as the code for the main light. I stick them all in a file called Lighting.hlsl. If you go to the GitHub link in the description, then you can download the file from there directly!
I don't know how much experience you have with Unity so I'll just give the most complete answer I can: There are a few ways to do it in Unity. Either you can right-click a shader in the Project View and select Create -> Material from the menu, or select a Material that's already been created and then use the Shader drop-down at the top of the Inspector to change the shader - you can use the search bar, or find it manually. Shader graphs by default are under a "Shader graphs" folder. Then, to apply the material to an object, drag the material onto the object in the Scene View, or select the object and change the material on its Renderer component using the little circle icon next to the Material field. You might need to expand the Materials field first by clicking it. Hope all that helps!
@@zazo5525 i dont remember i just scrapped it and move to a new tutorial if i do remember ill come back with a reply, but thank you for taking the time to lend a hand!
@@jwhatcha6052 Oh it’s no worries :) I was just asking because I just realized that you have to switch the render mode thing to URP in project settings. Took me like four hours searching through forums to find that out lol. Anyways good luck!!!
Here I'll post clarifications and additions to the video! I mentioned we're using the Phong lighting model throughout the video, but we're actually using a modification of the original Phong model called Blinn-Phong. The Phong model uses r⋅v for the specular component (where r is a reflection of light direction, l, in n), whereas Blinn-Phong changes that to n⋅h, which I use in the video.
Great tutorial but for some reason my unity keeps saying this error message when I try and do the code you did at 3:34 : Shader error in ":Parse error : syntax error unexpected TVAL_ID at line 5
@@Ma-kusu Don't modify the 0.0f to 0f or 1.0f to 1f, juste copy past like in the github
Another great shader video! The way you break it down into sections is great too, really helps to understand what's going on and how the shader achieves its effect.
Thanks! Lately I've been trying to add sections more because I also find them helpful when watching or reading a tutorial. Some of my much older videos are shorter but they're also just a big block of information!
I think I need to come back to this when I understand more about how Unity coding works but I like how you explained the different types of lighting at the beginning
Thanks! I have a feeling that making a few videos based on theory like that might be something that's useful for people, so it's something I'll consider focusing on!
Hi, this video was a massive help.
Tip for others: Step and SmoothStep actually run and output per channel (RGB) so you can introduce unintentional artifacting at the edge of your colour changes if using using non-perfect-white lights (1,1,1) in your scene.
To get cleaner edges: before doing your Diffuse SmoothStep, Subtract two of your colour channels (Green Y, Blue Z), so you effectively perform the SmoothStep on a single channel (Red X). Then you have several techniques to add the Green and Blue back in, for example a Combine with all channels fed the Red value.
Note if you are going hard into diffierent coloured lights but want to use the above, you may want to re-add tints from the light colour back in directly.
Update: Having considered the problem further, combining your RGB to a single balanced brightness channel and doing the Step on that would be more effective than basing just off Red.
Can you show it on your shader graph?? I'm new in to shader's 😅
Taking my time over several days to slowly digest this information, and it's a real goldmine. I've subscribed; teach me more sensei.
yo this was amazing. you got me to finally learn shaders after procrastinating about it for almost a year now.
Happy to hear that! Hope you enjoy your shader journey, I personally got hooked once I finally gave it a go and haven't stopped since!
The immense satisfaction I feel when I'm having to explain to a dev how we as a publisher want a game stylised and I can pull out the WELL I KNOW A GUY card
Hello! If anyone is struggling with shadows not applying to objects with the cel shader material, all you have to do is go to the shader graph, and correct the material from Unlit to Lit, and you could also drag the overall output to the emission AND base color :)
Hope that helped
seems a little weird to use a lit shader after doing all this work to get the light sources from the scene 😅
I agree it is a little wierd solution but now my shader looks cooler than before. Thanks btw
Thank you so much for making this! This was such an informative video 10/10
Great tutorial ! Helps a lot
I feel like in order to be able to design shaders of this complexity on your own, you need to be an actual professional or otherwise be nearly fulltime occupied with this. For everyone else, you can only replicate this sort of stuff by following videos such as this one lol. Thanks for the upload.
I very much felt the same way when I started out with shaders, but I'm thankful tools like Shader Graph have made things a bit more approachable. I spent a lot of time at the start following tutorials until bits of it here and there started clicking, but they did eventually all click and I hope they do for you too!
@@danielilett Hey thanks man, appreciate that. Much love 🙏
Great information here, but moves so fast that it's difficult to follow along if you're trying to learn through re-creating in real time. A lot of stressful pausing, rewinding, oop it went too fast, rewind again, etc.
i am hyped
Very deserved Like and sub, great info thank you so much, you saved me from buying a cell shader from the asset store! In addition I got to understand how it works too
When I try to make the GetAdditionalLights subgraph I get the error "Undeclared Identifier GetAdditionalLights_half at line 184" . I've followed your instructions exactly. Going through the code it seems I named all the variables correctly so I'm not sure what's going on here.
EDIT: I fixed it. Name of the node had a typo.
I'm pretty sure Breath of the Wild only uses one light source (I'm 100% sure WW does because of a certain effect it uses). But I'm wondering how it would be possible to define this shader with one source at a time and be able to switch between legal sources depending on distance/priority. So if you are near a lamp that you want to light up your character, it would take the over the main shading (passing on its own lit/shadow profile) and if you were near no other source the environmental directional light would take over. (I remember in WW you could see two torches near Link and it would jump between the two depending on distance.) Obviously this kind of effect would require good light placement so that two sources are never battling each other similar to two planes on top of one another clipping to infinity.
Edit: I'm new to shader math so if this is obvious just ignore lol.
Does this work in built-in RP? I tried it, and everything works just fine until the very end. When I try to set the base color to the sum of the light sources, I get the magenta checkers of death in the preview and in the material.
@Daniel Ilett Sir, might you be persuaded to expand this to include received shadows? Edit: Hmm now I'm a bit confused, because the Lighting.hlsl file does seem to include some shadow stuff. The thing is, when I move my mesh into the shadow of a building, it is still fully lit by the directional light 😒
I was able to add received shadows by changing the graph from Unlit to Lit, and then sending the output to the emission instead of the base color. It worked quite nicely 😁
What a wonderfull tutorial
Learned a Lot. Thanks for the Video
WTF THIS IS SPACE SCIENCE!!!!
What additional name spaces do you use for your script? Do you use "using Unity.Mathematics" for example? Thanks for reading.
I've seen solutions to add shadows to this but whenever I use a point light the objects no longer have shadows. Do you have a better method to add shadows to this shader?
This tutorial slaps. However, when I connect everything up, unity hits me with a "Shader error in 'Master': 'MainLight_float': output parameter 'Direction' not completely initialized at Assets/Graphics/Lighting.hlsl(1) (on d3d11)"
Did somebody solve that problem ?
Yea any solution on this? I have the same problem
I, too, have been hit with this problem
Turns out I just needed to switch to a URP project and the error went away for me!
Hello. I did more or less the same things with HLSL in my custom VR engine. I'm asking, why not doing the whole in HLSL? And is it efficient? BTW thanks for your video. I didn't think we could do so complicated with shader graphs
Doing this yourself directly in HLSL is almost certainly more efficient, but also a lot more complicated for a beginner (especially when you factor in depth passes, shadow passes etc, which Shader Graph does for you). The fact that Shader Graph lacks good support for custom lighting (even in later versions, you can get the main light direction and that's it) is restrictive, so this is an imperfect solution shown in the video, but yes it's nice that we can at least use a bit of HLSL code in graphs like this. It opens up a lot of complex possibilities!
Thx for the answer. After 20 years of low level custom engine programming, I'm new to Unity and allways be surprised how doing complex stuffs can now be easy for a non expert with these tools ;)
thanks daniel very cool
what a great way to explain :D thnx a lot!
Thnaks for the tutorial ! I really like the final result of the Shder, But How can I receive shadow from other object with this shader ?
switch from Unlit to Lit in the shader graph properties
awesome tutorial, but was wondering, the cel shading article on your site seems to be missing? tried going there to find it manually but couldn't. would be great to have that written version if it's possible.
Hey, I actually do have a version of this on my website - I just made it before I started making TH-cam tutorials! This version was also an "introduction to Shader Graph" tutorial and it's a bit outdated since it uses Unity 2019.3, but it's there: danielilett.com/2020-03-21-tut5-1-urp-cel-shading/
@@danielilett ohh awesome for some reason the link in the description didn't work but this does! thanks so much!!
I had no idea it was the wrong link, thanks for letting me know!
Daniel, thanks for the video. I got it working perfectly. One question though: When it comes to things like link's blue shirt, how would the white line details be done? This setup doesn't seem like it's designed to work with textures, so I am assuming models would be split up into separate objects for each object that needs to be its own color. Is this correct? I would need to have all those white lines on the blue shirt be separate models so they can have a version of this shader applied to them, yes? That is my understanding of how this works. Great video!
Skip to 12:30 to see how to use a texture. It's really easy.
During 10:26, you start explaining these two sub-graphs for any additional light in the scene, as at that point it only works for the main light source (most likely the sun), and you've mentioned how there is nothing to handle loops in the shader graphs
So your easy/quick solution was simply to copy the "main section" of each subgraph and paste it for multiple additional lights, my question in this comment is: Do we paste that section as many lights as there is in the scene?
Idk, maybe for example let's say some hallway with a bunch of firelamps, let's say 30, 15 for each side, do we have to copy and paste that section for BOTH subgraphs 29 times (29 because it's minus the original)?
And you shortly after say "It's up to 8", so there is no way to handle too many lights in this style?
It's just out of curiosity, if I'm ever using this I doubt I'd have more lights sources other than the sun anyways
copy/paste it 8 times, unity will pick the 8 closest lights for you. you can adjust the max number in the render pipeline asset
Anyone else having trouble with TransformWorldToShadowCoord(WorldPos); and GetMainLight(shadowCoord);
Impressive work, do you think a similar effect can be achieved on UE4 using this as a guideline?
Great Tutorial! :D
This sort of shader is something I've been looking to make on my own for a while!
I do seem to be having trouble casting shadows onto objects that use shader though. Is there any way I would be able to fix that?
is it possible to add transparency to this shader? And if so, how would one go about doing it?
Hi, I just completed the tutorial, which is great ! Do you have any idea not to make the model look shinny ? I understood the settings for the specular, but it always have that shinny look that I think doesn't look great with skin or fur for example. If you have any idea to "fix" that, I would greatly appreciate it
So far the previews seem to broken and I don't think I messed up, hopefully it works in application
Edit: Figured it out make sure to set values to the properties (me stupid)
I manually followed this great tutorial and made the lighting.hlsl exactly as shown but alas I could not get it to run on HDRP :(
I think you might need to make the shader in a different way for HDRP unfortunately. I don't really use HDRP myself, but I believe it treats lighting quite differently to URP so unfortunately the custom lighting code isn't transferrable between the two. From what I've read online, it looks like the easiest way to do something similar in HDRP is to use an Unlit material and manually send over the position/orientation of each of your lights to the shader through scripts (although I could be wrong).
how did you pass in the int (index) as input through shader graph, there doesn't seem to be an int type.
Hi guys, maybe one of you can help. I always get the error: Shader error in 'Master': undeclared identifier 'AdditionalLight_half' at line 189 (on d3d11) the same for MainLight
I have checked the correct names of the hlsl files and the parameters but I haven't solved it yet.
This is an awesome video
Nice looking Genshin Impact shader without Outlines but is not Breath of the Wild it have to mutch Frensel/White/Shimmer Edges but it still looks nice thought
Amazing tutorial! One of the best in the subject.
How would applying this effect to the 2D renderer work? I'm trying to replicate the effect used in laigter software, had lots of trouble getting the light information in shader graph. Ended using shader lab, add some okish results. Would you recommend using shader graph? Is it possible even? If so the code snippet works?
(Sorry for asking so many questions, but there's not a lot of info in the subject out there :( )
why does the function have to be called :void MainLight_float? and not MainLight
??
Hi Daniel, some textures don't work correctly. How can I solve that?
So is there a way of doing self shadowing for non convex objects? I tried using a lit graph, it works to some degree, but picks up other lighting too.
Hi, thanks for the super helpful video. I am experience one issue though. The line #ifdef SHADERGRAPH_PREVIEW is giving me this error "Preprocessor directive expected". Any help would be appreciated, thanks for reading. I'll be trouble shooting it using the Unity manual on this area.
the additional lights break everything for me, whole screen full of artifacts
Did anyone else end up with a weird error? Undeclared Identifier "unity_multiply_float" in master. some weird stuff.
I downloaded your project and imported your shaders and materials to my project... but everthing shows up as pink
As soon as I change the shader to "Shader Graphs/CelShadingTextures" , the model disappears.
Does anyone know how to add normals+diffuse for this? Dunno if it's easy or not, I am a newbie.
"AdditiionalLight_float" cannot convert output parameter from "float3" to "float" when creating the addiitional light function, i've set it up the exact same way as main light no idea why i'm getting this error, any iideas?
You need to change the name to "AdditionalLight". It has to be the same name as the void method. If iets different it will not work. I made the same mistake. I forgot to change the name "MainLight" to "AdditionalLight" in the GetAddiotionalLight parameter above the source.
I ran into this error too, even though I've checked that the "name" parameter has the exact same text as the void method. did you find a way to solve it?
Edit: I'd forgotten to add the index input lol
@@paloma8423 Thank fucking god you updated with the solution i thought I was going crazy not being able to type a name properly for like 5 min.
Hello! How would I add a black outline to the material?
couldn't get specular light with Unity 2021
ah you got to reduce diffuse
I think shader graph now has builtin nodes for MainLight and for Additional Lights and Additional Lighting
You create file AdditionalLight.hlsl?
You can put the code for the additional lights inside the same file as the code for the main light. I stick them all in a file called Lighting.hlsl. If you go to the GitHub link in the description, then you can download the file from there directly!
"direction not comoletly initialized"
how do you apply the shader to an material?
I don't know how much experience you have with Unity so I'll just give the most complete answer I can:
There are a few ways to do it in Unity. Either you can right-click a shader in the Project View and select Create -> Material from the menu, or select a Material that's already been created and then use the Shader drop-down at the top of the Inspector to change the shader - you can use the search bar, or find it manually. Shader graphs by default are under a "Shader graphs" folder.
Then, to apply the material to an object, drag the material onto the object in the Scene View, or select the object and change the material on its Renderer component using the little circle icon next to the Material field. You might need to expand the Materials field first by clicking it. Hope all that helps!
Hey, which graph do I use? PBR graph?
Shader graph.
Wow im the 2k likes!
uuuugh why does everything i do with shaders never work
I think I can help you. Is your shader just pink? What's wrong?
@@zazo5525 i dont remember i just scrapped it and move to a new tutorial if i do remember ill come back with a reply, but thank you for taking the time to lend a hand!
@@jwhatcha6052 Oh it’s no worries :) I was just asking because I just realized that you have to switch the render mode thing to URP in project settings. Took me like four hours searching through forums to find that out lol. Anyways good luck!!!
I'm amazed anyone can follow this - he keeps jumping all over the place
sorry i dont work at NASA so i guess i cant understand this
How to add shadows from other objects?
I got it ^-^
@@Nyx_z_ can u tell me how pls :S
Can you explain how please ?
HOW PLEASE REPLY TO THIS!!!
I NEED HELP!!
theres no way that in blender you can do this with 3 nodes but unity has the most conveluted way possible. what the fuck is this
undeclared identifier 'GetAdditionalLightsCount' 🤷♂️