Blur filter for UITexture in NGUI

SHADDERRRRS! Well that is it, I’m caught in shader land. The thing is, I don’t know jack **** about them. What I am missing mostly from Flash in Unity are filters like blur, drop shadow and glow. How you would go about doing that in Unity would be with shaders (I guess), so I stuck my nose in them. Here is my first version of a Blur filter/shader.

 

Shader "Unlit/Transparent Colored Blurred"
{
  Properties
  {
    _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
    _Distance ("Distance", Float) = 0.015
  }
 
  SubShader
  {
    LOD 100
 
    Tags
    {
      "Queue" = "Transparent"
      "IgnoreProjector" = "True"
      "RenderType" = "Transparent"
    }
 
    Cull Off
    Lighting Off
    ZWrite Off
    Fog { Mode Off }
    Offset -1, -1
    Blend SrcAlpha OneMinusSrcAlpha
 
    Pass
    {
      CGPROGRAM
      #pragma vertex vertexProgram
      #pragma fragment fragmentProgram
 
      #include "UnityCG.cginc"
 
      struct appdata_t
      {
        float4 vertex : POSITION;
        float2 textureCoordinate : TEXCOORD0;
        fixed4 color : COLOR;
      };
 
      struct vertexToFragment
      {
        float4 vertex : SV_POSITION;
        half2 textureCoordinate : TEXCOORD0;
        fixed4 color : COLOR;
      };
 
      sampler2D _MainTex;
      float4 _MainTex_ST;
      float _Distance;
 
      vertexToFragment vertexProgram (appdata_t vertexData)
      {
        vertexToFragment output;
        output.vertex = mul(UNITY_MATRIX_MVP, vertexData.vertex);
        output.textureCoordinate = TRANSFORM_TEX(vertexData.textureCoordinate, _MainTex);
        output.color = vertexData.color;
        return output;
      }
 
      fixed4 fragmentProgram (vertexToFragment input) : COLOR
      {
        float distance = _Distance;
        fixed4 computedColor = tex2D(_MainTex, input.textureCoordinate) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y + distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y)) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x , input.textureCoordinate.y + distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y - distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y - distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y + distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y)) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x , input.textureCoordinate.y - distance )) * input.color;
        computedColor = computedColor / 9;
 
        return computedColor;
      }
      ENDCG
    }
  }
}

It works ok, with a lot of restrictions. First, you can only use it for NGUI UITextures. I would love it to work with UISPrites, but they all share the same atlas, so if you blur one sprite you blur them all! Also, for now, you should leave a padding of 10 transparent pixels around your texture for a better effect.
 

ShaderBlurred

The Distance parameter is relative to the size of your texture so correct values will change from one texture to the other. Anyway you have it, I will keep working on it, but if you see anything that can be improved, don’t be afraid to tell me, I would really like to make it better.

, , , , , ,

  1. No comments yet.
(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.