WebGL Bloom

edwardzhong.github.io/sites/demo/… WebGL学习之HDR与Bloom - Jeff.Zhong - 博客园 (cnblogs.com)

结果

#version 300 es
#define GLSLIFY 1
in vec3 aPosition;
in vec2 aTexcoord;
out vec2 texcoord;
void main() {
    texcoord = aTexcoord;
    gl_Position = vec4(aPosition, 1.0);
}

#version 300 es
precision highp float;
#define GLSLIFY 1
in vec2 texcoord;
uniform sampler2D image;
uniform sampler2D imageBlur;
uniform bool bloom;
out vec4 FragColor;
const float exposure = 1.0;
const float gamma = 2.2;
void main() {
    vec3 hdrColor = texture(image, texcoord).rgb;
    vec3 bloomColor = texture(imageBlur, texcoord).rgb;
    if (bloom)
    hdrColor += bloomColor;     //添加融合 //怕太亮了 所以
    
    //色调映射
    // vec3 result = hdrColor / (hdrColor + vec3(1.0));
    vec3 result = vec3 (1.0) - exp(-hdrColor * exposure);
    //进行gamma校正
    
    // result = pow(result, vec3 (1.0 / gamma));
    FragColor = vec4(result, 1.0);
}

MRT

#version 300 es
#define GLSLIFY 1
in vec4 aPosition;
in vec4 aNormal;
uniform mat4 u_vpMatrix;
uniform mat4 u_modelMatrix;
out vec3 vnormal;
out vec3 vposition;
void main() {
    gl_Position = u_vpMatrix * u_modelMatrix * aPosition;
    vnormal = vec3(transpose(inverse(u_modelMatrix)) * aNormal);
    vposition = vec3(u_modelMatrix * aPosition);
}

#version 300 es
precision highp float;
#define GLSLIFY 1 
layout (location = 0) out vec4 FragColor;
layout (location = 1) out vec4 BrightColor;
struct Light {
    vec3 Position;
    vec4 Color;
};
uniform Light lights[4];
uniform vec3 u_ambientColor;
uniform vec4 u_color;
uniform vec3 u_viewPosition;
uniform float u_shininess;
in vec3 vnormal;
in vec3 vposition;
const float constantAtt = 1.0;
const float linearAtt = 0.14;
const float quadraticAtt = 0.07;
void main() {
    //真实空间下的向量
    vec3 normal = normalize(vnormal);
    vec3 viewDirection = normalize(u_viewPosition - vposition);
    //
    vec3 lighting = vec3(0.0);
    for(int i = 0; i < 4; i++) {
        vec3 pos = lights[i].Position;
        vec4 color = lights[i].Color;
        vec3 lightDir = normalize(pos - vposition);
        float cosTheta = max(dot(lightDir, normal), 0.0);
        //漫反射
        vec3 diffuse = u_color.rgb * cosTheta * u_color.a;
        if(u_color.a <= 1.0)
        diffuse *= color.rgb;
        
        //高光
        vec3 halfwayDir = normalize(pos + viewDirection);
        float specularIntensity = pow(max(dot(normal, halfwayDir), 0.0), u_shininess);
        vec3 specular = color.rgb * specularIntensity;
        
        // 光强衰减
        float att = 0.0;
        if(cosTheta > 0.0) {
            float dis = length(pos - vposition);
            att = 1.0/(constantAtt + linearAtt * dis + quadraticAtt * dis * dis);
        }
        lighting += (diffuse + specular);
    }
    //环境光
    vec3 ambient = u_ambientColor * u_color.rgb * u_color.a;
    vec3 result = ambient + lighting;
    
    // 检查结果值是否高于某个门槛，如果高于就渲染到光源颜色缓存中
    float brightness = dot(result, vec3(0.2126, 0.7152, 0.0722));
    if(brightness > 1.0) {
        BrightColor = vec4(result, 1.0);
    }
    else {
        BrightColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
    FragColor = vec4(result, 1.0);
}