Basic TOON SHADER In UNITY Using Shader Graph

Basic TOON SHADER In UNITY Using Shader Graph - Unity Lazy Tutorial

Рет қаралды 57,743

Күн бұрын

Hi, I'm stealing the "Lazy Tutorial" naming from the great Ian Hubert. This is not a proper tutorial, more of a rundown of how I achieved this effect.
#indiegame #gamedev #unity
Please consider supporting me by following me over at / whateep
Custom Function node HLSL code:
#if SHADERGRAPH_PREVIEW
Direction = half3(0.5, 0.5, 0);
Color = 1;
#else
Light light = GetMainLight();
Direction = light.direction;
Color = light.color;
game endif
if you get an error, try this (thanks to John Pitaniello in the comments):
#if defined(SHADERGRAPH_PREVIEW)
Direction = half3(0.5, 0.5, 0);
Color = 1;
#else
Light light = GetMainLight();
Direction = light.direction;
Color = light.color;
#endif
Twitter: / punkpebble_
Discord Server: / discord
Itch.io store page: punkpebblestudio.itch.io/
If you liked this video, you might also like these from other creators:
I Made Among Us, but it's 3D, by Dani: • I Made Among Us, but i...
Game Dev: The Week Before Launch (Devlog) by Jonas Tyroller: • Game Dev: The Week Bef...
HOW TO DRAW PIXEL ART GAME CHARACTERS IN PS - TUTORIAL by Blackthornprod: • HOW TO DRAW PIXEL ART ...
5 Steps to Start Making Games by Thomas Brush: • 5 Steps To Start Makin...
Video Timestamps:
0:00 Intro
0:22 The Idea
0:53 The Shader
2:17 Outro
Video Tags:
#indiegame #gamedev #unity #indiegames #gamedevelopment #programming #3dgame #3dmodeling #lowpoly #blender #photoshop #unrealengine #godot #devlog #indiedev

Пікірлер: 104

@mazander_man Жыл бұрын

Just incase you get any errors in the custom function, be sure to put #if defined(SHADERGRAPH_PREVIEW) instead of #if SHADERGRAPH_PREVIEW.

@malimakes Жыл бұрын

I might have copied the wrong code in the description. Thanks, I’ll update that

@cubus5451 Жыл бұрын

I used your Code but it still shows errors

@cubus5451 Жыл бұрын

it says Shader error in 'Master': "MainLight_float": output parameter 'Direction' not completely initialized at line (and then several lines like 1349 and 289) (on d3d11) Please help me :,(

@davidjoelstevenson 9 ай бұрын

@@cubus5451 I was having the same issue - I think the GetMainLight() function doesn't exist in older versions. I used the following code (using _WorldSpaceLightPos0), which seems to work: #if defined(SHADERGRAPH_PREVIEW) Direction = half3(0.5, 0.5, 0); Color = 1; #else Direction = _WorldSpaceLightPos0; Color = 1; #endif btw, "Color" is useless, but since I couldn't use GetMainLight(), it was useless anyways :)

@cubus5451 9 ай бұрын

@@davidjoelstevenson thanks I‘m going to test this

@mfedorov 9 ай бұрын

Such a necessary video material, but an absolutely incomprehensible lesson for beginners.

@lucutes2936 2 ай бұрын

Noob

@alexwilliams4555 9 ай бұрын

You keep showing every part in segments and not really showing how everything connects together. It's hard for me to follow personally

@mazander_man Жыл бұрын

Very helpful explanation! Can't wait to see the post processing on it!

@ShibaDogStudios Жыл бұрын

Nicely done my friend! Very concise and well executed tutorial for a look I've been wanting to achieve for a very long time :D

@malimakes Жыл бұрын

Hey, thanks dude!

@sahilmishra2945 Жыл бұрын

love stuff at this level, fast and an overview of whats important to make a change to whats existing

@jaredrodriguez7222 Жыл бұрын

Hi I would love to just keep getting more content of this, this is something I've been looking for, for a minute keep up the great work

@LetsGoSalmon Жыл бұрын

Love your videos man! Continue with what you're doing.

@jorgearturoalvarezcenal6292 8 ай бұрын

I really needed to understand this. Thank you!!!

@GogoDevv Жыл бұрын

Adore you! This is exactly what I need! You are super cool as always! By the way, cool beard)

@malimakes Жыл бұрын

Thank you! I appreciate this comment hahaha

