Team Fortress 2 / Toon Shader in Unity Free Version

I ll be very quick, is it possible to make a custom shader like that one used in team Fortress 2 (and render the related effect) in Unity Free Version?

As reference, the effect I would like to achieve is pretty much like this: http://forum.unity3d.com/threads/16753-Illustrative-Cartoon-Shader-Team-Fortress-Style and the code for the rim light and ramp texture sampling should be something like:

Code (csharp):

1.  
2.  
3. sampler2D _LightingRamp;
4.             inline half4 LightingBlinnPhongEditor_PrePass (EditorSurfaceOutput s, half4 light)
5.             {
6.                 float lum = Luminance( light.rgb );
7.                 float newIllumination = tex2D(_LightingRamp, float2( lum, 0)).r;
8.                 half3 spec = light.a * s.Gloss;
9.                 half4 c;
10.                 c.rgb = (s.Albedo * newIllumination + newIllumination * spec);
11.                 c.a = s.Alpha + Luminance(spec);
12.                 return c;
13.             }
14.  
15.  
16.  

considering the rim light as view dir independent as valve says in his article:

http://www.valvesoftware.com/publications/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf
Thanks very much for your help guys.

Regards.

 

Yeah, it's very easily done.

The ambient cubemapping that Valve uses for the ambient lighting is a little harder to implement, though.

 

Thanks very much for the quick reply!

Please feel free to post any reference you have guys on this kind of shaders. I would really appreciate that. Thank you very much again!

 

I have one made somewhere (without the ambient cubemap) I'd just need to port it to Unity.

I'll knock it up over lunch time and post it up here.

 

TF2 Shader Code

Pre-made Toon Ramps (including TF2's) can be found on Rollin's site;
http://blog.maginot.eu/dl.php?v=A15B01X103

Example of shader working;

Code (csharp):

1.  
2. Shader "Toon/Team Fortress 2" {
3.     Properties {
4.         _Color ("Main Color", Color) = (1,1,1,1)
5.         _RimColor ("Rim Color", Color) = (0.97,0.88,1,0.75)
6.         _RimPower ("Rim Power", Float) = 2.5
7.         _MainTex ("Diffuse (RGB) Alpha (A)", 2D) = "white" {}
8.         _BumpMap ("Normal (Normal)", 2D) = "bump" {}
9.         _SpecularTex ("Specular Level (R) Gloss (G) Rim Mask (B)", 2D) = "gray" {}
10.         _RampTex ("Toon Ramp (RGB)", 2D) = "white" {}
11.         _Cutoff ("Alphatest Cutoff", Range(0, 1)) = 0.5
12.     }
13.  
14.     SubShader{
15.         Tags { "RenderType" = "Opaque" }
16.        
17.         CGPROGRAM
18.             #pragma surface surf TF2 alphatest:_Cutoff
19.             #pragma target 3.0
20.  
21.             struct Input
22.             {
23.                 float2 uv_MainTex;
24.                 float3 worldNormal;
25.                 INTERNAL_DATA
26.             };
27.            
28.             sampler2D _MainTex, _SpecularTex, _BumpMap, _RampTex;
29.             float4 _RimColor;
30.             float _RimPower;
31.  
32.             inline fixed4 LightingTF2 (SurfaceOutput s, fixed3 lightDir, fixed3 viewDir, fixed atten)
33.             {
34.                 fixed3 h = normalize (lightDir + viewDir);
35.                
36.                 fixed NdotL = dot(s.Normal, lightDir) * 0.5 + 0.5;
37.                 fixed3 ramp = tex2D(_RampTex, float2(NdotL * atten)).rgb;
38.                
39.                 float nh = max (0, dot (s.Normal, h));
40.                 float spec = pow (nh, s.Gloss * 128) * s.Specular;
41.                
42.                 fixed4 c;
43.                 c.rgb = ((s.Albedo * ramp * _LightColor0.rgb + _LightColor0.rgb * spec) * (atten * 2));
44.                 c.a = s.Alpha;
45.                 return c;
46.             }
47.  
48.             void surf (Input IN, inout SurfaceOutput o)
49.             {
50.                 o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb;
51.                 o.Alpha = tex2D(_MainTex, IN.uv_MainTex).a;
52.                 o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_MainTex));
53.                 float3 specGloss = tex2D(_SpecularTex, IN.uv_MainTex).rgb;
54.                 o.Specular = specGloss.r;
55.                 o.Gloss = specGloss.g;
56.                
57.                 half3 rim = pow(max(0, dot(float3(0, 1, 0), WorldNormalVector (IN, o.Normal))), _RimPower) * _RimColor.rgb * _RimColor.a * specGloss.b;
58.                 o.Emission = rim;
59.             }
60.         ENDCG
61.     }
62.     Fallback "Transparent/Cutout/Bumped Specular"
63. }
64.  

 

