跟我一起学glsl编程22 - 白色噪声（white noise）_彦龙的专栏文章_微信文章

白色噪声 white noise

示例代码一

我们先绘制噪声点，fract 是内部函数，前面的示例中似乎讲到过，返回一个数的小数部分

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
    vec2 coord = gl_FragCoord.xy;
    vec3 color = vec3(0.0);

    float grain = 0.0;
    grain = random2d(vec2(sin(coord)));

    color += vec3(grain);

    gl_FragColor = vec4(color, 1.0);
}


复制代码

代码效果

示例代码二

加入u_time让噪声点躁动起来

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
    vec2 coord = gl_FragCoord.xy;
    vec3 color = vec3(0.0);

    float grain = 0.0;
    grain = random2d(vec2(sin(coord)) * u_time);

    color += vec3(grain);

    gl_FragColor = vec4(color, 1.0);
}

复制代码

代码效果

示例代码三

更改参数999999.9 让噪声点慢一点，效果又不太一样了

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
    vec2 coord = gl_FragCoord.xy;
    vec3 color = vec3(0.0);

    float grain = 0.0;
    grain = random2d(vec2(sin(coord) / 999999.9) * u_time);

    color += vec3(grain);

    gl_FragColor = vec4(color, 1.0);
}


复制代码

代码效果

示例代码四

继续加入u_resolution,噪声点的动画慢了下来，效果也变化很大

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

float random2d(vec2 coord){
    return fract(sin(dot(coord.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution * 0.1;
    vec3 color = vec3(0.0);

    float grain = 0.0;
    grain = random2d(vec2(sin(coord) / 999999.9) * u_time);

    color = vec3(grain);

    gl_FragColor = vec4(color, 1.0);
}


复制代码

代码效果

这里也是动画，就不再截取gif

《跟我一起学glsl编程》期待你的关注与点赞