Making a Zelda-style Cel Shading Effect in Unity Shader Graph

Подписаться 20 тыс.

Просмотров 86 тыс.

50% 1

Tons of games use a stylised cel-shading art style to help them stand out graphically, including hits like Zelda: Breath of the Wild, Persona 5 and Okami. In this tutorial, we'll unlock the secrets of cel-shading in Shader Graph by using our own custom lighting and end up with an effect that supports multiple lights!
------------
👇 Download the project on GitHub: github.com/daniel-ilett/shade...
------------
✨ Cel-shading original article: danielilett.com/2020-03-21-tu...
✨ Alex Lindman custom lighting blog: blog.unity.com/technology/cus...
✨ Artstoff Link model: sketchfab.com/3d-models/link-...
✨ Bui Tuong Phong's shading model: en.wikipedia.org/wiki/Phong_s...
------------
00:00 Introduction
00:29 Ch. 1: Lighting Models
02:29 Ch. 2: Custom Lighting Code
04:56 Ch. 3: Lighting Calculations
07:24 Ch. 4: Cel-Shading Cutoff
10:05 Ch. 5: Additional Lights
------------
🎮 This project uses Unity 2020.3.2f1 and URP 10.4.0, but it should work with other versions.
------------
📚 Get a copy of my shader book here: www.dpbolvw.net/click-10074214...
✨ Grab Snapshot Shaders Pro here: assetstore.unity.com/packages...
------------
💬 Join the Discord: / discord
💖 Support me on Patreon: www.patreon.com/danielilett?f...
☕ Or throw me a one-off coffee on Ko-fi: ko-fi.com/danielilett
#zelda #unity #shaders

Игры

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

2 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 109

@danielilett 3 года назад

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.

@Ma-kusu Год назад

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

@hunabku9615 Месяц назад

@@Ma-kusu Don't modify the 0.0f to 0f or 1.0f to 1f, juste copy past like in the github

@jarred7721 3 года назад

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.

@danielilett 3 года назад

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!

@kristianthaler6525 Год назад

Taking my time over several days to slowly digest this information, and it's a real goldmine. I've subscribed; teach me more sensei.

@ThisOldBlog 2 года назад

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.

@damiankuaga1115 Год назад

Can you show it on your shader graph?? I'm new in to shader's 😅

@LocalContentShow 3 года назад

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

@danielilett 3 года назад

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!

@infinityvy 2 года назад

yo this was amazing. you got me to finally learn shaders after procrastinating about it for almost a year now.

@danielilett 2 года назад

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!

@bigtimecool9635 Год назад

Thank you so much for making this! This was such an informative video 10/10

@rinsofia8225 Год назад

Great tutorial ! Helps a lot

@mohammedgamersc9572 3 года назад

i am hyped

@TheBirdSolution 2 года назад

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

@emor67 Год назад

What a wonderfull tutorial

@leenpaws9680 2 года назад

Learned a Lot. Thanks for the Video

@silashughesmusic Год назад

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

@chalobeats8971 Год назад

seems a little weird to use a lit shader after doing all this work to get the light sources from the scene 😅

@emor67 Год назад

I agree it is a little wierd solution but now my shader looks cooler than before. Thanks btw

@MaxIme555 2 года назад

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

@animationsbelike 2 года назад

Great Tutorial! :D

@nikarand6246 2 года назад

thanks daniel very cool

@DonDisainer 3 года назад

what a great way to explain :D thnx a lot!

@softwet525 2 года назад

is it possible to add transparency to this shader? And if so, how would one go about doing it?

@downstream0114 2 года назад

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.

@MajorminorGaming 2 года назад

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?

@theluadog5857 2 года назад

Hello! How would I add a black outline to the material?

@hollowstreak9553 Год назад

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?

@timothepaul_ 2 года назад

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

@qcortex07 Год назад

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.

@SteadyPaceVince 2 года назад

This is an awesome video

@nicko3151 2 года назад

Does anyone know how to add normals+diffuse for this? Dunno if it's easy or not, I am a newbie.

@shariarpapaon5305 7 месяцев назад

how did you pass in the int (index) as input through shader graph, there doesn't seem to be an int type.

@ij20man35 Год назад

