噪声图的生成需要依据随机数的生成:
取得uv坐标的整数部分和小数部分:对每个网格进行求取随机值,然后再对四个点进行线性插值
float random(vec2 uv) {
return fract(sin(dot(uv.xy,vec2(13.0909,783.342))) * 423234.323);
}
// 噪声函数
float noise(in vec2 uv) {
// 整数部分
vec2 i = floor(uv);
// 小数部分
vec2 f = fract(uv);
float a = random(i);
float b = random(i + vec2(1.0,0.0));
float c = random(i + vec2(0.,1.));
float d = random(i + vec2(1.,1.));
vec2 u = f*f*(3. - 2. * f);
// 对四个位置进行线性插值
return mix(a,b,u.x) + (c-a)*u.y * (1. - u.x) + (d-b)*u.x * u.y;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// opengl 中uv大于1的时候就会出现重复的现象,就可以分割区域
// 分割区域
uv *= 10. + sin(uv * 3.14159 + iTime);
// uv += iTime;
float rnd = noise(uv*4.);
// Output to screen
fragColor = vec4(vec3(rnd),1.0);
}