by
/ 2079/ /2

### Basic Knowledge

At GDC2003, Masaki Kawase’s topic “Frame Buffer Postprocessing Effects in DOUBLE-S.T.E.A.L (Wreckless)” shared an algorithm applied to Bloom special effects, which was later promoted as a blur algorithm: Kawase Blur.

The speech can be found on the GDC website:

https://www.gdcvault.com/play/1022665/Frame-Buffer-Postprocessing-Effects-in

https://www.gdcvault.com/play/1022664/Frame-Buffer-Postprocessing-Effects-in

The optimization idea of the Box Blur algorithm mentioned in the previous section is to reduce the time complexity to a constant level for the time complexity. The Kawase Blur algorithm focuses on the hardware level and makes full use of the GPU’s advantage of low overhead for bilinear interpolation sampling to optimize the algorithm.

For the explanation of bilinear interpolation sampling by GPU, please refer to the content of Section 3, which will not be introduced in detail here. For example, for a 3×3 pixel area:

(The picture comes from the PPT shared by GDC2003 Kawase)

As shown in the figure, when processing the pixels represented by the black dots, select the sampling points indicated by the four surrounding red dots, and obtain the average value of the data. The sampling point (ie the red dot) selected when sampling is the midpoint of the four pixels. At this time, the GPU will sample the four surrounding pixels and perform bilinear interpolation to obtain the result as the data of the sampling point. So, such a processing result is actually equivalent to selecting a 3×3 convolution kernel as shown on the right side of the figure for processing. In this way, the number of times to read the texture for a pixel has been reduced from 9 to 4 times.

In order to improve the blurring effect as much as possible, referring to the previous algorithm experience, you can choose to perform multiple blurring and sample more pixels. For example, the above method is used as the first blur, and the next blur can be performed by increasing the offset of the sampling point, as shown in the following figure:

(The picture comes from the PPT shared by GDC2003 Kawase)

As shown in the figure above, the offset of the sampling point from the pixel to be processed can be freely selected for each blurring method, so as to allow more pixels to participate in the blurring operation. After many times of blurring, an effect similar to Gaussian blur can be achieved.

### Unity Implementation

According to the above algorithm, we implemented Kawase Blur on Unity, and chose to implement a 5-pass Kawase filter with 0, 1, 2, 2, and 3 kernels, and compared with the effect of Gaussian Blur using a 35×35 convolution kernel (Summary section will be explained further).

First, implement the Kawase Blur sampling algorithm, which is relatively simple. Just read the texture data at the corresponding offset position and perform an average operation.

float4 KawaseBlur(pixel_info pinfo, int pixelOffset)

{

float4 o = 0;

o += tex2D(pinfo.tex, pinfo.uv + (float2(pixelOffset + 0.5, pixelOffset + 0.5) * pinfo.texelSize)) * 0.25;

o += tex2D(pinfo.tex, pinfo.uv + (float2(-pixelOffset – 0.5, pixelOffset + 0.5) * pinfo.texelSize))* 0.25;

o += tex2D(pinfo.tex, pinfo.uv + (float2(-pixelOffset – 0.5, -pixelOffset – 0.5) * pinfo.texelSize)) * 0.25;

o += tex2D(pinfo.tex, pinfo.uv + (float2(pixelOffset + 0.5, -pixelOffset – 0.5) * pinfo.texelSize)) * 0.25;

return o;

}

Fragment shaders that implement different offsets:

float4 frag0(v2f_img i) : COLOR

{

pixel_info pinfo;

pinfo.tex = _MainTex;

pinfo.uv = i.uv;

pinfo.texelSize = _MainTex_TexelSize;

return KawaseBlur(pinfo, 0);

}

float4 frag1(v2f_img i) : COLOR

{

pixel_info pinfo;

pinfo.tex = _GrabTexture;

pinfo.uv = i.uv;

pinfo.texelSize = _GrabTexture_TexelSize;

return KawaseBlur(pinfo, 1);

}

float4 frag2(v2f_img i) : COLOR

{

pixel_info pinfo;

pinfo.tex = _GrabTexture;

pinfo.uv = i.uv;

pinfo.texelSize = _GrabTexture_TexelSize;

return KawaseBlur(pinfo, 2);

}

float4 frag3(v2f_img i) : COLOR

