Toon Shader Graph with More Shadows and Better Lights in Unity URP ✔️ 2020.3

Toon Shader Graph with More Shadows and Better Lights in Unity URP ✔️ 2020.3 | Game Dev Tutorial

Рет қаралды 25,482

Күн бұрын

✔️ Works in 2020.1 ➕ 2020.2 ➕ 2020.3 🩹 Fixes for 2020.2 and .3:
► When you create a shader graph, set the material setting to "Unlit"
► The gear menu on Custom Function nodes is now in the graph inspector
► Editing properties must be done in the graph inspector instead of the blackboard
► In Lighting.hlsl, change the line "if SHADERGRAPH_PREVIEW" to "ifdef SHADERGRAPH_PREVIEW"
► [December 29th 2020] Unity changed how to calculate shadows for additional lights, requiring a new GetAdditionalLightForToon function that CalculateAdditionalLights must call. See the Lighting.hlsl (2020.2) link below.
Toon Shaders, also called Cel Shaders, create a cartoon-like style with segmented shading. In this video, I'll show you how to improve my previous toon shader by adding spot light shadows, better light color blending, and more powerful control over light intensity.
👋 Subscribe for weekly game development videos!
kzfaq.info...
👑 Join my Patreon for extra influence over topics, early access to videos, and downloadable project files!
► / nedmakesgames
🔗 Check out my website for a searchable list of tutorials!
► nedmakesgames.github.io
🔴 Twitch ► / nedmakesgames
🐦 Twitter ► / nedmakesgames
🎮 Discord ► discordapp.com/invite/ubxSVBK
📸 Instagram ► / nedmakesgames
👽 Reddit ► / nedmakesgames
🎶 TikTok ► / nedmakesgames
☕ Ko-fi ► ko-fi.com/nedmakesgames
🎬 Previous videos
► Part 1: • Toon Shader in Unity U...
📚 Reference scripts
► Lighting.hlsl (2020.1): raw.githubusercontent.com/Ned...
► Lighting.hlsl (2020.2): gist.github.com/NedMakesGames...
⏲️ Timestamps:
0:00 Intro
0:37 Spot light shadows
1:57 Crisp light colors
2:55 Light intensity
4:28 Wrap up and credits
🎖️ Credits and references:
• Pumpkin model: Renderbunny, www.turbosquid.com/3d-models/...
• Music: Eric Skiff, freemusicarchive.org/music/Er...
#GameDev #IndieDev #Unity

Пікірлер: 94

@NedMakesGames 3 жыл бұрын

Hi everyone. Thanks for your comments! 🩹 Fixes for 2020.2: ► When you create a shader graph, set the material setting to "Unlit" ► The "albedo" field of the master node has been changed to "base color" ► The gear menu on Custom Function nodes is now in the graph inspector ► Editing properties must be done in the graph inspector instead of the blackboard ► In Lighting.hlsl, change the line "#if SHADERGRAPH_PREVIEW" to "#ifdef SHADERGRAPH_PREVIEW" ► [December 29th 2020] Unity changed how to calculate shadows for additional lights, requiring a new GetAdditionalLightForToon function that CalculateAdditionalLights must call. See gist.github.com/NedMakesGames/a259babe2a761a82e7d12cc85e4fffd8

@Miguel_Silva_ 3 жыл бұрын

This is not working for me (Unity 2020.2.1f1). The directional light casts a shadow, but the spotlight doesn't change anything after I add the keyword. I checked the light and pipeline settings. What am I doing wrong? :(

@NedMakesGames 3 жыл бұрын

@@Miguel_Silva_ Hmm, sometimes the toon ramp makes it seem like additional lights have no effect. Make sure your spot light has high intensity and/or range, or it won't be able to overpower the main light. You could turn off the main light too, to see if that works. Also make sure the keyword is the same in the shader graph's property reference field and material inspector. Do point lights work?

@Miguel_Silva_ 3 жыл бұрын

@@NedMakesGames Thank you. All the lights work beautifully. What I need is that the spotlight to project a shadow of the object on the floor, just as the main light does. I downloaded your project and opened it in version 2020.1.17f1, it worked fine. So I closed and reopened upgrading to 2020.2.1f1, it is asked to update the materials for the new URP and after that only the main light casts shadows.

@Miguel_Silva_ 3 жыл бұрын

