Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
13 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by KEric · Mar 03, 2014 at 08:09 PM · shadershaderscartoon

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"
 }
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
0
Best Answer

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.

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image KEric · Mar 15, 2014 at 09:01 PM 0
Share

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

avatar image whydoidoit · Mar 15, 2014 at 09:09 PM 0
Share

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.

avatar image KEric · Mar 16, 2014 at 07:25 AM 0
Share

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"
 }
 

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

21 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How can I make the most efficient SDF Shader in unity 1 Answer

Lightweight Render Shader not receive shadows 0 Answers

How to set shader vertex normals to face up 1 Answer

shader Transparency 1 Answer

Standard Shader Still Visible through Stencil Shader 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges