Cel Shading - Devlog 3

[Music] welcome to another dev vlog about my yet to be named cozy creature collecting and management game similarly to the previous devlog about outlines this devlog will also focus on visuals [Music] cell shading is a type of non-photorealistic rendering where the illumination is quantized to a number of distinct colors instead of the gradient result of a more photorealistic render i wanted to create this shader to be used on an object basis as opposed to a post-processing effect so i created a new unlit shader and a corresponding material for the test object the first step was to implement how light affects the object's surface with the phone reflection model the result would then be thresholded to achieve the flat look of cell shading this would require custom lighting and since there are no light nodes in shadowgraph this would have to be handled in a custom node the fung equation to calculate how a surface reflects light is a combination of three reflection terms diffuse reflection of rough surfaces specular reflection of shiny surfaces and lastly ambient reflection which represents how the surface reflects the small amount of light that is scattered around in a scene the ambient turn is light source independent hence i excluded it from the custom node for the diffuse and specular terms however references to the light sources and the scene were needed and the unity universal render pipeline library has some nice structs and functions to represent and get this data [Music] the diffuse value for a point on a surface is calculated by the dot product between the normal and the direction from that point to the light source [Music] the normal was added as a parameter to the custom node and the world normal was added as an argument in the shader graph in an effort to keep the custom node clean structured and somewhat easy to understand i defined a struct that would contain all the object data needed to calculate the custom lighting [Music] as well as a function that would handle light calculations for specific lights with this available the diffuse term would be calculated and clamped between 0 and 1. this reflection term was then multiplied with the light color before being returned as for the specular term in the fung reflection model a reflection vector is derived from the light direction and normal vectors the specular term is then calculated as the dot product between this reflection vector and the direction vector to the viewer to the power of a shininess constant however there exists a modification to the font reflection model called blin phong reflection model which i opted to use instead of the reflection vector a halfway vector is calculated by adding the light direction and view direction vectors normalizing the result and the specular term is then equal to the normal vector dot this halfway vector to the power of the previously mentioned shininess constant [Music] this was then added to the diffuse term before being multiplied with the light color and returned to avoid the specular highlights appearing over the non-illuminated parts of an object like this the specular term was multiplied before the addition and return statement at the end i chose to add an additional term for the possibility of a more stylized result namely rim reflection this is essentially highlights on the rim of an object and was calculated by one minus the dot product between the view vector and the normal meaning that the bigger of an angle between the view and normal the lighter the surface similar to the specular term i wanted the rim highlights to appear relative to the diffuse reflection the max result of the specular and rim light was added to the diffuse turn the custom lighting node was now producing a nice result but was oblivious to shadows thankfully the unit urp library provides functionality for this with minimal work on my part like including this functionality in my shader graph by adding keywords and calculating shadow coordinates which i use to sample the shadow map i could now call get main light with these coordinates as an argument which would now return the light struct but with shadow attenuation properly set [Music] its value ranges from 0 meaning fully shadowed to 1 meaning fully lit hence multiplying this value with the diffuse term made the light model take shadows into account now it was time to introduce additional lights like for the shadows additional keywords were added and a few library function calls made it possible to calculate the shading color for all lights affecting the surface [Music] which were then added to the final custom node output the only reason the one was included in the get additional light function call was because the shadow attenuation for additional lights is not set unless the function with the shadow mask parameter is called and since only real-time lighting no light or shadow maps were taken into account at this stage of the game's development this parameter was redundant and could be set to anything at least if i'm to trust my deduction skills [Music] before obliterating the lighting model by thresholding it to achieve cell shading i wanted to include one more thing namely distance attenuation which is set for non-directional lights that are not the main light which represents light intensity falloff based on distance from light source with that last attenuation piece of the light puzzle in place it was time to threshold the different terms to make this shader into a cell shader since each term is expressed as a value between 0 and 1 inclusive one could just quantize it to be either 0 or 1 which led to a sub-optimal visual result featuring some aliasing problems instead i wanted more control over the edges of each separate term by introducing a set of additional parameters and then utilizing these together with ermite interpolation by smooth stepping each turn [Music] finally the previously mentioned ambient light term and a surface-specific albedo parameter were combined together with the output from this custom lighting cell shaded node to achieve the final result which was absolutely unbiasedly beautiful [Music] [Music] [Applause] [Music] [Music] wow [Music] for now this result far exceeds the initial plans i had for this cell shader there still exists a lot of things to add both to the cell shade lit shader like support for normal maps specular maps and even regular albedo textures as well as for the custom lighting cell shaded mode which currently only supports real-time lights so no baked light maps and shadow maps and then there is also fog light probes ambient occlusion proper reflections and a lot of other things some of which i will probably implement in the future when and if i get there thanks for watching bye [Music] wow [Music] do so [Music] [Applause] [Music] you

Channel: Robin Seibold

Views: 41,923

Keywords:

Id: gw31oF9qITw

Length: 11min 9sec (669 seconds)

Published: Tue Feb 22 2022