@abject_ladder Жыл бұрын

Excellent tutorial! Is the fresnel the part of the shader that adds the edge outlines though? If so, they're not appearing for me.

@TheBrokenSolstice Жыл бұрын

They are in this case, yes, but it has a limitation: it can only appear on the *inside* of the geometry, which means up close you're going to get some funky light behavior

@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). I wanna 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 :/

@malimakes Ай бұрын

Hi Aser! You did a good job explaining your doubts, don’t worry. I’m super busy with work atm. I’ll try to come back and respond to you in a few hours. If I forget please feel free to reply to this comment again so I get an extra ping

@Fahrc3 9 ай бұрын

Can someone help, i cant figure out where to put output of lerp, when i put it in base color just pink texture appears and material becomes just flat color

@danil_zz 3 ай бұрын

First, you should make outline as separate shader and material of renderer. Second, you should setup shader graph property, in it's inspector, set render only back side (I don't exactly know what name of property, but you'll find it)

@HansPeter-gx9ew 7 ай бұрын

well made video, I really enjoyed it! Could you maybe explain how to make the shadows in some color too?

@malimakes 7 ай бұрын

I’ll look into it

@HansPeter-gx9ew 7 ай бұрын

@@malimakes I looked into HDRP and their is no easy way to get acces to shadow, confirmed even by a Unity guy at the forum 3 weeks ago. URP has some "getShadowOrSomething" function though that can be added per custom function node I would like to use shadows that have some cross hatch, one guy did it by having a pass just for shadows, saved it into a texture and used it then in the next pass to calc custom toon shadows. Pretty complicated though ;/

@AlqueMeteor 16 күн бұрын

can you show how the final shader looks?

@mr.royaltyfree Жыл бұрын

The outro is too good

@Ratos- Жыл бұрын

just wondering where the Lerp node is meant to connect to, its going off screen. any help would be appreciated.

@hatered6434 Жыл бұрын

The Lerp Out(1) should be connected to the Fragment Base Color(3)

@francisrizeyambao9320 Жыл бұрын

I've tried as much as hard as i follow your guide but i am way too new to the shader environment, can you make an in depth tutorial like step by step or just share the project for me to follow up your guide?, gave a sub because your pixel guide is whack

@neozoid7009 Жыл бұрын

What is lerp 4 i am unable to find it

@neozoid7009 Жыл бұрын

Thanks for this .👍 but I didn't get how to create this ?? what to use and how?? Ate these in urp sprite lite shader graph ??

@trashcaster Жыл бұрын

This is for 3D, not for 2D. You have to create an Unlit Shader Graph and create the nodes there. The code is put into a Custom Function node. Make sure to define the input and output variables above the code block and specify it exactly how it is written in the parameter names of the code block (spelling and case sensitive, as well as the same order). Create a material using this shader graph, and apply it to the objects you want to have the toon effect applied.

@milm7869 8 ай бұрын

Great tutorial! Could you tell me the name of the music in the background? Thanks!

@malimakes 7 ай бұрын

Hi! Sorry I just see it. I have no idea, but it’s most likely from the youtube audio library

@SuperBlueOrange_ Жыл бұрын

For some reason I had to write: #if SHADERGRAPH_PREVIEW Direction = half3(0.5, 0.5, 0); Color = 1; #else Light light = GetMainLight(); Direction = light.direction; Color = light.color; #endif instead of: #if SHADERGRAPH_PREVIEW Direction = half3(0.5, 0.5, 0); Color = 1; #else Light light = GetMainLight(); Direction = light.direction; Color = light.color; game endif Which it said in description, why?

@SuperBlueOrange_ Жыл бұрын

Love the vid btw!

@malimakes Жыл бұрын

I have no idea 😅 I’m glad you got it working

@alpha3836 Жыл бұрын

Thanks for the fix!

@user-dw2jd4wu8k 2 ай бұрын

Hi, I’m a beginner of unity. Could you tell me What type of node is Fresnel Power and Fresnel Threshold?I couldn’t find appropriate node.

@malimakes 2 ай бұрын

Hi! Those are float shader properties that I defined! You can define them and expose them in the inspector and in the shader editor you can drag them into the graph and plug them in the fresnel node

@pewguin6300 Жыл бұрын

How do i get the black outline?

@danil_zz 3 ай бұрын

Set up color field of shader

@angiemon897 8 ай бұрын

