Outline Stylized Material - part 1 [UE5, valid for UE4]
Vložit
- čas přidán 18. 12. 2022
- This is the first video of a series I want to make about transforming 3D renders in "hand-drawn" images.
It's a topic that always fascinated me quite a lot and I had the opportunity to work quite intensively on in the past year.
Here we go through the "standard practice" for making an outline art stylized Post Process Material. A perfect match for a Studio Ghibli, Toon or Cel Shading style type of rendering!
Gimli and Legolas models have been made from Gianluca Squillace: www.artstation.com/artwork/d0...
Want to download the Custom Node?
There you go: jumpeter.gumroad.com/l/VTA_La...
Discord: / discord
Patreon: / visualtechart
![Outline Stylized Material - part 1.5 [UE5, valid for UE4]](http://i.ytimg.com/vi/UWQonxtG10g/mqdefault.jpg)
![Outline Stylized Material - part 1.5 [UE5, valid for UE4]](/img/tr.png)
![This is NOT a Sphere! - A brief Ray-Casting overview for gamedev [UE5, UE4]](/img/n.gif)
Say no more. I subbed because this teaches more about the intricacies of how rendering light works than any expensive course at college 👀
Nice one tricking artists into a programming video :D
Ahahahaha ;)
Incredibly well done video. Very thorough and well explained! Look forward to seeing what you offer up in the follow up.
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.
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
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!
tremendous depth of learning here and a truly artistic outcome, bravo
Amazing!! Can't wait for part 2 🙌🏻
Just found your channel and loving it.♥
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
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 new favorite channel fr
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
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?
this was such a great explanation. i came to get a quick post process shader graph and i left an improved person
failed at this for days i now trust you with my life
Great Video, very nice explanation!
Fantastic Art. I love your presentation. 🦋🌻Melinda
Awesome video, thanks!
GREAT VIDEO!
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 :)
You are insane! Thank you!
Thanks for the tutorial!
fantastic tutorial ! thank u so much !!!!!!!!!!!
amazing
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!
holy shiet.. watching this hurt my soul.. but i feel happier.. thank you xD
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.
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: czcams.com/video/E7agD1iU-Hs/video.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 czcams.com/video/uzSppNMkOic/video.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
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 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?
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)
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 :)
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++
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.
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
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?
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
Perfetto 🤌🤌 Grazzie mille
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!
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 :)
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
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 :)
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".
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
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.
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 ;)
Is it possible to download the material
There's a link in the description ;)
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!!
Wow! this material can use color?
Yes, you can multiply it on top :)
@@VisualTechArt you are genius
How do you get rid of the jittering? My outline is also very aliased.
Run it before the tonemapper :)
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
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!
When part2?
Don't have a date yet :)
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 ?
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.