# bloomblend.frag

## Input variables

### The texture coordinate of the full-screen square

```glsl
in vec2 texCoord;
```

## The scene texture and the blurred highlight texture

```glsl
layout (binding=1) uniform sampler2D texrender;
layout (binding=2) uniform sampler2D texblur;
```

## Output variables

There is only one output variable: the fragment colour.

```glsl
out vec4 colour_out;
```

## main()

We are going to blend the the original rendering with the blurred highlights.

Accordingly, we read colour from two corresponding textures, one is the texture of the rendered scene, the other is the texture of the blurred highlights.

```glsl
    vec3 renderColour = texture(texrender, texCoord).rgb;      
    vec3 bloomColour = texture(texblur, texCoord).rgb;
```

#### Additive blending

A simple blending is using addition:

```glsl
    // additive blending
    vec3 blendColour = renderColour + bloomColour; 
```

#### High dyamic range (HDR) blending

But you may see the highlights are washed out because of the pixel values excceed 1.0f:

<figure><img src="https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2Fsv9swtgC1gXEFwh0ExAo%2Fimage.png?alt=media&#x26;token=cff53dc4-d4d5-4422-9074-ff4151e6a2f7" alt="" width="563"><figcaption></figcaption></figure>

We can use tone mapping and gamma correction to improve it, as described in <https://learnopengl.com/Advanced-Lighting/HDR>

```glsl
    const float gamma = 2.2;
    float exposure = 1.0;
    result = vec3(1.0) - exp(-result * exposure);
    // Gamma correction       
    result = pow(result, vec3(1.0 / gamma));
```

<figure><img src="https://3464970502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JUKGJZ67JX02QZdPhsy%2Fuploads%2Fco35iSQnWlMNVOYaPsH4%2Fimage.png?alt=media&#x26;token=4d4a46a8-b9c0-402b-9fad-49d80b099082" alt="" width="563"><figcaption></figcaption></figure>

## Full Source Code

```glsl
// bloomblend.frag
#version 430 core

in vec2 texCoord;

layout (binding=1) uniform sampler2D texrender;
layout (binding=2) uniform sampler2D texblur;

out vec4 colour_out;

void main()
{             
    vec3 renderColour = texture(texrender, texCoord).rgb;      
    vec3 bloomColour = texture(texblur, texCoord).rgb;
    
    // additive blending
    vec3 blendColour = renderColour + bloomColour; 
    
    vec3 result = blendColour;

    // =============================================
    // exposure tone mapping https://learnopengl.com/Advanced-Lighting/HDR
    /*
    const float gamma = 2.2;
    float exposure = 1.0;
    result = vec3(1.0) - exp(-result * exposure);
    // Gamma correction       
    result = pow(result, vec3(1.0 / gamma));
    */
    
    colour_out = vec4(result, 1.0);
} 
```