Toon Shader Paint - Shader Graph Basics - Episode 38

[@jonludwig1632]

Love it, been working a lot with toon no-post-process toon shaders in my own project in Unreal and so this video is a very welcome sight. Thanks for continuing this series!

[@wilismatrix9847]

Thank you for this tutorial, there are not a lot of artists who explain the unity shader graph in deep !

[@theman7050]

Thank you so much. This is such a hidden gem of a channel. :D

[@snickerdoodle-l4o]

This is great, I recently implemented a very similar shader at my studio for our toon stuff. Instead of using a texute I set the shader up with a curve atlas with color curves, unreal essentially turns that into a texture and samples it the same way your shader does, this let's our artists create their own toon bands and have total control over light and shadow color and locations, they don't even have to go through Photoshop, works really well

[@isawedthedemons]

I'm sorry, but what you said about unreal's light vector node is just wrong. The atmospheric light vector node gives you access to the directional light vector, just like unity's. Do a dot product between it and a world space normal, then hold down the L key and LMB to move the directional light around in the material editor preview scene. It should also work everywhere else. I guess you were referring to the node that is simply called "light vector". That node only works with the light function material domain, but maybe not even that. TL;DR: The AtmosphericLightVector node is the directional light vector. In both HDRP and Unreal, you cannot access other types of light vectors, due to them using deferred renderers, where the lighting calculations are done on a separate pass.

[@BenCloward]

Wow, thank you Colton! Yes, you're right - I tried using the node named "Light Vector" in Unreal and it didn't work so my assumption was that it wasn't available. Thank you very much for the correction and for teaching me!

[@isawedthedemons]

@@BenCloward I love your content, Ben, and I'm always happy to help.

[@elpainto1]

This is great! I worked on a toon shader recently and found that working with realtime lights in the scene can be a challenge because accessing light information was often difficult. I'm seeing that there are some new nodes (main light dir) that could make all of this a snap. I'll be interested to see how you get this shader to play nice with scene lights!

[@invalidopinion1016]

What you said around 3:10 is incorrect, when you do lighting calculations with a normal vector it always needs to be the first argument because these calculations rely on knowing how aligned the normal is to the desired vector (in this case the light direction).

[@antoniosuarez7881]

thanks, grate tutorial

[@csprance]

Nice! As usual dot product for the win.

[@reniyato9002]

where do i find Main Light direction? i searched the entire library for such a thing but i didnt find anything

[@BenCloward]

I think it’s a newer node so if you’re using an older version of Unity, it may not be available.

[@unrealengine-emira3480]

Hi Ben, I love your tutorials, you make it so easy to understand. Is there is anyway to do a tutorial in Niagara Fx too if you can? Thanks

[@BenCloward]

Since I've never used Niagara, I'm probably not the best person to make tutorials on it, but I imagine there are some good tutorials out there. This series is pretty good: kzbin.info/www/bejne/mHa6iHyMgpiJpNU

[@jevandean3776]

I would love you to do a up to date HLSL series!

[@BenCloward]

Thanks for the encouragement!

[@AngelAgudoGuerrero]

Cool! Thanks!

[@harshadjoshi3944]

Any work around to get Main Light Direction node in older version of ShaderGraph/Unity?

[@aaronzappia9587]

This video is missing from the playlist

[@BenCloward]

I fixed it. Thank you!

[@vera4176]

Hi all, first of all, thanks for the amazing tutorials, I'm learning so much! With this particular example I get a weird issue where the sides have a black and white circle still on the outsides of the gradient. I made a basic gradient in Gimp and used the same settings as mentioned in the video. The material itself is also the same. I can't seem to figure out what I'm missing or doing wrong that can cause this. If anyone has any ideas on where to look please let me know :)

[@BenCloward]

In order to fix this, you need to set your texture sample node to clamp mode instead of wrap. The effect you're seeing is happening because the texture filtering is sampling from the opposite side of the gradient and setting it to Clamp will prevent that.

[@vera4176]

I didn't know about that, thanks so much for the tip, that fixed it!@@BenCloward

[@RyanT_Hart]

Would be possible to have fake subsurface scattering in a shader like this in UE? Like having the different layers of the gradient adjustable colors?

[@marijnfuhler7246]

Which Version of Unreal did you use? I am using 5.2.1, but I got completely different results while doing the same as you did. The problem lies in the Texture Sample with the UV. If I remake the gradient as you did inside Photoshop, I get more of an eye shape shader, intead of those hard lines. Do you have a link for the texture that you used? Because the texture inside Unreal looks way different that the texture you made inside of Photoshop

[@Musical_Live_Singer]

Hi Ben, I'm impressed with your all tutorials and love them! BTW, why does the gradient texture changes slowly(I mean with overlapping fade) as slider value up to 1? The V value represents a row of texture source, then I think the change should be done without any overlapping because there is no smooth between gradient row in your texture. sorry for my bad English :(

[@matteckenrodt]

Is there an easy way to translate into a post process material that affects the entire scene and anything within it?

[@МаксимПунько-в8ч]

For those who use older version of unity for some reason and dont have acces to lightDirection node in shader graoh there are solution. Instead of lightDirection add vector3 and expose it. Create c# scipt and attach it to your light source. In this script get reference to prefab and extract there material like this - enemyMaterial = prefabVisual.GetComponent().sharedMaterial; Then if your light source static use this in awake enemyMaterial.SetVector("_Light",transform.rotation*(-Vector3.forward)*2); or in update if light dirrection changes. This way you get your light dirrection. Its not visible in preview but work in game. I tested it by changing light dirrection by script. 2 multi some how work for increase light intensity.

[@AfterHoursDevchannel]

Looks great but how can I apply this shader to postprocessing volume to actually see it in the scene? cause you are showing here and greatly explaining how it works,appreciate but this shader seems to be inaplicable to Postprocessing volume? (shouldnt MaterialDomain be changed to Postprocess and then somehow whole shader connected with SceneTexture node ex.PostprocessInput0 to work properly?). I have no idea how to use your shader as blendable material working inside scene,with use of postProcess CVolume ;/

[@BenCloward]

Post Processing is one way to achieve this effect, but this tutorial is not using that method. Here's I'm creating a material that's actually applied directly to an object - so if you're looking for a tutorial showing how to create toon shading as a post process, this is not the video you're looking for.

[@AfterHoursDevchannel]

@@BenCloward Hmm, thank you for fast reply. So I will dive deeper into that applying to certain actor. I am aware that you can not only use PPVolume for whole scene but also apply toon/cell material to specific object itself= just fixed on postprocess violume after watching X tutorials;). Thank you for remanding and showing direction

[@VIMES_]

How do you make it that to normal character/terrain texture you add just one layer of highlight on the edge of the object, like they did in this new game No Rest for The Wicked. It looks like just one layer of toonshader, without overwriting the texture. How to do that? :)

[@a123b123c123d123c123]

I get a weird error where values at values close to 0 and 1. The shader wraps around and shades the darkest areas light and the lightest areas dark. I fixed it by putting a max and min right before the append node but I don't know if this is the correct way to fix this problem. I'm using unreal 5.1. For anyone with the same issue wondering what to put in the max and min nodes. A = the output from your previous nodes B = max: 1/(texture resolution) min: 1/(texture resolution)*(texture resolution - 1)

[@BenCloward]

You may also be able to fix this by setting the texture sampler node's Sample Source to Shared: Clamp in Unreal or adding a Sampler Node in Unity and setting it to Clamp instead of Wrap. The problem is happening because the texture filtering is wrapping around to the other side of the texture when it filter's the image's last pixel.

[@aidenfarmer3959]

@@BenCloward This was the perfect fix thanks Ben!

[@aser28860d]

Hey im very new to unity and doing anything in shaders, but i'm trying to understand how this works. Like, I have an object with a mesh renderer and multiple materials (with textures and multiple colors, not just a base color). If wanted to give that object this type of look. Could I just go to the existing materials and switch them to this shader ? From what I tried, I cant seem to do it like that... or at least I can't seem to make the shader inherit/use the material's already existing color and texture. Do I need to make a new material and shader for every individual material of the object ?? Im very lost. Sorry if it isn't explained well enough :/

[@jehk_]

Why not use Remap node instead of using two multiply nodes and one add node ?

[@BenCloward]

Remap is designed to convert any range to any other range - which means it has to be a bit more robust than what I'm doing - which also means it's a tiny bit more expensive than what I'm doing. Because I have a very specific case, I can apply a very specific solution that's as optimized as possible.

[@NOTSparkyPants]

Question about my math in the Unreal section. I'm not using the gradient texture but rather the method shown in the Unity section. Thing is, when I apply the .16 constant after the floor nod it effects the overall intensity and not the divisions within the gradient. Am I missing something? hope I articulated the issue well.

[@chiupeechiu]

