Skip to content

Commit 1b20f6a

Browse files
committed
update backdrop filter to support urp
1 parent c80532c commit 1b20f6a

File tree

1 file changed

+235
-13
lines changed

1 file changed

+235
-13
lines changed

Assets/Shaders/BackdropFilter.shader

Lines changed: 235 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,6 @@ Shader "ReactUnity/BackdropFilter"
2828
}
2929

3030
Category {
31-
Tags {
32-
"Queue" = "Transparent"
33-
"IgnoreProjector" = "True"
34-
"RenderType" = "Transparent"
35-
"PreviewType" = "Plane"
36-
"CanUseSpriteAtlas" = "True"
37-
}
38-
3931
Stencil {
4032
Ref[_Stencil]
4133
Comp[_StencilComp]
@@ -51,6 +43,228 @@ Shader "ReactUnity/BackdropFilter"
5143
Blend SrcAlpha OneMinusSrcAlpha
5244
ZWrite Off
5345

46+
Tags {
47+
"Queue" = "Transparent"
48+
"IgnoreProjector" = "True"
49+
"RenderType" = "Transparent"
50+
"PreviewType" = "Plane"
51+
"CanUseSpriteAtlas" = "True"
52+
}
53+
54+
SubShader {
55+
Tags {
56+
"RenderPipeline" = "UniversalPipeline"
57+
}
58+
59+
Pass {
60+
CGPROGRAM
61+
#pragma vertex vert
62+
#pragma fragment frag
63+
#pragma target 2.0
64+
#pragma shader_feature_local _SPECULARHIGHLIGHTS_OFF
65+
#pragma shader_feature_local _GLOSSYREFLECTIONS_OFF
66+
#pragma fragmentoption ARB_precision_hint_fastest
67+
#define GRAB_POS
68+
#include "UnityCG.cginc"
69+
#include "ShaderSetup.cginc"
70+
71+
float _Blur;
72+
73+
sampler2D _CameraOpaqueTexture;
74+
float4 _CameraOpaqueTexture_TexelSize;
75+
#define BACKDROP_TEX _CameraOpaqueTexture
76+
#define BACKDROP_TEXELSIZE _CameraOpaqueTexture_TexelSize
77+
78+
float4 frag( v2f i ) : COLOR {
79+
if(_Blur == 0) return float4(0,0,0,0);
80+
81+
float3 sum = float3(0,0,0);
82+
83+
#define GRABPIXEL(weight,kernelx) tex2D( BACKDROP_TEX, UNITY_PROJ_COORD(float2(i.uvgrab.x + BACKDROP_TEXELSIZE.x * kernelx*_Blur, i.uvgrab.y))) * weight
84+
85+
sum += GRABPIXEL(0.05, -4.0);
86+
sum += GRABPIXEL(0.09, -3.0);
87+
sum += GRABPIXEL(0.12, -2.0);
88+
sum += GRABPIXEL(0.15, -1.0);
89+
sum += GRABPIXEL(0.18, 0.0);
90+
sum += GRABPIXEL(0.15, +1.0);
91+
sum += GRABPIXEL(0.12, +2.0);
92+
sum += GRABPIXEL(0.09, +3.0);
93+
sum += GRABPIXEL(0.05, +4.0);
94+
95+
return float4(sum, 1);
96+
}
97+
ENDCG
98+
}
99+
100+
Pass {
101+
CGPROGRAM
102+
#pragma vertex vert
103+
#pragma fragment frag
104+
#pragma target 2.0
105+
#pragma shader_feature_local _SPECULARHIGHLIGHTS_OFF
106+
#pragma shader_feature_local _GLOSSYREFLECTIONS_OFF
107+
#pragma fragmentoption ARB_precision_hint_fastest
108+
#define GRAB_POS
109+
#include "UnityCG.cginc"
110+
#include "ShaderSetup.cginc"
111+
112+
float _Blur;
113+
114+
sampler2D _CameraOpaqueTexture;
115+
float4 _CameraOpaqueTexture_TexelSize;
116+
#define BACKDROP_TEX _CameraOpaqueTexture
117+
#define BACKDROP_TEXELSIZE _CameraOpaqueTexture_TexelSize
118+
119+
float4 frag( v2f i ) : COLOR {
120+
if(_Blur == 0) return float4(0,0,0,0);
121+
122+
float3 sum = float3(0,0,0);
123+
124+
#define GRABPIXEL(weight,kernely) tex2D( BACKDROP_TEX, UNITY_PROJ_COORD(float2(i.uvgrab.x, i.uvgrab.y + BACKDROP_TEXELSIZE.y * kernely*_Blur))) * weight
125+
126+
sum += GRABPIXEL(0.05, -4.0);
127+
sum += GRABPIXEL(0.09, -3.0);
128+
sum += GRABPIXEL(0.12, -2.0);
129+
sum += GRABPIXEL(0.15, -1.0);
130+
sum += GRABPIXEL(0.18, 0.0);
131+
sum += GRABPIXEL(0.15, +1.0);
132+
sum += GRABPIXEL(0.12, +2.0);
133+
sum += GRABPIXEL(0.09, +3.0);
134+
sum += GRABPIXEL(0.05, +4.0);
135+
136+
return float4(sum, 1);
137+
}
138+
ENDCG
139+
}
140+
141+
Pass {
142+
CGPROGRAM
143+
#pragma vertex vert
144+
#pragma fragment frag
145+
#pragma target 2.0
146+
#pragma shader_feature_local _SPECULARHIGHLIGHTS_OFF
147+
#pragma shader_feature_local _GLOSSYREFLECTIONS_OFF
148+
#pragma fragmentoption ARB_precision_hint_fastest
149+
#define GRAB_POS
150+
#include "UnityCG.cginc"
151+
#include "UnityUI.cginc"
152+
#include "ShaderSetup.cginc"
153+
154+
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
155+
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
156+
157+
float _Blur;
158+
float _Brightness;
159+
float _Contrast;
160+
float _Grayscale;
161+
float _HueRotate;
162+
float _Invert;
163+
float _Opacity;
164+
float _Saturate;
165+
float _Sepia;
166+
float _Pixelate;
167+
float _Grain;
168+
169+
float4 _ClipRect;
170+
171+
sampler2D _CameraOpaqueTexture;
172+
float4 _CameraOpaqueTexture_TexelSize;
173+
#define BACKDROP_TEX _CameraOpaqueTexture
174+
#define BACKDROP_TEXELSIZE _CameraOpaqueTexture_TexelSize
175+
176+
// Convert RGB to Grayscale
177+
float3 rgb2gray(float3 color)
178+
{
179+
return dot(color, float3(0.299, 0.587, 0.114));
180+
}
181+
182+
// Convert RGB to HSV for Hue and Saturation adjustments
183+
float3 rgb2hsv(float3 c)
184+
{
185+
float4 K = float4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
186+
float4 p = lerp(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));
187+
float4 q = lerp(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));
188+
189+
float d = q.x - min(q.w, q.y);
190+
float e = 1.0e-10;
191+
return float3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
192+
}
193+
194+
// Convert HSV to RGB
195+
float3 hsv2rgb(float3 c)
196+
{
197+
float4 K = float4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
198+
float3 p = abs(frac(c.xxx + K.xyz) * 6.0 - K.www);
199+
return c.z * lerp(K.xxx, saturate(p - K.xxx), c.y);
200+
}
201+
202+
float rand(float2 co)
203+
{
204+
return frac(sin(dot(co.xy, float2(12.9898, 78.233))) * 43758.5453);
205+
}
206+
207+
float4 frag(v2f i) : SV_Target
208+
{
209+
float2 uvgrab = i.uvgrab;
210+
211+
// Apply pixelate effect
212+
if (_Pixelate > 0)
213+
{
214+
float4 ts = BACKDROP_TEXELSIZE * _Pixelate;
215+
uvgrab = round(i.uvgrab / ts.xy) * ts.xy;
216+
}
217+
218+
// Grab the texture from behind the current object
219+
float3 color = tex2D(BACKDROP_TEX, uvgrab).rgb;
220+
221+
// Convert to grayscale if needed
222+
if (_Grayscale > 0)
223+
{
224+
float gray = rgb2gray(color);
225+
color = lerp(color, float3(gray, gray, gray), _Grayscale);
226+
}
227+
228+
// Adjust brightness and contrast
229+
color = color * _Brightness;
230+
color = (color - 0.5) * _Contrast + 0.5;
231+
232+
// Adjust hue and saturation
233+
float3 hsv = rgb2hsv(color);
234+
hsv.x += _HueRotate / 360.0;
235+
hsv.y *= _Saturate;
236+
color = hsv2rgb(hsv);
237+
238+
// Apply sepia effect
239+
if (_Sepia > 0)
240+
color = lerp(color, float3(dot(color, float3(0.393, 0.769, 0.189)), dot(color, float3(0.349, 0.686, 0.168)), dot(color, float3(0.272, 0.534, 0.131))), _Sepia);
241+
242+
// Invert
243+
if (_Invert > 0)
244+
color = lerp(color, 1 - color, _Invert);
245+
246+
// Apply grain
247+
if (_Grain > 0)
248+
color += (0.5 - rand(i.uv)) * _Grain;
249+
250+
float4 res = float4(color, _Opacity);
251+
252+
253+
#ifdef UNITY_UI_CLIP_RECT
254+
res.a *= UnityGet2DClipping(i.worldPosition.xy, _ClipRect);
255+
#endif
256+
257+
#ifdef UNITY_UI_ALPHACLIP
258+
clip(res.a - 0.001);
259+
#endif
260+
261+
return res;
262+
}
263+
264+
ENDCG
265+
}
266+
}
267+
54268
SubShader {
55269
GrabPass { }
56270

@@ -67,15 +281,18 @@ Shader "ReactUnity/BackdropFilter"
67281
#include "ShaderSetup.cginc"
68282

69283
float _Blur;
284+
70285
sampler2D _GrabTexture;
71286
float4 _GrabTexture_TexelSize;
287+
#define BACKDROP_TEX _GrabTexture
288+
#define BACKDROP_TEXELSIZE _GrabTexture_TexelSize
72289

73290
float4 frag( v2f i ) : COLOR {
74291
if(_Blur == 0) return float4(0,0,0,0);
75292

76293
float3 sum = float3(0,0,0);
77294

78-
#define GRABPIXEL(weight,kernelx) tex2D( _GrabTexture, UNITY_PROJ_COORD(float2(i.uvgrab.x + _GrabTexture_TexelSize.x * kernelx*_Blur, i.uvgrab.y))) * weight
295+
#define GRABPIXEL(weight,kernelx) tex2D( BACKDROP_TEX, UNITY_PROJ_COORD(float2(i.uvgrab.x + BACKDROP_TEXELSIZE.x * kernelx*_Blur, i.uvgrab.y))) * weight
79296

80297
sum += GRABPIXEL(0.05, -4.0);
81298
sum += GRABPIXEL(0.09, -3.0);
@@ -107,15 +324,18 @@ Shader "ReactUnity/BackdropFilter"
107324
#include "ShaderSetup.cginc"
108325

109326
float _Blur;
327+
110328
sampler2D _GrabTexture;
111329
float4 _GrabTexture_TexelSize;
330+
#define BACKDROP_TEX _GrabTexture
331+
#define BACKDROP_TEXELSIZE _GrabTexture_TexelSize
112332

113333
float4 frag( v2f i ) : COLOR {
114334
if(_Blur == 0) return float4(0,0,0,0);
115335

116336
float3 sum = float3(0,0,0);
117337

118-
#define GRABPIXEL(weight,kernely) tex2D( _GrabTexture, UNITY_PROJ_COORD(float2(i.uvgrab.x, i.uvgrab.y + _GrabTexture_TexelSize.y * kernely*_Blur))) * weight
338+
#define GRABPIXEL(weight,kernely) tex2D( BACKDROP_TEX, UNITY_PROJ_COORD(float2(i.uvgrab.x, i.uvgrab.y + BACKDROP_TEXELSIZE.y * kernely*_Blur))) * weight
119339

120340
sum += GRABPIXEL(0.05, -4.0);
121341
sum += GRABPIXEL(0.09, -3.0);
@@ -135,7 +355,6 @@ Shader "ReactUnity/BackdropFilter"
135355
GrabPass { }
136356

137357
Pass {
138-
139358
CGPROGRAM
140359
#pragma vertex vert
141360
#pragma fragment frag
@@ -164,8 +383,11 @@ Shader "ReactUnity/BackdropFilter"
164383
float _Grain;
165384

166385
float4 _ClipRect;
386+
167387
sampler2D _GrabTexture;
168388
float4 _GrabTexture_TexelSize;
389+
#define BACKDROP_TEX _GrabTexture
390+
#define BACKDROP_TEXELSIZE _GrabTexture_TexelSize
169391

170392
// Convert RGB to Grayscale
171393
float3 rgb2gray(float3 color)
@@ -205,12 +427,12 @@ Shader "ReactUnity/BackdropFilter"
205427
// Apply pixelate effect
206428
if (_Pixelate > 0)
207429
{
208-
float4 ts = _GrabTexture_TexelSize * _Pixelate;
430+
float4 ts = BACKDROP_TEXELSIZE * _Pixelate;
209431
uvgrab = round(i.uvgrab / ts.xy) * ts.xy;
210432
}
211433

212434
// Grab the texture from behind the current object
213-
float3 color = tex2D(_GrabTexture, uvgrab).rgb;
435+
float3 color = tex2D(BACKDROP_TEX, uvgrab).rgb;
214436

215437
// Convert to grayscale if needed
216438
if (_Grayscale > 0)

0 commit comments

Comments
 (0)