Outline Stylized Material - part 1.5 [UE5, valid for UE4]

[@VisualTechArt]

Just realized there's a mistake in the code in this video! (The code you download from Gumroad is fine though) I forgot to apply the SHAPE_RATIO to the ellipse, so the final code you see at minute 5:15 should have this expression (first line inside the for loop): float2 MarkerPoint = float2(dot(RotationVector, float2(x,y)) * SHAPE_RATIO, dot(RotationVector, float2(y, -x))); Sorry for the inconvenience!

[@timboslice5351]

This is so amazing! Would it be possible to create a Moebius kind of Stylized Material?

[@activemotionpictures]

was this corrected in the €15 on your Gumroad? Because I assume that's the version we see in this last part of this 1.5 video. Why didn't you use "part 2" directly?

[@activemotionpictures]

This is so cool. Parametric indeed. Great video!

[@ghislaingirardot]

Very well explained, nice!

[@cardrave]

Are the shadows in this video’s example just coming from input0 using all white materials for the models? Awesome vid by the way. Extremely good breakdown of an impressive effect. Thank you 🙏

[@VisualTechArt]

Not quite :) I've isolated the lighting brightness and applied some quantisation on it

[@neiliakini6349]

@@VisualTechArt The effect looks so amazing with the shadows in your preview, could you detail a bit more how you got that result ? I am not sure what you mean by isolating the lighting brightness and adding some quantisation to it, any help would be greatly appreciated ! :))

[@priyankpiyush]

Beautiful 😍

[@chiefwhosmoralsareelastix]

I've noticed a really weird issue with this outline code which defies logic, I'm presuming it's an engine bug with custom nodes. So, I have the scene setup, the outlines working, everything is looking fine. Now I open any Material Instance in the Material Editor that contains this custom node setup (doesn't matter if the MI is in use in the levels PP volume or not, or even if its a totally different Parent Material to that used in the scene). This causes the main level to refresh and now the scene outlines have doubled in thickness. All because I opened a Material Instance containing this custom node in the Material Editor. It's fairly random as well, but when it does happen the only fix is to relaunch UE (5.2.1). Weird, huh? Looking forward to Part 2 :)

[@VisualTechArt]

Weird, sometimes the shader reads the wrong viewport size and if you go full screen everything looks fine... try to see if that's the case :)

[@chiefwhosmoralsareelastix]

@@VisualTechArt Thanks for the reply. It does appear to be viewport size dependent as I accidentally caught my editor window and resized it causing the exact same issue to occur. Think it might be to do with my method of kernel size on distance that I'd mentioned in our discussion on your latest spiderverse video.

[@neo-giu]

Amazing stuff as always :)

[@RwanLink]

How would you make the outline wiggle as if it was hand drawn each frame?

[@VisualTechArt]

With some UV offset probably :)

[@RwanLink]

@@VisualTechArt I don't know if you plan to make another part on outlines but that would be great to see how you would do that :)

[@pullfocuscreative]

Realise this is an old video now but I have a question regarding scene depth. Is it possible to have the outlines reduce in thickness/complexity with distance? as it stands meshes in the distance look really crowded with detail and it is a bit distracting. Thanks so Much for the awesome explanation of the shader principles though!

[@VisualTechArt]

Hey! Yes it is possible in several ways :) You can use depth data to fade out the outlines at distance, for example. Or you can modify the node to accept a dynamic kernel size that becomes smaller at distance, and so on :)

[@pullfocuscreative]

@@VisualTechArt thanks so much for the reply! I don’t expect you to have an answer lined up but do you know of any resources that could explain how to do the depth fade or dynamic kernel effect? No worries if not this was already super helpful

[@VisualTechArt]

@@pullfocuscreative You may try asking in my Discord Server about that :)

[@DanMiller.]

Thank you so much for this tutorial! This material looks so damn good. Is there any way to exclude certain meshes from having an outline? I tried custom stencils and an if statement to render some meshes without applying this effect. But the outline still appears when meshes with and without one overlap each other.

[@VisualTechArt]

I would use the custom stencil too, probably you need to run a filter on that to expand the area that cancel the outlines though, as some of them lie outside of the mesh :)

[@regstar212]

Very interesting approach to outlines, I love it! I have an odd problem, though. It all works fine until I open my post process material instance, where it irreversibly thickens the lines and makes it all appear odd. Any idea how I can fix this? Does the custom node not like whenever the instance material is clicked on?

[@VisualTechArt]

I actually never tried that, no idea of what's going on

[@anindyaghosh507]

Hi ! Great explanation there! Thanks for your effort. I have a query though..... Is it possible to apply this procedure in water/fluid materials available in Unreal engine? Like... on ocean landscapes with the outline works visible on waves? Is the same procedure suggested or any other technique you prefer? Thanks in Advance ! And thanks again for the laborious tutorials. They are really helpful!

[@VisualTechArt]

Well you would need the equivalent of depth and normal for the translucent pass :) or you may come to something else to apply the filter on, you need to get creative:D

[@erichance8222]

