OpenGL Shader-光照光点效果

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

发光体效果的复用

之前已经了解过如何实现发光体效果，这里对发光体效果进行复用操作使得页面有多个发光体光源且尽量缩小光源大小使得发光体呈现出像是一个光点的效果，这种形式有点像是星光闪闪的感觉。

光点点缀

首先完成光点效果

1. 调整原先glow参数值将原先0.09值设置成0.02。
2. 光点增加一种色彩vec3(0.9608, 0.749, 0.0549)，这里使用了偏黄色光点。
3. 设置for循环函数在不同坐标点上生成多个光点。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = texture(iChannel1,uv).rgb;

    vec2 uv2 = uv;
    uv2.x *= iResolution.x/iResolution.y; 
    for(float i =-0.01;i< 0.1;i+=0.01){
        uv2 -= 0.1;
        float glow = 0.02 * 3./length(uv2);
        color += 5.0 * vec3(0.02 * glow) * vec3(0.9608, 0.749, 0.0549);
    }
   
    gl_FragColor = vec4(color,1.);
}

由于循环中光点坐标并不是随机生成，因此在效果展示上并不是无序光点效果。这样的效果展示并不自然不像是模拟了星空繁星点缀视觉效果。

随机点缀

为了达到随机点缀的效果，采用二维随机函数来实现坐标随机。

//2D随机数生成器
float random2d(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}

vec2 random2(vec2 par){
	float rand = random2d(par);
	return vec2(rand, random2d(par+rand));
}


void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = texture(iChannel1,uv).rgb;

    vec2 uv2 = uv;
    uv2.x *= iResolution.x/iResolution.y; 
    for (float i = -1.0; i <= 1.0; i ++) {
         for (float j = -1.0; j <= 1.0; j++) {
            vec2 uv3 = uv2 - random2(uv);
            float glow = pow(0.02 * 5./length(uv3),2.);
            color += 10.0 * vec3(0.02 * glow) * vec3(0.9608, 0.749, 0.0549);
         }
    }
    gl_FragColor = vec4(color,1.);
}

最后参考 最终展示上更像是噪点效果了，然后调整参数后又出现更奇怪的效果。

vec2 uv3 = uv2 - random2(uv * 0.00001);

在shaderToy上找到类似效果，参考其随机函数生成方式来实现最终效果。

参考

• Glow