Toon Shader From Scratch - Explained!

hi guys it's Eleanor and today we're going to create our own custom tune shader in unity and if you don't know what so shading is it's a non realistic technique used in games and cartoons and the idea is you use big chunks of colors to shade instead of gradients it used in many games including wooden Waker bright of the wild Team Fortress 2 many many more we're going to start with a new project and now I'm just gonna add a sphere to use as a dummy scale it and position it in front of the camera now we need to create a material by right clicking create material and name it appropriately from the shader drop-down I'm gonna select unlit texture and I'm gonna give it this free texture downloaded from the unity asset store let's drag this material to our sphere and now we're ready to start right click create shader unlit shader and let's name it 10 shader and let's open this up up here we have a properties here we can define properties which we can control from the unity interface such as color picker in sliders etc we have the AppData structure on the v2s structure which are the arrays being fed to the fragment and vertex functions down below you can see a list of available variables you can add to these in the unity documentation if we want to use something in the vertex and fragment functions we have to add them to these structures I'm gonna go ahead and remove all the fog pets so they don't distract us since we don't really need them the basic idea behind calculating the lights and shadows in the toon shader as this I have a light source that shines a light on specific direction and this is defined as a vector let's take a random point on our object this point has a normal which is basically just a vector that's a 90 degrees all the surface of the object the angle between the light direction and the normal can tell us at what angle as the light source hit in this point the dot product of the two vectors is commonly used to measure this if we normalize the two vectors meaning we just make sure they're of length one since simplifies the calculation and the angle would always be the same regardless of the length in this case the dot product would range between minus 1 and 1 if the light is directly hitting the point then the dot product is 1 if it's at 90 degrees then the dot product is 0 and if it's facing in the exact opposite direction then it's minus 1 so let's go back to our code and implement this but ad floats are normal to the app data structure so we can use it in the vertex function however this is the normal in object space and to turn this into world space you guys provide us with the unity object world normal function the output of the vertex function is fed to the fragment function but we still need to add it to the v2f structure to be able to use it so let's do that slot 3 world normal color normal and I've made an error in the recording by putting text chord 1 in there but you should say normal it's at our tune function up here we need to give it a return type float and it will take two parameters are normal and a light direction [Music] let's define a variable float and L and that will be the dot product of the normal and the light direction and don't forget to normalize them we want to group everything with a dot product less than zero as that would be our shadow as this is everything that's facing in the opposite direction of the light source [Music] we can use the max function for this so now if the dot product is less than zero and L would be zero for now let's just return this as is and we'll come back to it down here in the fragment function we have this sample so that's multiplied by our tuned function to add the shadows we will give it the world normal variable we defined earlier and for the light direction we can use underscore world space like post 0 dot X Y Z this I believe would work with a direction light and you need to look at the documentation to see what to use if you have a different type of light you might also have to add some tags a little link in the description box to the bed of the documentation you need to take a look at now if we go back to unity we can select our shader instead of the unlit texture shader we use for our sphere earlier and you can see we have a block shadow but we still have a gradient for the rest of the sphere and that is because we are precisely calculated in the end of L for the light portion and we're no grouping values together or doing anything with them really so if we go back to attune function we can divide the end of L variable to be returning in several parts by dividing by any number and then ground and down so if we use 0.3 we have one group from 0 to 0 45 second one from 0.3 to 0.6 and 0.6 0.9 and then lastly 0.92 0.1 so if we save and go back there we go is starting to take shape it's awesome properties to help us control this from the unity UI let's I one called brightness which will be a range from 0 to 1 and let's Defoe's it to 0.3 we should also list all of our properties down here to be able to use them now go down to the fragment function and let's add the brightness and if we go back to unity now we have control over how darker shadows are so we're basically allowing for ambient lighting to be defined let's also add a strength property and we will modify our tuned function by this so we can control how strong are the blocks of color and let's try that in unity as already looking so much better but let's add a couple of more things let's add a color property so we can give the lights intent just multiply the two in white color [Music] [Music] and lastly earlier we hard-coded 0.3 value here but we want to be able to define that from the editor as well so let's add another range property between 0 and 1 and let's replace the hair color 0.3 value with this and Aten function so there we go we have our own custom tune shader from scratch we can play around with the values to two different results and I hope you have fun with this I hope you enjoyed this video consider subscribing and I'll see you next time thank you bye

Channel: eleonora

Views: 77,867

Keywords: toon shader, cell shader, unity3d, tutorial, beginners, shader, unlit shader, fragment shader, eleonora, unity, unity tutorial, game dev, game, development, game development, blackthornprod, brackeys, dani

Id: owwnUcmO3Lw

Length: 8min 7sec (487 seconds)

Published: Sun Dec 22 2019

Reddit Comments

[u/JolteonShocks]

Where is a good place to get started with shaders?

[u/Elizer0x0309]

Digging the format and pace! Subbed! thank you for the share and knowledge 🙏

[u/1B5ExerciseBook]

Awesome! Thanks for sharing

[u/Lopscotch]

Thank you for sharing.