Learn how to make a multicoloured bokeh shader, using the GLSL programming language. This tutorial follows on from the last tutorial.

Tint uniforms

First add three new tint uniforms, which can be used to change the colours of the bokeh circles.

uniform vec3 tint1 = vec3(0.84, 0.68, 0.06);
uniform vec3 tint2 = vec3(0.06, 0.68, 0.84);
uniform vec3 tint3 = vec3(0.84, 0.06, 0.68);

Create circles

Next remove this variable from the main function:

float c = 0.0;

And replace it with:

float c1 = 0.0;
float c2 = 0.0;
float c3 = 0.0;

These variables will be used for the different tint coloured circles.

Add circles under each circle variable like below.

offset = vec2(halfSize.x * 0.5, -halfSize.y * 0.75);
c1 += BokehCircle(pos, offset, MEDIUM, RAD_270);

offset = vec2(halfSize.x * 0.75, halfSize.y * 0.5);
c2 += BokehCircle(pos, offset, LARGE, RAD_90);

offset = vec2(halfSize.x * 0.25, halfSize.y * 0.25);
c3 += BokehCircle(pos, offset, SMALL, RAD_ZERO);

Keep adding more until you are happy.

Output colour

Create a new function:

void OutputColour(float c, vec3 tint)
{
    // Brightness
    c *= brightness;

    // Mix the pixel colour using the distance of the bokeh circles
    fragColour.rgb = mix(fragColour.rgb, tint * c, c * opacity);

    // Alpha
    c = min(c, 1.0);
    fragColour.a = mix(fragColour.a, c, c * opacity);
}

Then remove this code from the main function:

c *= brightness;

fragColour.rgb = mix(pixel.rgb, tint * c, c * opacity);

c = min(c, 1.0);
fragColour.a = mix(pixel.a, c, c * opacity);

The new function will allow us to tint a group of circles different colours.

Finally you just need to call the new function at the end of the main function.

OutputColour(c1, tint1);
OutputColour(c2, tint2);
OutputColour(c3, tint3);

That’s it! You should now have different coloured bokeh circles.

Conclusion

Thank you for reading this tutorial. Let me know in the comments section if you enjoyed it, or have any questions!