Shaders, Part 5 – Blurring
In the image processing entry about the shaders, I noticed one small detail: The fragment shaders could manipulate not only “colors” or “hues”, it could also manipulate the positions of the pixels as well, this then bring us to another special effect that could be used in games called blurring.
There are quite a lot of ways to blur a rendering scene, however, most of them follows a simple logic of storing a rendered scene in the Frame Buffer Object (FBO) multiple times, with small offsets to the rendered scene’s position, then display them all together on the screen. However, the question here boils down to a simple matter: Exactly how do we offset the rendered scenes?
Well, there are a lot of different ways for this, in the game “Dream”, the author used a somewhat more “brutal” way to me (since I don’t really have access to its shaders, I could only make an educated guess) by just drawing the scene multiple times without any actual blurring.
See, from this screenshot, we can say the author draw the scene for maybe 3~4 times, and offset them horizontally by a small margin, then displayed them together. Which creates a decent blurring effect to signal that the main character has just woken up from sleep.
However, there are also ways to create a better blurring called Gaussian Blur, the core elements are the same but this time we are rendering our scenes into textures first, and we are adding an additional pass when rendering the scene.
The method can be divided in the following parts:
- Render the scene you want to blur to a texture (could be downsampled)
- Render a screen aligned quad with the horizontal blur shader to a texture
- Render a screen aligned quad with the vertical blur shader to the screen or texture depending on what you want to use it for
Then, as a result, this texture is still actually drawn on the screen multiple times (most examples I found in my research says it’s 9 times.) and the finishing result is more perfectly blurred instead of the result seen in “Dream”.
Gaussian Blur is also used for purposes aside from blurring stuff, for example, usage in a HDR Bloom effect. Which I’ll cover very soon after the tutorials has taken place and I recreate something that’s good.
In the meantime, I think we can end the topic of Gaussian Blur here.
Until next time.