Thanks very Much!!! This is REALLY helpful! Thax Again.

Regards.

 

Does this happen to work in a iOS environment, too ?
Cause I was meaning to implement something like this in a IPhone project for a long time

 

Uhh, not sure. I haven't touched anything related to iOS before.

I'm pretty sure ramp and rim light should be possible, though.

 

should work, see nothing that springs out that would imply that it would not work

but pixel lights are rather intense in fillrate if you don't make them very low range, which performance plagues especially ipad1 and iphone4 / itouch4 which with their native resolution just are totally underpowered on the GPU if you really go with OpenGL ES 2.0 (which you have to if you want to use surface shaders / programmable pipeline)

 

Yeah, I'd push the rim light up into the vertex shader and ditch the normal maps in the fragment shader.

On a screen that size and modles that low res, you're not likely to notice much of a difference anyway.

 

hey, i am still here

Thanks again for the shader, I have slightly changed it but it has been very helpdul! However, my artist is trying to do the rim mask and the ramp texture, but i m not sure what ask him for. I mean, I actually do not know what a rim mask his (looking at the rim light calculation and at the name, it should be obvious, it is a mask who rules the rim light colour intensity, and I guess it should be a a grey scale (from black to white, from 0 to 1), but apparently we cannot still achieve the rim light "effect". In addition, I have some doubts also on the Ramp Texture, how it should be made? Any valid reference? I looked at the BumpSpecRim light shader on the wiki, and it seeams like the Ramp Light it s a gray scale.. isn it? Actually I was thinking it was something different (like a texture covered by a mask or map).

Anyway thanks for everything, althought I am not new to shader programming, I have some doubts on how these textures should be.

EDIT: I think we solved, now the character looks pretty cool, but i appreciate anyway some explanations on the ramp texture and rim mask, if someone of you guys would like to teach me

 

The TF2 rim light is actually vertical direction (rather than the usual fresnel style, where it's based on view direction), which I've replicated in the shader.

The mask is, yes, just the blue channel of the spec/gloss map. It wasn't getting used for anything else, so I figured why not White means full rim strength, black means no rim at all. If in doubt, just leave the blue channel completely white.

As for the ramp texture, it goes from "dark" to "bright" from the left to right of the texture. So put anything you like in there, really. There isn't any traditional shading applied to the model - it's all taken from the ramp texture. So you'll probably want to ensure that it gets pretty dark towards the left hand side. Any of the ramp textures in that link I posted should work fine.

You'll probably want to set them to "clamp" wrap mode in the Inspector, though.

 

yeah thank you very much now I perfectly understand how rim works! Cheers!

 

Really useful thanks guys

 

Added to wiki;
http://www.unifycommunity.com/wiki/index.php?title=TeamFortress2Shader

 

awesome cool guys thx again

Can Unity free version display the same shader with an ambient cubemapping ? Or in other, if I add it to the shader, will unity free version allow to render it? I think there should not be problems, but i m not sure.

Edit: I added a simple reflection Cube Map based on Normals and the result its pretty cool. It effectively improves the overall effect.

I ll do more researches on the ambient cube mapping stuff

 

Sorry to dig up this thread. I just tried this shader, and I think is awesome.
I've got just a question: the color field is not working for me: no matter what color I set up, I always need a texture. The color has no effect whatsoever. Since I'm working with monochromatic models, is there a way to actually use color instead of creating a texture?
Thank you!

 

Yeah, it's there for the fallbacks.

This should have the colour value apply to the diffuse (if there is one) or simply use the colour (if there is no diffuse).

Code (csharp):

1.  
2. Shader "Toon/Team Fortress 2" {
3.     Properties {
4.         _Color ("Main Color", Color) = (1,1,1,1)
5.         _RimColor ("Rim Color", Color) = (0.97,0.88,1,0.75)
6.         _RimPower ("Rim Power", Float) = 2.5
7.         _MainTex ("Diffuse (RGB) Alpha (A)", 2D) = "white" {}
8.         _BumpMap ("Normal (Normal)", 2D) = "bump" {}
9.         _SpecularTex ("Specular Level (R) Gloss (G) Rim Mask (B)", 2D) = "gray" {}
10.         _RampTex ("Toon Ramp (RGB)", 2D) = "white" {}
11.         _Cutoff ("Alphatest Cutoff", Range(0, 1)) = 0.5
12.     }
13.  
14.     SubShader{
15.         Tags { "RenderType" = "Opaque" }
16.        
17.         CGPROGRAM
18.             #pragma surface surf TF2 alphatest:_Cutoff
19.             #pragma target 3.0
20.  
21.             struct Input
22.             {
23.                 float2 uv_MainTex;
24.                 float3 worldNormal;
25.                 INTERNAL_DATA
26.             };
27.            
28.             sampler2D _MainTex, _SpecularTex, _BumpMap, _RampTex;
29.             float4 _RimColor, _Color;
30.             float _RimPower;
31.  
32.             inline fixed4 LightingTF2 (SurfaceOutput s, fixed3 lightDir, fixed3 viewDir, fixed atten)
33.             {
34.                 fixed3 h = normalize (lightDir + viewDir);
35.                
36.                 fixed NdotL = dot(s.Normal, lightDir) * 0.5 + 0.5;
37.                 fixed3 ramp = tex2D(_RampTex, float2(NdotL * atten)).rgb;
38.                
39.                 float nh = max (0, dot (s.Normal, h));
40.                 float spec = pow (nh, s.Gloss * 128) * s.Specular;
41.                
42.                 fixed4 c;
43.                 c.rgb = ((s.Albedo * _Color.rgb * ramp * _LightColor0.rgb + _LightColor0.rgb * spec) * (atten * 2));
44.                 c.a = s.Alpha * _Color.a;
45.                 return c;
46.             }
47.  
48.             void surf (Input IN, inout SurfaceOutput o)
49.             {
50.                 o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb;
51.                 o.Alpha = tex2D(_MainTex, IN.uv_MainTex).a;
52.                 o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_MainTex));
53.                 float3 specGloss = tex2D(_SpecularTex, IN.uv_MainTex).rgb;
54.                 o.Specular = specGloss.r;
55.                 o.Gloss = specGloss.g;
56.                
57.                 half3 rim = pow(max(0, dot(float3(0, 1, 0), WorldNormalVector (IN, o.Normal))), _RimPower) * _RimColor.rgb * _RimColor.a * specGloss.b;
58.                 o.Emission = rim;
59.             }
60.         ENDCG
61.     }
62.     Fallback "Transparent/Cutout/Bumped Specular"
63. }
64.  

 

