Fast effective Blur Shader

Unity Engine
1

Hello Guys!

Yesterday i stumbled across this effective blur shader:
http://xissburg.com/faster-gaussian-blur-in-glsl/

It is written for openGL and I’m not familiar with that.
Could someone maybe tell me how to convert it so that unity can read it?
Especially the array is new to me. Can I use arrays in Unity Shaders?

Thank you guys :slight_smile:

2

Hi again!

I tried to convert it, but it doesn’t work :frowning:

Here is my code so far:

Shader "XXX" {
  Properties
  {
// ...
  }

  SubShader
  {
   Pass{
       // [Actual Shader]
       // ...
    }
    
    
    
    GrabPass { }
    
    
    
    Pass{	//1. Pass = Horizontal Blur
    
    	Lighting Off
    
    	CGPROGRAM
      	#pragma vertex vert
      	#pragma fragment frag
      	#pragma target 3.0
      	#include "UnityCG.cginc"
      	
      	//Benutzervariablen
      	float2 v_blurTexCoords[14];
      	float2 v_texCoord;
      	
      	struct v2f{
      		float4 pos : SV_POSITION;	
      		float2  uv : TEXCOORD0;
      	};
      	
      	v2f vert(appdata_base v){
      		v2f o;
      		
      		o.pos = mul (UNITY_MATRIX_MVP, v.vertex);			//Convert Local-Space Position to Screen-Space Pos = Screen Space Pos. of Vertex
        	o.uv = float4( v.texcoord.xy, 0, 0 );				//Texture Coordinate of Vertex (?) = a_texCoord
        	o.uv = ComputeGrabScreenPos(o.pos);					//OR this way?!
        	v_texCoord = o.uv;
      	
	        v_blurTexCoords[ 0] = v_texCoord + float2(-0.028, 0.0);
	    	v_blurTexCoords[ 1] = v_texCoord + float2(-0.024, 0.0);
		    v_blurTexCoords[ 2] = v_texCoord + float2(-0.020, 0.0);
		    v_blurTexCoords[ 3] = v_texCoord + float2(-0.016, 0.0);
		    v_blurTexCoords[ 4] = v_texCoord + float2(-0.012, 0.0);
		    v_blurTexCoords[ 5] = v_texCoord + float2(-0.008, 0.0);
		    v_blurTexCoords[ 6] = v_texCoord + float2(-0.004, 0.0);
		    v_blurTexCoords[ 7] = v_texCoord + float2( 0.004, 0.0);
		    v_blurTexCoords[ 8] = v_texCoord + float2( 0.008, 0.0);
		    v_blurTexCoords[ 9] = v_texCoord + float2( 0.012, 0.0);
		    v_blurTexCoords[10] = v_texCoord + float2( 0.016, 0.0);
		    v_blurTexCoords[11] = v_texCoord + float2( 0.020, 0.0);
		    v_blurTexCoords[12] = v_texCoord + float2( 0.024, 0.0);
		    v_blurTexCoords[13] = v_texCoord + float2( 0.028, 0.0);
		
			return o;
		}
		
		sampler2D _GrabTexture;
		
		half4 frag (v2f i) : COLOR	{
        	half4 texcol = (0.0);
        	
        	texcol += tex2D(_GrabTexture, v_blurTexCoords[ 0])*0.0044299121055113265;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 1])*0.00895781211794;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 2])*0.0215963866053;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 3])*0.0443683338718;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 4])*0.0776744219933;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 5])*0.115876621105;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 6])*0.147308056121;
		    texcol += tex2D(_GrabTexture, v_texCoord         )*0.159576912161;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 7])*0.147308056121;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 8])*0.115876621105;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[ 9])*0.0776744219933;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[10])*0.0443683338718;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[11])*0.0215963866053;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[12])*0.00895781211794;
		    texcol += tex2D(_GrabTexture, v_blurTexCoords[13])*0.0044299121055113265;
       
        	return texcol;
      	}
      	
    	ENDCG
    }
    
   Pass{	//2. Pass = Vertical Blur
    // ...
   }
  }
  Fallback "Diffuse"
}

Can someone help me with this?
I want to use this shader for shader replacement of the camera.
The [Actual Shader] is the shader, that renders the camera with shader replacement.

After that I use the GrabPass to get the current rendertexture/result.

I want this Rendertexture to get blurred. (Pass 1: horizontal, Pass 2: vertical)

What am I doing wrong? Or is it better to write it as GLSLPROGRAM?

3

This might be able to help you. About half way down cician gives a shader example of a blur on the GrabPass (vertical/horizontal) which is essentially the Gaussian blur your looking for.

4

Cician’s code in the other thread is designed for using GrabPass, which isn’t the most efficient (especially on mobile).

I would recommend instead looking at the Image Effects package, specifically Blur.js and FastBloom.js, and their associated shaders. They use a different type of separable blur, but the multi-pass approach should be similar.

5

Hey Daniel, thanks for your hint!

Why didn’t I get that idea? :smile:

The built in “FastBlur”/“Mobile Blur” shader works very well with almost no performance costs !!

thanks!