I am back from a night with friends, a bit too much beer, but still wanted to resume some ideas I had in mind while riding back home. Smoothstep is a magic function we call everytime we want to blend from 0 to 1 with a none linear-interpolation driven blending.

From core GLSL:

If you look at the documentation this is how you implement it:

Two things to note here: edge0 and edge 1, and also the value to smooth. They got clamped into fancy state, while having a binary-like approach.

GLSL doc gives us that:

genType smoothstep(	genType edge0,
genType edge1,
genType x);


It’s pretty much what we need to start exploring the function.

Polynomials higher orders equations blue print:

Smoothstep blend step() function to a zero to one response from any input by mapping the Lagrange interpolation to a numerical standards. The “polynomial interpolation of Lagrange” was found by by Charles Hermite, a french mathematician that made it analytically possible to break down all the works of Lagrange(Note: I need to write an article on this). But in short, it simply gives the GPU a way to interpolate smoothly between two edges from any given input.

The notation makes it quite clear on when to use it. Let’s now dive into code.

I will start with UV from 0 to 1, and scale them by 5, then perform a smoothstep on the uv.x * 5.

    vec2 uv = fragCoord/iResolution.xy;

float uvScalingFactor = 5.0f;
float edge0 = 0.0f *uvScalingFactor;
float edge1 = 0.1f *uvScalingFactor;
float valueToSmooth = uv.x *uvScalingFactor;
vec3 outShit = vec3(smoothstep(edge0,edge1,valueToSmooth));
fragColor = vec4(outShit,1.0);

I assign the out pixel using these calculation and assign them using the smoothstep:

vec3(smoothstep(edge0,edge1,valueToSmooth));

Giving us that image:

Well, here is an interesting point: You can see that the edges are indeed scales by 5.0f but they do not shows intented tiles repetitions. The reason is that smooth step only returns a result between 0 and 1, from, an input and perform a Hermite interpolation on top of that value.

As our uv.x * 5.0f reach higher ground than the 0 to 1 and we also tweak edge limit from that smoothstep:

It then gives us a 0 to 1 range from the modified uv. You can change the offset to fit where you want to offsett to smoothstep.

Anyways, from 0-1 it looks like this:

You can switch the edge by multiplying all by a common factor:

To change the edges, simply make sure that you provide offset. For now, I will make the offstep to zero, making it act like the step function.

Smooth sphere-ish distance:

We are in 2D, but let’s make some sort of distance from the top-right(1:1) uv corner.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;

float a = .15;
float b = .55;
vec3 outShit = vec3(smoothstep((0.0 / (a + b)),(1.0f - (a + b)),
uv.x * sin(uv.y * cos(sin(uv.x)))));
fragColor = vec4(outShit,1.0);

}

By using polynomial formulas, for interpolation, it is now easier to remap that smoothstep to make a “distance-ish” approach, an idea that can be extended to 3D ray-marching shadowing. This is how the code looks in a texture:

In action with timing changing:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;

float a = .25;
float b = .5 * sin(iTime);
vec3 outShit = vec3(smoothstep((0.0 / (a + b)),(1.0f - (a + b)),
uv.x * sin(uv.y * cos(
sin(uv.y * smoothstep(uv.x + b, uv.y * b, uv.x))))));
fragColor = vec4(outShit,1.0);

}

As you can see, using smoothstep make dynamic-ish shadow kind of a matter of factor.

Note: Bonne nuit., 5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%