Toon Shader Paint - Shader Graph Basics - Episode 38

  Рет қаралды 17,647

Ben Cloward

Ben Cloward

2 жыл бұрын

In this shader tutorial, we take a look at several methods for creating the appearance of the paint of a toon or cel shader. In the coming weeks we'll also cover creating the specular highlights and dark ink outlines.
Here's last week's video on object space interior mapping:
• Object Space Interior ...
Here's the playlist for the whole series:
• Shader Graph Basics
Learn more!
• How we built the toon ...
• Creating a Cel-Shading...
• Toon Shader in Unity U...
• Toon Shader in Unity U...
Shader Book Recommendations
www.bencloward.com/resources_...
------------------------------
Theme Music
Peace in the Circuitry - Glitch Hop
teknoaxe.com/Link_Code_3.php?q...
Background Music
Speo - The Little Things
• The Little Things
#UnrealEngine #shadergraph #Unity

Пікірлер: 57
@isawedthedemons
@isawedthedemons 2 жыл бұрын
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
@BenCloward 2 жыл бұрын
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
@isawedthedemons 2 жыл бұрын
@@BenCloward I love your content, Ben, and I'm always happy to help.
@jonludwig1632
@jonludwig1632 2 жыл бұрын
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
@wilismatrix9847 2 жыл бұрын
Thank you for this tutorial, there are not a lot of artists who explain the unity shader graph in deep !
@theman7050
@theman7050 10 ай бұрын
Thank you so much. This is such a hidden gem of a channel. :D
@ziv101
@ziv101 2 жыл бұрын
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
@elpainto1
@elpainto1 2 жыл бұрын
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!
@AngelAgudoGuerrero
@AngelAgudoGuerrero 2 жыл бұрын
Cool! Thanks!
@antoniosuarez7881
@antoniosuarez7881 Жыл бұрын
thanks, grate tutorial
@ChristopherSprance
@ChristopherSprance 2 жыл бұрын
Nice! As usual dot product for the win.
@jevandean3776
@jevandean3776 2 жыл бұрын
I would love you to do a up to date HLSL series!
@BenCloward
@BenCloward 2 жыл бұрын
Thanks for the encouragement!
@Musical_Live_Singer
@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 :(
@TheBlueNeon
@TheBlueNeon Жыл бұрын
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?
@unrealengine-emira3480
@unrealengine-emira3480 2 жыл бұрын
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
@BenCloward 2 жыл бұрын
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: kzfaq.info/get/bejne/mKuHiqyHspm6nqc.html
@invalidopinion1016
@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).
@matteckenrodt
@matteckenrodt 2 жыл бұрын
Is there an easy way to translate into a post process material that affects the entire scene and anything within it?
@user-sd7vr3pz2y
@user-sd7vr3pz2y Жыл бұрын
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.
@a123b123c123d123c123
@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?
@vera4176
@vera4176 3 ай бұрын
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
@BenCloward 3 ай бұрын
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
@vera4176 3 ай бұрын
I didn't know about that, thanks so much for the tip, that fixed it!@@BenCloward
@harshadjoshi3944
@harshadjoshi3944 6 ай бұрын
Any work around to get Main Light Direction node in older version of ShaderGraph/Unity?
@NOTSparkyPants
@NOTSparkyPants 2 жыл бұрын
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.
@iansim844
@iansim844 Жыл бұрын
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?
@murnoth
@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?
@reniyato9002
@reniyato9002 2 жыл бұрын
where do i find Main Light direction? i searched the entire library for such a thing but i didnt find anything
@BenCloward
@BenCloward 2 жыл бұрын
I think it’s a newer node so if you’re using an older version of Unity, it may not be available.
@marijnfuhler7246
@marijnfuhler7246 11 ай бұрын
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
@aser28860d
@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 :/
@openroomxyz
@openroomxyz 2 жыл бұрын
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
@BenCloward 2 жыл бұрын
That's a pretty complex problem. I don't know of any easy solution to it.
@openroomxyz
@openroomxyz 2 жыл бұрын
@@BenCloward Thanks in any case! You are creating amazing video. You are really helping people learn a lot!
@VIMES_
@VIMES_ 3 ай бұрын
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
@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
@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
@aidenfarmer3959 Жыл бұрын
@@BenCloward This was the perfect fix thanks Ben!
@aaronzappia9587
@aaronzappia9587 2 жыл бұрын
This video is missing from the playlist
@BenCloward
@BenCloward 2 жыл бұрын
I fixed it. Thank you!
@jehk_
@jehk_ Жыл бұрын
Why not use Remap node instead of using two multiply nodes and one add node ?
@BenCloward
@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.
@wk2414
@wk2414 2 жыл бұрын
Is this URP or HDRP
@BenCloward
@BenCloward 2 жыл бұрын
It’s HDRP, but you should be able to do the same thing in either render pipeline.
@wk2414
@wk2414 2 жыл бұрын
@@BenCloward ok ty Ben
@asap1544
@asap1544 2 жыл бұрын
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
@BenCloward 2 жыл бұрын
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
@asap1544 2 жыл бұрын
@@BenCloward Thanks Ben hope you find a good menthol to share with us.
@whyismynametaken123
@whyismynametaken123 2 жыл бұрын
[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
@asap1544 2 жыл бұрын
@@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
@whyismynametaken123 2 жыл бұрын
@@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
@dycheung9162 2 жыл бұрын
How can i get the gradient texutre?🤣
@BenCloward
@BenCloward 2 жыл бұрын
Should be pretty easy to make in any image editing software - Photoshop, Gimp, Substance Designer, etc.
@LostAngel175
@LostAngel175 2 ай бұрын
After I realize how toon shader work, I still can't draw a texture
Toon Shader Ink Outlines - Shader Graph Basics - Episode 39
16:56
How Big Budget AAA Games Render Clouds
10:45
SimonDev
Рет қаралды 261 М.
THEY WANTED TO TAKE ALL HIS GOODIES 🍫🥤🍟😂
00:17
OKUNJATA
Рет қаралды 4,4 МЛН
The BEST Outline Shader Graph Tutorial | Unity Tutorials
14:13
CG Smoothie
Рет қаралды 83 М.
Shaders Case Study - Brawl Stars: Toon Shading
7:48
Makin' Stuff Look Good
Рет қаралды 95 М.
Games Where You're NOT the Main Character
14:52
i am a dot.
Рет қаралды 1,7 МЛН
Animating a STICK FIGHT in 10 Seconds vs 10 Hours
11:53
CyanSandwich
Рет қаралды 50 М.
Unlocking The Power Of Unity's Scriptable Render Pipeline
21:05
Game Dev Guide
Рет қаралды 191 М.
MESH GENERATION in Unity - Basics
11:10
Brackeys
Рет қаралды 447 М.
5 Reasons Your Indie Platformer Game Sucks! (+Easy Fix!)
6:39
Jonas Tyroller
Рет қаралды 233 М.
Unity Shader Graph - Intersection Effect Tutorial
10:10
Gabriel Aguiar Prod.
Рет қаралды 46 М.
How we built the toon shading | Open Projects Devlog
10:08