Skew/Shear Vertex Shader
December 19, 2014  by  
Tags: , ,

When working on my 2D lighting system, I needed to create some shadows. Shadows for sprites can easily be created by skewing the sprite and drawing it in all black. How much you skew depends on the position in relation to the light source. I already had a lighting and shadow system working in XNA, and now I just needed to get it working in Unity.

My first thought was to perfrom a skew from within Unity, in C#, like I did in XNA. As it turns out, you can’t (you can skew GUI elements, but not actual game objects). If you want to skew game objects, you need to skew the mesh itself, which I did actually get to work. However, this solution was a little ugly, and I’m not sure about the performance ramifications when recalculating every frame. So, I set off to find a more elegant solution.

My next idea was to try to skew the sprite from within the vertex shader. I knew it had to be possible, but I wasn’t sure exactly how. To my great surprise (and frustration), I was absolutely unable to find a simple vertex shader skew demo or tutorial anywhere on the web. I searched for literally hours one day, but came up empty. I suppose I shouldn’t be too surprised, since vertex shaders are rarely used with pure 2D games.

With no options left, I had a go at it myself. After a bit of trial and error I was able to create a working solution. All in all, it actually took less time for me to implement it myself than I spent searching for a tutorial! Sigh. Live and learn.

I’ll share the shader here in hopes of saving someone the hassle of what I went through. For a great article on understanding skew matrices themselves, check out this Flash transformation matrix tutorial. Enjoy!

sprite_skew

 
pop-uptext
  1. // Adapted from the built-in Sprites-Default.shader
  2. // You can download the source for the built-in shaders from:
  3. // http://unity3d.com/unity/download/archive
  5. Shader "Sector12/SpriteSkewShader"
  6. {
  7.     Properties
  8.     {
  9.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
  10.         _Color ("Tint", Color) = (1,1,1,1)
  11.         [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
  12.         
  13.         _HorizontalSkew ("Horizontal Skew", Float) = 0
  14.         _VerticalSkew ("Vertical Skew", Float) = 0
  15.     }
  17.     SubShader
  18.     {
  19.         Tags
  20.         { 
  21.             "Queue"="Transparent" 
  22.             "IgnoreProjector"="True" 
  23.             "RenderType"="Transparent" 
  24.             "PreviewType"="Plane"
  25.             "CanUseSpriteAtlas"="True"
  26.         }
  28.         Cull Off
  29.         Lighting Off
  30.         ZWrite Off
  31.         Fog { Mode Off }
  32.         Blend One OneMinusSrcAlpha
  34.         Pass
  35.         {
  36.         CGPROGRAM
  37.             #pragma vertex vert
  38.             #pragma fragment frag
  39.             #pragma multi_compile DUMMY PIXELSNAP_ON
  40.             #include "UnityCG.cginc"
  41.             
  42.             struct appdata_t
  43.             {
  44.                 float4 vertex   : POSITION;
  45.                 float4 color    : COLOR;
  46.                 float2 texcoord : TEXCOORD0;
  47.             };
  49.             struct v2f
  50.             {
  51.                 float4 vertex   : SV_POSITION;
  52.                 fixed4 color    : COLOR;
  53.                 half2 texcoord  : TEXCOORD0;
  54.             };
  55.             
  56.             sampler2D _MainTex;
  57.             fixed4 _Color;
  58.             float _HorizontalSkew;
  59.             float _VerticalSkew;
  61.             v2f vert(appdata_t IN)
  62.             {
  63.                 v2f OUT;
  64.                 OUT.texcoord = IN.texcoord;
  65.                 OUT.color = IN.color * _Color;
  66.                 
  67.                 // Create a skew transformation matrix
  68.                 float h = _HorizontalSkew;
  69.                 float v = _VerticalSkew;
  70.                 float4x4 transformMatrix = float4x4(
  71.                     1,h,0,0,
  72.                     v,1,0,0,
  73.                     0,0,1,0,
  74.                     0,0,0,1);
  75.                 
  76.                 float4 skewedVertex = mul(transformMatrix, IN.vertex);
  77.                 OUT.vertex = mul(UNITY_MATRIX_MVP, skewedVertex);
  78.                 
  79.                 #ifdef PIXELSNAP_ON
  80.                 OUT.vertex = UnityPixelSnap (OUT.vertex);
  81.                 #endif
  83.                 return OUT;
  84.             }
  86.             fixed4 frag(v2f IN) : SV_Target
  87.             {
  88.                 fixed4 c = tex2D(_MainTex, IN.texcoord) * IN.color;
  89.                 c.rgb *= c.a;
  90.                 return c;
  91.             }
  92.         ENDCG
  93.         }
  94.     }
  95. }


Comments are closed here.