Unreal 5.2 - Spiderverse inspired post process effect (FULL TUTORIAL)

hola amigos welcome to this neon real Shader tutorial in today's video we will make this cool post process material effect inspired by the spider-verse movies especially on the second one there are different other styles for a lot of the characters and many of them are inspired by the artists that have worked on their comic book versions and I think I have some ideas for how to make something like the watercolors of one's universe or the collage effect of a spider Punk but I wanted to start with the easiest one so I pick miles as the effect to replicate first I found some artwork let me pull it up that we can use to take a look at this um obviously the character and design and the textures play a huge role here but we if we focus on the effects that could be done in post-process we have I think two main beats we have this 45 degree angle lines on the shadowed areas and we have a halftone pattern on the highlights what else the airlines have very similar thickness across the whole thing but they have to Works more like usual and we have smaller dots and bigger dots Bears on the luminance there's also some specular highlights and some bass lighting and the comic book effects like these are still blue and this is still darker but I think these are the main parts and in the movie there's also the phrase like there's a lot of motion lines and small pop-ups here and there but those can be easily done with billboard Sprites or particles and what else there's also the glitching and Distortion when there are portals nearby but I think we can leave those for another tutorial and now we can get started I have a very basic scene here which is just the default level from the third person template plus a couple of color lights and a reflective sphere this one already comes with a post process volume but you can create one if your scene doesn't have it and make sure that your volume has the infinite extent or Unbound option checked so the camera doesn't have to be inside the volume and let's create a new material that we can add here content drawer well I really created it but let's create a new one and call this one PPN score call me tutorial before we can add it we need to change this domain to post process so do that hit apply and now we can assign here asset reference and then we can just drag and drop it oh from the content browser another thing goes black well because we don't have anything on there missing so let's start with the Shadows so in the shadows we wanted to map some diagonal lines so let's create those first and the texture coordinate and now if we wanted the lines to be on an arbitrary angle we could calculate the r tangent of that angle get the components and then do a bit of math to get it but since the lines are going to be on a 45 degrees we can basically take a bit of a shortcut here so let's break this into its components and multiply each one of them by a scalar by any scalar parameter and I'm going to call this one line density so the full value one and multiply cool now we can subtract one of these values from the other and if we output this we're going to have our texture divided in two areas but it's diagonally so we're getting close and to transform this into bands we can just take the sine of this number and now they are bands perfect we can even increase the density let's say something that still be small in the video but not too noisy I don't know 20 yeah okay and but we want our lines to be on the opposite direction so the easiest way is to add another multiply and multiply our parameter by minus one and now lines go in the correct direction perfect let's give this a comment box line pattern and let's get the let's see how we can get the shadows of this image oh sorry of the original image so we can remap map this texture to that there is a relatively easy way to get the lighting information that we need from the scene using two different scene textures so one first and set it two post process input 0. copy paste this and set the second one to almost at the bottom base color as a store in the G buffer let's connect each one of these to the amazing color first to see what we're working with so post process input 0 we hit apply and go back to the viewport is the final scene color including our lights our Reflections the Skybox the rest of the post process like the exposure compensation GI Etc cool and the base color as a store in the debuffer if we output this we have just the color of these materials and you might have noticed especially on bright or very thin objects that they seem too vibrate and there's a bit of temporal noise and this is because when we are applying this post-process effect the Press of the stack has already passed so we are kind of discarding or removing the rest of the post process effects and to fix that we just need to change the order in which these are applied so we can select the material properties and search for blendable and change the blendable location from after tone mapping to before tone mapping and now we go back to the scene everything is stable and the rest of the post process is working correctly perfect now let's see what happens if we divide one of these numbers by View so take the post process input and divide it by the base color and if we output this now we have our sphere with less color and the shadow and seems to be working but if you look at the sky it will start blinking and it's almost like a photo sensitive warning so I'm not going to do it and to fix that we just need to add a saturate node so I saturate before you look at the sky hit apply save and we can now safely go back to the scene and well we have our shadows but the lighting color is still affecting this and it will be hard to work with that so let's remove the color by adding now and desaturate node and remember that saturate is not the opposite of desaturate but there's a clamp between zero and one so if we connect that to be emissive hit apply go back to the viewport now we have our shadows cool but we want to use them as a mask for our pattern or for line pattern so we should invert this and have the Shadows be brighter and the lid areas to be darker and we could use a one minus and just invert these values but I also want to remap where the Shadows or what is considered a shadow so we cannot just more precisely where the lines are applied and for that we are going to use a curve so go to the content browser and on the miscellaneous category add a curve and it has to be the type curve linear color to be used in the material editor so select that and let's call that this one curve tutorial thresholds this holds and to be able to use this curve we need what is called a curve Atlas which is just a collection of Curves so right click and the same miscellaneous category below curve there's a curve Atlas and we can just copy this name and I'm going to name this one curve CA curve Atlas and the same name and we can now open the atlas and we just need to on the gradient curves parameter uh the curve that we just created so we can even drag it from the browser and now it's there so let's open this curve so right now it's just remapping the values that go from zero to one to zero to one so nothing's happening really and we can make sure that that is true if we go back the comic tutorial material and we actually can close the atlas we don't need that and let's add mixer for curve and add a curve at last row parameter node and this one so let's hold and we can connect the saturation now to curve time and if we just connected the output we are going to get a mirror because the curve and the atlas are not set so select the atlas that we created tutorial thresholds and the curve that we added and well it's back to as it was before because remember we are not changing any of the values in the Curve so 0 to 1 is mapped to zero to one Okay so let's take a look at this we are only using the red Channel so let's hide the green blue and Alpha so it's easier to look at the notes and change them with selecting the other channels and whatnot and for now just invert these values so 0 goes to one and one oh and one goes to zero now save go back to the viewport and there we have it this is our mask or Shadow mask all the shadow areas are brighter and we can even see the effect of this light like the inner radius and the outer radius the second softer light but if we want to relap this because right now the lines will be applied to all of these and only be a little bit subtler around this area so let's say we want to change this and have less of these dark lines we just need to move the second note let's say half for now and now our lines will only be applied here and a little bit softer here and not cover any of the lid area or just a little bit of a translation here we can even play with these values and change the notes to maybe break on both so we can also use weighted tangents onions and we can maybe do something like that maybe extend this and now we have a bit of a bigger transition but we're still removing the brighter the brightest parts so now that we have our gradient defined let's multiply this value by our mask or Sorry by our pattern so multiply by this sign here and if we connect it back to the emissive well now we have our lines but only our lines first let's increase this density a little bit 100 and yeah we have our lines but again just the line so let's fix that and for that well if these are our shadows in in some way the only thing that we need to do if we have here if you remember this is our base color without any lighting oh the Shadows are basically less color so we can take the color and from that value subtract our shadows and let's see what happens now almost no there's something happening but the areas between these bands are brighter for some reason oh that reason is that this range that we are subtracting is not in the zero to one range so let's fix that and remember our set rate that's exactly that and we connect it hit apply perfect now we have our black lines but the rest isn't affected which is exactly what we want and we can take a look and see how it looks in the character cool yeah we can even increase the density a little bit if we want more detail 150 Maybe okay let's give this a comment and this cheers this I'll give this a call ASM Shadow mask and make some room for the next part we'll work on the highlights next and much like we did earlier creating the pattern and then the mask we'll start by creating a halftone pattern so yeah from the texture coordinate let's add a custom rotator so we can rotate this pattern and at a constant value I like 0.2 or maybe 0.16 and then increase the density with a scalar parameter I'll call this atom density then ZT and just for the preview let's give it something that we can see so maybe 50. and now we need to take the decimals so let's take the fractional part and that means we have now 50 gradients that go from zero to one a bunch of times and if we Center those by multiplying first by two and then subtracting one subtract one instead of a bunch of zero to one gradients now we have a bunch of minus one to one gradients which means that we can take the length and it's a two dimensional Vector so connect it here and if we output this just for a moment we have a bunch of dots rotated not 45 degrees but close cool so let's give this a comment create comment from selection and column is left on pattern and yeah that's good we can now create the mask and earlier we divided the post process input 0 which was the final color by the base color and now we'll do something similar but instead we're going to take the base and the final color um and instead subtract the base color and let's see what happens if I output this apply save oh oh sorry there we go now we have only our lights we have a little bit of reflection and we still have the Skybox and the lights and no Shadows perfect that's almost it but for now we just want to create a mask and that's gonna be easier if we work with a gradient with a grayscale sorry so I'll go back and now we have our live values excellent so earlier we use this we use a curve that we created which is here here to adjust the mask for the Shadows and now we can copy this paste and do the same but instead of using the red Channel we'll use the green Channel and let me hide the red Channel show the green one and right now we have a zero to one gradient I'm going to mix it back to linear so it's the default zero to one values and we output again the green Channel save and nothing changes because much like we did earlier we are not remapping anything yet and we can change that and maybe we don't want to apply the halftone pattern to everything but yes reduce the range a little bit so we can move this and compress it a little bit I don't know maybe something like that or we can keep the range but change the curves and the same as we did we can also change the weight of tangents increase this so we have a bigger transition cool so let's save this and go back to the material and this is basically our highlight mask so we can create a comment here highlight and now this mask we can to apply as a Pantone pattern or sorry a half tone pattern we can use a smooth step function and I use a custom function to do this step in a different video you can check that one if you want to use that one which anti-alias results using derivatives but for now I'm going to keep it simple and use a regular smooth step and we can do this in a couple of ways connect the the length to the maximum this minimum and yeah give the value of zero and let's see what happens if I connect it back to the emissive cool now we have our lights or lid areas that are just visible under the halftone pattern and the size of the circle kind of indicates the intensity of the of the light we can now actually increase the density a little bit 150 let's see how it looks yeah perfect so actually I'm going to glue this here and for now we can just multiply this by the final color and see what happens cool now we have our lights and because we reduce the range of that gradient this has just a little bit of the effect and it's mostly concentrated on the areas that have these very close spotlights or Point lights perfect now before we move on let's say that we want this effect to only happen on the character but we want the Shadows to still be applied to the whole image and we can do that with the stencil buffer and to use it make sure that in your project settings if you search for stencil your custom Dev essential pass is enabled with the stencil the bottom option now you need to go to every object or character that you want the effect to be applied and select any of the meshes or all of the meshes and search for custom and do two things one enable the render custom date pass and second give the value and one will work for most if you have at least one object one should be good enough now let's see how to use that I'm going to for now just remove this multiply here and add as another the same texture and let's set this one to custom stencil and for now let's connect the color to the emissive output hit apply and see what we have a black scene but if we hit play our character which we enable the custom pass is enable is rendered as a wide silhouette perfect now we have a mask so now let's combine the lighting on the character with the lighting on the rest of the world so for that we need to invert this value so 1 minus and now we have everything by the character in this node next we want to multiply that one and we want also to multiply the base color now the the rest of the scene we're going to just multiply it by the lighting information which if you remember is here on this subtract now we can make sure that we don't have any negative values by using a maximum between that number and zero and then multiply sorry we can multiply this one here and this one here so now we have he has the lighting on the whole scene but not on the character now we need to combine it with the opposite so here we have just the lighting on the character so if I manage to get close to that red light yeah to the light should yeah there perfect so now we just need to oh not this one this one multiply again by this so we also have the color on this one and now we just need to combine both so add and let's see what we have apply save cool and now our character is laid only by this effect but the rest of the world is lit normally now let's give all of these notes their own comment box and see all oh masking and actually we something we can do is add another Max here if we want to keep some of the original lighting like maybe 0. 00 or 75 before this multiply and Save let's take a look so now we have some of the regular lighting and on top of that we have oh let's combine this with our shadows and for that is the Somali roof having both together oh so add this and this one and I think we're almost done cool now we have our shadows it will get close to the light we have our highlights zoom in a little bit yeah this looks pretty cool one thing we're missing is the specular so the specular has been basically killed by these Shadows because we're taking the white color where we are applying mostly the white color so let's fix that and that should be pretty quickly let's see let's go here and see between these two add another syntaxure let's take the specular color on this one and let's add a multiply node so we can tone this effect five for now and then let's subtract from this from the base color let's subtract in the specular value and then hold Ctrl to replace all the connections and then we need to fix this one because we also drag it so let's see what happens now now we have more of the reflection and we can even go back to this value eight and we increase the reflection value no it's just a matter of tuning the parameters and playing with these densities and something else you can do is change the densities both the lines and the dots based on camera distance but I think that for this tutorial I'm going to probably leave it here and increase this value and yeah I think this looks pretty cool the last thing we can do is maybe go to the Post process volume and ideally we want to do this as part of our post process chain manually and control it a bit more but yes to finish the tutorial I'm going to if I can find it go to the chromatic operation and increase it quite a bit 3.6 yes to get that extra distortion and that's it for today and on real post process Shader inspired by the spider-verse movies made from scratch I hope you guys enjoyed this tutorial please give a like and consider subscribing if you did see you next time

Channel: Enrique Ventura

Views: 18,273

Keywords: material, shader, tutorial, unreal, unity, lesson, course, graph, shadergraph, shader graph, nodes, node, texture, 2d, 3d, effect, post process, easy, beginner, spiderverse, spiderman, comic book, cartoon, halftone, hatching, lines, dots, lighting

Id: QnOnjWXeDAA

Length: 31min 36sec (1896 seconds)

Published: Tue Jun 27 2023