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

It's hard to say precisely, I didn't work on this project so I can only guess the details.

On the left image, it looks like they are using crisp ramp shading, rim lighting, and maybe specular too.
The important settings for these are:
- Ramp Smoothing for the crisp ramp shading
- Rim min/max values for the crisp rim lighting at the edges (the closer the min/max values are, the crisper it will get)
- "Cartoon Specular" option for the specular, to adjust its falloff smoothness
They also use normal maps for the details, we can see those details on the hair and the clothes.

For the right image, I'd say you just have to set the all those parameters to higher values so that the features aren't crisp anymore (ramp smoothing to 1, higher difference between rim min/max, etc.).
(Edit: it's also possible that the right image is just using Unity's Standard shader, I can't read Japanese so I don't know what the subtitles say...)

I'm not sure what you mean by "shadow map", usually this refers to the internal textures where shadows from the lights are rendered....
If you're talking about the shadow color, it looks like it's just a simple gray color that isn't too dark. For best results though I recommend using a color texture that matches the albedo, which can allow you to change the hue of the colors when they are in shadow (which is more akin to 2D workflow rather than just having darker versions of the base colors).

To do all that, the best workflow is using the Shader Generator: you can easily enable the features and options you need and get the correct parameters to tweak in the material - and update the shader with more options whenever needed.
There's also the Shader Generator 2 beta if you need even more control on the resulting shaders (or if you need it to work for URP).

I hope this all makes sense!