This Shader is pretty cool.
I would like to add some outlines to this shader, and tried using the built-in toonshaders for it, but this destroys the shader colors, etc.

How would the Code look like, if you add "Outline-Color" and "Outline-thickness" ?

would be pretty awesome if you could improve the code with a outline feature!

 

I have license for Unity 2.6.1, any chance to rewrite this shader for my version?

 

Hi ,all!
If anyone wants this shader with outline than here you go :

Image:

Shader:

Code (csharp):

1. Shader "Toon/Team Fortress 2" {
2.     Properties {
3.         _Color ("Main Color", Color) = (1,1,1,1)
4.         _RimColor ("Rim Color", Color) = (0.97,0.88,1,0.75)
5.         _OutlineColor ("Outline Color", Color) = (0,0,0,1)
6.         _RimPower ("Rim Power", Range(0.5,8.0)) = 3.0
7.         _Outline ("Outline Width", Range (.002, 0.03)) = .005
8.         _MainTex ("Texture", 2D) = "white" {}
9.         _BumpMap ("Normal Map", 2D) = "bump" {}
10.         _SpecularTex ("Specular Map", 2D) = "gray" {}
11.         _RampTex ("Shading Ramp", 2D) = "white" {}
12.     }
13.    
14.     SubShader {
15.         Tags { "RenderType" = "Opaque" }
16.        
17.         CGPROGRAM
18.             #pragma surface surf TF2
19.             #pragma target 3.0
20.  
21.             struct Input
22.             {
23.                 float2 uv_MainTex;
24.                 float3 worldNormal;
25.                 INTERNAL_DATA
26.             };
27.            
28.             sampler2D _MainTex, _SpecularTex, _BumpMap, _RampTex;
29.             float4 _RimColor;
30.             float  _RimPower;
31.             fixed4 _Color;
32.  
33.             inline fixed4 LightingTF2 (SurfaceOutput s, fixed3 lightDir, fixed3 viewDir, fixed atten)
34.             {
35.                 fixed3 h = normalize (lightDir + viewDir);
36.  
37.                 fixed NdotL = dot(s.Normal, lightDir) * 0.5 + 0.5;
38.                 fixed3 ramp = tex2D(_RampTex, float2(NdotL * atten)).rgb;
39.  
40.                 float nh = max (0, dot (s.Normal, h));
41.                 float spec = pow (nh, s.Gloss * 128) * s.Specular;
42.  
43.                 fixed4 c;
44.                 c.rgb = ((s.Albedo * _Color.rgb * ramp * _LightColor0.rgb + _LightColor0.rgb * spec) * (atten * 2));
45.                 return c;
46.             }
47.    
48.             void surf (Input IN, inout SurfaceOutput o)
49.             {
50.                 o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb;
51.                 o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_MainTex));
52.                 float3 specGloss = tex2D(_SpecularTex, IN.uv_MainTex).rgb;
53.                 o.Specular = specGloss.r;
54.                 o.Gloss = specGloss.g;
55.  
56.                 half3 rim = pow(max(0, dot(float3(0, 1, 0), WorldNormalVector (IN, o.Normal))), _RimPower) * _RimColor.rgb * _RimColor.a * specGloss.b;
57.                 o.Emission = rim;
58.             }
59.    
60.             ENDCG
61.        
62.             CGINCLUDE
63.             #include "UnityCG.cginc"
64.    
65.             struct appdata {
66.                 float4 vertex : POSITION;
67.                 float3 normal : NORMAL;
68.             };
69.  
70.             struct v2f {
71.                 float4 pos : POSITION;
72.                 float4 color : COLOR;
73.             };
74.    
75.             uniform float _Outline;
76.             uniform float4 _OutlineColor;
77.    
78.             v2f vert(appdata v) {
79.                 v2f o;
80.                 o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
81.  
82.                 float3 norm   = mul ((float3x3)UNITY_MATRIX_IT_MV, v.normal);
83.                 float2 offset = TransformViewToProjection(norm.xy);
84.  
85.                 o.pos.xy += offset * o.pos.z * _Outline;
86.                 o.color = _OutlineColor;
87.                 return o;
88.             }
89.             ENDCG
90.        
91.             Pass {
92.                 Name "OUTLINE"
93.                 Tags { "LightMode" = "Always" }
94.                 Cull Front
95.                 ZWrite On
96.                 ColorMask RGB
97.                 Blend SrcAlpha OneMinusSrcAlpha
98.  
99.                 CGPROGRAM
100.                 #pragma vertex vert
101.                 #pragma fragment frag
102.                 half4 frag(v2f i) :COLOR { return i.color; }
103.                 ENDCG
104.             }  
105.       }
106.     Fallback "Bumped Specular"
107. }