Actually, I find the first example quite charming, like a pixel 2D shader 0: (Obviously, I like every kind of toon shader

@malimakes 8 ай бұрын

Oh absolutely, I love that look, too!

@tinocaer Жыл бұрын

I've found that when I sample the shading ramp the resulting sample is blurry. How do I make sure the colors stay distinct?

@malimakes Жыл бұрын

Change the import settings of your image to use point filtering. You’re probably now using bilinear. Since you’re already there also make sure to set the repeat mode to clamp

@shim2822 10 ай бұрын

How do I make this toon shading work with normal map?

@malimakes 10 ай бұрын

I guess you could sample the normal map and do the same dot product with the light direction, then clamo the results to [0,1] and multiply them

@nikz000 18 күн бұрын

Fantastico grazieee

@ChaosResearchParty Жыл бұрын

ENGAGEMENT BOOSTER!! x1

@CapinHwit 7 ай бұрын

for some reason the normal vector goes all blurry instead of being in 4 quarters like yours is, any ideas why?

@malimakes 7 ай бұрын

You mean the dot product? The 4 bands are due to the shading ramp. You want to make sure the image’s import settings have the filter mode set to point

@divinedmo Ай бұрын

In the dark color and lit color what did you use?

@malimakes Ай бұрын

It’s been quite a long time, I do not remember which one did I use. But I do have multiple examples shown on screen so you can get inspired by those and try out your own

@divinedmo Ай бұрын

@@malimakes I'm trying to convert your shader graph example to a similar system in s&box's engine hah, last thing I'd like to ask is where did you actually plug the Lerp and then the sample texture 2d in the end? Because the first one you plugge

@rafertysullivan6085 11 ай бұрын

any idea on how to make this work with textures instead of just solid colours?

@malimakes 11 ай бұрын

Yes. Add a texture sampler node and multiply the result by the color of the gradient. If you want to retain the texture colors just use grayscale colora for the gradient :)

@zoearthmoon Жыл бұрын

👍👍👍

@Lodred 3 ай бұрын

How did you achieve the outlines?

@malimakes 3 ай бұрын

Post process effect sampling the depth map around each pixel

@coucoul38 2 ай бұрын

What does the color ramp texture looks like ?

@malimakes 2 ай бұрын

There are some examples shown on screen right as I talk about it in the video

@coucoul38 2 ай бұрын

Oh yeah thank you 👍 I was looking for them at the point in the video where you add it to the shadergraph.

@ibrahimcavus1814 Жыл бұрын

How did you get 1 pixel perfect outline?

@malimakes Жыл бұрын

I did it by sampling the depth texture around multiple times around the pixel I think. I’ll see if I can find that code

@thicctapeman9997 10 ай бұрын

@@malimakes Did you find that code? :)

@gcomplex1099 Жыл бұрын

Hey just wondering can u make a mobile 3rd person controller with joystick and btw ur 10x more handsome with this haircut

@lucutes2936 2 ай бұрын

Thx

@arsenalprime6933 Жыл бұрын

could adding this shader to multiple objects in my game cause performance issues?

@malimakes Жыл бұрын

I don’t think it’s much different from the standard shader

@trashcaster Жыл бұрын

The only way you would get a performance hit from having this shader on multiple objects is if you created a different material for each object. Always try to use the same material where possible in Unity so that the automatic "batching" renders the objects in the same draw call. A tip I recommend if you are doing simple colors is to create a color grid and use that to color your objects via the texture input. If they all share the same material and texture, then you can set your object colors by changing the object's model's UV coordinates. This method works really well for simple models that don't need detail in the textures, but it does require that you either create your own models and setup the color grid in advance, map your UVs in your modeling software and then have the process in full consideration during your workflow. You could take it a step further and write your own Unity Editor scripts that allow you to configure colors per object and have it modify the models as well as the texture automatically so you can make changes in the editor with less effort, but in my opinion this is a lot more work in the long run and would only be a worthwhile task if you wanted to do the dirty work behind the scenes so that a less experienced asset designer can make a bunch of changes very quickly on their end.

@ElianderG Жыл бұрын

I'm getting this error: 'MainLight_float': output parameter 'Direction' not completely initialized And yes, I've tried the Josh Pitaniello solution, and still gets the error.

@meowpriest4112 Жыл бұрын

how do you solve it?

@davidjoelstevenson 9 ай бұрын

