Material - Fading the edges (Edge Detection)

Hi guys, recently I try to build a shadow character material (and particle system). The particle system works quite great, but I need some fade towards the edges to get it look better. I’ve searched the whole day for a solution and tried a lot of tutorials, but all of these are post process effects and wont effect the opacity of the actor. I hope you can help me, but first of all here is my current state.

As you can see the edges of the head are solid black and I think it would look a lot better with an edge fade combined with an animated cloud texture. How can I achieve this? I thought a simple fresnel node could do the trick, but nope.

Thanks for your help!

I’m doing a similar thing except with energy instead of shadows. I have tried using the DepthFade node but the material will only fade when in contact with another object.

This question is a bit old now, but here are some ideas and some info that will hopefully be helpful to someone.

The fresnel node mentioned in the original post should (at least partially) work, assuming that the character’s model isn’t flat. (It’s hard to tell due to it being a silhouette in the screenshot.) The fresnel node isolates triangles that are oriented obliquely from the camera’s perspective, which, for many models, are primarily the triangles along the outside edges (this is especially true for a sphere). Maybe that’s not the case for the ‘shadow’ character’s model, or maybe there are other factors that I’m not aware of.

In any case, if the fresnel node doesn’t provide usable results, you may be able to use a texture to indicate areas that should have reduced opacity. (Or perhaps even vertex colors, but I’m less familiar with that approach.) Unfortunately, this will only work as long as your model always faces the camera from roughly the same direction; if you need the model to rotate or be seen from arbitrary 3D angles, this effect will quickly fall apart.

One way or another, the trick is to inform the renderer which triangles should have reduced opacity, and which shouldn’t. This is tricky because the renderer has no concept of which triangles are ‘outer’ (near the ‘edge’ of the silhouette) and which are ‘inner’. Primarily, this is because each pixel is rendered independent of every other pixel — the model’s material shader has no clue that the model has multiple triangles, where those other triangles are, what the overall shape/silhouette is, and so on.

Post-process shaders are a special case, because they are to sample from previously rendered buffers. Edge detection algorithms are limited to being post-process effects because they need access to multiple pre-rendered pixels simultaneously to determine where sharp changes (edges) occur. Unfortunately, as stated above, post process shaders aren’t useful for every case, because they do their business after all the standard materials have already calculated their color values, including opacity.

One final suggestion for the original poster, or for anyone doing a similar smoke effect: whichever technique you use to isolate the ‘outer’ triangles, try playing with a procedural noise node (in the material graph) to create some animating smoky randomness in the opacity. It may help further sell the effect and help distract viewers’ eyes away from the model’s edges. (Or maybe not! Sometimes you can’t know whether something will work until you see it.)

Best of luck!

1 Like

@the_batch
I set up my blueprint the fresnel node but the appearance isn’t right. It is showing the material in the center and edges of the model but not in between. I want it to hide only on the very edge, leaving the material to fade slightly. Is there a simple way to do this?
This is how my blueprint is set up.

@TylerLeblanc, at least part of the issue in your material is the combination of that Subtract node with the OneMinus node. The way you have things set up, they are competing with each other; the OneMinus node (which does 1-x) is ‘inverting’ the value from the fresnel, and then that Subtract node is doing almost exactly the same thing (0.97-x), ‘inverting’ it back. Choose one or the other and you should start to see better results.

Here’s a very basic fresnel shader setup to illustrate how easily it can work:

And here’s a much more complicated graph, using a fresnel and some procedural noise to create the smoky-edge effect I was attempting to describe earlier:

(The noise in that example animates, which obviously you won’t be able to see in the image. But, trust me when I say I think it helps sell the effect nicely.)

I’m not sure attaching the material asset here will work, but here goes anyway, because things will become a lot clearer that way:

[Material asset][3]

Again, your specific needs might not involve a smoky look, but hopefully my example helps shed some light on some of the things you can do with a fresnel and other nodes in combination.

Cheers!

3 Likes

@the_batch
I set up my blueprint according to your example but instead of looking smokey the edge of my material has holes in it. This doesn’t achieve the same effect as yours and I’m wondering what I did wrong.

Ah! You’re almost there. Try adjusting some properties on the noise node. First and foremost, you want to play with the scale — the look I achieved was based on using a scale of 0.05 or so. You could also try changing the function to Voronoi.

Check out this official UE4 blog post on using the updated noise node if you want to know more about the versatility and inner workings of the noise material node.

1 Like

I think I got it. I didn’t edit any of the properties on the noise so I went back and fixed that. I got it to a point where I’m happy with the results. Thank you for all the help!

256239-image-1.png