Let me know if you have problem with the shader

 

Fantastic , I'm using this right now !

 

Hey Farfarer...this is awesome, thanks for posting. Would it be difficult to add a specular color slider? Just a color slider that can tint the spec a particular color?

 

Has anyone noticed this shader creates weird light artefacts on the back of the model? ie the side the light is not on.
I think it is something to do with the gloss or specular, by turning that down i have been able to remove them, but i would like to use them!
Im using the free version of unity 4.

Any tips or hints on how to fix this would be greatly received!

 

Multiply the spec value by saturate(dot(s.Normal, lightDir))

 

Hey thanks for the reply.
I'm no shader expert, any chance you could explain what you mean in more detail? Are you suggesting a change to the code?

 

Yeah, give this a go;

Code (csharp):

1.  
2. Shader "Toon/Team Fortress 2" {
3.     Properties {
4.         _Color ("Main Color", Color) = (1,1,1,1)
5.         _RimColor ("Rim Color", Color) = (0.97,0.88,1,0.75)
6.         _RimPower ("Rim Power", Float) = 2.5
7.         _MainTex ("Diffuse (RGB) Alpha (A)", 2D) = "white" {}
8.         _BumpMap ("Normal (Normal)", 2D) = "bump" {}
9.         _SpecularTex ("Specular Level (R) Gloss (G) Rim Mask (B)", 2D) = "gray" {}
10.         _RampTex ("Toon Ramp (RGB)", 2D) = "white" {}
11.         _Cutoff ("Alphatest Cutoff", Range(0, 1)) = 0.5
12.     }
13.  
14.     SubShader{
15.  
16.         Tags { "RenderType" = "Opaque" }
17.  
18.         CGPROGRAM
19.             #pragma surface surf TF2 alphatest:_Cutoff
20.             #pragma target 3.0
21.            
22.             struct Input
23.             {
24.                 float2 uv_MainTex;
25.                 float3 worldNormal;
26.                 INTERNAL_DATA
27.             };
28.            
29.             sampler2D _MainTex, _SpecularTex, _BumpMap, _RampTex;
30.             float4 _RimColor;
31.             float _RimPower;
32.            
33.             inline fixed4 LightingTF2 (SurfaceOutput s, fixed3 lightDir, fixed3 viewDir, fixed atten)
34.             {
35.                 fixed3 h = normalize (lightDir + viewDir);
36.                 fixed NdotL = dot(s.Normal, lightDir);
37.                 fixed3 ramp = tex2D(_RampTex, float2((NdotL * 0.5 + 0.5) * atten)).rgb;
38.                 float nh = max (0, dot (s.Normal, h));
39.                 float spec = pow (nh, s.Gloss * 128) * s.Specular * saturate(NdotL);
40.                 fixed4 c;
41.                 c.rgb = ((s.Albedo * ramp * _LightColor0.rgb + _LightColor0.rgb * spec) * (atten * 2));
42.                 c.a = s.Alpha;
43.                 return c;
44.             }
45.            
46.             void surf (Input IN, inout SurfaceOutput o)
47.             {
48.                 o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb;
49.                 o.Alpha = tex2D(_MainTex, IN.uv_MainTex).a;
50.                 o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_MainTex));
51.                 float3 specGloss = tex2D(_SpecularTex, IN.uv_MainTex).rgb;
52.                 o.Specular = specGloss.r;
53.                 o.Gloss = specGloss.g;
54.                 half3 rim = pow(max(0, dot(float3(0, 1, 0), WorldNormalVector (IN, o.Normal))), _RimPower) * _RimColor.rgb * _RimColor.a * specGloss.b;
55.                 o.Emission = rim;
56.             }
57.  
58.         ENDCG
59.  
60.     }
61.     Fallback "Transparent/Cutout/Bumped Specular"
62. }
63.  

 

Ah very kind of you to edit the shader for me, but im afraid it still does the same thing. Is it just me that gets this error?

 

See if the problem exists on another model, you may have some faulty normal vectors?

 

Daniel Brauer you are correct! 1000 awesome points to you sir! Thanks
Thanks for the other ideas too.

 

sampler2D _MainTex, _RampTex, _EdgeRampTex;

inline fixed4 LightingTF2 (SurfaceOutput s, fixed3 lightDir, fixed3 viewDir, fixed atten)
{
fixed4 c;

float edge = max(dot(s.Normal, viewDir), 0);
float2 edgeTexCoord = float2(edge, 0);
edge = tex2D(_EdgeRampTex, edgeTexCoord).r;

fixed NdotL = dot(s.Normal, lightDir) * 0.5 + 0.5;
fixed3 ramp = tex2D(_RampTex, float2(NdotL * atten)).rgb;

c.rgb = ((s.Albedo * ramp * _LightColor0.rgb) * (atten * 2));
c.a = s.Alpha;
c *= edge;

return c;

}