Cross-Hatching material Post Process [UE5, valid for UE4]

Поділитися
Вставка
  • Опубліковано 25 сер 2024
  • In this video we go through the realization of a cross-hatching post process material. This shader reproduces the hand drawn look, for a stylized rendering.
    Gimli and Legolas models have been made from Gianluca Squillace: www.artstation...
    Become a Patreon for a discount ;)
    Cross Hatching Sample Project: jumpeter.gumro...
    Outline Post Process: jumpeter.gumro...
    Discord: / discord
    Patreon: / visualtechart
    Related Videos:
    Outline Post Process - Part 1: • Outline Stylized Mater...
    Outline Post Process - Part 1.5: • Outline Stylized Mater...
    Voronoi Intro: • Understand Voronoi and...
    Advanced Voronoi: • ADVANCED VORONOI fixes...

КОМЕНТАРІ • 78

  • @GoatOfTheWoods
    @GoatOfTheWoods 10 місяців тому +14

    Just found your channel. You are on a toootaly diferent level than the usual UE tutorial creator. Outstanding level of understanding!
    Please do more.

  • @MatrakenKEN
    @MatrakenKEN Рік тому +7

    I think adding the same line thickness variance to the outline would give it an even more hand drawn look, thanks for the tutorial as always!

  • @aaronsimon5527
    @aaronsimon5527 Рік тому +5

    Absolutely incredible

  • @MonsterJuiced
    @MonsterJuiced 11 місяців тому +1

    I love your sense of humour. Youre right that other method would be a complete disaster to implement 😂

  • @rafapiasek6981
    @rafapiasek6981 Місяць тому

    Keep up good work. I love this kind of content from you.

  • @AboutJOB-dq6pj
    @AboutJOB-dq6pj Рік тому +2

    Wow it's reall nice tutorial!! Thank you!

  • @georgew6478
    @georgew6478 10 місяців тому +7

    How do you create those purple nodes at 3:37 in the video? Seems like they are "variable" nodes that are used for convenience so that the graph doesn't have too many intersecting lines. I tried searching in the unreal docs but I'm having a hard time finding it

  • @FlyToha
    @FlyToha Рік тому

    Amazing! Thank you for your videos!

  • @Dae-hyeon
    @Dae-hyeon Рік тому +1

    Thank you for the good video

  • @ec1ipsed93
    @ec1ipsed93 29 днів тому +2

    I might have missed something, but my texture seems to be applied to the screen instead of being specifically on the shadows. If I did miss something what was it, and if this is how it's meant to be how would I go about changing it?

    • @VisualTechArt
      @VisualTechArt  29 днів тому +1

      Double check your thresholds or if you missed bits in the tutorial :)
      If you have a different light setup your threshold will be different, experiment with parameters

    • @gilnye
      @gilnye 19 днів тому +1

      I also ran into this issue (Using UE 5.4)

    • @ec1ipsed93
      @ec1ipsed93 18 днів тому

      @@gilnye i found out how to fix it, visual tech art was partially correct in tweaking the values (if the effect is all over your screen you have to change the values), but the main issue that effected the shadows themselves sticking to your screen rather than the world was the fact that (as far as i can tell) thats not what is intended in this tutorial. making it stick would be completely possible if you used the WorldAlignedTexture node, though i dont know exactly how youd implement it.
      if youre intending to use this in a game, Kamil Hepner has a tutorial (video is called "Hatching shader tutorial" on his channel) that is much better suited for video games, especially as it isnt procedural and therefore uses far less processing power, and also introduces you to using curves and curve atlases which are very very useful. This however, does have kind of the same issue, but it can be resolved by simply changing the TriplanarCameraVector node that the SceneTexture:WorldNormal node connects into with the previously mentioned WorldAlignedTexture node. this will give you the effect that im guessing you want, though you do need to make your own hatching images that are displayed.
      really hope this helps you, feel free to ask any questions here and ill do my best to help more :)

    • @ec1ipsed93
      @ec1ipsed93 18 днів тому +1

      @@gilnye I gave a longer response to this but youtube didn't send it through for some reason. but in addition to tweaking values, take a look at the WorldAlignedTexture node, it'd be possible to implement into here if this is the effect that you want.

    • @gilnye
      @gilnye 17 днів тому

      @@ec1ipsed93 thank you so much!

  • @DatPhan-uo7ep
    @DatPhan-uo7ep 4 місяці тому +2

    Can I use this shader but not make everything black and white?

    • @VisualTechArt
      @VisualTechArt  4 місяці тому

      Yes, you can just multiply your colour at the end :)

  • @RwanLink
    @RwanLink Рік тому +1

    This is really good! Do you know how to make a paint stroke effect?

    • @VisualTechArt
      @VisualTechArt  Рік тому +1

      Maybe ahahaha

    • @maahisingh7181
      @maahisingh7181 9 місяців тому

      Maybe search for Kuhara effect, that will help you in a direction to start with :)

  • @hotsauce7124
    @hotsauce7124 Рік тому

    AMAZING!!!

  • @glenrose7482
    @glenrose7482 Рік тому +2

    How does it look on camera moves? Whether that be a circular dolly or parallel dolly move.

    • @VisualTechArt
      @VisualTechArt  Рік тому +3

      It's not amazing but I thought it would have been worse :) I feel like the only "disturbing" movement is when the camera goes back and forth, otherwise panning and rotation are fine. Of course you want to remove as much of the temporal effects as you can, otherwise you just get a mess of ghosting

    • @wpwscience4027
      @wpwscience4027 Рік тому +2

      A lot of disturbance with these kinds of effects goes away if you can get the any texture you apply to the screen (like that paint one at the end) to project in the world instead of on the camera, which I remember being a real pain to get right, OR just turn those effects way down, you might consider lerping their intensity to something you control with a material parameter collection, then tune it down when your character or camera is apt to do a lot of motion, then back up when they settle down, since these types of effects look so good when you don't have your head on swivvel.

  • @TinNguyen-dg4zv
    @TinNguyen-dg4zv Рік тому

    Very nice!

  • @Mireneye
    @Mireneye 10 місяців тому

    I'm curious how it would look to draw one set of lines, and then using a kernel that effectively enhances the line towards a perpendicular angle to the line. WIth a kernel set up correctly it could perhaps produce a cross hatch pattern or something close to it.

  • @MrCompassionate01
    @MrCompassionate01 2 місяці тому

    3:34 How did you consolidate all that stuff into those purple Reroute nodes?

    • @VisualTechArt
      @VisualTechArt  2 місяці тому

      It's just a video transition, I just moved the nodes away and left on screen the getters of the nodes :)

    • @MrCompassionate01
      @MrCompassionate01 2 місяці тому

      @@VisualTechArt Gotcha, thank you!

  • @hotbergina
    @hotbergina 11 місяців тому

    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 ?

  • @wpwscience4027
    @wpwscience4027 Рік тому

    If I remember correctly one of the things about your Voronoi (or how I used it, I forget) was getting a distance field sort of gradient towards the edge of the voronoi cell. That might be something to consider using to vary the line thickness, so the lines trail off at the edge of the cells, instead of just stopping. Also props for getting the light direction that way. I wish I knew about that a year ago. I ended up simulating a whole track the sun across the sky thing pumping the value to a material parameter collection in my level blueprint on tick. Could have saved lots of cost. Has that always been there?

    • @VisualTechArt
      @VisualTechArt  Рік тому +1

      It hasn't been around for lots of time, but I don't remember when they added it :)

  • @AstralManu
    @AstralManu 5 місяців тому

    Hi! Maybe this is a silly question, but how did you merge the nodes into one like you did in 3:37 ?

    • @VisualTechArt
      @VisualTechArt  5 місяців тому

      I've just made a transition with the named reroute nodes :)

  • @JGHHTechArt
    @JGHHTechArt Рік тому

    Phenomenal stuff! Would it be possible to isolate the specular highlight and outline it also?

    • @VisualTechArt
      @VisualTechArt  Рік тому

      Yes, you can run the filter on the PPInput0 and threshold it to a certain amount of luminosity

  • @wpwscience4027
    @wpwscience4027 Рік тому

    Now that I've had time to sit and play with this, a couple notes: One: When you switch this to post process material don't apply this after tonemapping if you want that invLerp to work right (change it to something else, like before tonemapping, personally I used Replacing the tonemapper because it introduces a neat artifact that looks like a dither for partial values). You also used the invLerp instead of an If, is that cheaper or something? Also why mask the post process input zero instead of a desaturate? Is it cheaper, more control, something else I haven't thought of? Two: Using the Voronoi Applications stuff you did before adds about 20 instructions per, but opens up some interesting possibilities *like using the smooth min max output to taper the lines as you get close to the edge of a Vcell* Three: I had a couple weird quirks That cool World normal effect you do at the end for some reason only renders the preview ball, but in the editor it is fine, so who cares, might throw some folks though. Also your tex coord has a nice big yellow section, mine is almost nonexistent. I'm pretty sure this makes for a problem with the screen uv squeezing along the light vector. Also if you use the Voronoi applications you built in your other video instead of the regular noise node it pushes the blue values to black, but it doesn't matter since you don't actually need to use that second noise node that way since yours already gives you those color values. Four: If you haven't yet, look at your cross hatching on the UE water plugin. It looks awesome. Last thing I promise, try dropping your number of lines, but making them thinner and darker, otherwise when you put a whole scene in this it looks very David Finch Batman, which is really cool and all, but it seems like it would be impossible for a mere mortal to draw, unless they embrace only the night and dedicate their life to fighting crime on the mean streets of gotham. I'm going to play with adding some distance from camera effects as well. I seem to remember getting a hatching texture to bend around objects using a custom rotating world aligned texture, that wasn't procedural though, and was like a year ago so my memory is a little fuzzy. Best of luck with yours though because I am definitely looking forward to learning more from you.

    • @VisualTechArt
      @VisualTechArt  Рік тому

      In general I use InvLerps if I want some in-between grays, not sure which one you're referring to specifically :)
      I was interested just in how light the scene is (luminance), the desaturation would have taken into account colour. That is correct too, just depends on what you want :)

  • @bewarejoki
    @bewarejoki 6 місяців тому

    How did you create the Node ´CrossHatchingLayer´? at 6:01 ?

  • @lab0004
    @lab0004 4 місяці тому

    sorry if this is a dumb question but what is the purple node you're using and how do i add them in?

    • @VisualTechArt
      @VisualTechArt  4 місяці тому +1

      You're probably referring to a Named Reroute Node :)

    • @lab0004
      @lab0004 4 місяці тому

      @@VisualTechArt yeah, that was it, thanks!

  • @Maxparata
    @Maxparata 4 місяці тому

    Does AO really adds anything? In Unreal Engine 5 there's no Ambient Occlusion anymore right?

    • @VisualTechArt
      @VisualTechArt  4 місяці тому

      Well in my case it was there so I used it :D

    • @Maxparata
      @Maxparata 4 місяці тому

      ​@@VisualTechArt XD but it has no effect!
      However, if you change your GI method to Screen Space (Beta), you'll get the AO working properly.
      Otherwise, if you stay in Lumen it has no effect.
      Same for Ray tracing I think, not 100% sure about that one.

  • @fisherzhou5365
    @fisherzhou5365 5 місяців тому

    Sorry, may I ask, there is a custom node called "Paper Texture" at the end? What is the relevant content?

    • @VisualTechArt
      @VisualTechArt  5 місяців тому

      It's just a Named Reroute Node coming from a Texture Sampler

    • @fisherzhou5365
      @fisherzhou5365 5 місяців тому

      @@VisualTechArt ok,thanks

    • @fisherzhou5365
      @fisherzhou5365 5 місяців тому

      @@VisualTechArt What is the engine version corresponding to this material?

    • @fisherzhou5365
      @fisherzhou5365 5 місяців тому

      @@VisualTechArtAlso, where is the node "Circular Laplacian Filter by VisualTechArt" added at the end

  • @DatPhan-uo7ep
    @DatPhan-uo7ep 5 місяців тому

    how do you create named reroute nodes with the same color?

    • @VisualTechArt
      @VisualTechArt  5 місяців тому

      You can set their colour in the details panel :)

  • @andhika1176
    @andhika1176 Рік тому

    can you render post process material in sequencer? i tried it but the filter didn't appear

    • @VisualTechArt
      @VisualTechArt  Рік тому

      If you have it in the Post Process Volume while you shoot the sequence should work no problem

  • @arnoldplanken2017
    @arnoldplanken2017 6 місяців тому

    5:51 how on earth do i get this Input node.... Can't seem to find the 'expose in library' anywhere, not in a material or an material instance.

    • @VisualTechArt
      @VisualTechArt  6 місяців тому

      Function Input?

    • @arnoldplanken2017
      @arnoldplanken2017 6 місяців тому

      @@VisualTechArtyeah, but the FunctionInput is not on the list when i right-click in an empty part of the material-blueprint

    • @bewarejoki
      @bewarejoki 6 місяців тому +1

      Would like to know that as well, please :)

    • @VisualTechArt
      @VisualTechArt  6 місяців тому

      @@arnoldplanken2017 Are you ina Material Function or in a Material? :)

  • @SnajpHajp
    @SnajpHajp 9 місяців тому

    Hello friends, does someone know how can I to this scene ad a colored light maybe?
    So I have a scene that is black and white and I want to ad simple yellow light or blue for adding that warm/cold effect to the scene.
    I tried adding scene texture as postprocess then normalizing, multiplying it and adding to current texture, and it showed colored light but it also showed all other textures :/.
    Much grateful if someone can help!

    • @VisualTechArt
      @VisualTechArt  9 місяців тому +1

      Multiply the PostProcessInput0 on the result of the crosshatching :)

    • @SnajpHajp
      @SnajpHajp 9 місяців тому

      @@VisualTechArt Oh I can understand now, I did multiply it but there is a catch. I can see other materials colors, for example if building has red color I can see it is red and I can see the color of my light that is yellow. I kind of cheated and gave all models black/yellow mat and light is colored hahaahaha. Thank you very much for your response!

  • @user-st9hx9cr1k
    @user-st9hx9cr1k 11 місяців тому

    how would the performance for something like this be like in VR? Thanks!

    • @VisualTechArt
      @VisualTechArt  11 місяців тому

      No idea, I haven't tested it :)

  • @noisyether9211
    @noisyether9211 5 місяців тому

    Hello how do you apply this and keep the orginal colors of the mesh?

    • @VisualTechArt
      @VisualTechArt  5 місяців тому +1

      Multiply the PPInput0 on it

    • @noisyether9211
      @noisyether9211 5 місяців тому

      @@VisualTechArt Thank you but a little more help plz. Im in the discord as well.

  • @kevinhuffmaster7291
    @kevinhuffmaster7291 5 місяців тому

    Can anyone tell me how he turned all the nodes into a purple node?

    • @VisualTechArt
      @VisualTechArt  5 місяців тому +1

      Are you referring to named reroute nodes? :)

    • @kevinhuffmaster7291
      @kevinhuffmaster7291 5 місяців тому

      @@VisualTechArt I don't think so, it happens during 3:35, all the nodes just become one. Sorry, I'm super new and not too sure about most terms. Thank you for replying though!

  • @WiDOC
    @WiDOC Рік тому

    you -> god

  • @zxcaaq
    @zxcaaq Рік тому

    why do you sound like Stepen Hawkings computer?

    • @VisualTechArt
      @VisualTechArt  Рік тому +7

      Because I am

    • @MonsterJuiced
      @MonsterJuiced 11 місяців тому

      His only window into English was through Microsoft Sams