Note for 5.4 users doing this now - the post process material at the time of this video was supposed to be set to Before the Tonemapper, however this option was removed in favor of several new ones. Using Scene Color After DOF produces visually similar result.
2 videos in and you became my favorite technical art channel ever. The video has depth, explains terms clearly, leads us through the logic and process. You are killing it, thanks for the tutorial!
I know it’s been two years but I just wanted to say that you’ve done an amazing job with the explanations here. I’m more of a programmer than an artist so the programming side of things came a bit more naturally to me. In spite of that though, you introduced the topic in such an engaging and informative manner that regardless of your viewers personal strengths, you are able to reach all of us equally. That’s the sign of a great teacher. Amazing work!
This video is amazing, not only it offer a better way of making outlines than any other video, it explain it a lot clearer and it breakdown HLSL code, which a lot of people aren't familiar with, by comparing it with the unreal node system, which a lot of people a familiar with. This is gold on so many level. The only feedback i could give is in the lack of easily accessible keyword in your description or title, I don't fully know how youtube work on the uploader side, but many who want to find a tutorial on this subject whould probably search "outline","toon shader", "cartoon line","line art", etc... your work is too good to not be accessible by everyone.
Thanks for the feedback, I appreciate it a lot! :D And you're actually super right about the "searchability"... With all the things to think about to make a video I often forget about the basics ahahaha gonna fix that
@@VisualTechArt I agree with that, you should also put tags like "convolution" or stuff like this... this is a nice practical application and great visual explanation
My mom has been telling me to learn how to code for years, I was sure that it was a waste of ti,e and energy, amd also that I would have to get a degree in computer science to be able to understand what I am doing. You some how proved my mom right and not make me mad in the process, LOL Thank you so much for holding my hand while navegating the most shallow (but still scary) waters of coding.
If it can comfort you, I studied at the academy of fine arts, all the programming stuff is self taught xD I think the most important thing is to find an area of application that drives your interest and will to learn, like for me it has been creative coding and generative design ages ago :) And yeah, the key is also to find someone that is able to explain things in a way that resonates with you personally, for me it was Daniel Shiffman with his books :)
I thought you were a Robot or such kind of AI. But you are a real man and this is even your voice. Anyway thank you very much for the videos! You are doing great things.
By far this is one of the best tutorials and explanations of a 3D concept I have ever seen. This was a ton of work I bet. I also appreciated the humour, 13:00 had me laughing! Fantastic, subscribed!
Nice! I also changed it a little bit to get me a wider outline that's also inside the mesh (not just outside), made that white, and then used a dot product of the inverted sun light vector and the world normal to create a mask, multiplied by fresnel, and now the outlines are rim lights too :) that I added on top of my scene colour. Also you can make the Kernel size exposed, and UE5 lets you expose more than one output with the additional outputs option but I left that as is.
Hi!@@VisualTechArt It's in a video here: ua-cam.com/video/E7agD1iU-Hs/v-deo.html I also made it dependant on the roughness of the material and on time of day - to not get bright outlines at night :D
@@azzytheangel5494 i.imgur.com/n4HTvYH.png this is what I did, you can see it here ua-cam.com/video/uzSppNMkOic/v-deo.html There's probably a cleaner way of doing it, but I just made the effect wider and changed one - to a + in the custom node so that it went into the model, I masked it with fresnel so it doesn't stick out of the model - there's probably a way to skip that by modifying the code but I couldn't figure it out. I also made the effect smaller during night so it doesn't stick out like a sore thumb ;P, and it's based on the material roughness so there's more of it on shiny objects. I also made it dependant on the light direction so that it only shows up when you look in the direction of the sun.
Love the quality and the thinking behind your work. - In Unreal custom node you are indeed able to output more informations than the one single return, instead of packing your return to a (float3, float) in the custom node, you can add output pin (as you can add input pin), just give it a name, then in the hlsl code you use that name. For instance in the custom node add output, give name OutNormal, in the hlsl code towards the end, you just write OutNormal = LaplacianNormal / CenterWeigth; - Also looping in the gpu is never considered a good idea, if statements also are a bad idea. Since you are directly writing in hlsl code, the compiler will literally copy and paste your hlsl code, without optimizing for the compilation part (usually the compiler knows better then us). The matrix loop can be optimized heavily by not making it if checking every iteration of the nested loop. The center of your kernel is always 0,0 you can check it outside the loop and make the loop iterating by dodging the center. Hope these information can be useful, love you works. Edit: literally just saw 1.5 hahaha mb
Yes, I didn't add multiple outputs for compatibility with older versions :) The for loop is pasted in the hlsl translation of the nodes, but then the compiler decides what to do with it, that's one of the reasons to use an hard coded kernel size, for example: by knowing exactly the amount of iterations, and if they're not too many, the compiler will most likely unroll the loop :) Same with ifs, it's up to it to decide if it's better to branch or create a ternary operation and so on. Unless you specifically tell it to do a certain thing, even though from what I understood it can still ignore you xD
@@VisualTechArtI just pointed that out because at a point you said that you can only return one variable. In the CPU programming this add output is the corrispettive of “out” arguments of a function. float Func(out x).
Рік тому
Che qualità, ragazzi! Complimenti davvero. Non mi occupo direttamente di queste cose ma di compositing, nel quale alcune info possono tornare utili, però mi piace parecchio vedere "under the hood" come funzionano queste cose.
Grazie! :D penso che anche nel compositing la possibilità di utilizzare dei kernel personalizzati volendo si hanno (ad esempio li ho visti in DaVinci Resolve), per cui di sicuro è roba che puoi portarti dietro!
Рік тому
@@VisualTechArt Assolutamente si! In nuke si usano per parecchie cose (un po' avanzate), trasformazioni/distorsioni, operazioni sui colori, defocus/bokeh ecc. Grazie :)
I've made the material using both methods (simple paste and HLSL custom node). When I apply the material I get only the colored effect shown at 3:33. Please advise. Thanks!
Awesome, very in depth stuff! I just downloaded UE yesterday, so I'm jumping in the deep end a bit. I'm up to the 5:15 mark, but I'm having the jittering issue that others have mentioned. It looks like in 5.4 there's no longer an option to blend it before tonemapping. Is there any advice you could offer to get around that, or should I just use an earlier version of the engine?
@@VisualTechArt Great, thanks! I tried that and it looked different so I wasn't sure if that would mess with the math. But once I finished up everything it looked great (after turning off motion blur)! Awesome! Now experimenting with your implementation in the physical based cel shading video. I skipped to the part where you modify the outline, and was able to get the basic ones working using SceneDepth. Got the final one working by iteself, but just not sure how to combine it with the colour of the scene as it's not just multiplying the colours like the others. I should be able to figure that out after building the cel shader.
Im getting this error: [SM6] Function BreakOutFloat4Components: Cannot cast from smaller type float3 to larger type float4. Unreal isnt reading the A channel of the custom node 4 some reason. did i miss a silly step? Never mind i had it on CMOT float 3 instead of 4
Do I need to find a way of adding the additional nodes shown at 22:20 ? …or should the node I purchased work out of the box? Anyone out there who can answer? Thanks.
The node does the kernel for you, after it you still have to decide how to interpret that data :) if you want to replicate this outline just copy what comes afterwards in my video!
@@VisualTechArt Thanks for your reply. I've done my best to reproduce those nodes - based on my screenshot of the configuration - but failed. It's probably difficult for you to understand how anyone can be so ignorant, but if you could offer a little more detailed guidance that would be enormously appreciated. Thanks.
Hi Visual Tech, I am trying to create the TexelSize node using the TextureProperty node and even I already set the dropdown menu to TexelSize, but the node doesn´t look like in your tutorial, it is asking for a texture as an input, is there any step I am missing?
What Hugo is saying is that Texel Size node doesn't take input from the Scene Texel Size node, even after changing the Texture Property. Therefore, your example doesn't actually work quite as shown. Many of the other comments have the same problem, so perhaps it's an issue after Unreal 5 has updated.@@VisualTechArt Perhaps just replace Texel Size with SceneTexelSize.
@@moonshot3159 Thank you so much. For anyone who doesn't already know, to make a reroute named node you first pull the wire from SceneTexelSize and type AddNamedRerouteDeclarationNode. After that, you can name it whatever you want. He choose Texel Size. You can now find it when you search for its name and use it like a Local Variable.
This is super helpful, but is it possible to go without the for loop by using matrix math directly? I'm not familiar with what you can do in HLSL but back when I did a lot of biological stats in another code language my mentor always pushed me to drop my loops as I could do things in one pass instead of many and it saved a ton of processing time at the expense of making it a little more difficult for me who tends to think in loops. It really paid off though. Back then I was working with a lot of maps and landscape stuff but the structure was the same. I think you'd need 8 iterations that way instead of however many runs that loop currently takes. Am I missing something? It's ok if I am I always like to learn.
Edit: no relation with the loops or not, you still have to do Matrix mul somehow so always loops you can express convolution as a Matrix multiplication using the Toeplitz Matrix (I let you Google it 😅). This involves however building a matrix larger than the original filter (with a lot of 0).
In that case actually it would be pretty simple because you can just flatten the filter to a vector (k1, ...... , k_n) and the pixels too (x1, ..... , x_n) (n=9 for a 3x3 filter) and do the dot product. But it can be annoying to extend to all the channels, and in particular the drawback that I see is that you would be forced to hardcode the lookups again (to write down explicitly the pixel vector and the kernel vector), so you loose the simplicity and flexibility of the code. I was looking for good references but i think just to get an idea of what it means in this simple case (where we just want to compute the result for the convolution of a kernel with an image window of the same size, to get a single output value, the pixel value after convolution) you can look at slide 5 in www.eng.biu.ac.il/temanad/files/2020/04/Part-3-Computing-Convolutions.pdf and you'll see immediately that you get the same result. For more general cases if you are interested look around in the internet there are a lot of examples (some are clear and some are not)
Hi, I tried to reproduce your shader and I couldn't make it to work. It gave me a full black result so I guess I mess somewhere. The LaplancianFilter_Normal give me a good result, but I was wondering if it is normal that my LaplacianFilter_Depth always return me 1. When I preview at the Mask(A) I get a full white result, so at the end the max node is also gonna give a full white result and the 1-x is turning my result into a full black image. The material is set to post processing, the blending location to Scene Color After DOF ( beceause I'm doing this with unreal 5.4). Any idea ? I'm a beginner in shader graph, not in coding. I wanted to make your shader work in order to test with other matrix.
When creating material for android we cannot sample the world normals. Is there any alternative to create an effect like this (obviously it will probably be less good looking) without the use of the normals?
Hi! great tutorial! quick question, I'm trying to call the function "SceneColor()" from inside a custom node, but the "undeclared identifier" warning appears, same as in this video with "SceneTextureLookup". The thing is, connecting either SceneTexture of SceneColor to the custom node does not fix it in that case, do you have any idea what node I would need to connect to the custom in order to fix this?
@VisualTechArt yes I did, the same happened when trying to use "SceneDepth()" in the custom node. I ended up having to use "DecodeSceneColorForMaterialNode()" for the color and "SceneTextureLookup()" for depth, both of them require unused node inputs, but at least they work.
For example I have an object, on which I want to assign my PBR textures and black outline from your tutorial. Will I be able to do so after finishing your tutorials?
Hi I'm stuck searching for the "Texel Size" node right at the beginning of the video any idea how to make it or where I can find it? Thanks to anyone who helps in advance.
@@VisualTechArt I cannot find that either. I did find Texture properties which can be selected for Texel Size, however it requires an incompatible input.
Hi, Thanks so much for the tutorial! on my code I am getting an error in engine that says "error: too many elements in vector initialization (expected 4 elements, have 6) return float4(LaplacianFilter_Normal, LaplacianFilter_Depth);" do you know where I could be going wrong? Thanks again!
You're probably trying to append a float3 to another float3 I'd say, which makes me think you defined the Depth one as float3, while it should be just a float? :)
Hi, I just purchased the Outline Filter for Post Process Material. Since I'm not very experienced with materials could you explain how to only get outlines without the white background. This way I have the outlines only with the colored scene. THX!
That was a well done video! I have a question though. I bought the latest shader and pasted the clipboard code into UE4, but for some reason the lines don't seem nearly as clean as yours. Some lines are even way too thick while others are very thin. Doubt this problem is because of your code because it happens when i copy other outline tutorials as well. I just wanted to know if you probably have any ideas as to why that happens? Thanks!
@@VisualTechArt thanks for the quick reply! Setting the material to Before Tonemapping fixes the line shaking issues I had. The thick outlines seem to be a zooming/scaling issue. The further my player/enemies are from the camera, the thicker the outlines become. Is there any way to tweak the values associated with this?
@@VisualTechArt It's just camera distance. Up the outlines appear just as yours do, but when the camera zooms out (my Camera Boom component has a target arm length of 1400) the outlines look like thick black borders around objects. So no clue lol Edit: I figured out my problem. After re-watching this video, I somehow missed that you show us how to adjust the line width in the code. I just needed to adjust the Kernel Size to 5.0 to support the zoom. Thanks for your help and again great content! Subscribed!
I bought the code but could not use it! the explanations are very vague for beginners, I cannot find where to place that code. Please try to be mindful of that! I loved the effect but just could not apply it.
Hey y’all I’m in the same boat here. Unreal Beginner (to be honest the technical coding ability is completely over my head haha). I bought the outliner code from gumroad. Are you able to state how you got the outlines to work ? I pasted gumroad code in a new material and plugged into emissive, selected post process. Then added new infinite extents post process to the level and put it in the material. What am I missing ? Any other settings ?
@@VisualTechArt And thanks for answering :) But the texture property only accepts a texture object as input. I can't plug the SceneTexelSize in, it says "Float is not compatible with Texture" EDIT: Found the solution, it's actually a named reroute node that has been used ;)
How can this be used so there's no white background but rather have it use the colors of the scene would be nice to be able to use this outlines on my stylized colored scenes.
@@VisualTechArt struggling with this kind of multiply, unreal says scene color node cant be used inside postprocess materials, only for surface material domain. What am i doing wrong?
Well for me it's a combination of experiences gathered through the years :) But on this specific topic you can start by taking this as a base and try to see what happens on the image when you input different weights on the kernel, look around for 3x3 filters and study image processing in general!
I intend to buy it and use it But I don't know how it applies to my project If possible, could you record a video for us to use in our own projects? Thank you so much! It means a lot to me
Hi. Thanks a lot for the amazing and clear tutorial. Sadly I fail to make the Laplacian Filter works. First I tried it in 5.4.1, then in 5.3.2 (to have the Before Tonemapping switch available), but in both I keep getting the following errors, even after naming the input and connecting the SceneTexture node set as PostPorcessInput0: [SM6] SceneTextureLookup [SM6] /Engine/Generated/Material.ush:3362:27: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'? LaplacianFilter_Normal += SceneTextureLookUp(KernelUVs, 8, false).rgb * CenterWeight; ^~~~~~~~~~~~~~~~~~ [SM6] /Engine/Generated/Material.ush:3363:26: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'? LaplacianFilter_Depth += SceneTextureLookUp(KernelUVs, 1, false).r * CenterWeight; ^~~~~~~~~~~~~~~~~~ [SM6] /Engine/Generated/Material.ush:3358:26: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'? LaplacianFilter_Depth -= SceneTextureLookUp(PixelUVs, 1, false).r; ^~~~~~~~~~~~~~~~~~ [SM6] /Engine/Generated/Material.ush:3031:8: note: 'SceneTextureLookup' declared here float4 SceneTextureLookup(float2 UV, int SceneTextureIndex, bool bFiltered) ^ [SM6] SceneTextureLookup [SM6] /Engine/Generated/Material.ush:3357:27: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'? LaplacianFilter_Normal -= SceneTextureLookUp(PixelUVs, 8, false).rgb; ^~~~~~~~~~~~~~~~~~ Thanks for any orientation you may give me. First time trying code in Custom node. All the best.
Hey, I still have to switch to 5.4, maybe they changed the naming of some stuff, that's what it looks like in the errors you copied at least... Have you tried doing what the error is suggesting you? (Change from SceneTextureLookUp to SceneTextureLookup)
@@VisualTechArt LOL. I hadn't noticed the capitalized "U". I was wondering why they say that I have to change the same expression for itself... The message is gone now. Thanks a lot and sorry for the silly question. Best regards.
![This is NOT a Sphere! - A brief Ray-Casting overview for gamedev [UE5, UE4]](http://i.ytimg.com/vi/57ujNmJBWSE/mqdefault.jpg)
![This is NOT a Sphere! - A brief Ray-Casting overview for gamedev [UE5, UE4]](/img/tr.png)
![Cross-Hatching material Post Process [UE5, valid for UE4]](http://i.ytimg.com/vi/3Q6Ik1V75I8/mqdefault.jpg)
Nice one tricking artists into a programming video :D
Ahahahaha ;)
Say no more. I subbed because this teaches more about the intricacies of how rendering light works than any expensive course at college 👀
Note for 5.4 users doing this now - the post process material at the time of this video was supposed to be set to Before the Tonemapper, however this option was removed in favor of several new ones. Using Scene Color After DOF produces visually similar result.
2 videos in and you became my favorite technical art channel ever. The video has depth, explains terms clearly, leads us through the logic and process. You are killing it, thanks for the tutorial!
I know it’s been two years but I just wanted to say that you’ve done an amazing job with the explanations here. I’m more of a programmer than an artist so the programming side of things came a bit more naturally to me. In spite of that though, you introduced the topic in such an engaging and informative manner that regardless of your viewers personal strengths, you are able to reach all of us equally. That’s the sign of a great teacher. Amazing work!
Thanks! :D
This video is amazing, not only it offer a better way of making outlines than any other video, it explain it a lot clearer and it breakdown HLSL code, which a lot of people aren't familiar with, by comparing it with the unreal node system, which a lot of people a familiar with. This is gold on so many level.
The only feedback i could give is in the lack of easily accessible keyword in your description or title, I don't fully know how youtube work on the uploader side, but many who want to find a tutorial on this subject whould probably search "outline","toon shader", "cartoon line","line art", etc... your work is too good to not be accessible by everyone.
Thanks for the feedback, I appreciate it a lot! :D And you're actually super right about the "searchability"... With all the things to think about to make a video I often forget about the basics ahahaha gonna fix that
@@VisualTechArt I agree with that, you should also put tags like "convolution" or stuff like this... this is a nice practical application and great visual explanation
My mom has been telling me to learn how to code for years, I was sure that it was a waste of ti,e and energy, amd also that I would have to get a degree in computer science to be able to understand what I am doing.
You some how proved my mom right and not make me mad in the process, LOL
Thank you so much for holding my hand while navegating the most shallow (but still scary) waters of coding.
If it can comfort you, I studied at the academy of fine arts, all the programming stuff is self taught xD
I think the most important thing is to find an area of application that drives your interest and will to learn, like for me it has been creative coding and generative design ages ago :)
And yeah, the key is also to find someone that is able to explain things in a way that resonates with you personally, for me it was Daniel Shiffman with his books :)
I thought you were a Robot or such kind of AI. But you are a real man and this is even your voice.
Anyway thank you very much for the videos! You are doing great things.
Thanks, I suppose xD
As always, fantastic video! Nice work dude
@@VisualTechArt Great stuff! I miss you guys! 😄
@@VisualTechArt is it possible to just use the custom depth or not?
Jesus christ man. This feels like youtube premium. I will single handedly give you props if I get a job around this.
By far this is one of the best tutorials and explanations of a 3D concept I have ever seen. This was a ton of work I bet. I also appreciated the humour, 13:00 had me laughing! Fantastic, subscribed!
Cheers! :D
I couldn't have put it better myself
Incredibly well done video. Very thorough and well explained! Look forward to seeing what you offer up in the follow up.
failed at this for days i now trust you with my life
My new favorite channel fr
this was such a great explanation. i came to get a quick post process shader graph and i left an improved person
tremendous depth of learning here and a truly artistic outcome, bravo
Nice! I also changed it a little bit to get me a wider outline that's also inside the mesh (not just outside), made that white, and then used a dot product of the inverted sun light vector and the world normal to create a mask, multiplied by fresnel, and now the outlines are rim lights too :) that I added on top of my scene colour. Also you can make the Kernel size exposed, and UE5 lets you expose more than one output with the additional outputs option but I left that as is.
Oooh that rim light thing is interesting! If you want you can showcase it on my Discord, I'd be curious to see how it looks :)
Hi!@@VisualTechArt It's in a video here: ua-cam.com/video/E7agD1iU-Hs/v-deo.html I also made it dependant on the roughness of the material and on time of day - to not get bright outlines at night :D
@@JoanVetulani I'm really curious how you made the rim lights, would you mind sharing your setup??
@@azzytheangel5494 i.imgur.com/n4HTvYH.png this is what I did, you can see it here ua-cam.com/video/uzSppNMkOic/v-deo.html
There's probably a cleaner way of doing it, but I just made the effect wider and changed one - to a + in the custom node so that it went into the model, I masked it with fresnel so it doesn't stick out of the model - there's probably a way to skip that by modifying the code but I couldn't figure it out. I also made the effect smaller during night so it doesn't stick out like a sore thumb ;P, and it's based on the material roughness so there's more of it on shiny objects. I also made it dependant on the light direction so that it only shows up when you look in the direction of the sun.
@@azzytheangel5494 I wrote a reply but it disappeared ;D here's the node setup: i.imgur.com/n4HTvYH.png
Amazing!! Can't wait for part 2 🙌🏻
Love the quality and the thinking behind your work.
- In Unreal custom node you are indeed able to output more informations than the one single return, instead of packing your return to a (float3, float) in the custom node, you can add output pin (as you can add input pin), just give it a name, then in the hlsl code you use that name.
For instance in the custom node add output, give name OutNormal, in the hlsl code towards the end, you just write OutNormal = LaplacianNormal / CenterWeigth;
- Also looping in the gpu is never considered a good idea, if statements also are a bad idea.
Since you are directly writing in hlsl code, the compiler will literally copy and paste your hlsl code, without optimizing for the compilation part (usually the compiler knows better then us).
The matrix loop can be optimized heavily by not making it if checking every iteration of the nested loop. The center of your kernel is always 0,0 you can check it outside the loop and make the loop iterating by dodging the center.
Hope these information can be useful, love you works.
Edit:
literally just saw 1.5 hahaha mb
Yes, I didn't add multiple outputs for compatibility with older versions :)
The for loop is pasted in the hlsl translation of the nodes, but then the compiler decides what to do with it, that's one of the reasons to use an hard coded kernel size, for example: by knowing exactly the amount of iterations, and if they're not too many, the compiler will most likely unroll the loop :)
Same with ifs, it's up to it to decide if it's better to branch or create a ternary operation and so on.
Unless you specifically tell it to do a certain thing, even though from what I understood it can still ignore you xD
@@VisualTechArtI just pointed that out because at a point you said that you can only return one variable. In the CPU programming this add output is the corrispettive of “out” arguments of a function. float Func(out x).
Che qualità, ragazzi! Complimenti davvero. Non mi occupo direttamente di queste cose ma di compositing, nel quale alcune info possono tornare utili, però mi piace parecchio vedere "under the hood" come funzionano queste cose.
Grazie! :D penso che anche nel compositing la possibilità di utilizzare dei kernel personalizzati volendo si hanno (ad esempio li ho visti in DaVinci Resolve), per cui di sicuro è roba che puoi portarti dietro!
@@VisualTechArt Assolutamente si! In nuke si usano per parecchie cose (un po' avanzate), trasformazioni/distorsioni, operazioni sui colori, defocus/bokeh ecc. Grazie :)
fantastic video. really excited for part two
Great video as always... and I absolutely loved the classical soundtrack as background of nodes proliferation :D MORE OF THIS
I've made the material using both methods (simple paste and HLSL custom node). When I apply the material I get only the colored effect shown at 3:33. Please advise. Thanks!
Just found your channel and loving it.♥
holy shiet.. watching this hurt my soul.. but i feel happier.. thank you xD
Awesome, very in depth stuff! I just downloaded UE yesterday, so I'm jumping in the deep end a bit.
I'm up to the 5:15 mark, but I'm having the jittering issue that others have mentioned. It looks like in 5.4 there's no longer an option to blend it before tonemapping.
Is there any advice you could offer to get around that, or should I just use an earlier version of the engine?
Set it to SceneColorAfterDOF :)
@@VisualTechArt Great, thanks! I tried that and it looked different so I wasn't sure if that would mess with the math. But once I finished up everything it looked great (after turning off motion blur)! Awesome!
Now experimenting with your implementation in the physical based cel shading video. I skipped to the part where you modify the outline, and was able to get the basic ones working using SceneDepth. Got the final one working by iteself, but just not sure how to combine it with the colour of the scene as it's not just multiplying the colours like the others.
I should be able to figure that out after building the cel shader.
Im getting this error: [SM6] Function BreakOutFloat4Components: Cannot cast from smaller type float3 to larger type float4.
Unreal isnt reading the A channel of the custom node 4 some reason. did i miss a silly step?
Never mind i had it on CMOT float 3 instead of 4
Fantastic Art. I love your presentation. 🦋🌻Melinda
Great Video, very nice explanation!
I never used the cutsom node, didnt know you can put code in there
I was missing my for loops
thank you for the great video
It's a bit limited but it can be quite helpful indeed!
Do I need to find a way of adding the additional nodes shown at 22:20 ? …or should the node I purchased work out of the box? Anyone out there who can answer? Thanks.
The node does the kernel for you, after it you still have to decide how to interpret that data :) if you want to replicate this outline just copy what comes afterwards in my video!
@@VisualTechArt Thanks for your reply. I've done my best to reproduce those nodes - based on my screenshot of the configuration - but failed. It's probably difficult for you to understand how anyone can be so ignorant, but if you could offer a little more detailed guidance that would be enormously appreciated. Thanks.
@@curvingorbit8262 Don't worry at all! If you can join my Discord and start a thread there I can maybe help you better :)
@@VisualTechArt I did already post my questions on Discord, but got no reply.
@@curvingorbit8262 I may have missed it, I've been off past week
Thanks for the tutorial!
Awesome video, thanks!
You are insane! Thank you!
Hi Visual Tech, I am trying to create the TexelSize node using the TextureProperty node and even I already set the dropdown menu to TexelSize, but the node doesn´t look like in your tutorial, it is asking for a texture as an input, is there any step I am missing?
If you want the screen size you need the ViewSize or ViewProperty node :)
What Hugo is saying is that Texel Size node doesn't take input from the Scene Texel Size node, even after changing the Texture Property. Therefore, your example doesn't actually work quite as shown. Many of the other comments have the same problem, so perhaps it's an issue after Unreal 5 has updated.@@VisualTechArt Perhaps just replace Texel Size with SceneTexelSize.
@@BenjaminReinhart actually that node is just a reroute node named "TexelSize"
@@moonshot3159 Thank you so much. For anyone who doesn't already know, to make a reroute named node you first pull the wire from SceneTexelSize and type AddNamedRerouteDeclarationNode. After that, you can name it whatever you want. He choose Texel Size. You can now find it when you search for its name and use it like a Local Variable.
fantastic tutorial ! thank u so much !!!!!!!!!!!
This is super helpful, but is it possible to go without the for loop by using matrix math directly? I'm not familiar with what you can do in HLSL but back when I did a lot of biological stats in another code language my mentor always pushed me to drop my loops as I could do things in one pass instead of many and it saved a ton of processing time at the expense of making it a little more difficult for me who tends to think in loops. It really paid off though. Back then I was working with a lot of maps and landscape stuff but the structure was the same. I think you'd need 8 iterations that way instead of however many runs that loop currently takes. Am I missing something? It's ok if I am I always like to learn.
Edit: no relation with the loops or not, you still have to do Matrix mul somehow so always loops
you can express convolution as a Matrix multiplication using the Toeplitz Matrix (I let you Google it 😅). This involves however building a matrix larger than the original filter (with a lot of 0).
In that case actually it would be pretty simple because you can just flatten the filter to a vector (k1, ...... , k_n) and the pixels too (x1, ..... , x_n) (n=9 for a 3x3 filter) and do the dot product. But it can be annoying to extend to all the channels, and in particular the drawback that I see is that you would be forced to hardcode the lookups again (to write down explicitly the pixel vector and the kernel vector), so you loose the simplicity and flexibility of the code. I was looking for good references but i think just to get an idea of what it means in this simple case (where we just want to compute the result for the convolution of a kernel with an image window of the same size, to get a single output value, the pixel value after convolution) you can look at slide 5 in www.eng.biu.ac.il/temanad/files/2020/04/Part-3-Computing-Convolutions.pdf and you'll see immediately that you get the same result. For more general cases if you are interested look around in the internet there are a lot of examples (some are clear and some are not)
Hi,
I tried to reproduce your shader and I couldn't make it to work. It gave me a full black result so I guess I mess somewhere. The LaplancianFilter_Normal give me a good result, but I was wondering if it is normal that my LaplacianFilter_Depth always return me 1.
When I preview at the Mask(A) I get a full white result, so at the end the max node is also gonna give a full white result and the 1-x is turning my result into a full black image.
The material is set to post processing, the blending location to Scene Color After DOF ( beceause I'm doing this with unreal 5.4).
Any idea ? I'm a beginner in shader graph, not in coding. I wanted to make your shader work in order to test with other matrix.
Kinda hard to tell from here, be sure to double check your code is correct and you add all the required thresholding after the custom node :)
I need to get rid of jagged edges and smooth them out. I hope there is tutorial on that somewhere on the internet.
Set the material to run before tone mapper :)
Perfetto 🤌🤌 Grazzie mille
When creating material for android we cannot sample the world normals. Is there any alternative to create an effect like this (obviously it will probably be less good looking) without the use of the normals?
Well the Depth buffer is still available, isn't it? I think you can try with just that :)
Hi! great tutorial! quick question, I'm trying to call the function "SceneColor()" from inside a custom node, but the "undeclared identifier" warning appears, same as in this video with "SceneTextureLookup".
The thing is, connecting either SceneTexture of SceneColor to the custom node does not fix it in that case, do you have any idea what node I would need to connect to the custom in order to fix this?
Did you give a name to the Custom Node input where you're plugging in the SceneTexture node?
@VisualTechArt yes I did, the same happened when trying to use "SceneDepth()" in the custom node. I ended up having to use "DecodeSceneColorForMaterialNode()" for the color and "SceneTextureLookup()" for depth, both of them require unused node inputs, but at least they work.
GREAT VIDEO!
Will I be able to put materials on objects after finishing this tutorial?
What do you mean?
For example I have an object, on which I want to assign my PBR textures and black outline from your tutorial. Will I be able to do so after finishing your tutorials?
Because from your videos all I can see is only outline on white empty objects, but I want to apply your method on my prop with textures
Just multiply the final result on the SceneTexture:PostProcessInput0 :)
Ok, I will try. Anyway, tutorial is amazing! Thank you so much!!
I dont know why but its giving me an error about the float2, I did the same code you did in the video so I dont understand why
Can't help you with this little info :)
Try to read the error, most of the time it's written a bit funny but then you can interpret its meaning
Hi I'm stuck searching for the "Texel Size" node right at the beginning of the video any idea how to make it or where I can find it? Thanks to anyone who helps in advance.
It's the Texture Size, you can change it to output texel in the drop down menu
@@VisualTechArt Found it, but it cannot take in the 'SceneTexelSize' output node. It requires a texture input 8(. Any further advice?
@@VisualTechArt I cannot find that either. I did find Texture properties which can be selected for Texel Size, however it requires an incompatible input.
fellas this @@VisualTechArt is just trolling y'all. That texel size node is just a reroute node named "Texel Size".
Hi, Thanks so much for the tutorial! on my code I am getting an error in engine that says "error: too many elements in vector initialization (expected 4 elements, have 6)
return float4(LaplacianFilter_Normal, LaplacianFilter_Depth);" do you know where I could be going wrong? Thanks again!
You're probably trying to append a float3 to another float3 I'd say, which makes me think you defined the Depth one as float3, while it should be just a float? :)
That's exactly what I did! thanks so much for the help!@@VisualTechArt
Hi, I just purchased the Outline Filter for Post Process Material. Since I'm not very experienced with materials could you explain how to only get outlines without the white background. This way I have the outlines only with the colored scene. THX!
Just multiply them on your scene :)
What is the editor you are using to write the code for the custom node? As far as I can find, Unreal does not have an internal code editor.
I'm just using Notepad++
How do you get rid of the jittering? My outline is also very aliased.
Run it before the tonemapper :)
Awesome video! How do i get the node with the x and y inputs? Oh, and also the one with the "value [0]"
I didn't understand to be honest hahaha can you explain better what you need?
That was a well done video! I have a question though. I bought the latest shader and pasted the clipboard code into UE4, but for some reason the lines don't seem nearly as clean as yours. Some lines are even way too thick while others are very thin. Doubt this problem is because of your code because it happens when i copy other outline tutorials as well. I just wanted to know if you probably have any ideas as to why that happens? Thanks!
Check if they look ok when the viewport is full screen, sometimes it messes up :) also check your material is set to Before Tonemapping
@@VisualTechArt thanks for the quick reply! Setting the material to Before Tonemapping fixes the line shaking issues I had. The thick outlines seem to be a zooming/scaling issue. The further my player/enemies are from the camera, the thicker the outlines become. Is there any way to tweak the values associated with this?
Well in that case it's not the outline getting thicker, are your objects getting smaller xD
The filter covers always the same amount of pixels
@@VisualTechArt It's just camera distance. Up the outlines appear just as yours do, but when the camera zooms out (my Camera Boom component has a target arm length of 1400) the outlines look like thick black borders around objects. So no clue lol
Edit: I figured out my problem. After re-watching this video, I somehow missed that you show us how to adjust the line width in the code. I just needed to adjust the Kernel Size to 5.0 to support the zoom. Thanks for your help and again great content! Subscribed!
I bought the code but could not use it! the explanations are very vague for beginners, I cannot find where to place that code. Please try to be mindful of that! I loved the effect but just could not apply it.
No worries, we can sort it out :)
You can start by trying to copy what you see in the video!
@@VisualTechArt actually was very easy after I discovered hehe, thanks!
Hey y’all
I’m in the same boat here. Unreal Beginner (to be honest the technical coding ability is completely over my head haha).
I bought the outliner code from gumroad. Are you able to state how you got the outlines to work ?
I pasted gumroad code in a new material and plugged into emissive, selected post process. Then added new infinite extents post process to the level and put it in the material.
What am I missing ? Any other settings ?
uh i get an error with the A mask component, it says " [SM6] (Node ComponentMask) Not enough components in (Local1: float3) for component mask 0001"
Set the Custom Node output to Float 4
How Do i create the "Texel Size" node that is connected to the SceneTexelSize node? Great Tutorial btw
Texture Property is the node :)
@@VisualTechArt got it. I managed to recreate it up to the point where you start coding your custom node. Thank you so much for the tutorial
@@VisualTechArt Texel Size no longer accepts Scene Texel Size as an input. Do you know what the Fix action is?
@@kyuuketsukikun420 I am also having this issue, read a post where he mentioned converting to vector4 to 3 but still cant get it to work
amazing
My outline is really pixelated on the edges, how did you make it so smooth? Is there some antianalsing?
Set the post process to Before Tonemapping :)
@@VisualTechArt Now works nicely! Thanks
if i only follow the code will it work? i am very new to this pls help!!
It should, yes :)
how do you get the texel size node?
Texture Property :)
Thanks for asking this question!
@@VisualTechArt And thanks for answering :) But the texture property only accepts a texture object as input. I can't plug the SceneTexelSize in, it says "Float is not compatible with Texture"
EDIT: Found the solution, it's actually a named reroute node that has been used ;)
How can this be used so there's no white background but rather have it use the colors of the scene would be nice to be able to use this outlines on my stylized colored scenes.
Multiply the shader results on the scene colour :)
@@VisualTechArt struggling with this kind of multiply, unreal says scene color node cant be used inside postprocess materials, only for surface material domain. What am i doing wrong?
how do you even learn this stuff? like, you need a very good understanding of this for making this shader by yourself. any resource on that?
Well for me it's a combination of experiences gathered through the years :)
But on this specific topic you can start by taking this as a base and try to see what happens on the image when you input different weights on the kernel, look around for 3x3 filters and study image processing in general!
Wow! this material can use color?
Yes, you can multiply it on top :)
@@VisualTechArt you are genius
where to bring money ?? that's gorgeous
On my Patreon if you wish :D
I intend to buy it and use it
But I don't know how it applies to my project
If possible, could you record a video for us to use in our own projects? Thank you so much! It means a lot to me
Not sure what you mean, if you buy it you get the custom node to use in your Post Process Material
@@VisualTechArt I mean how to use this plugin, I don't know how to use it yet, I'm new to ue
When part2?
Don't have a date yet :)
Is it possible to download the material
There's a link in the description ;)
subscribed!
i doodoo poopoo my pant 8)
Hi. Thanks a lot for the amazing and clear tutorial. Sadly I fail to make the Laplacian Filter works. First I tried it in 5.4.1, then in 5.3.2 (to have the Before Tonemapping switch available), but in both I keep getting the following errors, even after naming the input and connecting the SceneTexture node set as PostPorcessInput0:
[SM6] SceneTextureLookup
[SM6] /Engine/Generated/Material.ush:3362:27: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'?
LaplacianFilter_Normal += SceneTextureLookUp(KernelUVs, 8, false).rgb * CenterWeight;
^~~~~~~~~~~~~~~~~~
[SM6] /Engine/Generated/Material.ush:3363:26: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'?
LaplacianFilter_Depth += SceneTextureLookUp(KernelUVs, 1, false).r * CenterWeight;
^~~~~~~~~~~~~~~~~~
[SM6] /Engine/Generated/Material.ush:3358:26: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'?
LaplacianFilter_Depth -= SceneTextureLookUp(PixelUVs, 1, false).r;
^~~~~~~~~~~~~~~~~~
[SM6] /Engine/Generated/Material.ush:3031:8: note: 'SceneTextureLookup' declared here
float4 SceneTextureLookup(float2 UV, int SceneTextureIndex, bool bFiltered)
^
[SM6] SceneTextureLookup
[SM6] /Engine/Generated/Material.ush:3357:27: error: use of undeclared identifier 'SceneTextureLookUp'; did you mean 'SceneTextureLookup'?
LaplacianFilter_Normal -= SceneTextureLookUp(PixelUVs, 8, false).rgb;
^~~~~~~~~~~~~~~~~~
Thanks for any orientation you may give me. First time trying code in Custom node.
All the best.
Hey, I still have to switch to 5.4, maybe they changed the naming of some stuff, that's what it looks like in the errors you copied at least...
Have you tried doing what the error is suggesting you? (Change from SceneTextureLookUp to SceneTextureLookup)
@@VisualTechArt LOL. I hadn't noticed the capitalized "U". I was wondering why they say that I have to change the same expression for itself... The message is gone now. Thanks a lot and sorry for the silly question. Best regards.