Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Toony Colors Pro+Mobile: Cartoon Shaders pack with lots of features!

Discussion in 'Assets and Asset Store' started by Jean-Moreno, Apr 15, 2013.

  1. bugoheyer

    bugoheyer

    Joined:
    Jul 23, 2013
    Posts:
    35
    Hey everyone, I've talked to Jean, but unfortunately I'm getting an issue where him and I can't find what's going. Is anyone using Unity 4.2 and Galaxy S3? I keep getting a buffer problem kinda like everyframe is trying to render the background image wherever the shader is. I'm using outline basic, I tried all the others same issue on my galaxy. Any clues? Thanks in advance.
     
  2. cl-apps

    cl-apps

    Joined:
    Mar 16, 2013
    Posts:
    128
    These shaders don't happen to work with Unity trees do they for toony looking vegetation?
     
  3. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    If you mean the trees made with the Tree Creator, the shaders most likely won't work (or maybe on the trunks only). It looks like they use a set of shaders specifically designed for the tree system with its own custom lighting interactions, so they would need to be rewritten in order to add the same lighting model as the Toony Colors shaders.
    As for the outlines, they wouldn't work because they're based on mesh extrusion with flipped triangles whereas leaves are quads with a transparent texture applied (thus the shader couldn't depict the real silhouette seen as it would only follow the quad edges, not the texture alpha).

    In my opinion, your best bet to get toon-like vegetation would primarily be by re-drawing the textures to give them a more hand-drawn feeling (and maybe add an outline on the texture directly).
     
  4. Parallel_

    Parallel_

    Joined:
    Dec 9, 2012
    Posts:
    90
    Hello Jean, recently got your 'Toony colors pro' as I was using your free matcap shaders for an app with some anatomy display and would like to have the added functionality of outlined shaders for selected elements. I have two questions:

    $ghost_zps0133c314.jpg

    How would I make the additive z shader become black (instead of white on pic)? If I choose black in main color the whole thing goes invisible, if I invert the texture, well then the whole material becomes opaque.

    The other question is perhaps more shader specific but how would I with the 'toony pro' make a slider for alpha/ opacity, so that I could both have the option of; only an outline and the main body transparent. As well as just a normal alpha slider that would control the whole shaders transperancy?
     
  5. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    This is because, as the name says, it has an additive blending mode: this means that the color value is added to the color on the screen. So if you add black (i.e. a value of 0,0,0), then it won't do anything.
    You need to change the blending mode of the shader and make it multiplicative, i.e. the on-screen color gets multiplied with the object's color.
    In the shader source, change the line
    Code (csharp):
    1. Blend One OneMinusSrcColor
    to
    Code (csharp):
    1. Blend DstColor Zero
    and invert the colors on the texture used, and it should do the trick.

    I'm not sure of what you want to achieve exactly here, so send me an email with more details (with mockup screenshots if you can?) and we'll try to work things out! (my email is in my signature)
     
  6. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    Hi, how to modify your shader to support alpha? Sorry but I really have no idea about shader programming.
     
  7. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Please look at these two guides in order to add Alpha Blending (i.e. transparency) or Alpha Testing (i.e. cutout):





    (Download the images or open them in a separate window to view them full size)
     
  8. jjobby

    jjobby

    Joined:
    Nov 28, 2009
    Posts:
    160
    Thank you! But it works only for Basic shader. How to modify it to work with Outline shader?
     
  9. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Unfortunately it can't, because the outline technique is based on the mesh and doesn't take any texture information into account.
    I guess that you can still use the Basic alpha shader, and simulate outlines by drawing them on the texture; it isn't perfect but should still be better than nothing.
     
  10. lazygunn

    lazygunn

    Joined:
    Jul 24, 2011
    Posts:
    2,749
    Hello Jean, owned this for quite a while and very much enjoy it, hard to get a better toon result really! I've been researching NPR approaches for my next thing, which is a very broad subject, but its for quite a serious subject so there's all sorts of ways of looking at it. I'm guessing by the name of the asset it's based very much around Gooch's writings and there's been various since but your shaders seem very much on the ball with keeping up with a modern toon-looking approach. This is another one of my posts where i'm just asking random curious questions haha, but one thing i was looking at, which might be in the packages remit, was this paper http://hal.inria.fr/inria-00362888/en and perhaps a further look http://robbiewolfe.ca/2013/04/15/x2-toon-an-extended-x-toon-shader/ - I was going to have a go myself but I thought since I own this product i'd pass it on in case it was of interest (even if you had a go at it and supplied it in a zip like the multi light source flavours of this)
     
  11. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    I did see these papers a few years ago; I didn't understand everything at the time but now they seem simpler than I would have thought! :)
    Implementing this into Toony Colors wouldn't be very hard I think, send me an email if you need help or want me to try an implementation.
     
  12. AdrianST

    AdrianST

    Joined:
    Jan 7, 2014
    Posts:
    18
  13. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    It looks like the Rim Color in your screenshot has an alpha value of 0.
    The alpha value controls the rim opacity, so making it zero should effectively hide the rim effect entirely!
     
  14. AdrianST

    AdrianST

    Joined:
    Jan 7, 2014
    Posts:
    18
    Thanks for the reply. I actually tried both 0 and 255 and got the same result. Any other ideas on the problem?
     
  15. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Hmm... Can't think of anything looking at the screenshot :|
    Please send me an email with the mesh and material if you want me to take a closer look and I'll get back to you as soon as I can!
     
  16. Daniel10

    Daniel10

    Joined:
    Aug 11, 2013
    Posts:
    10
    Hi Jean! Can you help me with this problem?

    $Shader Problem.png
     
  17. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    This might be a depth buffer issue.
    Do you have the latest version? (1.6)
    If not try to update, Z Writing is enabled back by default and it could solve the issue.
    If you have the latest version or if it doesn't work, let me know!
     
  18. Daniel10

    Daniel10

    Joined:
    Aug 11, 2013
    Posts:
    10
    Thanks!! ;)
    "ZWrite On" solved the problem.
    I'm using version 1.4.
     
  19. Zapgun

    Zapgun

    Joined:
    Jun 3, 2011
    Posts:
    50
    Hi there,

    Just curious if your shaders come with an unlit version? (like the unity default toon shaders do)

    Thanks,

    Zap
     
  20. FriendNFoe

    FriendNFoe

    Joined:
    Sep 24, 2012
    Posts:
    11
    Hello!

    I have a bit of a problem when using any Toon shader, the ramp texture "Toon Ramp (RGB)" is not treated as an RGB colored texture, but as a greyscale, so it's not possible to use any kind of tinting in the shaded areas, or skin shading (where the light/shadow terminator would be more saturated than the rest)

    I don't understand how do you get any cartoonish shading, am I doing something wrong?

    :?
     
  21. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    They don't, the technique used here to get the cartoon shading is directly dependent on lights!
    If you want an unlit cartoon effect, then my free MatCap shaders might be a good solution for this (see the example robot at the far right)



    Go in TGP_Include.cginc and comment the following line:
    Code (csharp):
    1. ramp = lerp(_SColor,_Color,ramp);
    This will disable the Highlight and Shadow colors and take the color information from the ramp texture directly.
     
  22. FriendNFoe

    FriendNFoe

    Joined:
    Sep 24, 2012
    Posts:
    11
    Thanks, will check it out!
     
  23. mcconrad

    mcconrad

    Joined:
    Jul 16, 2013
    Posts:
    155
    good morning,

    i've been using toony colors pro for a long time now, but recently upgraded unity to 4.5 and am getting the following error preventing my game from compiling:
    Shader error in 'Toony Colors Pro/Outline/OneDirLight/Basic Rim': 'vert': output parameter 'o' not completely initialized at line 48

    probably an easy fix, but i really don't do shader code so could you please look into it?
    thanks!
     
  24. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    This should have been fixed as of version 1.6, but I haven't tested yet on Unity 4.5.
    Let me know if the error stills appears with the latest Toony Color Pro version and I'll take a look as soon as possible!
     
  25. gringo2012

    gringo2012

    Joined:
    Jul 6, 2012
    Posts:
    46
    Hello

    I have some issues with the lightmaps. I am using a bumped specular rim shader and I have removed the "nolightmap nodirlightmap" text from the shader. The lightmap does show up but the specular is not visible anymore and the bumpmap is barely visible (as opposed to before). Before both effects were quite visible and nice.

    Is there anything I am missing in the settings?

    I tried with duallightmaps and singlelightmaps, forward and deferred rendering.

    I am using Unity free, maybe it works only with PRO?
     
  26. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    I am not quite sure what could be happening here, but you can try to also remove the 'approxview' keyword (and/or the 'halfasview' one if it's there), the same way you deleted the lightmap keywords in the #pragma line.
    Let me know if it changes things, if not I'll have to do more in-depth researches.
     
  27. Kiori

    Kiori

    Joined:
    Jun 25, 2014
    Posts:
    161
    can i also use your shader with 2d sprites/textures, or is it solely for 3d models?
     
  28. motheartist

    motheartist

    Joined:
    Nov 6, 2013
    Posts:
    3
    Kinda having the same question. Is it any "useable" like this? As I intend to use outlining in my 2D game and try to tighten the graphics look with such shader. I would appreciate some feedback of others using this asset within a 2D environment (characters, objects etc.).
     
  29. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    The shaders rely on the mesh to draw the outlines and the shading, so it is 3D only!
     
  30. motheartist

    motheartist

    Joined:
    Nov 6, 2013
    Posts:
    3
    Thanks for the quick update! Btw your shader looks beautiful :)
     
  31. TimBorquez

    TimBorquez

    Joined:
    Mar 18, 2013
    Posts:
    81
    is there a version for just a basic color instead of a diffuse texture?
     
  32. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Not included in the pack, but it should be very easy to do.
    Shoot me an email with your invoice number and I can help you with that!
     
  33. AVOlight

    AVOlight

    Joined:
    Apr 15, 2014
    Posts:
    427
    Hey Jean, i'm completely new to shaders and materials,

    i've been trying to get an outline on a megashape mesh,
    how do I get this to work? possible?

    Cheers,
    Nick
     
  34. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    I don't know how megashape works exactly, but I don't see any reason why it wouldn't work! The only 'technical' requirement from a mesh is that it needs to have its normals set.
    You then just need to assign a material with an outline shader and it should work I guess!
     
  35. AVOlight

    AVOlight

    Joined:
    Apr 15, 2014
    Posts:
    427
    Thanks,

    Do you consider requests for shaders?
    I'm trying to get new shaders for another asset called RageSpline,

    Rendering outlines through a shader instead of having both fill and outline meshes, would save major on performance for me.
    (I have to refresh meshes every frame, while I'm animating there vertices)
     
  36. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Hmm I don't have much time these days so I can't work on that, however Toony Colors outline might work if you manage to set the vertices' normals in the correct direction with RageSpline (I don't know if it's open source though).
    The outlines work as follow: the mesh is extruded along the vertices' normals and rendered in an opaque color with faces flipped, and then the regular mesh is rendered on top of that, giving the illusion of an outline.
     
  37. AVOlight

    AVOlight

    Joined:
    Apr 15, 2014
    Posts:
    427
    Thanks for the info! RageSpline includes the source, so I just have to learn how these lines of shader code link up. Any tutorials you'd recommended about learning this stuff.
     
  38. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Unity's documentation is quite complete regarding shaders, so it's a good starting point. UnityGems has good step by step guides too.
    Please note though that you may only have to alter RageSpline source code to generate the meshes the way you like, and that you may not have to modify the shaders (unless RageSpline uses specific shaders in which case you'd have to modify those).
     
    AVOlight likes this.
  39. AVOlight

    AVOlight

    Joined:
    Apr 15, 2014
    Posts:
    427
    Appreciate the help! I think I would just have to generate a depth mesh that goes around the edge of the RageSpline, and set the normals on the depth mesh
    unfortunately performance wise that's similar to having the original mesh outline
    but with the added benefit of having outlines separated, which makes putting together character parts much easier

    Thanks again :)
     
  40. pea

    pea

    Joined:
    Oct 29, 2013
    Posts:
    98
    Hi :) Thanks for the excellent shaders!

    I'm trying to alter the normal basic shader to have a secondary, overlaid texture for decals, using uv set 2. It's all working nicely except for the fact that - I think, with my limited knowledge - the shader keeps using uv set 1 for the second texture.

    It might be that my second UV set isn't coming through from Maya properly for some reason, but I can't think of an easy way to debug my two UV sets in Unity either.

    Any insights much appreciated!

    Here's what I have:

    Code (csharp):
    1. Shader "Custom/Toony Basic with Decals"
    2. {
    3.     Properties
    4.     {
    5.         _MainTex ("Base (RGB)", 2D) = "white" {}
    6.         _MainTex2 ("Overlay (RGB)", 2D) = "white" {}
    7.         _Ramp ("Toon Ramp (RGB)", 2D) = "gray" {}
    8.        
    9.         //COLORS
    10.         _Color ("Highlight Color", Color) = (0.8,0.8,0.8,1)
    11.         _SColor ("Shadow Color", Color) = (0.0,0.0,0.0,1)
    12.        
    13.     }
    14.    
    15.     SubShader
    16.     {
    17.  
    18.         Tags { "RenderType"="Opaque" }
    19.         LOD 200
    20.         BindChannels {
    21.             Bind "Vertex", vertex
    22.             Bind "normal", normal
    23.             Bind "texcoord", texcoord0 // main uses 1st uv
    24.             Bind "texcoord1", texcoord1 // overlay uses 2nd uv
    25.         }
    26.         CGPROGRAM
    27.        
    28.         #include "TGP_Include.cginc"
    29.        
    30.         //nolightmap nodirlightmap        LIGHTMAP
    31.         //noforwardadd                    ONLY 1 DIR LIGHT (OTHER LIGHTS AS VERTEX-LIT)
    32.         #pragma surface surf ToonyColors nolightmap nodirlightmap noforwardadd
    33.        
    34.         sampler2D _MainTex;
    35.         sampler2D _MainTex2;
    36.        
    37.         struct Input
    38.         {
    39.             half2 uv_MainTex : TEXCOORD0;
    40.             half2 uv_MainTex2 : TEXCOORD1;
    41.         };
    42.        
    43.         void surf (Input IN, inout SurfaceOutput o)
    44.         {
    45.             half4 c = tex2D(_MainTex, IN.uv_MainTex);
    46.             half4 overlay = tex2D(_MainTex2, IN.uv_MainTex2);
    47.             c.rgb = lerp (c.rgb, overlay.rgb, overlay.a);
    48.            
    49.             o.Albedo = c.rgb;
    50.             o.Alpha = c.a;
    51.         }
    52.         ENDCG
    53.     }
    54.    
    55.     Fallback "VertexLit"
    56. }
     
  41. pea

    pea

    Joined:
    Oct 29, 2013
    Posts:
    98
    Did some debugging by loading a UV debug texture into the main and decal textures and both are definitely using UV set 1. UV set 2 is there though, because I can see it when selecting "Swap UVs" in the model import settings in Unity. I'm not generating lightmap UVs either.
     
  42. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    I don't see anything particularly wrong there, it should work.
    Things to consider:
    - maybe Maya is exporting the same uvs for uv0 and uv1?
    - maybe the alpha channel of overlay is always 0 or 1? (thus making the lerp function useless)

    Here are two shaders to debug UV0 and UV1 texture coordinates : it converts texture coordinates to vertex colors.
    Basically if you see the same colors on your model with both shaders, then it means they are the same in the mesh data. If not, then the problem lies elsewhere!

    (PS: you don't need to add the BindChannels section, this is only for fixed-function shaders and has no effect here!)
     

    Attached Files:

    pea likes this.
  43. pea

    pea

    Joined:
    Oct 29, 2013
    Posts:
    98
    Thank you so much! You rock. It's the alpha channel of the overlay that's always 1.
     
  44. pea

    pea

    Joined:
    Oct 29, 2013
    Posts:
    98
    Ah sorry, no that wasn't it heh heh. For some reason it is indeed mapping both textures using UV set 1. What's even weirder is that I see no change when I swap TEXCOORD0 and TEXCOORD1 around in the code. It's like the assignment in the shader code of the UV sets isn't done properly somehow. I will keep looking :)

    The two UV sets are in my model, as confirmed with those excellently handy UV debug shaders.
     
  45. pea

    pea

    Joined:
    Oct 29, 2013
    Posts:
    98
    Got it! I needed to use the "uv2" prefix to access the second UV set. I was using "uv". So, this works (change on line 34):

    Code (csharp):
    1. Shader "Custom/Toony Basic with decals"
    2. {
    3.     Properties
    4.     {
    5.         _MainTex ("Base (RGB)", 2D) = "gray" {}
    6.         _OverlayTex ("Overlay (RGB)", 2D) = "white" {}
    7.         _Ramp ("Toon Ramp (RGB)", 2D) = "gray" {}
    8.        
    9.         //COLORS
    10.         _Color ("Highlight Color", Color) = (0.8,0.8,0.8,1)
    11.         _SColor ("Shadow Color", Color) = (0.0,0.0,0.0,1)
    12.        
    13.     }
    14.    
    15.     SubShader
    16.     {
    17.  
    18.         Tags { "RenderType"="Opaque" }
    19.         LOD 200
    20.         CGPROGRAM
    21.        
    22.         #include "TGP_Include.cginc"
    23.        
    24.         //nolightmap nodirlightmap        LIGHTMAP
    25.         //noforwardadd                    ONLY 1 DIR LIGHT (OTHER LIGHTS AS VERTEX-LIT)
    26.         #pragma surface surf ToonyColors nolightmap nodirlightmap noforwardadd
    27.        
    28.         sampler2D _MainTex;
    29.         sampler2D _OverlayTex;
    30.        
    31.         struct Input
    32.         {
    33.             half2 uv_MainTex : TEXCOORD0;
    34.             half2 uv2_OverlayTex : TEXCOORD1;
    35.         };
    36.        
    37.         void surf (Input IN, inout SurfaceOutput o)
    38.         {
    39.             half4 c = tex2D(_MainTex, IN.uv_MainTex);
    40.             half4 overlay = tex2D(_OverlayTex, IN.uv2_OverlayTex);  
    41.             o.Albedo = lerp (c.rgb, overlay.rgb, overlay.a);
    42.             o.Alpha = c.a;
    43.         }
    44.         ENDCG
    45.     }
    46.    
    47.     Fallback "VertexLit"
    48. }
     
  46. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Oh cool! I completely forgot about that syntax!
     
  47. ironbelly

    ironbelly

    Joined:
    Dec 26, 2011
    Posts:
    597
    What are the chances that we are going to get an update with a cutout transparent shader? I was a bit surprised that there isn't one in there
     
  48. Jean-Moreno

    Jean-Moreno

    Joined:
    Jul 23, 2012
    Posts:
    590
    Chances are high! I am currently working on an update that should bring alpha transparency and cutout out of the box, along with many other features. More info on this soon!

    In the meantime, you can do your own cutout/alpha blended shaders following these guides: http://jeanmoreno.com/faq/#tcp_alpha
     
  49. ironbelly

    ironbelly

    Joined:
    Dec 26, 2011
    Posts:
    597
    Beauty, thanks for pointing me at that tutorial, it worked like a charm.
     
  50. Rasch

    Rasch

    Joined:
    Nov 8, 2014
    Posts:
    6
    Probably just asking the same question again here, but does that include quads with a texture slapped on? I'm making a 2D game using quads with textures and normalmaps, and didn't notice this post until after I tried to get this to work.