• sayers

Outline Shaders

So I actually was following multiple tutorials to try different ways of making outline shaders.


v.1.

First foray into Outline Shaders and the custom depth node

Same thing but with a paper-y background used on the mock village


This was the first one I made. Although I liked it a lot as far as it had a nice trail off / dilation, I needed more "inside lines" to show up. I tried to adjust this one, but realized that the way I / the tutorial had structured it, it was basically entirely based off of the Custom Depth Node. From what I understand, this makes it very easy to get outlines of objects, but it is much more difficult to get anything else. This node will be really useful for outlining the water landers in our space farming game (Plant Planet? Sparm? whatever we name it). Those need to have outlines to differentiate between players and also to tell players which plants have been watered by them (so claimed). Basically this first outline shader I made was useful in that it gave general idea, but it needed a different structure to get the effect I wanted.

v.2.

This was the second Outline Shader I made. I had tried (and failed) to adjust the other to my expectations. I eventually learned more about the Custom Depth node and realized I should just try it again in a different way. I looked on youtube for shaders that did similar things and eventually found a tutorial that did something similar to what I wanted. I used some parts of the tutorial and eventually got an edge detection shader that gave me more what I wanted. I am unsure, but it seems that the custom depth node does convolution, however it throws away all lines except those within a certain threshold (there is probably a way to change this that I did not find). I ended up using a laplacian kernel to perform convolution on every pixel. This was slightly more confusing for me to do through this video, so although I did get an Outline Shader, I decided to try another tutorial so I could understand the inner workings a bit more.


v3.

Although this gif is of a mistake I made (I put an absolute value in the wrong place and it became a disco ball), it does show that it created an outline shader. In another post I will show the final result (which isn't shiny). I followed Ray Wenderlich's tutorial on outline shaders and although it was mostly the same ideas as the last one, this tutorial made far more sense. Maybe I just needed to repeat it so I could finally understand. This one also used a laplacian kernel to perform convolution. I did have to modify certain parts (ex so it would show up on the entire world), but it worked pretty well. I also really liked at the end it gave clear instructions on implementing a dilation rate.


Overall, I probably will use v2 for something in the future, but I think v3 is my current winner (when not shiny). It has just enough detail and is fairly flexible.


Thanks to:

Dean Ashford for his nice tutorial that got my feet wet:

https://www.youtube.com/watch?v=B7vJi4zKlts


Tom Looman for his nice explanation of the custom depth node:

https://www.tomlooman.com/the-many-uses-of-custom-depth-in-unreal-4/


Sujay Chand for his tutorial for the second shader:

https://www.youtube.com/watch?v=pLFW6qnQ-e8&t=445s


Ray Wenderlich for making a tutorial I could actually understand more deeply:

https://www.raywenderlich.com/92-unreal-engine-4-toon-outlines-tutorial