I used to get spotlight shadows by taking the direction of all the lights, multiplying the distanceAttenuation e shadowAttenuation with the diffuse, and feeding a lit by the emission with a black albedo. The result was a horrible hard pixelated shadow, but it worked. Since I updated to this version, the spotlight shadows are gone. So I found your video and I loved the result of the lights and shadows. But the problem is the same. I think I will have to stuck my project in the previous version of the URP.

@NedMakesGames 3 жыл бұрын

@@Miguel_Silva_ I fixed the problem. Unity added support for shadow masks (used in baked shadows), and changed the arguments you must pass GetAdditionalLight in Lighting.hlsl. Since this shader doesn't support baked shadows, I had to write a helper GetAdditionalLightForToon function and call that instead. I uploaded the script to GitHub and linked to it in the video description. This should do the trick, but let me know if you have any more problems with shadows. Thanks for the bug report!

@tri99er_ Жыл бұрын

Thank you for both tutorials!

@sam8686 3 жыл бұрын

Very cool update! Maybe to finish off the whole toon shader theme you could cover adding outlines to the models so they look even more cartoon like. I can’t wait to see more from you 😊

@telemaco9822 3 жыл бұрын

I'd really like to see that

@NedMakesGames 3 жыл бұрын

Thank you! I am planning to cover outlines in a few weeks 😄

@OnizukaStyle90 Жыл бұрын

Hey big up for the channel, finding you will boost my game! im using this toon shader but i have a problem: even if i have no light i can see everything, so i wanna know if i can make shadows darker and how to implement this feature with the shader of this video

@starbi 3 жыл бұрын

2021.1.7f1 update with point light shadows and the changes I had to make: In CustomLighting.hlsl, update how additional light is fetched at the start of the loop: Light light = GetAdditionalLight(i, WorldPosition, half4(1,1,1,1)); The keywords have changed a bit, they didn't work for terrains before I changed them: _MAIN_LIGHT_SHADOWS _MAIN_LIGHT_SHADOWS_CASCADE _SHADOWS_SOFT _ADDITIONAL_LIGHT_SHADOWS Thank you for this tutorial! :^)

@NedMakesGames 3 жыл бұрын

Oh great! I'm glad you got it working in 2021! I haven't had a chance to update it yet, so I'm glad to know the process is relatively painless! Thanks for watching!

@georgegonzalez5322 Жыл бұрын

Yes render pipeline pls. I know URP and HDRP are getting updates. Would be nice to get familiar with SRP. Would definitely sign up for patreon for that.

@NedMakesGames Жыл бұрын

Creating a custom SRP would be a really interesting project. Thanks for the feedback! It's on my roadmap.

@lesarch 3 жыл бұрын

Sorry for the slightly newbie question but I'm very new to shaders. Is this shader mobile-friendly? Or is this at least not as intensive even for PCs? Love your videos, btw.

@NedMakesGames 3 жыл бұрын

No problem at all! It should be roughly as performant as the URP lit shader. It only has two texture samples per pixel and no complicated math. Disclaimer that I haven't extensively tested this on phones, but what I've done was good!

@ty-xq7bl 3 жыл бұрын

It's working like a charm thank you so much for the guide. Two questions I have. How performance intensive is this shader? It seems complex. Could you provide the diffuse and ramp textures used in the previous videos? The ones I created in MS Paint seem to look off ingame. Thank you!

@NedMakesGames 3 жыл бұрын

I'm glad to have helped you out! It shouldn't be worse than the URP lit shader, really. If you do have issues, you can replace the ramp textures with a mathematical ramp using smoothstep nodes. That would reduce the number of texture samples. I'd only do this once you're 100% set on your art style, since it will be a little tougher to adjust the ramp. I created the ramp textures myself, but they're very similar to the ones supplied by Unity here: blogs.unity3d.com/2019/07/31/custom-lighting-in-shader-graph-expanding-your-graphs-in-2019/ You could try adjusting the texture importer settings - turn off compression or change the interpolation mode.

@ty-xq7bl 3 жыл бұрын

@@NedMakesGames Thanks for the link! I'm running into an issue with the shader code in game. It's an issue where the shader's lighting doesn't apply at a certain camera angle. I made sure that the lighting is pointing directly at the character. It seems like the lighting is affected by the direction of the camera to the rotation of the character Screenshot: imgur.com/Dn5KpxE I went through the tutorial twice to got it working somewhat but the output for the CalculateLightingRamp,CalculateLights,and Calculate Mainlight are all set to OutVector1 instead of OutVector3 and I cant change it. Could this be the reason for the issue I'm having with the reflection on the character?

@NedMakesGames 3 жыл бұрын

@@ty-xq7bl Sometimes the shader graph doesn't let you rename outputs, but as long as they have the correct type, it should be OK. Make sure they're Vector3 type. Since the lighting changes with camera angle, that makes me think it's specular lighting. You could try adjusting smoothness. Maybe disconnect the specular part of your graph or make the specular ramp all black to isolate diffuse lighting.

@ty-xq7bl 3 жыл бұрын

@@NedMakesGames Removing the specular lighting node worked, I think I missed the part where you added the specular ramp since I only see diffuse and toonramp in the GUI.

@NedMakesGames 3 жыл бұрын

@@ty-xq7bl Oh good! The specular ramp is the top half of the ramp texture. So, you should have two separate ramps in the texture, like this: i.imgur.com/vZdGeK5.png

@shabadava62 2 ай бұрын

Hi ned! i'm having trouble making the objects with this shader receive shadows, any idea of what could it be?

@lucutes2936 2 ай бұрын

um, where is the previous video?

@elric7371 3 жыл бұрын

Very good tutorial. How would i go about adding a normal map (e.g texture of skin and normal map of said skin) thanks.

@NedMakesGames 3 жыл бұрын

Hi! Thank you! You can do that pretty easily. Sample the normal map and combine it with the mesh's normal (with a normal strength and normal blend node) and convert it to world space. Then feed that normal into the lighting subgraphs to use in the lighting math.

@elric7371 3 жыл бұрын

@@NedMakesGames Thank you bro, got it working

@warpingrealities 2 жыл бұрын

It seems there has been another change in how additional light shadows are handled in Unity 2020.3, or at least I can't get the shader to receive shadows using the 2020.2 script. Calling AdditionalLightRealtimeShadow in GetAdditionalLightForToon just seems to remove all light when I look at certain angles and still not receive shadows when it's otherwise working.

@NedMakesGames 2 жыл бұрын

Ah sorry to hear that. I think the issue is with shadowmasks. You might have better luck just calling getAdditionalLight, passing “1” as the third parameter.

@warpingrealities 2 жыл бұрын

@@NedMakesGames Using GetAdditionalLight with 1 gives the same result, unfortunately :/ I tried the code in Unity 2019 and it works with no issues.

@telemaco9822 3 жыл бұрын

If i've created more than one Instance of the Material, do I need to go and add "ADDITIONAL_LIGHT_CALCULATE_SHADOWS" in each instance of the material?

@sam8686 3 жыл бұрын

You need to include all the keywords from the original video, and the additional one in this video, in each instance of the material via the debug menu. I found an easier way to do this is set up one material completely as a blank and then just duplicate and rename it whenever you want a new material. This way each duplicate will include the keywords saving you having to type them in each time.

@mhrohan917 3 жыл бұрын

Hey Ned, How can I bake lights with having this shader as my main one? I can't bake any lights by having this shader on any object.. it turn pink after baking...

@NedMakesGames 3 жыл бұрын

Hi! This shader doesn’t receive baked lights, but it shouldn’t turn pink like that! What version of Unity are you using?

@auldencarter 3 жыл бұрын

Is it possible to make the shader receive shadows from other objects?

@NedMakesGames 3 жыл бұрын

It should already. It might be difficult to tell due to your lighting ramp - shadows will only get through it if they are pretty strong.

@sebastiancai221 3 жыл бұрын

Hi, Ned. I have a problem with more than two light sources in my scene. With one or two light, it works pretty well, but once i add the third light, the objects in the range of this light would be totally shaded. Another thing is that, for the Lighting.hlsl it comes always an Error said "implicit truncation of vector type" in this line 'half thisSpecular = LightingSpecular(thisDiffuse, light.direction, WorldNormal, WorldView, 1, Smoothness); '

@sebastiancai221 3 жыл бұрын

For the first problem was caused by the material, i created a new material and applied the same shader as the problem one. With excatly the same parameters, but this new material works fine for the lighting. So i compared these two materials, found out that for the old (problem one), when i change the parameters, it shows a global illumination preprocessing is working. I think that should be the issue, but how is it applied to the material and can i turn it off?

@NedMakesGames 3 жыл бұрын

