kodelife/glsl noise

I had been cluttering up my Unity notes blog with GLSL/Kodelife stuff, so I've made this new page here...

Below is some code that generates some smooth looking noise. It isn't very complex, but it's probably good enough to get you going. Using code from The Art of Code youtube channel. Let's break down the important functions and see how they feed into one another.

float N21(vec2 p){
    return fract(sin(p.x*1000.0+p.y*6832.0)*5224.0);
}

This function takes a vector 2 "p", which is actually going to be our uv coordinate & multiplies each component(x and y) by two arbitrary large numbers , before getting the sine value. This small value is then multiplied by another large number, and then only the fractional part of that value is returned.

On it's own, this will return nice static tv/white noise kinda values. You might call it in the main function like this -

float c= N21(uv*4.0)

 

Next up, is 

float smoothNoise(vec2 uv){
    vec2 lv=fract(uv);
   lv=lv*lv*(3.0-2.0*lv);
   vec2 id=floor(uv);
   
   float bl=N21(id);
   float br=N21(id+vec2(1,0));
   float b=mix(bl,br, lv.x);
   
   float tl=N21(id+vec2(0,1));
   float tr=N21(id+vec2(1,1));
   float t=mix(tl,tr, lv.x);
   
    return mix(b,t,lv.y);

}

The problem with the N21 noise is it isn't actually random  - if you zoom into it (by multiplying the UV by a low number) you'll see a bunch of crappy looking sine waves...which is what we told the computer to produce after all. The smoothNoise function we have here interpolates noise values along the "UV square". First it creates two coordinate spaces - local (lv) and per square (id), using the fract and floor functions.

It calculates the bottom left (bl) of the UV square using our previously made N21 function and passing the id coordinate. Then it calculates the bottom right, by adding (1,0) to the id. We then calculate the mix of bottom left to bottom right, based on the local x value (eg per UV square, if we've multiplied the UV). Lets call this blended value b.
The N21 function is then used again to calculate top left to top right in a similar fashion & then we blend those two values again, using the local x. The blended value is called t.

Once we have those values we can blend b and t, using the local y value. Something we haven't mentioned is the    lv=lv*lv*(3.0-2.0*lv); line. This is an interpolation trick the youtuber used. It's to smooth out the corners of the UV grid. If you omit this, you could get some unwanted (or perhaps you do want it) spiky noise values.

Finally -


float smoothNoise2(vec2 uv){
float c=smoothNoise(uv*4);
   c+=smoothNoise(uv*8)*0.5;
   c+=smoothNoise(uv*16)*0.25;
   c+=smoothNoise(uv*32)*0.125;
   c+=smoothNoise(uv*64)*0.0625;
   return c/=2;

}

This well named function uses the smoothNoise function to make layers of noise on top of itself. These extra layers are what we call "octaves" in some 3d packages. Notice how the UV's are multiplied UP at each stage & the resulting value are multiplied DOWN. We are adding smaller details at each stage.
The divide by two at the end is a way to keep the resultant value below 1. A normalisation. It isn't an accurate number, as the youtuber admitted!

 

#version 150

uniform float time;
uniform vec2 resolution;
uniform vec2 mouse;
uniform vec3 spectrum;

uniform sampler2D texture0;
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D texture3;
uniform sampler2D prevFrame;
uniform sampler2D prevPass;

in VertexData
{
    vec4 v_position;
    vec3 v_normal;
    vec2 v_texcoord;
} inData;

out vec4 fragColor;

float N21(vec2 p){
    return fract(sin(p.x*1000.0+p.y*6832.0)*5224.0);

}

float smoothNoise(vec2 uv){
    vec2 lv=fract(uv);
   lv=lv*lv*(3.0-2.0*lv);
   vec2 id=floor(uv);
   
   float bl=N21(id);
   float br=N21(id+vec2(1,0));
   float b=mix(bl,br, lv.x);
   
   float tl=N21(id+vec2(0,1));
   float tr=N21(id+vec2(1,1));
   float t=mix(tl,tr, lv.x);
   
    return mix(b,t,lv.y);

}

float smoothNoise2(vec2 uv){
float c=smoothNoise(uv*4);
   c+=smoothNoise(uv*8)*0.5;
   c+=smoothNoise(uv*16)*0.25;
   c+=smoothNoise(uv*32)*0.125;
   c+=smoothNoise(uv*64)*0.0625;
   return c/=2;

}
void main(void)
{
    vec2 uv =  inData.v_texcoord;
   
    float c=smoothNoise2(uv);
   
   
   
   
    vec3 col=vec3(c);
   
    fragColor = vec4(col, 1.0);
}

Comments

Post a Comment

Popular posts from this blog

kodelife/glsl drawing a circle (sdf)

 Below is the main function for drawing a circle. Let's go through the important parts of the code. Firstly vec2 uv =inData.v_texcoord-0.5; we subtract 0.5 from the uv vector so that we get the 0 value in the centre. (by default 0 is at the bottom left corner) vec2 gv=fract(uv*5)-0.5; We copy the pattern across by multiplying the uv. By using fract we get the fractional values that exist within each smaller uv space. The 0.5 subtraction is to shift the 0 point back to the centre - the fract values will run from 0 to 1 otherwise. Next up, the circle float d=length(gv); float r=0.3; float m=smoothstep(r,r*0.4,d); Here we calculate the distance a pixel is from the centre (now set correctly because of the -0.5 above), by using the length function. We then define our desired circle radius as "r" & give it a value. Next, we use a smoothstep of r & a slightly smaller r, testing against the pixel's distance, to see if it is within the circle or not. This value is stor
Read more

OSL - simple UV things and frac fract alternative

Here is a shoddy OSL shader that follow on from some of my GLSL experiments of yesteryear. I couldn't seem to find a frac or fract  function, but fmod-ing (it's like modulo) against 1 does the same thing. I don't put any input parameters in this shader. EDIT - just saw someone else's code that use x-floor(x) for fract, which could be faster..who knows! Variables Lame an Cat are assigned to u and v, I then multiply them by different values and fmod them so they repeat 3 and 4 times. It seems like u and v will be taken automatically, which is nice. After that I do a bit of if statement colour assignment.   shader use_uv(output color resultRGB = 0) {      float lame=u;      float cat=v;      cat=fmod(v*3,1);      lame=fmod(u*4,1);      resultRGB = color(lame, v, 1);      if(lame>0.5){      resultRGB+=color(0.3,0.4,0); } if(v<0.1){      resultRGB+=color(0,0,1); } if(lame<0.5){      resultRGB+=color(0,lame,0); } }
Read more

step and smoothstep functions, drawing a line

float f =step(0.3, uv.x); this will return 0 where uv.x is less than 0.3 and will return 1 where uv.x is greater than 0.3 graphically this would produce a black rectangle taking up 30% of the horizontal. (or a white rectangle taking up 70% of it on the other side) The smoothstep function provides a nice blend between two values. float g=smoothstep (0.2,0.8,uv.x); now if you assign this to a colour output, you'll see a nice gradient, starting black from roughly 20% to white at 80% along the horizontal. With this in mind, it is possible to plot a line using smoothsteps. float plot(vec2 uv, float line){   return  smoothstep( line-0.02, line, uv.y) -           smoothstep( line, line+0.02, uv.y); } looking at the code you might be able to guess that we're just taking the areas slightly above and below the line's function and subtracting. The 0.02 would define the thickness of said line. In the main function of our shader, we'd call plot like this -  float f=plot(uv,g); then
Read more