SHADER BASICS 4

STEP AND SMOOTHSTEP

As I mentioned, having conditionals in shader is usually frowned upon, so
"step" and "smoothstep" come in to save the day by giving you a whole lot of flexibility in that regard!

https://twitter.com/HarryAlisavakis/status/1230039090160119808?s=19

#shaders #shaderbasics

STEP
Let's start with the basic form of these methods: "step"
In most shader environments, "step" is a method with 2 parameters, a and b and it performs the following simple calculation:

if a > b return 1.0, otherwise return 0.0

It seems simple, but it's really powerful because, as we'll see when we look at more math, when it comes to shaders, having a number going from 0 to 1 is usually all you need. It was hinted at by the function of "mix" too.

Sharing an example of "step" usage below. Since we just work with raw coordinates at the moment, the examples are fairly linear and boring, but as we add more elements things will get more interesting.

Here I just use "step(0.5, uv.x)" so if the output pixel lives in the left half of the screen (so 0.5 > uv.x) it'll be black, otherwise it'll be white.

SMOOTHSTEP

As mentioned above, "step" returns a binary result: 0.0 or 1.0. It's cool for a simple check, but to get more interesting results you can use "smoothstep".

"smoothstep" takes 3 parameters instead of 2: a, b and t.
The result of a smoothstep function is:

if t ≤ a return 0.0
if t > b return 1.0
if b ≤ t < a return a smoothly interpolated value from 0.0 to 1.0. It's something like mix(0.0, 1.0, t), but the interpolation isn't linear

Here's an example of smoothstep usage below. It looks a bit more complicated at first glance but it's fairly simple: pixels below 0.25 in the Y axis of the UV coordinates are black, pixels above 0.5 are white and there's a smooth gradient in between.

It's worth noting here how different the "smoothstep" interpolation is compared to "mix" so here's a side-by-side below (left is mix, right is smoothstep):

Sharing the code of the initial pic to get a sense of how you can use "step", "smoothstep" and "mix" to get more control over what you render with your shader:

As you can see, I just flip the result of the smoothstep (which uses uv.y) based on whether the pixel is on the left or right half of the screen (using uv.x). To blend the two values I use "mix" using the result of "step" as the mixing parameter.

I feel like these are the most important tools when it comes to GLSL (and other) shaders, but they can only get you so far. Shaping functions and SDFs can give you a lot more control to get a plethora of cool results; and we'll check those out in later threads!

SHADERRATA

The mentioning of conditionals in shaders has some conflictin points in the variety of documentation out there so I hope this clears some things up on the issue: https://twitter.com/bgolus/status/1235254923819802626?s=19