Good stuff!

[@NeatWolf]

Loved the improvement! Maybe I didn't get the last part - what is driving the virtual brush rotation?

[@VisualTechArt]

The angle you give it :)

[@NeatWolf]

@@VisualTechArt Oh right, it's arbitrary then - wonder if it could rotate to match some contours for an extra stylistic boost :) Besides - there's one shortcoming with this approach compared to 3x3 kernels - can it be solved? When applied on transparency-dithered objects (that still look great with TAA), the result is pure black! :( Any idea on how to fix that without having to exclude objects from the effect?

[@NeatWolf]

@@VisualTechArt actually, after more tests, the outline overlaps every transparent object, doesn't matter brightness or distance. I fiddled with it over and over but didn't manage to find a satisfying solution just like simpler outline techniques :/ Any idea?

[@kalyxee]

Hi! This was very useful, I always wanted to try coding in Unreal! I have a question though, when I do it myself, the lines keep glitching (or like trembling😅) and I was wondering if you knew why? Did I miss an important step? It also happened when I followed the last video (the part 1).

[@VisualTechArt]

You have to set the material to run before the tone mapping

[@kalyxee]

@@VisualTechArt I tried doing it but it still glitches a bit, is it maybe a lighting problem? (Thank you for answering!😁)

[@MANIAKRA]

Amazing channel, thank you :)

[@Quaz-jinx]

This was a great video!! It taught me a lot, but I'm having a little bit of a problem. When the Kernel pixel is near 3 different depths (Like 3 objects at different distances, and the Kernel pixel is on the middle one) the line doesn't fill in. I believe this is because the Laplacian Filter adds all the depths together, and since the back object is far it causes it to not draw the pixel, but it should because it's on the edge of the closest object. I can see it a little bit of this happening on your project but on mine it's very visible. Do you have a workaround for this? I should add that the reason it's more visible on mine is because I changed the code to fix an issue with the Normal filter doubling up with the Depth filter on overlapping objects. I fixed it in a very weird way though so if you got any tips for that too that would be awesome :D

[@VisualTechArt]

I didn't find any way to avoid it, sadly. But what's happening is that where you don't see the line, there's the edge, actually, but it has the opposite sign... So if you create the line from the depth by initially doing abs() on the filter result it should go away. The compromise here is that you'll have a thicker line that runs also inside the mesh :)

[@Quaz-jinx]

@@VisualTechArt Aw man, that’s alright. I did find that solution but i kinda wanted my depth lines to be the same thickness as my normal lines. I guess i’ll keep tinkering with it, if i don’t find a solution then i guess I’ll just live with it. Thank you for responding so quickly though :)

[@MineNOROfficial]

It’s been a little while since you uploaded these two videos; are you still working on a part two?

[@VisualTechArt]

I've been focusing on other things lately, but this is still in the back of my mind :)

[@cmds.learning7426]

解释得很好，很好！

[@nicolaslop8974]

This is awesome!! completely mindblowing! I just wanted to ask you a question, I only have a 1 year experience on Unreal and while I know how to create post process materials, I have no clue about how to use your text code :p ...I bought it from gumroad expecting it to by a couple of clics to implement, but I am too newbie and I confess I don't know were to do those clics. I wonder if you could write a more step by step explanation of how to use your code, I mean, the explanation of how it works is amazing, but from opening an unreal project to see your magic working, that part I really would appreciate so much to understand. I don't even know what to press to open the code input in Unreal I confess, and I don't even know how to ask that on google it seems. I would appreciate it a lot if you could guide me a bit!

[@VisualTechArt]

It goes inside a Custom Node :) if you follow the video that precedes this, you can see the full implementation

[@nicolaslop8974]

Oh!! Thank you!! I will make some time to study the previous one! @@VisualTechArt

[@darkwraithcovenantindustries]

I am having trouble tryingto follow the instructions of the first video. I bought the custom code, but have no idea how to insert it. The video doesn't seem to tell you where to put the code. I tried to follow along, but it went by very quickly. I got stuck at the part where you are supposed to create a node that has a value. Please help! @@VisualTechArt

[@VisualTechArt]

The custom node gives you the raw data to then manipulate to get the outlines you want :) if you look in my first video there are a bunch of nodes that follow the custom node (ComponenMasks and InvLerps) you need to copy that part

[@darkwraithcovenantindustries]

thanks! I got it working.@@VisualTechArt

[@code-72]

Canny edge detection please!

[@KikuNeZ]

Amazing tutorial, thank You! Is it possible implement custom depth mask in this code? If I try to mask outlines with SceneTexture: Custom Depth after the custom node, some lines at the edges of the mask are getting thinner.

[@VisualTechArt]

Yes you can :) Correct me if I'm wrong but from what you said to me sounds like you're trying to remove the lines from the area covered by the stencil? If you keep seeing some thinner lines outside of that mask is because outlines extend outside the actual edge, so you should expand the mask by the same amount of pixel of the kernel size :)

[@KikuNeZ]

​@@VisualTechArt I will try it, thank You! Yes, You are basically right, but I am trying to remove the lines from outside of the object (character) with a black and white mask, obtained from custom depth with step node.

[@hotbergina]

thank you !!!!!!!!! on unreal engine 5, depending on the area the character is, is it possible to change the shader of the environment and the shading of the character too ?

[@VisualTechArt]

Yes :)

[@WarforgeXP]

I purchased the package from gum road, but instead of black and white outlines, it makes it multicolored outline

[@VisualTechArt]

Yes, the node outputs the data to create the lines :) it's up to you how to use it! You can copy the nodes with the thresholds I used in my video to start

[@VisualTechArt]

(in the first part video)

[@WarforgeXP]

@@VisualTechArt ah I see. I was being lazy and saw the Legolas and a purchase link and thought it would work out of the box like that 😅

[@CyberWolf755]

If we multiply a painterly noise texture with the ellipse, would the outline look more like a brush stroke?

[@VisualTechArt]

Kind of, yes :) Before applying thresholds (after the custom node) you basically have a sort of line gradient, so you can manipulate it as you wish

[@Alaincasanovas]

How can i apply the oulines to already textured buildings and stuff? Right now im stucked with the black and white postprocess :(

[@VisualTechArt]

Multiply them on the PostProcessOutput0 :)

[@lcxlursyi6]

Hi i downloaded the shader from gumroad. For some reason i get weird horizontal lines in the laplacianfilter_depth

[@VisualTechArt]

That's weird, you can ask for help in my Discord maybe, it's hard to figure what's wrong here :)

[@lcxlursyi6]

@@VisualTechArt I figured it out. The problem sat infront of the screen :)

[@felixbea5383]

There is many edges without weight at the center (double lines) and black or gradient areas where there is depth. The last step doesn't work (MarkerPoint is not defined), is it the cause?

[@VisualTechArt]

? Can you elaborate a bit more?

[@felixbea5383]

​@@VisualTechArt The faces of the geometry can have a gradient shade or they can be completely black, depending on the angle of the camera. It doesn't look bad, but this is not the result I would want. About the MarkerPoint I just made an error in the code.

[@felixbea5383]

Is it supposed to look that way or did I miss something?

[@robertadams3925]

Can you apply this using forward renderer?

[@VisualTechArt]

To a certain extent I think, if I'm not mistaken you still have a depth pass available in the forward, so you can do it on that, but I'm pretty sure you don't have a normal pass. So overall you might be able to do it, but with a bit less control over it :) (You could derivate the normals from the depth, but you would get them as the geometry had only hard edges)

[@wpwscience4027]

I've been thinking about the bit you do around 2:57 with the radius for about a day now. Ultimately the Laplacian filter throws a -1 in every pixel it evaluates except the center one, which grows to the size of the number of evaluated pixels (My intuition says this should be the area of your circle). What if instead you took that radius calculation and asked the distance to the center from the evaluated pixel and weighted the pixel something between -1 and the center value based on that? Would this not give your line a soft edge?

[@VisualTechArt]

You would weight the influence of each pixel based on the distance from the actual edge :) Yes, the result would be softer than what you get from this (before the thresholding). And yes you can do all sorts of things with that ;)

[@wegotguns3325]

This is a bit of a noob question, but if we bought the gumroad version, how do we apply it? Just as a material to the character? Or is there away to have it effect the entire scene?

[@VisualTechArt]

It's a post process material, it acts on the entire scene :)

[@DPDPDPDP]

Hi there, I'm wondering why SHAPE_RATIO is not called, i could delete it and its code still working

[@VisualTechArt]

Aw crap! You're right, I forgot to write in the multiplication! Cheers mate well spotted!

[@VisualTechArt]

Just checked, luckily the code download from gumroad is correct, it's just a mistake I made here in the video, thanks again for bringing it up :D

[@Owi627]

Is there a way i could apply color to this and go for a renaissance look

[@VisualTechArt]

Just multiply your colour to the outlines :)

[@Giada827b]

Is there a way to keep the line thickness consistent while moving around the scene?

[@VisualTechArt]

Can you elaborate a bit more? :) probably tho I'd guess your issue might be related to temporal effects

[@Giada827b]

Yeah I meant if there's a way to keep the lines the same thickness in world not in camera

[@VisualTechArt]

@@Giada827b You can make the kernel size dynamic and adapt based on distance from camera :)

[@Giada827b]

@@VisualTechArt I started using unreal not long ago so I'm not 100% sure how to do that, could you please explain in simple terms how to do it if u got time?

[@Maxparata]

I followed the part 1, but it wasn't showing how to get the shadows. Did I miss something?

[@VisualTechArt]

No I just added them for the video :)

[@UpsideYonder]

can this be done with out custom node? asking for a friend.

[@VisualTechArt]

In the part 1 video you have your answer :D

[@UpsideYonder]

​@@VisualTechArt hah thanks.

[@namondastudio4616]

so... not working in UE5 ? i want to buy it, thanks !

[@VisualTechArt]

? What do you mean? I've done it in UE5 :D