Hello,
I’m developing a 2D game, and I want to blur some sprite layers to show them blurred on top of an un-blurred background. I can’t find a way to achieve that.
Here’s an example image to illustrate what I want:
anyone?
Have you considered importing said sprites already blurred? This obviously has a limitation that it will only work for foreground objects that never shift into focus.
Otherwise you’ll have to dive into the world of blurring shaders. Google Kawase blur and Gaussian blur shaders for some reference.
I’ve considered it, but discarded it, as there’s times when I would want to un-blur it. A solution I’ve thought is to have every sprite imported blurred and unblurred, and fade between them. But this would mean to double the size of all the sprites.
About blur shaders, I’ve tested a bit with them, but I’ve never seen a blur shader that does the borders correctly, alpha-wise I mean. The sprite is blurred in the center, but the borders keep the hard edges that they had when not blurred, so it looks ugly.
So still not a good solution for the problem…
This may not be the shaders’ fault, it’s possibly related to Unity generating a silhouette mesh for each sprite as an optimization move. You can test this theory by importing your sprite as a texture and using it to texture a regular quad facing camera. If the shader works fine with a quad then there you have it - Unity did stuff. Not sure how this optimization can be disabled, or whether you even want to disable it, considering the performance side-effects.
The blending between two versions of a sprite sounds like the best solution performance-wise.
When I suggested blurring shaders I meant it as a post-processing effect. Come to think of it, could the post-processing Depth of Field effect solve your problems? https://docs.unity3d.com/Manual/PostProcessing-DepthOfField.html
It’s not a tight mesh problem, sprite is set to full rect, and I’ve tested it with quads. Problem here is the alpha, which the blur shaders I’ve tried don’t take into account. They just blur the color which makes the output alpha the same as the input alpha, thus the hard edges.
I’ve actually tried depth of field fx, but couldn’t make it to work with sprites. Even tried some asset store depth of field shader and they don’t work with sprites, not sure why.
Ok, if you’ve isolated the problem down to alpha it should be possible to make the shader blur the alpha channel as well, could you post the shader?
I’ve tried with the standard legacy Blur Optimized Image Effect, this is the shader itself:
Shader "Hidden/FastBlur" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_Bloom ("Bloom (RGB)", 2D) = "black" {}
}
CGINCLUDE
#include "UnityCG.cginc"
sampler2D _MainTex;
sampler2D _Bloom;
uniform half4 _MainTex_TexelSize;
half4 _MainTex_ST;
half4 _Bloom_ST;
uniform half4 _Parameter;
struct v2f_tap
{
float4 pos : SV_POSITION;
half2 uv20 : TEXCOORD0;
half2 uv21 : TEXCOORD1;
half2 uv22 : TEXCOORD2;
half2 uv23 : TEXCOORD3;
};
v2f_tap vert4Tap ( appdata_img v )
{
v2f_tap o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv20 = UnityStereoScreenSpaceUVAdjust(v.texcoord + _MainTex_TexelSize.xy, _MainTex_ST);
o.uv21 = UnityStereoScreenSpaceUVAdjust(v.texcoord + _MainTex_TexelSize.xy * half2(-0.5h,-0.5h), _MainTex_ST);
o.uv22 = UnityStereoScreenSpaceUVAdjust(v.texcoord + _MainTex_TexelSize.xy * half2(0.5h,-0.5h), _MainTex_ST);
o.uv23 = UnityStereoScreenSpaceUVAdjust(v.texcoord + _MainTex_TexelSize.xy * half2(-0.5h,0.5h), _MainTex_ST);
return o;
}
fixed4 fragDownsample ( v2f_tap i ) : SV_Target
{
fixed4 color = tex2D (_MainTex, i.uv20);
color += tex2D (_MainTex, i.uv21);
color += tex2D (_MainTex, i.uv22);
color += tex2D (_MainTex, i.uv23);
return color / 4;
}
// weight curves
static const half curve[7] = { 0.0205, 0.0855, 0.232, 0.324, 0.232, 0.0855, 0.0205 }; // gauss'ish blur weights
static const half4 curve4[7] = { half4(0.0205,0.0205,0.0205,0), half4(0.0855,0.0855,0.0855,0), half4(0.232,0.232,0.232,0),
half4(0.324,0.324,0.324,1), half4(0.232,0.232,0.232,0), half4(0.0855,0.0855,0.0855,0), half4(0.0205,0.0205,0.0205,0) };
struct v2f_withBlurCoords8
{
float4 pos : SV_POSITION;
half4 uv : TEXCOORD0;
half2 offs : TEXCOORD1;
};
struct v2f_withBlurCoordsSGX
{
float4 pos : SV_POSITION;
half2 uv : TEXCOORD0;
half4 offs[3] : TEXCOORD1;
};
v2f_withBlurCoords8 vertBlurHorizontal (appdata_img v)
{
v2f_withBlurCoords8 o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = half4(v.texcoord.xy,1,1);
o.offs = _MainTex_TexelSize.xy * half2(1.0, 0.0) * _Parameter.x;
return o;
}
v2f_withBlurCoords8 vertBlurVertical (appdata_img v)
{
v2f_withBlurCoords8 o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = half4(v.texcoord.xy,1,1);
o.offs = _MainTex_TexelSize.xy * half2(0.0, 1.0) * _Parameter.x;
return o;
}
half4 fragBlur8 ( v2f_withBlurCoords8 i ) : SV_Target
{
half2 uv = i.uv.xy;
half2 netFilterWidth = i.offs;
half2 coords = uv - netFilterWidth * 3.0;
half4 color = 0;
for( int l = 0; l < 7; l++ )
{
half4 tap = tex2D(_MainTex, UnityStereoScreenSpaceUVAdjust(coords, _MainTex_ST));
color += tap * curve4[l];
coords += netFilterWidth;
}
return color;
}
v2f_withBlurCoordsSGX vertBlurHorizontalSGX (appdata_img v)
{
v2f_withBlurCoordsSGX o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = UnityStereoScreenSpaceUVAdjust(v.texcoord.xy, _MainTex_ST);
half offsetMagnitude = _MainTex_TexelSize.x * _Parameter.x;
o.offs[0] = UnityStereoScreenSpaceUVAdjust(v.texcoord.xyxy + offsetMagnitude * half4(-3.0h, 0.0h, 3.0h, 0.0h), _MainTex_ST);
o.offs[1] = UnityStereoScreenSpaceUVAdjust(v.texcoord.xyxy + offsetMagnitude * half4(-2.0h, 0.0h, 2.0h, 0.0h), _MainTex_ST);
o.offs[2] = UnityStereoScreenSpaceUVAdjust(v.texcoord.xyxy + offsetMagnitude * half4(-1.0h, 0.0h, 1.0h, 0.0h), _MainTex_ST);
return o;
}
v2f_withBlurCoordsSGX vertBlurVerticalSGX (appdata_img v)
{
v2f_withBlurCoordsSGX o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = half4(UnityStereoScreenSpaceUVAdjust(v.texcoord.xy, _MainTex_ST),1,1);
half offsetMagnitude = _MainTex_TexelSize.y * _Parameter.x;
o.offs[0] = UnityStereoScreenSpaceUVAdjust(v.texcoord.xyxy + offsetMagnitude * half4(0.0h, -3.0h, 0.0h, 3.0h), _MainTex_ST);
o.offs[1] = UnityStereoScreenSpaceUVAdjust(v.texcoord.xyxy + offsetMagnitude * half4(0.0h, -2.0h, 0.0h, 2.0h), _MainTex_ST);
o.offs[2] = UnityStereoScreenSpaceUVAdjust(v.texcoord.xyxy + offsetMagnitude * half4(0.0h, -1.0h, 0.0h, 1.0h), _MainTex_ST);
return o;
}
half4 fragBlurSGX ( v2f_withBlurCoordsSGX i ) : SV_Target
{
half2 uv = i.uv.xy;
half4 color = tex2D(_MainTex, i.uv) * curve4[3];
for( int l = 0; l < 3; l++ )
{
half4 tapA = tex2D(_MainTex, i.offs[l].xy);
half4 tapB = tex2D(_MainTex, i.offs[l].zw);
color += (tapA + tapB) * curve4[l];
}
return color;
}
ENDCG
SubShader {
ZTest Off Cull Off ZWrite Off Blend Off
// 0
Pass {
CGPROGRAM
#pragma vertex vert4Tap
#pragma fragment fragDownsample
ENDCG
}
// 1
Pass {
ZTest Always
Cull Off
CGPROGRAM
#pragma vertex vertBlurVertical
#pragma fragment fragBlur8
ENDCG
}
// 2
Pass {
ZTest Always
Cull Off
CGPROGRAM
#pragma vertex vertBlurHorizontal
#pragma fragment fragBlur8
ENDCG
}
// alternate blur
// 3
Pass {
ZTest Always
Cull Off
CGPROGRAM
#pragma vertex vertBlurVerticalSGX
#pragma fragment fragBlurSGX
ENDCG
}
// 4
Pass {
ZTest Always
Cull Off
CGPROGRAM
#pragma vertex vertBlurHorizontalSGX
#pragma fragment fragBlurSGX
ENDCG
}
}
FallBack Off
}
Maybe this is late but if you take the answer from here: Unity Gaussian blur Shader just makes my texture white - Why? - Stack Overflow
Then change
return float4(sum.rgb, 1);
to
return sum;
It helped me create the effect you are looking for.
Hope this helps!
5 Likes
Well… Just do what you done to the ball.
I think OP wanted a procedural blur shader, not pre-blurred sprites.
1 Like
Here is one that works for me. It supports color and alpha modifications.
Just make sure to not set the resolution too high, otherwise some performance issue may appears.
Shader "Custom/Gaussian Blur"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_Color ("Color", Color) = (1, 1, 1, 1)
_Radius ("Radius", Range(0,30)) = 15
resolution ("Resolution", float) = 800
hstep("HorizontalStep", Range(0,1)) = 0.5
vstep("VerticalStep", Range(0,1)) = 0.5
}
SubShader
{
Tags {"Queue"="Transparent" "IgnoreProjector"="true" "RenderType"="Transparent"}
ZWrite Off Blend SrcAlpha OneMinusSrcAlpha Cull Off
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#include "UnityCG.cginc"
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f
{
half2 texcoord : TEXCOORD0;
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
};
sampler2D _MainTex;
float _Radius;
float resolution;
float hstep;
float vstep;
float4 _Color;
v2f vert(appdata_t IN)
{
v2f OUT;
OUT.vertex = UnityObjectToClipPos(IN.vertex);
OUT.texcoord = IN.texcoord;
OUT.color = IN.color;
return OUT;
}
float4 frag(v2f i) : COLOR
{
float2 uv = i.texcoord.xy;
float4 sum = float4(0.0, 0.0, 0.0, 0.0);
float2 tc = uv;
//blur radius in pixels
float blur = _Radius/resolution/4;
sum += tex2D(_MainTex, float2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
sum += tex2D(_MainTex, float2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
sum += tex2D(_MainTex, float2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
sum += tex2D(_MainTex, float2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;
sum += tex2D(_MainTex, float2(tc.x, tc.y)) * 0.2270270270;
sum += tex2D(_MainTex, float2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
sum += tex2D(_MainTex, float2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
sum += tex2D(_MainTex, float2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
sum += tex2D(_MainTex, float2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;
return sum * _Color;
}
ENDCG
}
}
Fallback "Sprites/Default"
}