MADFINGER tricked me! O_O

Dear great community!

After importing the Madfinger Demo to see how things are going on there i found a shader that made me thinking and testing all day without getting a clear result how that one was done.

It's about the transparent borders shown in the picture below (right one). I tried to reproduce the effect by importing my own plane (left one) after i put the same shader/material on it. But somehow without luck. I still think it's done by the shader. But how should the plane be prepared so that the shader does this smooth transparent borders on any kind of a similar object. I am really confused how they did that. Respect to Madfinger Games. The guys there are freaking tuff. Normally i am able to reproduce things. O_O Am i that blind? O_O



here is the shader, so if someone wants to reproduce the effect too:

Code (csharp):

1.  
2. Shader "MADFINGER/Environment/Scroll 2 Layers Sine AlphaBlended" {
3. Properties {
4.     _MainTex ("Base layer (RGB)", 2D) = "white" {}
5.     _DetailTex ("2nd layer (RGB)", 2D) = "white" {}
6.     _ScrollX ("Base layer Scroll speed X", Float) = 1.0
7.     _ScrollY ("Base layer Scroll speed Y", Float) = 0.0
8.     _Scroll2X ("2nd layer Scroll speed X", Float) = 1.0
9.     _Scroll2Y ("2nd layer Scroll speed Y", Float) = 0.0
10.     _SineAmplX ("Base layer sine amplitude X",Float) = 0.5
11.     _SineAmplY ("Base layer sine amplitude Y",Float) = 0.5
12.     _SineFreqX ("Base layer sine freq X",Float) = 10
13.     _SineFreqY ("Base layer sine freq Y",Float) = 10
14.     _SineAmplX2 ("2nd layer sine amplitude X",Float) = 0.5
15.     _SineAmplY2 ("2nd layer sine amplitude Y",Float) = 0.5
16.     _SineFreqX2 ("2nd layer sine freq X",Float) = 10
17.     _SineFreqY2 ("2nd layer sine freq Y",Float) = 10
18.     _Color("Color", Color) = (1,1,1,1)
19.    
20.     _MMultiplier ("Layer Multiplier", Float) = 2.0
21. }
22.  
23.    
24. SubShader {
25.     Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
26.    
27.     Blend SrcAlpha OneMinusSrcAlpha
28.     Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }
29.    
30.     LOD 100
31.    
32.    
33.    
34.     CGINCLUDE
35.     #pragma multi_compile LIGHTMAP_OFF LIGHTMAP_ON
36.     #pragma exclude_renderers molehill    
37.     #include "UnityCG.cginc"
38.     sampler2D _MainTex;
39.     sampler2D _DetailTex;
40.  
41.     float4 _MainTex_ST;
42.     float4 _DetailTex_ST;
43.    
44.     float _ScrollX;
45.     float _ScrollY;
46.     float _Scroll2X;
47.     float _Scroll2Y;
48.     float _MMultiplier;
49.    
50.     float _SineAmplX;
51.     float _SineAmplY;
52.     float _SineFreqX;
53.     float _SineFreqY;
54.  
55.     float _SineAmplX2;
56.     float _SineAmplY2;
57.     float _SineFreqX2;
58.     float _SineFreqY2;
59.     float4 _Color;
60.  
61.     struct v2f {
62.         float4 pos : SV_POSITION;
63.         float4 uv : TEXCOORD0;
64.         fixed4 color : TEXCOORD1;
65.     };
66.  
67.    
68.     v2f vert (appdata_full v)
69.     {
70.         v2f o;
71.         o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
72.         o.uv.xy = TRANSFORM_TEX(v.texcoord.xy,_MainTex) + frac(float2(_ScrollX, _ScrollY) * _Time);
73.         o.uv.zw = TRANSFORM_TEX(v.texcoord.xy,_DetailTex) + frac(float2(_Scroll2X, _Scroll2Y) * _Time);
74.        
75.         o.uv.x += sin(_Time * _SineFreqX) * _SineAmplX;
76.         o.uv.y += sin(_Time * _SineFreqY) * _SineAmplY;
77.        
78.         o.uv.z += sin(_Time * _SineFreqX2) * _SineAmplX2;
79.         o.uv.w += sin(_Time * _SineFreqY2) * _SineAmplY2;
80.        
81.         o.color = _MMultiplier * _Color * v.color;
82.         return o;
83.     }
84.     ENDCG
85.  
86.  
87.     Pass {
88.         CGPROGRAM
89.         #pragma vertex vert
90.         #pragma fragment frag
91. //      #pragma fragmentoption ARB_precision_hint_fastest      
92.         fixed4 frag (v2f i) : COLOR
93.         {
94.             fixed4 o;
95.             fixed4 tex = tex2D (_MainTex, i.uv.xy);
96.             fixed4 tex2 = tex2D (_DetailTex, i.uv.zw);
97.            
98.             o = tex * tex2 * i.color;
99.                        
100.             return o;
101.         }
102.         ENDCG
103.     }  
104. }
105. }
106.  

 

They are using vertex color. When you create your mesh, make the outer vertices as transparent as needed with vertex colors. Like that you can easily get this effect.

 

Yep the shader uses vertex alpha to control the transparency amount and vertex colour to control the darkening/orange tint at the smoke source.

 

It's not a madfinger thing, it's a really old technique used heavily since DX7 / opengl quake 2 days. Easy to see how it seems to be new though. These tricks are used all the time, naughty dog love tricks like this on ps3.

These kinds of tricks aren't going away, they are staple development classics, regardless of hardware. People always assume it's shader magic but really its about doing less work whenever you can to get the same effect. Even on next gen consoles, it's not a time to be lazy so exploring these tricks will serve you well.

Take world of warcraft, half of all it's special effects are alpha mesh tricks like this - uv scrolling fire etc. I do it in The Other Brothers for vignetting, for flowing slime and so on.

You should explore what vertex colours can give you for your shaders, think about vertex attributes being just values you can use for embedding information the shader can use for other things. For example you might use vertex alpha as flexibility for plant deformation.