OpenGL Shader-噪点图实现

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

在了解随机数生成之后可以利用随机数函数实现噪点效果。像是电视机白噪音效果就可以通过随机数函数来实现。像是电视雪花屏还是星空点点又或者是云朵都是无规律像是随机布局的，这就必须应用使用到随机函数来实现了。

随机函数噪点

float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
}
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float noise = random(uv);
    vec3 color = texture(iChannel2,uv).rgb;
    // 相减
    color.r -= noise;
    color.g -= noise;
    color.b -= noise;
    // 相加
    color.r += noise;
    color.g += noise;
    color.b += noise;
    gl_FragColor = vec4(color,1.0);
    // 混合
    gl_FragColor = vec4(mix(color,vec3(noise),0.5),1.0);
}

噪点	相加	相减	混合

通过随机函数可以将纹理RGB做相加，相减或是混合模式实现噪声效果。相比较而言采用mix混合模式效果更好一些。

噪点效果比较

参数叠加

在原二维随机函数基础上对uv相加一个值的效果。

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


float n1noise( vec2 n )
{
	float t = fract(100.0);
	float nrnd0 = noise( n + 0.07*t );
	return nrnd0;
}

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float o = n1noise(200.0 * uv);
    gl_FragColor = vec4(vec3(o),1.0);

}

参数偏移

参数偏移在原二维随机函数基础上对处理过后的值进行偏移处理，然后进行多次dot和mix计算后获取最终随机数。

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.5453123);
}
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);
}

基础	参数叠加	参数偏移

以上三种噪点图基础方法都是围绕公式 fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453);演进得出然后实现出不同的噪点效果，可以根据需要自行设计出一款符合设计需求的噪点图效果。

总结

噪点图的实现离不来随机数的生成，有了随机数才能够实现不规则的噪点分布形态。同时之上提到生成的随机数是伪随机的。但在实际应用过程中会发现这样的伪随机足够满足当前需求，是可以作为真正随机数来使用的。