(Edit2: there's also this video from Unite Tokyo 2019 where they talk about the shading of The Peak among other things!)

(PS: I'd love a full scan of the page of this magazine if you could send one by DM! or the name of the magazine if they ship internationally )

 

Hi, Jean-Moreno, thank you for the detailed answer, it contains so much information!
As for the magazine, it's CGWORLD dec, 2019 issue.

https://cgworld.jp/magazine/cgw256.html

I have sent you the whole page by DM, please check it out.

Thank you!

 

Hi,
I am having issues with rendering a material with Mobile Outline shader with an outline, through a Render Texture, on Android.

Do you know what can cause this? (and most importantly, what can fix it)
Thanks

 

Hmm, what comes to mind would be an issue with the depth buffer.
Have you made sure that the depth buffer is enabled for your RenderTexture, and have you tried each different formats?
I've also had reports about depth-based water effects not working for some Android devices but unfortunately, while it's most likely related to the depth buffer, I couldn't see exactly what was wrong.

 

Actually, it was not related to the render texture. The camera rendering it was set to Perspective with a FoV of 0.1 (I don't remember why it was set like that...). If I switch to Orthographic, it's back to normal.

 

There seems to be issue with GPU instancing using SG2 on URP. Sometimes meshes just turn invisible. Disabling GPU instancing will fix this.

Picture of this problem. Sandy area at the bottom has the same material as the invisible part.

 

Thanks for the report, I'll take a look as soon as I can and will get back to you.

 

Hello again @Jean-Moreno

We're having a bit of trouble getting curved objects to react as we want them to using spot lights.
Here's what we get by default, without bypassing spot light falloff.

The banding is what we're looking for and we want it to happen. However, we don't like the horizontal smooth fade that happens due to the spotlight falloff happening on the edges. Bypassing the spot light falloff should take care of this.


...And it does, but the vertical banding gets lost.


The same thing works perfectly on point lights:


We tried out many of the given example materials and the spot light falloff is an issue in all of them

Any ideas?

Cheers

 

This will be fixed in the next update; you can DM or email me if you want the updated template sooner though.

 

It's unclear to me from where the vertical banding comes from... could you make a small scene that highlights the issue and send that to me by email?
Or at least get me more information on how many lights you use, how the material is setup (ramp texture used, etc.) and please send me the generated shader (with its meta file). Thanks!
I'll take a look, but please note that point/spot light falloff bypassing is a hack rather than a proper implementation (because the built-in renderer is kind of a black box) so we're limited in what we can do.

 

Hello I always get a "invalid subscript (texcoord)" error when enabling triplanar with Shader Generator 2. Is there anyway around this? I would like to use SG2 to create a triplanar texture scrolling shader

 

Can you send me an email or a DM with the generated shader?
I can't reproduce your issue, Triplanar works fine on my end, even when I add scrolling UVs to the textures.

 

Hi, looks like I was on an outdated version of the package! (2.4) updated to latest and no longer getting that error.

 

In Shader Generator 2, how can we achieve "Color from Texture" for Outline like it is in Shader Generator 1? I'm messing around with Outline Shader Properties but can't seem to get the same effect.

 

Try this setting:

Here I've just added a "Material Property/Texture" implementation on top of the "Color" one for the "Color (Per-Vertex)" property, and enabled the "Material Property" setting for the Mip Level selection (I'm realizing that the label is cut, I'll have to find a smaller one).
You will have to manually link the texture to the new slot in the material - it won't take the main one. Advantage is that you can use any other texture should you want to.
Theoretically this should have the same effect as the old "color from texture" option; but let me know the differences if that's not the case.

 

That did the trick. Thanks again! Can't wait to show the results

 

Oh Jean another question.


Does Toony have the ability to apply two outline passes like in the attached image? If it's even possible, I'd like to achieve a second Outline and be able to use it as a Stencil Buffer to give models a more cutout look!

https://twitter.com/ironicaccount/status/1244621413425659906

 

Not out of the box, you'll have to do some manual modifications for it to work, but it shouldn't be too hard to do if you have some shader writing knowledge; basically adding that second outline pass, and possibly adding a #define to handle a second color property for the second outline.
Shoot me an email if you need some guidelines on that process!

 

Hello, I'm using Toony Colors Pro for my games and I'm highly satisfied with the asset overall.

However, in my last mobile game I did notice in my build report that TCP2 Hybrid Shader takes up to 29mb in uncompressed size which is really huge. Around 10% of the total assets size. Should I be worried? And if so, what can I do to reduce the size?

Thanks.

 

Which version of TCP2 are you using?
When I first released the Hybrid Shader, it was set to force compiling all the possible variants when building, which could explain the large size.
As of TCP2 v2.5.1 this should no longer be the case, and it will only compile the used variants in the project; so the total size should also be reduced.
If you have the latest though, then I'll have to look into that!

 

I'm using v2.5.1
So it looks like you need to ... look into that. Any help I can provide?

 

Yes, please let me know your Unity version, if you are using URP or built-in renderer, and which target platform(s) you are building for that report those sizes for the shaders.

EDIT: you can also try to update to the latest version of TCP2, just in case!

 

Hey. I was checking the version through Update Checker and it was showing me 2.5 (also readme mentioned 2.5.1).
Still, as you suggested, I decided to update. I proceeded to Package Manager just to find out that my current version is 2.4.4 and last version is 2.5.3

I'll update and see if it helps.

About Unity and build target: it's 2020.1.2f1 and Android

Update: I've updated TCP and built APK. No change on the uncompressed TCP2 Hybrid Shader size

 

Hello, Jean.
Beside from the 30mb shader problem, I've also ran into another problem which has a higher priority since it affects the visuals.
I've attached three images:
- normal look of the materials (device: Nokia 7.1)
- definitely a bad look (Lenovo Tab 4 10 Plus)

- problematic device specifications

Thanks for your support. Hope that you can help me

 

Would you be able to provide a Terrain template at some point for URP?

 

This is planned but unfortunately I haven't had time to start working on it yet.
Terrain shaders are a bit more complicated, and I'd like to keep the good flexibility from the Shader Generator 2, so the current idea is to "merge" this as an option into the default template, rather than creating a separate template... but I don't know yet if that will be doable.

I'll try to prioritize this task next time I work on new TCP2 features!

 

Thanks Jean!

 

I'm trying to convert to the new universal pipeline and noticed that there is no CUTOUT rendering mode in hybrid. How do I convert this?

 

There is a cutout option in the Hybrid Shader, it's just called Alpha Clipping: https://jeanmoreno.com/unity/toonyc...r/optionsreference/transparency/alphaclipping

Alternatively you could also use the Shader Generator 2 and make your own shader with the alpha clipping/testing option enabled.

 

Hi there Jean. I had a quick question about the Shadow Line feature. is it possible/planned to be able to put them on cast shadows in addition to self-shadowed areas?

For example in the image above, it would be cool to be able to put a line on the cast shadow of the sphere.

 

It's kind of possible right now if you use the "Screen Space" option, however the quality won't be super good.
This is because it uses the derivatives functions (

fwidth

here) to determine where that line should be, as it is the only function in a fragment shader that can give any information about surrounding pixels (info that you need to know when there's a difference and hence figure out that the shadow map starts there). But these functions operate in block of 2x2 pixels due to how it works internally, which in this case results in blocky artifacts:

The terminator line doesn't have this side effect because it's based on the N.L gradient, and thus the white to black transition is much more progressive that the shadow map (here it's using soft shadows which add a bit of blurring and help us out but it's still not enough to make it nice, hard shadows look even worse).

To properly achieve this effect I would go with a post effect on the shadow map in screen space (Unity already processed the main directional shadowmap in screen space so I think one could hook a pass there) and write the custom line in a separate buffer than can then be sampled in the shader (or just overlaid in a post effect like the image effect-based outlines).
Or just try to add more blur to the shadowmap directly, but I'd be less confident about this adding more artifacts on the shadowmap, and it also means you'd have to change how it is sampled in the final shaders if you don't want it to be blurred there too.
But all that if beyond what TCP2 has to offer right now!

 

Understood! I've heard about that shadow map texture but haven't found too much resources on it. Thank you for the detailed answer.

 

Is it possible to threshold a channel value through a noise texture, as seen in various Minionsart tutorials?
https://www.patreon.com/posts/16714688#no_universal_links
I would like to achieve a natural bumpy and sharp toony edge on surface blending via vertex painting.
I tried multiplying with a very high value and world position, but it needs a threshold cutoff.

 

Could you elaborate a bit on that? Do you want sharper transitions when using texture blending?
I think it is possible using the Shader Generator 2, but I'm not sure of the context of your shader here.
If you can send it to me via email or DM I'll be able to take a closer look at this!

 

I have a water object where I want to use the vertex colour blue channel for Wave Sine height, but I want to use the Alpha channel for transparency.

Is it possible to isolate one colour channel to multiply against the colour?
The swizzle says RGBA in text form, and I tried typing just A in the text box but this snaps back to RGBA.

 

It still expects 4 channels, so you have to write AAAA.
This should be accepted and work, if not let me know.
I'll think about making that clearer to the user...

 

Oh, I hadn't realised that! Using AAAA works perfectly. Thanks!

 

Is it possible to layer an alpha texture over an opaque texture?
I can't find a way to use the second texture's alpha channel.

 

By default implementations are chained using basic operators (multiply is default, but you can use divide, add, subtract):



For more advanced things, you'd have to use the Custom Code implementation: place it at the top before the two Texture implementations, and you can do something like this:

Code (csharp):

1. lerp({2}.rgba, {3}.rgba, {3}.a)

Note: Albedo is a bit special in that it outputs the 4 channels (RGBA) although only RGB are directly used in the code; A is mapped to the value of the Alpha shader property, which is then used for transparency, if enabled.
This was made for compatibility with how Unity's handles shaders by default, but can be changed to anything else.
Just a warning in case you get weird transparency when using that method!

 

Thank you Jean that works amazingly well! (forgive the weird lighitng. This is working as intended)

 

Hello @Jean-Moreno, is it possible to create a dithered-transparency shader with Toony? https://danielilett.com/2020-04-19-tut5-5-urp-dither-transparency/

I'm currently toggling between an outline and non-outlined, transparent versions of the shader for characters that fade out, but it doesn't look great and you end up with the issue of seeing non-culled faces through the transparency. I feel like dither transparency would work better. This would be through URP, thanks.

 

You can do that using the Dissolve effect: enable Dissolve Map with Alpha Testing, and then in the Shader Properties tab look for the Dissolve Effect/Dissolve Map property, and use those settings:



This will sample the dissolve texture in screen space, and it will always retain its pixel size relative to the screen.
Now if you use a special dither texture like the one attached, it will progressively make it disappear using the dither pattern.

Quick notes on the dither texture import settings to make it work as expected:
- sRGB (Color Texture) : off
- Advanced/Generate Mip Maps : off
- Filter Mode : Point (no filter)
- Compression: None

Note: currently the dissolve effect doesn't work for the outline in URP, I missed that in a recent update. It will be fixed in the next update, but feel free to send me an email with your invoice number if you want the updates files early.

 

Wonderful, that worked perfectly! Thank you for the png and the detailed explanation. I was also unaware of the animated dissolve opportunities outlined in your documentation.

I would appreciate an URP outlined-version of the shader, I'll PM you directly, thanks!

 

Hi Jean, first of all I would like to thank you for the great tools you have created. I love them.

I have a question, it is possible to make à variable global in the Shader Genrator 2? Like in Amplify when you can set the type variable in "Global" to acces it via script in multiples shaders.

I'm a beginner in writing shaders so may be I don't understand the logic behind global variables.

I suppose I can do it with the custom node you inplemented in the Shader Generator 2, but I haven't found the solution yet.

 

Hmm, I thought you could override the local variables even if they were declared in the properties block of the shader, but apparently that isn't the case.

I've noted to add a small checkbox for that in the Shader Properties interface for the next version.

In the meantime, the only way to do it would be to either edit the shader manually to remove/comment the properties you want to make global, or use the Code Injection system to do it automatically (this way you don't have to redo it each time you update the shader through the generator).
The code injection file could like this:

Code (csharp):

1. //# REPLACE: Comment Color property to make it global
2.         _Color ("Color", Color) = (1,1,1,1)
3. //# WITH:
4.         // _Color ("Color", Color) = (1,1,1,1)

 

Thank you very much for the quick response ! I will try the code injection then and wait for the next update.

 

Hi Jean, thank you very much for this great asset.

Currently, I have been using the legacy Desktop Rim Outline with Blending shader and was wondering if it is possible to have rendering both faces possible with it? There does not seem to be an option within it for that. It is probably possible to make an equivalent shader in the generator but I do not know how to replicate all the features of the rim outline and I would prefer not having to copy over the preexisting settings for my materials.

 

You would have to manually edit the code to do that; the legacy shaders use various .shader files so you will have to find the exact one you are using and change its source (you can use the small menu in the material inspector and choose "select shader" to find it).
Once the file is opened, look for the SubShader block, and add the line "Cull Off" under it (next to the Tags and LOD lines). This will disable face culling and thus render both faces - but the lighting might still be incorrect since the backfaces will still use the front-facing normals.

I would still recommend using the Shader Generator 2 to do all of this though, it's just a few checkboxes to toggle to get that result - with corrected lighting for backfaces.
You can use the Shader Properties interface to verify the variable names, and ensure that they match the ones of the Legacy Desktop shader so that the values remain when you change the shader in the material.
To enable Rim Outline, just look for the Rim Effects in the LIGHTING section, and then choose "Rim Outline".

 

Thank you very much for your help, I appreciate the advice. Given what you mentioned, I tried generating a shader, and after a lot of trial and error, I've gotten a working one with all the features necessary and then some.

 

Hi Jean-Moreno,

Thanks for making this asset, been having a great time messing around with the new Shader Generator 2 and its very useful!
Was wondering, is there a simple or built in way to get a BumpScale/normal map intensity effect with triplanar normal maps?