Toon Shading - The EASIEST WAY! Unity3D URP Shadergraph Tutorial

hey there it's leo welcome back for another tutorial today we're checking out tune shading and i'm going to show you a very easy and accurate way of performing it the only drawback of this method is that it works only on the universal rounder pipeline before starting i'm gonna explain you how does rendering work and at the same time i'm gonna set up a new scene in the background with a few cubes and spheres with all different colors so that we can test the tune effects on it later there are several rendering methods you probably heard of ray tracing which is the most accurate and realistic way of rendering objects but the most used method is called raycasting and this is how it works for each pixel on the screen the engine casts a ray whose characteristic depends on the camera projection settings if the ray reaches the camera third plane without hitting any object then we'll render the skybox or a plain color it really depends on your lighting settings if the ray hits an object but this object doesn't have any material attached then we'll just render a pink color or at least this is what unity does and last but not least if the ray hits an object with one or several materials attached then we will call the associated shaders that will provide a color to be displayed on the pixel during this process unity keeps in memory a few different textures for example the shadow map or the depth texture or the opaque texture and we're going to use the two last one so the depth texture and the opaque texture to be able to use them we need to enable them within the quality settings of your project [Music] then we're going to use europe's main feature which is add a render feature wherever you want in the render pipeline as you can see it's very simple and you just have to provide a material and now you get it the material we're going to provide is a toon shading material but first we need to build it so i'm just gonna create a new shade graph and instantiate it in a material for now i'm gonna use a plain red color to test it out after setting the material in the render feature and setting layer mask to everything you can see that the scene appears all red in fact it depends where you insert your random feature in the rendering pipeline if i put it before rendering opaques obviously nothing will happen as i only have opex object in my scene so i'm gonna stick with something that comes after rendering the opaques and now it's finally time to work on the shadow graph to perform the tuned shading effect thanks to what we enabled in the settings earlier we can now access to the scene color node within the shadow graph if you connect it to the color output it won't change anything and you will see the scene just like nothing was happening now we need to do a down sampling of this color in order to make this cell shading effect as the color channels are stored between 0 and 1 you just multiply by an integer which is the amount of cells that you low per channel then your round to make sure that only this number of values are actually possible and then you put it back between 0 and 1 by dividing by this same number fairly easy that's just a few notes to put together and it's doing the job [Music] [Music] now it's time to make our outlines to do that we're going to use the depth texture and it's accessible from the node scene depth if we connect it to the color output you will see that pretty much everything is black [Music] but it depends on the camera for a plane if i reduce it you will see how depth is appearing the only input of the scene depth node is the screen position as you can see if i change the default input by the node screen position it works just the same but i can shift the coordinates so for example if i take the screen position we had and shift the script position and i just subtract the two outputs from the scene depth node you will see already kind of an outline appearing [Music] but it's just a proof of concept now we need to be more accurate on how much we shift and in which direction i want the user to be able to control the widths of the outline in pixel so i need the screen widths and height by shifting my screen position on the horizontal axis by 1 divided by the screen widths it will move exactly from 1 pixel and that's exactly the same for the vertical axis and the screen height as you can see it looks better now now instead of subtracting just two shifted depth textures we're going to do this for all four diagonals it will look much more balanced [Music] i know now the shadowgraph just looks like a big plate of noodles but we have no choice there [Music] [Music] but it was worth the pain as you can see the outline is just perfect but there's still some things to fix for example you can see that in the scene view it's not rendering the same as in the game view so to get rid of that we're just going to divide by a multiple of the camera for a plane another thing to fix is this white area far on the plane there are a few methods to get rid of that and i decided to choose to fade the outlines with the distance i could have chosen to compare the normals as well but i've eaten enough shadowgraph noodles today and i like the fact that outlines appear only on closer objects to do that we just need to divide the current output value by a scene depth but in eye mode this time and as you can see i get rid of this white area in the back now we're almost done we just have to mix the outline and the cell shading with a simple alert i want the user to have control over the color of the outline so i'm adding a color property [Music] and there you go you're almost done with the tone shading effect there are still a few things to fix the first one is when you zoom into the game mode you can see that the outlines are really sharp to fix that you need to enable anti-aliasing on the camera another issue is that we're still getting this outline chunk far on the plane and to do that i'm going to fade even more with the distance i forget to mention that in the meantime i changed the way i compute the outlines by just taking either zero on one with a compare node and i would give the power to the user using a property for that the last feature i want to add is a fade between the real colors and the tune colors so that you can get kind of a tuned shading but not much with still a few gradients it's just a simple lurp between the real scene color and the cell shading we made earlier [Music] and here is the result [Music] i hope you enjoyed this tutorial as much as i did making it i haven't seen any other tutorial using this method so i'm counting on you to share it because everybody deserves to know such a trick i also had fun with cross hatching shadows that really shows the power of eorp and i think there is room for many other tutorials so make sure to be subscribed not to miss them until then see you next time cheers

Channel: Léo Chaumartin

Views: 67,072

Keywords:

Id: Rn_yJ516dVQ

Length: 11min 34sec (694 seconds)

Published: Tue Apr 13 2021