1 0
Read Time:3 Minute, 16 Second

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:

In shader:

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.,

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
100 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.