@@sebastiancai221 That's strange. I wonder if the shader keywords got jumbled up in one of your materials? I would check to make sure all the lighting keywords are types correctly. You can turn off global illumination in the mesh renderer component of your object. Just set the receive global illumination to light probes and uncheck contribute global illumination. The toon shader doesn't support global illumination anyway. What version are you using? In 2020.2 and onward, there is sometimes a really strange bug where odd-numbered lights are not registered by the toon shader. I haven't had time to figure out what's causing this, but creating extra lights with their color set to black can sometimes fix it - not ideal, I know. After I wrap up my current project, I plan to figure out this bug.

@sebastiancai221 3 жыл бұрын

@@NedMakesGames Thank you very much. I just delete the old material and create a same new one (and everything works), still dont know what happened to that old strange material but whatever. I'm using 2020.3.9.f1. It shows an error but doesn't actually affect the use, so so far so good ;)

@NedMakesGames 3 жыл бұрын

@@sebastiancai221 Oh, good! Well if it works, it works!

@paikabr 3 жыл бұрын

How do you add more detail to the object, is it all in the albedo or can you add AO and Normal Map? If you have how to add AO and Normal how do you do it in the Shader Graph?

@NedMakesGames 3 жыл бұрын

This shader doesn't support normal or ambient occlusion maps, but you could add them relatively easily. You would need to sample the normal map before lighting calculations are made and feed the normal into them. For AO, you could sample it in the CalculateLights graph and multiply it with the diffuse and specular values.

@paikabr 3 жыл бұрын

@@NedMakesGames Thanks for answering

@LexGear 2 жыл бұрын

I've had a lot of problems since the end of the last video to the end of this one. But I don't know how to articulate what exactly is going wrong so I'll do my best. Spotlights are not casting shadows. Color from spot light only appears to affect the darkest attenuation zones. I wish I could show you a screenshot. It's bonkers.

@LexGear 2 жыл бұрын

Oh and light from spotlights also affect shadows from main light more than anything else but also cause it to be a gradient instead of filter by toon bands. In some situations the brightest points on the screen are inside the shadow cast by the main light.

@NedMakesGames 2 жыл бұрын

@@LexGear This is actually intended behavior! The toon light picks the color from the strongest light affecting an area. This is usually the main light, unless the main light is in shadow. It does look weird sometimes though. If you don't like it, you can switch back to the color averaging algorithm from the previous video. It's not "strictly toony," but it might fit your art style more. Alternatively, you could calculate the light color using light strength before applying shadow attenuation. This will require you to pass more information into the additional lights custom function, but if you decide to go this route, I can try to help.

@2guys1asian 3 жыл бұрын

Hey I've tried everything you suggested in the video to get shadows from spotlights but it's not working. Any other suggestions on why it might not work?

@NedMakesGames 3 жыл бұрын

Hi! They can be a bit tricky... there are a few things to try: Make sure cascades, soft shadows, and additional light shadows are enabled in your URP settings asset. Try turning off your main light to check if other shadows display then. Sometimes additional light shadows are hard to see due to the ramp, but turning off the main light makes them easier to notice. Also, turn up light intensity. Are you using Unity 2020.2? There's a really strange bug where lights sometimes don't render unless there are two in the scene. This is doesn't seem to happen in 2020.1 or 2021. Try creating another light to see if this is affecting you. If all else fails, feel free to post a screenshot of your graph and/or code and I'll see if I can notice anything!

@2guys1asian 3 жыл бұрын

@@NedMakesGames Thanks I figured it out in the end, great tutorial!

@skeriees6152 Жыл бұрын

Hi, is there any way to change shadow color?

@NedMakesGames Жыл бұрын

Hi! You could tint the shadow section your ramp texture. Or you can define a shadow color property and blend between it it and white based on the shadow attenuation. Wither strategy will only affect that particular object. There's not a way to globally change shadow colors in Unity.

@francisrizeyambao9320 Жыл бұрын

this is a great tutorial! but i have one problem.. i created a cloud shadow using directional light cookies but the shadow doesn't seem to effect with this shader. any help?

@NedMakesGames Жыл бұрын

Hi! Thank you! You might be able to fix that by adding another keyword: _LIGHT_COOKIES Fair warning, I haven't tested this, but it should work in theory.

@francisrizeyambao9320 Жыл бұрын

@@NedMakesGames sadly it didn't work, i tried my best to find a solution but nothing i could find really, thanks for the reply though, i loved your tutorials!

