noise + fbm
Patricio Gonzalez Vivo
9 years ago
parent
e65f461a3f
commit
a95ceae5f9
@ -1,6 +1,94 @@
|
||||
|
||||
|
||||
|
||||
## Noise
|
||||
|
||||
Coming soon…
|
||||
Break time! We have been playing with all this random functions that looks like TV white noise, our head is still spinning arround thinking on shaders, and our eyes are tired. Time to get out side and walk!
|
||||
|
||||
We feel the air in our face, the sun in our nose and chicks. The world is such a vivid and rich places. Colors, textures, sounds. While we walk we can avoid notice the surface of the roads, rocks, trees and clouds. Sudently all seams random. But defenetly not the type of random we were making. The real world is such a rich place. How we can aproximate to this level of variarety computationally?
|
||||
|
||||
We are on the same path of thoughts that Ken Perlin's walk through on 1982 when he was commisioned with the job of generating "more realistic" textures for a new disney movie call "Tron". In response to that he came up with an elegant *oscar winner* noise algorithm.
|
||||
|
||||
The following is not the Perlin noise algorithm, but is a good starting point to start getting out head arround the idea of how to generate *noise* o *smooth random*.
|
||||
|
||||
Look the following graph, is in escense what we where doing on line 36 and 37 on the last example of the previus chapter. We are computing the ```rand()``` of the integers of `x` (the `i` variable).
|
||||
|
||||
<div class="simpleFunction" data="
|
||||
float i = floor(x); // integer
|
||||
float f = fract(x); // fraction
|
||||
y = rand(i);
|
||||
//y = mix(rand(i), rand(i + 1.0), f);
|
||||
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
||||
"></div>
|
||||
|
||||
By uncomenting the following line, you can make a linear interpolation between the random value of an integer to the next one.
|
||||
|
||||
```glsl
|
||||
y = mix(rand(i), rand(i + 1.0), f);
|
||||
```
|
||||
|
||||
At this point we have learn that we can do better than a linear interpolation. Right? By uncomenting the following line, we will use the native ```smoothstep()``` to make a *smooth* transition between the previus random values.
|
||||
|
||||
```glsl
|
||||
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
||||
```
|
||||
|
||||
You will find in other implementations that people use cubic curves ( like the following formula) instead of using a ```smoothstep()```.
|
||||
|
||||
```glsl
|
||||
float u = f * f * (3.0 - 2.0 * f );
|
||||
y = mix(rand(i), rand(i + 1.0), u);
|
||||
```
|
||||
|
||||
## 2D Noise
|
||||
|
||||
Now that we understand how noise is made in one dimetion, is time to port it to two dimensions. Check how on the following code the interpolation (line 29) is made between the for coorners of a square (lines 22-25).
|
||||
|
||||
<div class="codeAndCanvas" data="2d-noise.frag"></div>
|
||||
|
||||
At this point you can recognice what's going on at line 40. We are scaling and "moving" the space, right?
|
||||
|
||||
Try:
|
||||
|
||||
* Change the multiplier. Try to animate it.
|
||||
* At what level of zoom the noise start looking like random again?
|
||||
* At what zoom level the noise is imperceptible.
|
||||
* Change the u_time by the normalize values of the mouse coordinates.
|
||||
|
||||
## Using 2D Noise
|
||||
|
||||
Time recapitulate, refresh some of the previus knowladge and jump foward. In the following code you will find:
|
||||
|
||||
* Shaping functions to create: random (line 13), noise (line 32) and a line pattern (line 46).
|
||||
* A color gradient (line 68).
|
||||
* A matrix to rotate the line pattern (line 37-40 and 45)
|
||||
* A 2d random function (line 12-16)
|
||||
* A 2d noise function (line 20-35)
|
||||
|
||||
<div class="codeAndCanvas" data="wood.frag"></div>
|
||||
|
||||
By uncommenting line 60 you will see the line pattern we are talking about.
|
||||
Revealing line 63 you can see how we can alterate this pattern in a "natural-like" way, to then finally, uncommenting line 66 we can streach the noise pattern in *y* axis.
|
||||
|
||||
Wow! You really should be proud of your self. He have went from nothing to generating our own wood procedural texture!
|
||||
|
||||
Now is time for you to play with it:
|
||||
|
||||
* What do you thing it will happen if the patter looks like this:
|
||||
|
||||
```glsl
|
||||
pattern = sin(lines(pos, noise(pos*vec2(2.,0.5)),0.5)*3.14);
|
||||
```
|
||||
|
||||
Or like this
|
||||
|
||||
```glsl
|
||||
pattern = fract(lines(pos, noise(pos*vec2(2.,0.5)),0.5)*2.0);
|
||||
```
|
||||
|
||||
* What other generative pattern can you make? What about granit? marble? magma? water?
|
||||
* What about noise apply to motion? Go back to the Matrix chapter and use the translation example that move a the "+" arround to apply some *random* and *noise* movements to it.
|
||||
|
||||
<div class="codeAndCanvas" data="1d-noise.frag"></div>
|
||||
Nothing like having some control over the chaos and chances. Right?
|
||||
Noise is one of those subjects that you can digg and alwyas find new exciting formulas. In fact, noise means different things for different people. Musicians will think in audio noise, comminicators into interference, and astrophysics on cosmic microwave background. On the next chapter we will use some related concepts from sign and audio behaviur to our noise function to explore more uses of noise.
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 569 KiB |
@ -0,0 +1,56 @@
|
||||
// Author @patriciogv - 2015
|
||||
// http://patriciogonzalezvivo.com
|
||||
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform vec2 u_resolution;
|
||||
uniform float u_time;
|
||||
|
||||
float random (in float _x) {
|
||||
return fract(sin(_x)*1e4);
|
||||
}
|
||||
|
||||
// Based on Morgan McGuire @morgan3d
|
||||
// https://www.shadertoy.com/view/4dS3Wd
|
||||
float noise (in float _x) {
|
||||
float i = floor(_x);
|
||||
float f = fract(_x);
|
||||
float u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(random(i), random(i + 1.0), u);
|
||||
}
|
||||
|
||||
float box(in vec2 _st, in vec2 _size){
|
||||
_size = vec2(0.5) - _size*0.5;
|
||||
vec2 uv = smoothstep(_size,
|
||||
_size+vec2(0.001),
|
||||
_st);
|
||||
uv *= smoothstep(_size,
|
||||
_size+vec2(0.001),
|
||||
vec2(1.0)-_st);
|
||||
return uv.x*uv.y;
|
||||
}
|
||||
|
||||
float cross(in vec2 _st, float _size){
|
||||
return box(_st, vec2(_size,_size/4.)) +
|
||||
box(_st, vec2(_size/4.,_size));
|
||||
}
|
||||
|
||||
void main(){
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
vec3 color = vec3(0.0);
|
||||
|
||||
// To move the cross we move the space
|
||||
vec2 translate = vec2(cos(noise(u_time)*3.1415*2.0),
|
||||
sin(noise(u_time)*3.1415*2.0));
|
||||
st += translate*0.35;
|
||||
|
||||
// Show the coordinates of the space on the background
|
||||
// color = vec3(st.x,st.y,0.0);
|
||||
|
||||
// Add the shape on the foreground
|
||||
color += vec3(cross(st,0.25));
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
// Author @patriciogv - 2015
|
||||
// http://patriciogonzalezvivo.com
|
||||
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec2 u_mouse;
|
||||
uniform float u_time;
|
||||
|
||||
float random (in vec2 _st) {
|
||||
return fract(sin(dot(_st.xy,
|
||||
vec2(12.9898,78.233)))*
|
||||
43758.5453123);
|
||||
}
|
||||
|
||||
// Based on Morgan McGuire @morgan3d
|
||||
// https://www.shadertoy.com/view/4dS3Wd
|
||||
float noise (in vec2 _st) {
|
||||
vec2 i = floor(_st);
|
||||
vec2 f = fract(_st);
|
||||
|
||||
// Four corners in 2D of a tile
|
||||
float a = random(i);
|
||||
float b = random(i + vec2(1.0, 0.0));
|
||||
float c = random(i + vec2(0.0, 1.0));
|
||||
float d = random(i + vec2(1.0, 1.0));
|
||||
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
|
||||
return mix(a, b, u.x) +
|
||||
(c - a)* u.y * (1.0 - u.x) +
|
||||
(d - b) * u.x * u.y;
|
||||
}
|
||||
|
||||
mat2 rotate2d(float _angle){
|
||||
return mat2(cos(_angle),-sin(_angle),
|
||||
sin(_angle),cos(_angle));
|
||||
}
|
||||
|
||||
float lines(in vec2 _pos, float _angle, float _b){
|
||||
float scale = 10.0;
|
||||
_pos *= scale;
|
||||
_pos = rotate2d( _angle ) * _pos;
|
||||
return smoothstep(0.0,
|
||||
0.5+_b*0.5,
|
||||
abs((sin(_pos.x*3.1415)+_b*2.0))*0.5);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
vec3 color = vec3(0.0);
|
||||
|
||||
vec2 pos = vec2(st*5.0);
|
||||
|
||||
float pattern = pos.x;
|
||||
|
||||
// Stripes
|
||||
// pattern = lines(pos*0.1, 0.0, 0.5 );
|
||||
|
||||
// Add noise
|
||||
// pattern = lines(pos, noise(pos), 0.5 );
|
||||
|
||||
// Strech the noise pattern
|
||||
//pattern = lines(pos, noise(pos*vec2(2.,0.5)),0.5);
|
||||
|
||||
color = mix(vec3(0.275,0.145,0.059),
|
||||
vec3(0.761,0.529,0.239),
|
||||
pattern*1.7);
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec2 u_mouse;
|
||||
uniform float u_time;
|
||||
|
||||
float random (in vec2 _st) {
|
||||
return fract(sin(dot(_st.xy,
|
||||
vec2(12.9898,78.233)))*
|
||||
43758.5453123);
|
||||
}
|
||||
|
||||
// Based on Morgan McGuire @morgan3d
|
||||
// https://www.shadertoy.com/view/4dS3Wd
|
||||
float noise (in vec2 _st) {
|
||||
vec2 i = floor(_st);
|
||||
vec2 f = fract(_st);
|
||||
|
||||
// Four corners in 2D of a tile
|
||||
float a = random(i);
|
||||
float b = random(i + vec2(1.0, 0.0));
|
||||
float c = random(i + vec2(0.0, 1.0));
|
||||
float d = random(i + vec2(1.0, 1.0));
|
||||
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
|
||||
return mix(a, b, u.x) +
|
||||
(c - a)* u.y * (1.0 - u.x) +
|
||||
(d - b) * u.x * u.y;
|
||||
}
|
||||
|
||||
#define NUM_OCTAVES 5
|
||||
|
||||
float fbm ( in vec2 _st) {
|
||||
float v = 0.0;
|
||||
float a = 0.5;
|
||||
vec2 shift = vec2(100.0);
|
||||
// Rotate to reduce axial bias
|
||||
mat2 rot = mat2(cos(0.5), sin(0.5),
|
||||
-sin(0.5), cos(0.50));
|
||||
for (int i = 0; i < NUM_OCTAVES; ++i) {
|
||||
v += a * noise(_st);
|
||||
_st = rot * _st * 2.0 + shift;
|
||||
a *= 0.5;
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
st.x *= u_resolution.x/u_resolution.y;
|
||||
vec3 color = vec3(0.0);
|
||||
|
||||
float noise = noise(st*3.0);
|
||||
float fractal = fbm(st*3.0);
|
||||
color = vec3(mix(noise,fractal,abs(sin(u_time))));
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
#ifdef GL_ES
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec2 u_mouse;
|
||||
uniform float u_time;
|
||||
|
||||
float random (in vec2 _st) {
|
||||
return fract(sin(dot(_st.xy,
|
||||
vec2(12.9898,78.233)))*
|
||||
43758.5453123);
|
||||
}
|
||||
|
||||
// Based on Morgan McGuire @morgan3d
|
||||
// https://www.shadertoy.com/view/4dS3Wd
|
||||
float noise (in vec2 _st) {
|
||||
vec2 i = floor(_st);
|
||||
vec2 f = fract(_st);
|
||||
|
||||
// Four corners in 2D of a tile
|
||||
float a = random(i);
|
||||
float b = random(i + vec2(1.0, 0.0));
|
||||
float c = random(i + vec2(0.0, 1.0));
|
||||
float d = random(i + vec2(1.0, 1.0));
|
||||
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
|
||||
return mix(a, b, u.x) +
|
||||
(c - a)* u.y * (1.0 - u.x) +
|
||||
(d - b) * u.x * u.y;
|
||||
}
|
||||
|
||||
#define NUM_OCTAVES 5
|
||||
|
||||
float fbm ( in vec2 _st) {
|
||||
float v = 0.0;
|
||||
float a = 0.5;
|
||||
vec2 shift = vec2(100.0);
|
||||
// Rotate to reduce axial bias
|
||||
mat2 rot = mat2(cos(0.5), sin(0.5),
|
||||
-sin(0.5), cos(0.50));
|
||||
for (int i = 0; i < NUM_OCTAVES; ++i) {
|
||||
v += a * noise(_st);
|
||||
_st = rot * _st * 2.0 + shift;
|
||||
a *= 0.5;
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy*3.;
|
||||
vec3 color = vec3(0.0);
|
||||
|
||||
vec2 q = vec2(0.);
|
||||
q.x = fbm( st + 0.00*u_time);
|
||||
q.y = fbm( st + vec2(1.0));
|
||||
|
||||
vec2 r = vec2(0.);
|
||||
r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.15*u_time );
|
||||
r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.126*u_time);
|
||||
|
||||
float f = fbm(st+r);
|
||||
|
||||
color = mix(vec3(0.101961,0.619608,0.666667),
|
||||
vec3(0.666667,0.666667,0.498039),
|
||||
clamp((f*f)*4.0,0.0,1.0));
|
||||
|
||||
color = mix(color,
|
||||
vec3(0,0,0.164706),
|
||||
clamp(length(q),0.0,1.0));
|
||||
|
||||
color = mix(color,
|
||||
vec3(0.666667,1,1),
|
||||
clamp(length(r.x),0.0,1.0));
|
||||
|
||||
gl_FragColor = vec4((f*f*f+.6*f*f+.5*f)*color,1.);
|
||||
}
|
||||
Loading…
Reference in New Issue