Screen Post-processing Effects: Streak effect in the Lens Flare effect and Its Implementation

by Admin| in Techniques, Technology on September 13, 2022 10:15 am 1003 /1

by Admin

0/ 1003/ /1

Basic Knowledge

When we photograph, the light from some strong light source sometimes has some reflection and scattering when passing through the lens group produced by many lenses, and the light that is not aligned with the other incident light produces a halo.

(The bright light in the upper right corner makes the image have a noticeable halo)

Originally, the image was distorted due to technical defects, but some unexpectedly brought some special effects, making the picture more three-dimensional and helping to set off the atmosphere. In the photography world, special filters are made to produce some effects. Similarly, these effects are simulated in the game to improve the picture quality and enhance the atmosphere. In the following chapters, we will introduce several effects produced by lens flare and implement it.

In this section, we introduce a Streak effect in the Lens Flare effect.

(In the middle of the picture, there is an obvious long halo)

A special kind of filter in the photography world is Streak Filters, which center on a luminous point and radiate a series of parallel lines around, resulting in a radiant effect.

(The Streak effect caused by the glare in photography)

In the game, it is a common effect to show the highlights of the luminous point and set off the atmosphere.

(Lens Flare Streak effect in Mass Effect 2)

This effect is achieved. In this section, we use a relatively simple method based on the idea of the Dual Blur blur algorithm to achieve it: in the Dual Blur algorithm, the blur effect is achieved by repeatedly down-sampling to reduce the picture and up-sampling to expand the picture. It also achieves the effect of blurring the color, so that the surrounding pixels get the part of the color of the pixel. Following this line of thinking, we can choose to repeat up-sampling in a single direction.

Unity Implementation

Up and Down Sampling

First, to implement the process of up and down sampling, we need to elongate the highlight points in a single direction, so the selected sampling points only need to be in a single direction. When performing down-sampling, properly expanding the sampling range can make the reduced image have as many pixels as possible with color, and the size of the control weight can make the brightness attenuation more natural; when performing up-sampling, debugging several times to keep the sampling points within a reasonable range, so that the color is not too dark.

// Downsampler

half4 frag_down(v2f_img i) : SV_Target

{

       const float dx = _MainTex_TexelSize.x;

       float u0 = i.uv.x – dx * 5;

       float u1 = i.uv.x – dx * 3;

       float u2 = i.uv.x – dx * 1;

       float u3 = i.uv.x + dx * 1;

       float u4 = i.uv.x + dx * 3;

       float u5 = i.uv.x + dx * 5;

       half3 c0 = tex2D(_MainTex, float2(u0, i.uv.y));

       half3 c1 = tex2D(_MainTex, float2(u1, i.uv.y));

       half3 c2 = tex2D(_MainTex, float2(u2, i.uv.y));

       half3 c3 = tex2D(_MainTex, float2(u3, i.uv.y));

       half3 c4 = tex2D(_MainTex, float2(u4, i.uv.y));

       half3 c5 = tex2D(_MainTex, float2(u5, i.uv.y));

       return half4((c0 + c1 * 2 + c2 * 3 + c3 * 3 + c4 * 2 + c5) / 12, 1);

}

// Upsampler

half4 frag_up(v2f_img i) : SV_Target

{

       const float dx = _MainTex_TexelSize.x * 3;

       float u0 = i.uv.x – dx;

       float u1 = i.uv.x;

       float u2 = i.uv.x + dx;

       half3 c0 = tex2D(_MainTex, float2(u0, i.uv.y)) / 4;

       half3 c1 = tex2D(_MainTex, float2(u1, i.uv.y)) / 2;

       half3 c2 = tex2D(_MainTex, float2(u2, i.uv.y)) / 4;

       half3 c3 = tex2D(_HighTex, i.uv);

       return half4(lerp(c3, c0 + c1 + c2, _Stretch), 1);

}

Apply A Threshold to Filter Highlights

For a circular light-emitting point, the desired effect is that the horizontal beam passing through the center of the circle has the highest brightness and the longest length, and decreases in the vertical direction. Choose to sample surrounding pixels along the Y-axis, so that edge pixels spill less brightness through blending.

half4 frag_prefilter(v2f_img i) : SV_Target

{

       const float dy = _MainTex_TexelSize.y;

       half3 c0 = tex2D(_MainTex, float2(i.uv.x, i.uv.y – dy));

       half3 c1 = tex2D(_MainTex, float2(i.uv.x, i.uv.y + dy));

       half3 c = (c0 + c1 ) / 2;

       c = max(0, c – _Threshold);

       return half4(c, 1);

}

Overlay

Using a similar idea to sample multiple pixels and mix them to get the pixel color can make the transition smoother:

half4 frag_composite(v2f_img i) : SV_Target

{

       float dx = _MainTex_TexelSize.x * 1.5;

       float u0 = i.uv.x – dx;

       float u1 = i.uv.x;

       float u2 = i.uv.x + dx;

       half3 c0 = tex2D(_MainTex, float2(u0, i.uv.y)) / 4;

       half3 c1 = tex2D(_MainTex, float2(u1, i.uv.y)) / 2;

       half3 c2 = tex2D(_MainTex, float2(u2, i.uv.y)) / 4;

       half3 c3 = tex2D(_HighTex, i.uv);

       half3 cf = (c0 + c1 + c2) * _Color * _Intensity * 10;

       return half4(cf + c3, 1);

}

Use a self-illuminating sphere, apply a specular, and get the effect:

Increase the intensity of the parallel light to get the effect:

If you are interested in learning more, you can read the HDRP version of the Streak effect (https://github.com/CyberDeck/Unity-HDRP-LensFlares)

(The effect of this project)

URP version of the Streak effect (https://github.com/ColinLeung-NiloCat/UnityURP-BillboardLensFlareShader)

(The effect of this project)

Summary

From the realization of the Streak effect, we can gradually understand the beauty of the image blur algorithm idea: blur the color and form a natural transition. Coupled with a few tricks, many effects can be achieved.

Screen Post Processing Effects Series

Screen Post-processing Effects: Real-time Glow and Bloom and Its Implementation

Screen Post Processing Effects Chapter 6: Dual Blur and Its Implementation

Screen Post Processing Effects Chapter 5: Kawase Blur and Its Implementation

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”.