Cel Shading and Light Types (UE4, valid for UE5)

hi guys in this video we're going to walk through a way of achieving the soul shading style in our games since surreal uses the deferred rendering pipeline there isn't a way of easily achieving that without compromising on something since for this video series we have been working on asset materials i'll show you a way to achieve that from here the base concept is very simple given some data of a fake light we have to calculate the gradient that represents how much every pixel is illuminated once we have that we can remap its values to colorize our geometry so let's create our light as first thing the simplest light type we can start with is the directional light to do so we just need to create a normalized vector tree that will identify the direction the light is shining too then to obtain our gradient we just have to do the dot product between it and the mesh normals [Music] since the gradient is inverted we need to multiply the result by -1 and saturate it [Music] this is because since the light vector and the light facing normals are pointing at each other the result of the dot product is negative now the only thing left is to use this gradient to colorize our mesh since the transition between the various shades is generally hard in cell shading we can use an if statement to blend in the three different colors let's add three vector trees and two scholars that we locked as thresholds one color will be the key one the highlight and one the shade [Music] do [Music] by using the same logic but using the camera vector instead of the light one we can create a sort of outlane effect [Music] do [Music] the foundation around cell shading can be now considered complete from here you can work on it by adding maps normals more parameters if you want to texturize these more but what should i do now if i wanted to use other light types instead of just the directional [Music] to create a point light we have to follow a slightly different logic since it represents a point that emits light in all directions we can't use a single direction vector to generate our gradient we have to compute that for every pixel instead by using the light and pixel positions to do that we have to subtract the like position from the work position and then normalize the result [Music] after that all the remaining logic is the same [Music] a detail is missing though the point light has a falloff the more the surface is distant from the light the weaker the illumination is to add this feature we have to use a new radius parameter to generate a second gradient that will be multiplied on the top of the one we already have this new gradient will store the normalized distance between the light and the surface to calculate it we have to divide the distance between the two points by the radius parameter saturate and flip it [Music] note that this is a linear falloff you can change the curve as you prefer but if you are looking for a physically accurate one you have to use the inverse squared the last light type we are going to see in this video is the spotlight it is basically the combination of both the directional and the point like types in fact it behaves exactly as a point light but its shine hits light only in a direction inside the cone so as first thing we have to reintroduce the direction vector and use it to create a third gradient that limits the emission of light to the area we want [Music] to achieve such thing we need to calculate the dot product between the spotlight direction and the vector that goes from the light to the surface [Music] now we have to shrink this value so that the gradient covers just the area described by the angle parameter since the dot between two normalized vectors gives us the cosine of the angle between the two we can take the cosine of the angle parameter and use it to remap the gradient let's do that by dividing their flipped values by each other and then flipping again the result [Music] now we can finally multiply this new gradient on top of the other ones [Music] what we just discussed besides showing you some fun stuff should help given you a clue of what's happening under the hood when are really surrendering the scene there are many more features that we call that of course how will you add reflections to make the material shiny [Music] let me know in the comments and maybe it will be discussed in future videos [Music] you

Channel: Visual Tech Art

Views: 80,425

Keywords: cellshading, cell shading, tutorial, ue4, ue5, material, shader, cel shading, celshading, toon, toon shading, toonshading

Id: Z4ur9c8H6AI

Length: 8min 33sec (513 seconds)

Published: Tue Aug 24 2021