What additional name spaces do you use for your script? Do you use "using Unity.Mathematics" for example? Thanks for reading.

@evmoFPV 2 года назад

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.

@yeahnope620 Год назад

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.

@danielilett Год назад

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!

@yeahnope620 Год назад

@@danielilett Hey thanks man, appreciate that. Much love 🙏

3 года назад

Impressive work, do you think a similar effect can be achieved on UE4 using this as a guideline?

@luistorres6850 2 года назад

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 :( )

@emilhdov3350 8 месяцев назад

Hi Daniel, some textures don't work correctly. How can I solve that?

@ij20man35 Год назад

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.

@smetar3169 2 года назад

why does the function have to be called :void MainLight_float? and not MainLight ??

@calaverah7889 2 года назад

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.

@atomichoppo637 8 месяцев назад

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.

@Predulus 2 года назад

@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 😒

@JakeP78 2 года назад

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 😁

@lokemansson7508 2 года назад

WTF THIS IS SPACE SCIENCE!!!!

@michaelcross8392 2 года назад

Did anyone else end up with a weird error? Undeclared Identifier "unity_multiply_float" in master. some weird stuff.

@quentin6687 Год назад

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 ?

@thatonekid702 Год назад

switch from Unlit to Lit in the shader graph properties

@thatinusitatus Год назад

how do you apply the shader to an material?

@danielilett Год назад

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!

@digitalconsciousness 2 года назад

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!

@zekerton7262 Год назад

Skip to 12:30 to see how to use a texture. It's really easy.

@NutBuster99 2 года назад

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 :(

@danielilett 2 года назад

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).

@stephenschuster3555 2 года назад

Hey, which graph do I use? PBR graph?

@GamingTardigrade 2 года назад

Shader graph.

@sh3rbert 2 года назад

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)

@vacantly Год назад

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.

@danielilett Год назад

Hey, I actually do have a version of this on my website - I just made it before I started making RU-vid 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/

@vacantly Год назад

@@danielilett ohh awesome for some reason the link in the description didn't work but this does! thanks so much!!

@danielilett Год назад

I had no idea it was the wrong link, thanks for letting me know!

@LinkstaRuViews 3 года назад

You create file AdditionalLight.hlsl?

@danielilett 3 года назад

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!

@kooky74 Месяц назад

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

@danielilett Месяц назад

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!

@kooky74 Месяц назад

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 ;)

@parriedswoosh 2 года назад

Anyone else having trouble with TransformWorldToShadowCoord(WorldPos); and GetMainLight(shadowCoord);

@lavaa7392 2 года назад

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)"

@OceaneAL Год назад

Did somebody solve that problem ?

@crouchyyy Год назад

Yea any solution on this? I have the same problem

@Comfortably-Dumb Год назад

I, too, have been hit with this problem

@Comfortably-Dumb 11 месяцев назад

Turns out I just needed to switch to a URP project and the error went away for me!

@ObrineArts 3 года назад

"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?

@tatl64 2 года назад

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.

@paloma8423 2 года назад

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

@asokaella 2 года назад

@@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.

@martyboi5609 2 года назад

I downloaded your project and imported your shaders and materials to my project... but everthing shows up as pink

@inkofthedragon 2 года назад

As soon as I change the shader to "Shader Graphs/CelShadingTextures" , the model disappears.

@Cassie-dj5lc 2 месяца назад

couldn't get specular light with Unity 2021

@Cassie-dj5lc 2 месяца назад

ah you got to reduce diffuse

@djcoll123 Год назад

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

@Kenji_195 Год назад

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

@mn-cb1ry Год назад

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

@momiko934 Год назад

Wow im the 2k likes!

@semle346 2 года назад

the additional lights break everything for me, whole screen full of artifacts

@mrslake7096 2 года назад

I think shader graph now has builtin nodes for MainLight and for Additional Lights and Additional Lighting

@jwhatcha6052 2 года назад

uuuugh why does everything i do with shaders never work

@zazo5525 2 года назад

I think I can help you. Is your shader just pink? What's wrong?

@jwhatcha6052 2 года назад

@@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!

@zazo5525 2 года назад

@@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!!!

@gnosnaz 9 месяцев назад

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.