Bump. I have this same problem, when I adjust the slider, it changes the overall colour shade, not the shades as well. Can anyone help?

[@a123b123c123d123c123]

I made the gradient texture 1x64 and it seems like it was combining the gradients from multiple rows. Is there a minimum width you would suggest to avoid that?

[@murnoth]

Delima: when I upload my gradient texture, it creates a grey border(just 1 pixel) that surrounds the image, and it's causing unwanted effects. Is this something to do with compression?

[@openroomxyz]

Hi I know it’s not related to this but how to get ride of ghosting TAA artifacts on shaders that change with time in UE5? Or every animated material in UE5 is useless?

[@BenCloward]

That's a pretty complex problem. I don't know of any easy solution to it.

[@openroomxyz]

@@BenCloward Thanks in any case! You are creating amazing video. You are really helping people learn a lot!

[@wk2414]

Is this URP or HDRP

[@BenCloward]

It’s HDRP, but you should be able to do the same thing in either render pipeline.

[@wk2414]

@@BenCloward ok ty Ben

[@asap1544]

Is there a way to hack the shadows? In Unreal engine unlit toon shaders can’t receive shadows, also you can get the light vector Using a custom node return ResolvedView.DirectionalLightDirection;

[@BenCloward]

Oh, that's a good question! I'm going to need to study that a bit to see if I can find a good way to do it. If I do, I'll make another video covering it.

[@asap1544]

@@BenCloward Thanks Ben hope you find a good menthol to share with us.

[@whyismynametaken123]

[Edit: I just remembered Ryan Brucks has a way to do it on his Shaderbits blog "Custom Per Object Shadowmaps using Blueprints", but I don't think it would be very performant on mass scale.] The only reasonable way I've found so far has been in post process by doing scenetexture::postprocess0 -> desaturate / scenetexture::basecolor -> desaturate. It's not very flexible as it only gives you white colored light, but you can still do a lot with it if you're creative / crafty. I'm currently hacking up a way to add color to the light in what should be a semi-performant way if it works, but the best way is to recompile Unreal's source and add your own custom hlsl shaders. I'm not familiar with forward rendering in UE4, but shadows might be more accessible with it. It's significantly easier to do with Unity (URP) if you're familiar with that engine at all. I tried switching over and learning it, but it would take me too long to learn anything beyond shader code.

[@asap1544]

@@whyismynametaken123 i been Trying to craft Anime,Stylized,Illustration art in UE4 but i haven't manage to created anything Similar as Unity where you can get all lights data etc w/o Limitations in UE4 i manage to craft some Toon shaders but really unhappy with the results this are the menthol i use 1) Unlit Material L.N i don't like this menthol & don't receive shadows, to receive shadows you have to created then What i Use to created then is a Funtion that created the Shadows Using the InverseTransformMatrix to Convert world space drawing coordinates to Light space coordinates (View conversion) & a Blueprint using the Scenecapture work fine but have really Hight Performance cost & at this Point is just better to created you own Light Direction, Point Light etc in the Material & can't Instance the The Blueprint for PointLights so Have to duplicate then inside the Material in order to use more than 1 Point Light, SpotLight etc 2) Another menthol is using the Normals When the Normal and the Light direction point the same direction the Object become brighter and created the effect of a Toon shading All lights will work perfectly The models will receive shadows & it look so good but the downside you can't control the shadows in artistic way & input light Specular,metallic Don't work to make them work have to use Clear coat mode material and use the dual Normal to created the Toon effect 3) Post Process can't control styles per material the Post process affect the entire scene and you can mask it using Customdepthpass but it don't matter everything using it will look the same and a bit expensive 4) recompile Unreal's source is the best menthol so far I drop Ue4 for Unity when is come to this type of shaders In Unity is just to easy you can get all Light data's etc and created unique shaders on the fly i saw Ben doing Toon shaders Tutorial in Ue4 so i was curious if there is another way to get the shadows Information

[@whyismynametaken123]

@@asap1544 Just out of curiosity what version of Unity are you using? I DL'd 2020.3 LTS and got shadow casting / receiving working using the built-in render pipeline, but could only get shadow casting to work using URP. I tried several tutorials and had issues with each. I'm either missing something important outside of the shader code or the tutorials are incorrect for the version I'm trying to use.

[@dycheung9162]

How can i get the gradient texutre?🤣

[@BenCloward]

Should be pretty easy to make in any image editing software - Photoshop, Gimp, Substance Designer, etc.

[@LostAngel175]

After I realize how toon shader work, I still can't draw a texture