I was having the same issue - I think the GetMainLight() function doesn't exist in older versions. I used the following code (using _WorldSpaceLightPos0), which seems to work: #if defined(SHADERGRAPH_PREVIEW) Direction = half3(0.5, 0.5, 0); Color = 1; #else Direction = _WorldSpaceLightPos0; Color = 1; #endif btw, "Color" is useless, but since I couldn't use GetMainLight(), it was useless anyways :)

@FrankiesPixelDreams Жыл бұрын

I Wonder, if i aply this shader does it save me fps or does it cost some?

@DK-1474 9 ай бұрын

I followed this pretty much to the t (except i used the light direction node instead of the custom function) but for some reason my output was always just the middle of the color ramp all around, with no shadows or highlights. Has anyone else had this problem?

@malimakes 9 ай бұрын

There was no light direction node when I made this so I’m not so sure. First thing that comes to mind is check the import settings of the ramp - maybe it is blurred?

@DK-1474 9 ай бұрын

yeah, I made sure to use point sampling. Did you use a specific pixel size for the ramp? maybe mine is too large@@malimakes

@DK-1474 9 ай бұрын

Nevermind, I got it working by mixing this tutorial and another one :)

@malimakes 9 ай бұрын

@@DK-1474 oh great, what was it? Sorry I didn’t reply I got super stuck between work and uni this week

@DK-1474 9 ай бұрын

@@malimakes ah no problem! I'm not sure actually- I used a different node to reference the texture, so maybe that was it? I ended up using a mix of the light direction node and the custom function too lol

@ViacheslavRED Жыл бұрын

Well. I as well as some here had a mistake with Direction. It turns out that I just wrote accidentally into the output "Directions" with S... I feel ashamed.

@malimakes Жыл бұрын

There’s no need to feel ashamed! You should be proud of yourself for spotting the mistake! Practice makes perfect, remember that :)

@ViacheslavRED Жыл бұрын

@@malimakes Huh, thank you!

@ChaosResearchParty Жыл бұрын

when making the custom function, it gives an error "Unterminated conditional expression on line 207" D:

@blackulrich Жыл бұрын

same here

@kavinvardhan1621 Жыл бұрын

Change 'game endif' to '#endif' in the code

@sinithparanga2481 Жыл бұрын

@@kavinvardhan1621 Thank you, this fixed this error

@lejocarry Жыл бұрын

@@kavinvardhan1621 Life saver ♥

@eldenhor737 Жыл бұрын

@@kavinvardhan1621 thank you! ♥

@IsotronicGames Жыл бұрын

undeclared identifier "direction", please help

@EricDallo13 Жыл бұрын

Had the same, to fix that make sure you created and setup Universal renderer pipeline (URP), and created your shader graph from the URP option, not the unity bult-in

@MrGentleGaming Жыл бұрын

@@EricDallo13 Did it but still the same error on my side

@CaffeinatedCombatant 11 ай бұрын

My shader cannot take shadows. Help?

@malimakes 11 ай бұрын

This is an unlit shader, so that’s expected. You need to sample the shadowmap, but I’m not sure how to do that in shadergraph

@thicctapeman9997 10 ай бұрын

@@malimakes I got something to work with the shadows, had to rewrite the Main Light function alittle to include a "ShadowAtten" and "DistanceAtten", and added another dot product wich is taking the first dot, products result and the shadowatten as a and b, then just plugging it in to the add like normal. MainLight code: #ifdef SHADERGRAPH_PREVIEW Direction = normalize(float3(1,1,-0.4)); Color = float4(1,1,1,1); DistanceAtten = 1; ShadowAtten = 1; #else Light mainLight = GetMainLight(); Direction = mainLight.direction; Color = mainLight.color; DistanceAtten = mainLight.distanceAttenuation; float4 shadowCoord = TransformWorldToShadowCoord(WorldPos); // or if you want shadow cascades : // half cascadeIndex = ComputeCascadeIndex(WorldPos); // float4 shadowCoord = mul(_MainLightWorldToShadow[cascadeIndex], float4(WorldPos, 1.0)); ShadowSamplingData shadowSamplingData = GetMainLightShadowSamplingData(); float shadowStrength = GetMainLightShadowStrength(); ShadowAtten = SampleShadowmap(shadowCoord, TEXTURE2D_ARGS(_MainLightShadowmapTexture, sampler_MainLightShadowmapTexture), shadowSamplingData, shadowStrength, false); #endif