{

pixel_info pinfo;

pinfo.tex = _GrabTexture;

pinfo.uv = i.uv;

pinfo.texelSize = _GrabTexture_TexelSize;

return KawaseBlur(pinfo, 3);

}

Similarly, the GrabPass{} function is used to obtain the effect of the previous blurring process (the time-consuming of this function is relatively high, you can consider using blit in the OnRenderImage() function) to achieve 5 passes:

Pass

{

CGPROGRAM

#pragma target 3.0

#pragma vertex vert_img

#pragma fragment frag0

ENDCG

}

GrabPass{}

Pass

{

CGPROGRAM

#pragma target 3.0

#pragma vertex vert_img

#pragma fragment frag1

ENDCG

}

GrabPass{}

Pass

{

CGPROGRAM

#pragma target 3.0

#pragma vertex vert_img

#pragma fragment frag2

ENDCG

}

GrabPass{}

Pass

{

CGPROGRAM

#pragma target 3.0

#pragma vertex vert_img

#pragma fragment frag2

ENDCG

}

GrabPass{}

Pass

{

CGPROGRAM

#pragma target 3.0

#pragma vertex vert_img

#pragma fragment frag3

ENDCG

}

Obtain the result:

(The Result Obtained with the Above Method)

(Result of 35×35 Gaussian Blur)

It can be seen that the results obtained by this processing are similar to those obtained by Gaussian Blur with a 35×35 convolution kernel.

### Summary

The advantage of the Kawase Blur algorithm is to utilize the hardware characteristics of the GPU to the greatest extent, which makes the performance of the algorithm very superior. However, the estimation of the blur effect quality of the Kawase Blur algorithm is an empirical value that needs to be tried continuously. The previous algorithm has a fixed convolution kernel and blur times to measure the quality of the blur effect. The larger the convolution kernel size, the greater the blur times. The more the better. The offset set by Kawase Blur does not have the same quality impact on the blur effect as the operator size. Therefore, in order to achieve the effect of Gaussian blurring operation as much as possible, several different offset values will be selected and multiple blurring operations will be performed. The following experiments are from Intel’s research in this area:

Address: https://software.intel.com/content/www/us/en/develop/blogs/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms.html

Enter Values A 12×12 block of white pixels on a black background (left: middle cross-section along the x-axis; right: top view):

Values after applying a 35×35 Gaussian filter:

Values after applying a 5-pass Kawase filter with 0, 1, 2, 2, 3 kernels – very close (but not a perfect match) to a 35×35 Gaussian filter:

A disadvantage of the Kawase Blur algorithm is that multiple blurring will result in a corresponding number of DrawCalls.

For example, in the above example, although five Kawase Blur calculations generate five DrawCalls, only 4*5=20 texture reads are required to process one pixel. The Gaussian Blur linear sampling algorithm of the 35×35 convolution kernel with similar effect generates two DrawCalls, and 17*2=34 of the textures need to be read to process one pixel. Extending to a single image to be processed, the disadvantage brought by the increase in the number of DrawCalls is enough to be overshadowed by the speed improvement brought by the substantial reduction in the number of texture reads. So, on the whole, Kawase Blur has a better effect and better performance at the same time.

### Screen Post Processing Effects Series

Screen Post Processing Effects Chapter 4: Box Blur and Its Implementation

Screen Post Processing Effects Chapter 3: Algorithm of Gaussian Blur and Implementation Using Linear Sampling

Screen Post Processing Effects Chapter 2: Two-Step One-Dimensional Operation Algorithm of Gaussian Blur and Its Implementation

Screen Post Processing Effects Chapter 1 – Basic Algorithm of Gaussian Blur and Its Implementation

That’s all for today’s sharing. Of course, life is boundless but knowing is boundless. In the long development cycle, these problems you see maybe just the tip of the iceberg. We have already prepared more technical topics on the UWA Q&A website, waiting for you to explore and share them together. You are welcome to join us, who love progress. Maybe your method can solve the urgent needs of others, and the “stone” of other mountains can also attack your “jade”.

YOU MAY ALSO LIKE!!!

UWA Website: https://en.uwa4d.com

UWA Blogs: https://blog.en.uwa4d.com

UWA Product: https://en.uwa4d.com/feature/got

Related Topics

• View Post

• View Post

• View Post