Official Toon Shader

Yes if you multiply prior to adding in specular light it works as expected.

 

That looks much more like it! Do we already have a PR to fix this?

 

Currently, diffuse light and specular light are added together and then multiplied by albedo. As @treivize pointed out - this prevents darker surfaces from having bright specular light. Here I've attached images demonstrating incorporating albedo before and after specular light.

Albedo after Specular (Current):


Albedo before Specular (New):


Now that specular light is no longer affected by albedo (color texture & tint), we need a way to control the light's transparency.
Reordering the multiply and add nodes introduces a new issue, how do we control specular light intensity?

A version of this simple solution was done by @treivize when Specular Color was still considered in the HLSL calculations. Here I use Specular Color's alpha channel to control the light's transparency (strength). Currently specular maps are being used as masks, which is another way to control specular transparency. However, I need to double check the settings on the mask textures in the project.



GIF demonstration:



@cirocontinisio
I committed this to my fork so it should be included in the Relocating Fresnel properties out of ToonShading subgraph PR.

 

Did we solve the problem of the outline doubling up in overlapping areas?
I came across this video and thought it might help with resolving that issue.

 

After a quick watch - a very quick summary would be this method uses a sobel algorithm which applies two convolution matrices at once. One tests for horizontal edges and the other for vertical edges.

Additionally Ned uses a blit material feature to apply an outline material to the screen. In the video he uses custom renderer features, the depth texture, opaque texture (for color-based outlines), and plans to use the DepthNormals texture (custom pass) in a follow-up video.

The material inspector at the end has the following properties:

• Thickness
• DepthStrength
• DepthThickness
• DepthThreshold
• ColorStrength
• ColorThickness
• ColorThreshold

This sobel algorithm looks promising.

 

Applying the outline as a post-fx solves a couple of things, but it introduces other issues. How do you do it only on some objects? You'd need to have the object on different layers. But what if the character is behind some rocks and in front of others? Maybe there's something that can be done by organising the Render Features in a clever way, but we already use them somehow so it would have to play nicely with those.

 

One last note: I personally don't like the outline based on colours, since that doesn't play nice with characters with detail textures. It creates outlines where we don't want them. Just a note in case somebody wants to implement an effect like the above.

 

Hi @cirocontinisio , thanks for the great shader, we took a lot of inspiration from it!

We are trying on adding some kind of metallic/smooth effect on top of it using the reflection probe node, do you have any suggestion on how to approach it?

We would like our robots to fell metallic-y, but any kind of value tweaking with the current shader give us a plastic look instead of a metal one.

Thank you!

 

I would say, to avoid mixing up conversations you could create a thread in the ShaderGraph forum? And post some images of the effect you got until now, for reference!

 

Yes I agree about the outlines based on color. It is a starkly different visual style. I think the most interesting idea we could use is the sobel algorithm. I wonder if that can be used with the DepthNormals texture.

 

