- Home /
Performance-wise cel/cartoon shading on mobile?
Recently I've been working on 3d game designated for mobile devices. For this time I wasn't very preoccupied with the performance, but the time has finally come and of course things doesn't look good. I was wondering, as I'm using cartoon shading with threshold lookup light texture (with outlined silhouette), what is the most efficient toon shader to use with mobiles?
Maybe it will help to put the shader code, any tuning appreciated as I'm not a shader master
Shader "Custom/Outlined Diffuse Color" {
Properties {
_Color ("Main Color", Color) = (.5,.5,.5,1)
_OutlineColor ("Outline Color", Color) = (0,0,0,1)
_Outline ("Outline width", Range (.002, 0.03)) = .003
_MainTex ("Base (RGB)", 2D) = "white" { }
_Ramp ("Shading Ramp", 2D) = "gray" {}
}
CGINCLUDE
#include "UnityCG.cginc"
struct appdata {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f {
float4 pos : POSITION;
float4 color : COLOR;
};
uniform float _Outline;
uniform float4 _OutlineColor;
v2f vert(appdata v) {
// just make a copy of incoming vertex data but scaled according to normal direction
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
float3 norm = mul ((float3x3)UNITY_MATRIX_IT_MV, v.normal);
float2 offset = TransformViewToProjection(norm.xy);
//o.pos.xy += offset * o.pos.z * _Outline;
o.pos.xy += offset * o.pos.z * 0.002;
o.color = _OutlineColor;
return o;
}
ENDCG
SubShader {
//Tags {"Queue" = "Geometry+100" }
CGPROGRAM
#pragma surface surf Ramp
sampler2D _Ramp;
half4 LightingRamp (SurfaceOutput s, half3 lightDir, half atten) {
half NdotL = dot (s.Normal, lightDir);
half diff = NdotL * 0.5 + 0.5;
half3 ramp = tex2D (_Ramp, float2(diff)).rgb;
half4 c;
c.rgb = s.Albedo * _LightColor0.rgb * ramp * (atten * 2);
c.a = s.Alpha;
return c;
}
sampler2D _MainTex;
fixed4 _Color;
struct Input {
float2 uv_MainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
// note that a vertex shader is specified here but its using the one above
Pass {
Name "OUTLINE"
Tags { "LightMode" = "Always" }
Cull Front
ZWrite On
ColorMask RGB
Blend SrcAlpha OneMinusSrcAlpha
//Offset 50,50
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
half4 frag(v2f i) :COLOR { return i.color; }
ENDCG
}
}
SubShader {
CGPROGRAM
#pragma surface surf Lambert
sampler2D _MainTex;
fixed4 _Color;
struct Input {
float2 uv_MainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
Pass {
Name "OUTLINE"
Tags { "LightMode" = "Always" }
Cull Front
ZWrite On
ColorMask RGB
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
half4 frag(v2f i) :COLOR { return i.color; }
#pragma exclude_renderers gles xbox360 ps3
ENDCG
SetTexture [_MainTex] { combine primary }
}
}
Fallback "Diffuse"
}
Answer by whydoidoit · Mar 15, 2014 at 07:40 PM
I'd be tempted to convert those floats into halfs and make your sampler2D a sample2D_half, this should improve things a little. If you are not using the alpha then remove all references to it in the first pass. Not sure what is happening with the alpha in the outline - so you might need it there.
Thanks for those tips, they are really helpful.
I've made the changes regarding all the floats and it improved the fps rate quite significantly. Additionally I've decided not to use _OutlineColor input (as the outlines are always black) and removed all the code related with that attribute. I don't know if it will have an impact on the performance, but I guess less code equals faster execution, right?
Regarding the alpha channel, at the Unity manual page [1] I've found an interesting fact:
"On some platforms (mostly mobile GPUs found in iOS and Android devices), using Color$$anonymous$$ask to leave out some channels (e.g. Color$$anonymous$$ask RGB) can be expensive, so only use it if really necessary."
So I suppose getting rid of this statement from the shader is a good practice on mobile, right?
[1] http://docs.unity3d.com/Documentation/Components/SL-ShaderPerformance.html
That may well be true. I certainly don't apply that mask when I write for mobile - however, removing the code from the shader will make no difference to the colour mask setting and will be less instructions.
One less pass will certainly make a difference.
I've watered-down the body of the shader as described. The performance has indeed increased but it's still far from being acceptable. Can anyone spot some places in the code which could be tweaked to gain better performance? Any help appreciated.
Additionally I've added a new point light to the scene and it seems that the toon shading is only applied to the surfaces that are light by directional light (_LightColor0.rgb). Is there a quick solution of having my surfaces shaded properly via point lights?
And of course the code:
Shader "Custom/Outlined Diffuse" {
Properties {
_$$anonymous$$ainTex ("Base (RGB)", 2D) = "white" { }
_Ramp ("Shading Ramp", 2D) = "gray" {}
}
CGINCLUDE
#include "UnityCG.cginc"
struct appdata {
half4 vertex : POSITION;
half3 normal : NOR$$anonymous$$AL;
};
struct v2f {
half4 pos : POSITION;
};
v2f vert(appdata v) {
// just make a copy of inco$$anonymous$$g vertex data but scaled according to normal direction
v2f o;
o.pos = mul(UNITY_$$anonymous$$ATRIX_$$anonymous$$VP, v.vertex);
half3 norm = mul ((half3x3)UNITY_$$anonymous$$ATRIX_IT_$$anonymous$$V, v.normal);
half2 offset = TransformViewToProjection(norm.xy);
o.pos.xy += offset * o.pos.z * 0.002;
return o;
}
half4 frag(v2f i) : COLOR {
return half4(0.0, 0.0, 0.0, 1.0);
}
ENDCG
SubShader {
//Tags {"Queue" = "Geometry+100" }
CGPROGRA$$anonymous$$
#pragma surface surf Ramp noambient noforwardadd approxview
sampler2D_half _Ramp;
half4 LightingRamp (SurfaceOutput s, half3 lightDir, half atten) {
half NdotL = dot (s.Normal, lightDir);
half diff = NdotL * 0.5 + 0.5;
half3 ramp = tex2D (_Ramp, half2(diff)).rgb;
half4 c;
c.rgb = s.Albedo * _LightColor0.rgb * ramp * (atten * 2);
c.a = s.Alpha;
return c;
}
sampler2D_half _$$anonymous$$ainTex;
struct Input {
half2 uv_$$anonymous$$ainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
fixed4 c = tex2D(_$$anonymous$$ainTex, IN.uv_$$anonymous$$ainTex);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
// note that a vertex shader is specified here but its using the one above
Pass {
Name "OUTLINE"
Tags { "Light$$anonymous$$ode" = "Always" }
Cull Front
ZWrite On
//Offset 50,50
CGPROGRA$$anonymous$$
#pragma vertex vert
#pragma fragment frag
ENDCG
}
}
Fallback "Diffuse"
}