How do I identify what is cauing these lines in my GLSL noise shader

user_19915283 0
Viewed 25

I'm learning how to make noise with shaders in glsl and and have cobbled together the following fragment shader that kind of works:

float rand(vec2 cord)
{
    return fract(sin(dot(cord, vec2(12.9898, 78.233)))*43758.5453);
}

void main()
{
    vec2 uv = gl_FragCoord.xy;

    vec2 i = floor(uv);
    vec2 f = fract(uv);

    vec2 c0 = i + vec2(0.0,0.0);
    vec2 c1 = i + vec2(1.0,0.0);
    vec2 c2 = i + vec2(0.0,1.0);
    vec2 c3 = i + vec2(1.0,1.0);

    float r0 = rand(c0);
    float r1 = rand(c1);
    float r2 = rand(c2);
    float r3 = rand(c3);

    float b = mix(r0,r1,f.x);
    float t = mix(r2,r3,f.x);

    gl_FragColor = vec4(mix(b,t,f.y),0.0,0.0,1.0);
}

(The vertex shader is default)

The idea is to randomly generate some values at integer points and than interpolate between them. This process mostly works but leaves some sharp lines at the integer value boarders.

This is the output

If I had to guess I think it has something to do with rounding errors. The idea of the rand function is generate a value between 1 and 0 that varies greatly with 2D position and it does this so well that the small differences in rounding cause to bigger changes at the integer points.

So my question is if this is the correct identification of the problem how might I fix it? If this isn't the right how do I identify the problem better.

Thanks.

fragment-shader glsl
1 Answers

That's an interesting problem : your code works perfectly on my side. You can try this random function from Shadertoy, maybe it will work better on you side too:

float hash12(vec2 p)
{
    vec3 p3  = fract(vec3(p.xyx) * .1031);
    p3 += dot(p3, p3.yzx + 33.33);
    return fract((p3.x + p3.y) * p3.z);
}

Also, try adding this line : f = f*f*(3.-2.*f); after vec2 f = fract(uv);. It will make the interpolations smoother by transforming the linear progression of f into a smoother one.

user_195218380
Related