Hi there! I played with the toon shader yesterday to try adding some moss an snow on top of it, I finally found a tutorial that explain how to do this if you are interested. ( I guess the snow won't fit your game setting...)

I can send the modified shader if you want but I also removed the outline as I dont need it.

I did a test on my actual project but unfortunately the shader turn pink when my directional light cast shadow on Unity URP project 2019.4.12f1 (also with your original shader).
Do you have an idea where this might come from?

Thank you for your input!

 

That would be a fun addition to the shader! Are you familiar with our Shader Add-on system? Could it be implemented like that?

Also, I'd need you to make the PR to the repo. Do you know how to make one? (in case...)

Hey @francoiscoiscois, do you have Shadow Cascades enabled? That is a requirement for the shader to work, I'm afraid.
Other than that, just right-click on the Shaders folder and choose Reimport.

 

I found this tutorial about toon shader with the shader graph.
https://danielilett.com/2020-03-21-tut5-urp-cel-shading/
I didn't go through it myself yet but I think it might be a good resource for learning?

 

I think it's a well-made tutorial, and definitely very up to date so you can use it as kind of an explanation to what we also did in the project, although we added more when we added the outline, the swaying and disappearing effects, etc.

Fun fact:

 

The open project has been incredibly useful, but I'm running into an issue when I try to use the toon shaders in a different project. I copied over the entire Shaders folder from the main branch of the open project. The shader graph Main Preview and the material thumbnails show up fine, but in game the materials are broken and turn pink. Even more strange than that is is some scenes it seems to work fine, but others it is broken.

My Unity version is 2019.4.19f1 with URP 7.5.3 (These are both the same as the versions in UOP1 as of writing this comment).

The error says:

Shader error in 'UOP1/Toon': invalid subscript 'shadowCoord' at */Library/PackageCache/com.unity.render-pipelines.universal@7.5.3/Editor/ShaderGraph/Includes/Varyings.hlsl(114) (on d3d11)
Compiling Vertex program with _MAIN_LIGHT_SHADOWS _SHADOWS_SOFT
Platform defines: UNITY_ENABLE_REFLECTION_BUFFERS UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS UNITY_PBS_USE_BRDF1 UNITY_SPECCUBE_BOX_PROJECTION UNITY_SPECCUBE_BLENDING UNITY_ENABLE_DETAIL_NORMALMAP SHADER_API_DESKTOP UNITY_COLORSPACE_GAMMA UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_LIGHTMAP_FULL_HDR

I get this after creating a material from the Toon.shadergraph file.
Any ideas?

 

First: thanks Happy to hear!

To fix the issue, try enabling shadow cascades. I know our shader currently gives an error if no shadow cascades are enabled. We plan to use them anyway, so we never cared. Does it fix it?

Also make sure Anti-aliasing is at least 2x - but that wouldn't make the shader pink.

 

Ah ha! That looks like it fixed it, thank you for the quick response.

 

I was going to take a try at this emission card, and I think I ended up solving it.
https://open.codecks.io/unity-open-project-1/decks/16-3d-shading-animation/card/175-emission-support

I added a custom node on the Toon shader just before the Unlit Master node. This node takes in a texture mask, a bool, an intensity, and the current color of the material. And it outputs a color at least 1.5 if the Emission toggle is true.

Is this what you were looking for? If so I can submit a PR.

 

In some way, yes! Is this the one you opened? I left some comment on it.

 

Hey, thanks for this great project. I've learned so much in your videos etc. I'm using this shader in my project and it worked nice in scene and game mode. I recently built my project, and all the shadows cast by the aditional lights were gone... after creating several test cases and digging deep in the web for like 2 days:
The toon shader needs the keyword _ADDITIONAL_LIGHTS to prevent the keyword _ADDITIONAL_LIGHT_SHADOWS being stripped away when the project is build...
Greetings

 

Thanks for the tip, @Elbarzo!

Ah, and it doesn't have it...? :/

One question though: you say the additional lights don't have shadows... what do you mean by that? As for additional lights we only have point, and point lights don't cast realtime shadows in URP.

 

Hey @cirocontinisio ,
yeah I'm currently using spotlights for the additionals lights to generate some athmosphere in darker places. But I'm hoping for pointlight shadow support in the future and I'm guessing it would show the same issue with the additional lights for pointlights when the keyword is missing.

 

Just so you know, the very latest URP (v 11) supports point light shadows! (not talking about Open Projects, I mean in general). Unfortunately only compatible with the beta of Unity 2021.1.

In other news, I've added the keyword you mentioned to the shader and fixed another issue with how an #ifdef was written in our custom HLSL, will push soon to main.

 

Being yet again annoyed by the waste of triangles we have due to the lack of double sided shading, I have had an idea about the lighting of double sided things. Could they have 2 separate lightmaps, one for the frontside and one for the backside? I would define the frontside where the dot-product of the light direction with the mesh's normal is positive and the backside where the dot-product with the normal is negative.

Translucency could be achieved by adding a percentage of the difference between the brighter side and the darker side to the darker side. The translucency can be a parameter, at 0% the lighting on the frontside and on backside is entirely separate, at 100% the frontside and the backside will have the same color. Which side is brighter and which side is darker might be separate per color in extrem cases, e.g. if the front is lit by a red light and the back is lit by a blue light. It wouldn't be a problem if the translucency calculation is applied to the red, green and blue channel separately.

 

That's a though one I think, to do that you would have to build the lightmap baking system around it, so that it actually bakes those lightmaps. As of now, it would only bake the front face.

As a solution: what is the problem about? Food? Items? If they are small things, we could also have a double-sided material and, instead of baking lightmaps for it, just use Light Probes. I believe then the two sides should receive correct lighting from the probe?

The option is on the MeshRenderer, and in fact we already have it on for small things like flowers, pebble rocks, and grass (or, it should be!).

 

So why did I have to make the Sombrero double sided then?

I was trying to make the vanilla orchid with 150 triangles. It became so ugly it gives me nausea. Double sided rendering would be extremly helpful to make something useful with 150 triangles.

 

Hi
is it possible to download just the toon shader? I love it but when I try to extract the shader files to my project. I have lots of errors.

 

Because the brim of the sombrero is so visible and big that having it as one-sided means that you spot it way too fast (in fact the sombrero still has a razor-thin brim, maybe it could be nice to add an extra row of polygons to make the brim have more body)
For flowers and leaves, usually one-sided is acceptable because they are very small.

I also haven't tried the current shader as double sided. Does it work without issues?

We don't have a separate download. What kind of errors?
I have added a small section to the wiki, hope it helps: https://github.com/UnityTechnologie...ding-Model#using-the-shader-in-other-projects

 

Thank you. Now I don't have any error but camera don't see the outlines.

 

Are the Renderer custom features configured the right way? Could also be a matter of resolution? I see you're simulating a super hi-res viewport (2960x1440 Landscape) so maybe you need to up the thickness value of the outlines?

 

Thanks I had uncheck depth texture in the Renderer.

 

I can't test it, since I switched to 2020 everything is pink....

 

Have you tried reimporting just the Shaders folder? Sometimes re-compiling them after an update makes them work.

 

Yesterday I was playing around with the shaders and I thought of creating a classic "grass growing on stone" shader, to use on our big stones that we intend to be walkable or, in any case, that we want to blend with the terrain.



Consider it a v1, and if somebody wants to take a shot at improving the appearance, feel free. It's in the Shaders folder, and it's used on the rocks materials.

(please post screenshots here before submitting PRs on the shader)

 

Question: In the first video about building the toon shader (

) there was still shadow lickering that said to be fixed. Did that happen already? I'm wondering what the solution looks like.

 

Below you find the mesh renderer component of a flower:

Where exactly is the option for double sided rendering?

 

I was referring to the option to receive GI from Light Probes, which is in your screenshot, in bold ("Receive Global Illumination - Light Probes").

For double-sided rendering, it's enabled on the Material (for normal URP materials, some have the option) or if it's Shader Graph, in the options of the graph itself (previously master node).

I don't think it's an option that can be controlled with a boolean inside the graph. So we'd need to create a double-sided alternative of the Toon shader. (feel free to do it)

 

Which is what I was asking... Will we make one? I can't do this unfortunately, I can't do shader graphs - they never fit on my screen.

 

It's pretty easy, for your information one would just need to duplicate the graph and tick the checkbox "Double Sided" in the Graph Inspector that is in the top-right corner.





Anyway, I've done it and pushed it to

main

. You'll find it, it's called Toon_DoubleSided. Please only use it for assets that really require it.


I looked into light probe contribution. I tried to do something like this to get the backfaces to sample lighting from the other side of a probe, but it didn't work:



Not sure why :/
Maybe because the graph is marked as Unlit?

But for now, it might be ok to get the same lighting on both sides for small details, like the flower you've been talking about. It even creates the impression of translucency, which is good in that case.