@NedMakesGames Жыл бұрын

@@francisrizeyambao9320 Aw I'm sorry to hear that. I will keep an eye out for a solution. Thank you for watching though!

@hidemat5141 3 жыл бұрын

Nice update. So if you turn off all lights it doesn't go completely dark. Is there a way to adjust this?

@NedMakesGames 3 жыл бұрын

Hi, thanks! The easiest way would be to make the end of your diffuse ramp completely black. The harder way would be to check if the light intensity for all lights is below a certain threshold, and if so, color accordingly!

@hidemat5141 3 жыл бұрын

@@NedMakesGames thanks I'll try that

@hidemat5141 3 жыл бұрын

@@NedMakesGames I was playing around with the GetLightIntensity() in your HLSL file, but I can't figure out how to get the overall light intensity. I tried this in the AddAdditionalLights function and returning to the isDark bool, but I'm sure I got it wrong xD. Could you help me? in the function parameters.... out bool isDark isDark = false; if (mainIntensity * GetLightIntensity(light.color) < 0.3) { isDark = true; }

@NedMakesGames 3 жыл бұрын

@@hidemat5141 What I would do is find the minimum light intensity. So make a minLightIntensity variable before the additional light loop and set it to mainLightIntensity. Then, in the loop, use minLightIntensity = min(minLightIntensity, GetLightIntensity(light.color)); Then, after the loop, you can set isDark like this isDark = minLightIntensity < 0.3;

@hidemat5141 3 жыл бұрын

@@NedMakesGames iiiiiintersting, thanks Ned

@whiterice6016 3 жыл бұрын

Hi how could I add normal maps to the shader? I tried searching online, but I was not finding anything.

@NedMakesGames 3 жыл бұрын

Hi, it's definitely possible! You'll need to sample the normal map with a sample texture 2D node, use a Transform node to transform it from tangent to world space, and then use that normal in all lighting calculations (instead of the normal vector node).

@whiterice6016 3 жыл бұрын

@@NedMakesGames wow thanks. I wasn't expecting you to reply. I am definitely subbing.

@NedMakesGames 3 жыл бұрын

@@whiterice6016 Thank you! I try to be active around here!

@josh_raze4991 2 жыл бұрын

i cant get my environmental lighting to work with the toon shader

@NedMakesGames 2 жыл бұрын

Hi! It’s a bit difficult to get it looking right with toon shaders I think. Environmental lighting is so integrated with Unity that it’s hard to change it from the default smooth look. Have you tried using the environment node? You can add those fields to your final color to at least add global ambient light.

@josh_raze4991 2 жыл бұрын

@@NedMakesGames Ok, thanks alot

@pietro8648 3 жыл бұрын

hey! I followed both your videos on this subject but nothing using the shader seems to receive shadows :( what can I do?

@NedMakesGames 3 жыл бұрын

Hi! Make sure that your toon graph has all the shadow keyword properties, and that your toon material has all the shadow keywords in the debug inspector, each separated by a space. Of course, double check for typos. You can also check that your URP asset has soft shadows and shadow cascades enabled.

@pietro8648 3 жыл бұрын

@@NedMakesGames Thank you for the answer! I tried everything and the shadows seems to work correctly only with spotlights and not with point lights :( is this intended?

@NedMakesGames 3 жыл бұрын

@@pietro8648 URP itself doesn't support point light shadows, so neither does this shader, unfortunately. Unity has said they plan to add them in the future, but not when. You can go here and tell them you need them! portal.productboard.com/unity/1-unity-graphics/tabs/3-universal-render-pipeline

@pietro8648 3 жыл бұрын

@@NedMakesGames ah thanks! That was the problem... now what can I do if I need something similar to point lights? Do I have to do all with environment light or can I bake the point light?

@NedMakesGames 3 жыл бұрын

@@pietro8648 Spot lights would work best with this shader. You could bake a point light, but you would have to add a global illumination to the toon shader. It's possible - the shader graph has a global illumination node - but it might be difficult to get it to look "toony."

@premonsa 3 жыл бұрын

shader toon that receives shadows, maybe?

@NedMakesGames 3 жыл бұрын

Hi! I'm not sure what you mean? This shader does receive shadows. If yours doesn't, I'd first make sure that the shadow keywords don't have any typos and that they're set both in the shader graph and the material's debug inspector.

@premonsa 3 жыл бұрын

@@NedMakesGames nice! I havent tried yet, didnt know