Fabrizio Bergamo

Real-Time FX & Tech Art

Linear & Smooth Step – Material & Niagara Functions

Intro

In this blog post, you will find a brief explanation of how these two functions work and their application, I will mainly show the setup of how they can be created as Material and Niagara functions in Unreal Engine.

I started looking into this because I needed a Smooth Step Function to use in Niagara and I couldn’t find a built-in node for it. Unreal doesn’t provide it as it does for the Material Graph (or at least I couldn’t find it), so I had to build my own.
Everything I’ve learned about how to recreate both functions came from Tech Art of Code‘s video tutorial, which I highly recommend since he explains exactly why and how they work.

The Functions

These two functions are really useful for any type of interpolation, they are very similar all around, the only difference is that
They both require an Input, and Min and Max value, which are used to clamp and control the output range.
You can find the result of both of them when Min is set to 0 and Max to 1:

Here you can find a Desmos link with the two functions, you can play around with t1 and t2 which are the Min and Max inputs respectively and I’ve also added a ScaleBias control to remap the output value.

c1 = Linear Step
c2 = Smooth Step
t1 = Min
t2 = Max
s = Scale
b = Bias

Material Graph

Let’s start with the Material Graph.
Unreal already gives provides us with a Smooth Step node with the three inputs, so we are all set.
For demonstration purposes, I’m using the UVs as my input value and a custom function to preview the result. it’s the GradientVisualizer function you see in the screenshot below, if you want to learn more about it check out my previous blog post.

We can’t say the same for the Linear Step function.
However, it’s not too complicated and it can be represented as follows:

k = max(0, min(1, (x - t1) / (t2 - t1)))

Where t1 is the Min input, while t2 is the Max one.
Below you can find the setup needed to have it as a function in Unreal Engine.

snippet

This is what it looks like when you play around with the Min and Max values:

Niagara

If you’ve read everything before reaching this point you can probably recreate the Linear Step as Niagara Function Script without any help.
But you can find the graph below as a crosscheck:

snippet

For the Smooth Step, we just need to add something to the Linear Step, basically using it to lerp between two parabolas. Again, check out The Art of Code for more information.

k = max(0, min(1, (x - t1) / (t2 - t1)))
c = k² (3 - 2k)

snippet

Once they’re set up they are ready to go, to be used in any Niagara Module Script, just make sure you change the Library Visibility option of the Niagara Functions from “Unexposed” to “Exposed”.

Thanks for reading and have a great rest of the day!


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *