之前的白噪声确实不太行，因为我们现实生活中并不是那样的完全嗡嗡。

讯享网

我们接下来就是要生成这样的纹理。

一维noize

接下来看不同方式生成的一维noize

float i = floor(x); // 整数（i 代表 integer） float f = fract(x); // 小数（f 代表 fraction） y = rand(i); //rand() 在之前的章节提过 y = mix(rand(i), rand(i + 1.0), f); y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f)); 

y = mix(rand(i), rand(i + 1.0), f);使用的是线性插值

y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));顶点的变化如何变得顺滑了起来

二维Noise

在 2D 中，除了在一条线的两点（fract(x) 和 fract(x)+1.0）中插值，我们将在一个平面上的方形的四角（fract(st)， fract(st)+vec2(1.,0.)， fract(st)+vec2(0.,1.) 和 fract(st)+vec2(1.,1.)）中插值。

讯享网uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; // 2D Random float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.); } // 2D Noise 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)); // Smooth Interpolation // Cubic Hermine Curve. Same as SmoothStep() vec2 u = f*f*(3.0-2.0*f); // u = smoothstep(0.,1.,f); // Mix 4 coorners percentages return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; // Scale the coordinate system to see // some noise in action vec2 pos = vec2(st*20.864); // Use the noise function float n = noise(pos); gl_FragColor = vec4(vec3(n), 1.0); } 

更多的noise

为了消除块状，我们使用gradients，而不是固定值

uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec2 random2(vec2 st){ st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) ); return -1.0 + 2.0*fract(sin(st)*43758.); } // Value Noise by Inigo Quilez - iq/2013 // https://www.shadertoy.com/view/lsf3WH float noise(vec2 st) { vec2 i = floor(st); vec2 f = fract(st); vec2 u = f*f*(3.0-2.0*f); return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; st.x *= u_resolution.x/u_resolution.y; vec3 color = vec3(0.000,0.000,0.000); vec2 pos = vec2(st*10.0); color = vec3( noise(pos)*.5+.5 ); gl_FragColor = vec4(color,1.0); } 

流形

讯享网 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec2 random2(vec2 st){ st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) ); return -1.0 + 2.0*fract(sin(st)*43758.); } // Value Noise by Inigo Quilez - iq/2013 // https://www.shadertoy.com/view/lsf3WH float noise(vec2 st) { vec2 i = floor(st); vec2 f = fract(st); vec2 u = f*f*(3.0-2.0*f); return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; st.x *= u_resolution.x/u_resolution.y; vec3 color = vec3(0.0); float t = 1.0; // Uncomment to animate // t = abs(1.0-sin(u_time*.1))*5.; // Comment and uncomment the following lines: st += noise(st*2.)*t; // Animate the coordinate space color = vec3(1.) * smoothstep(.18,.2,noise(st)); // Big black drops color += smoothstep(.15,.2,noise(st*10.)); // Black splatter color -= smoothstep(.35,.4,noise(st*10.)); // Holes on splatter gl_FragColor = vec4(1.-color,1.0); } 

多边形

 uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec2 random2(vec2 st){ st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) ); return -1.0 + 2.0*fract(sin(st)*43758.); } float noise(vec2 st) { vec2 i = floor(st); vec2 f = fract(st); vec2 u = f*f*(3.0-2.0*f); return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); } mat2 rotate2d(float _angle){ return mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)); } float shape(vec2 st, float radius) { st = vec2(0.5)-st; float r = length(st)*2.0; float a = atan(st.y,st.x); float m = abs(mod(a+u_time*2.,3.14*2.)-3.14)/3.6; float f = radius; m += noise(st+u_time*0.1)*.5; // a *= 1.+abs(atan(u_time*0.2))*.1; // a *= 1.+noise(st+u_time*0.1)*0.1; f += sin(a*50.)*noise(st+u_time*.2)*.1; f += (sin(a*20.)*.1*pow(m,2.)); return 1.-smoothstep(f,f+0.007,r); } float shapeBorder(vec2 st, float radius, float width) { return shape(st,radius)-shape(st,radius-width); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(1.0) * shapeBorder(st,0.8,0.02); gl_FragColor = vec4( 1.-color, 1.0 ); }