OToon Shader

All you need for toon shading.

image This is the document of OToon shader.

Overview

OToon is a uber shader aim to create stylized shading for Unity while provide beginner-freindly UI & easy to use parameters to setup. It has numerous feature that are essential to create eye-popping toon shaded objects.

Highlights of the shader:

With all those additional features. OToon also retained most unity’s standard shader’s function/parameter. So it minimize the conversion difficulty between OToon shader and standard lit/simple lit shader.

Requiredment/Setup before import OToon

OToon shader is develop for Unity’s Universal Render Pipeline. Make sure your URP is correctly setup before import the package.

If you haven’t installed URP yet, please check our URP installation Guide

OToon has been test in 3 major URP version(URP 7, URP 10, URP 12). Make sure your URP version number is between those versions.


Tutorials/Demo Scenes

I strongly recommend you go throuh scenes under OToon- URP Toon Shading\Demo(Can be delete)\Scenes\1 Tutorials in order to have a good understanding of how all features can be setup. image image


Shaders include in OToon package :

Start from OToon 1.5. We provide 3 shaders : OToon Lit & OToon Custom Lit and Shader Graphs/OToon Custom Lit.

OToon Lit is PBR based toon shader. By adjust toon blending parameter you can have object look just like standard lit shader or make the shading result blending toward pure toon shading.

While CustomLit did not have the option to mix with PBR shading. It provide another lighting model called Color Ramp Mode. It can override the lighting and shadow color completely by colors on the ramp texture. Give you complete control over your stylized rendering of the object through your ramp texture(gradient).

Here’s the comparison table of the these shader.

Feature OToonLit OToonCustomLit ShaderGraph/CustomLit
Multiple Lights Support :o: :o: :o:
LightProbe, Baked GI :o: :o: :o:
Flatten GI Option(For Cel shading) :x: :o: :o:
BRDF Specular :o: :x: :x:
Stylized PBR(Toon Blending) :o: :x: :x:
Diffuse Ramp Mode :o: :o: :o:
Color Ramp Mode :x: :o: :o:
Rim Ligthing :o: :o: :o:
Halftone/Hatching Overlay :o: :o: :o:, Single Light Only
HairSpecular :o: :o: :x:
Face ShadowMap :o: :o: :x:
Custom Shadow Color :o: :o: :o:
Shadow Pattern(Experiment) :x: :x: :o:
Outline :o: :o: (Require use outline material and extra mesh/skinned mesh renderer)
Dithering :o: :o: :o:
SRP Batcher :o: :o: :o:
GPU Instancing :x: :x: :o:

:bulb:To use these 3 shaders, Select your shader on top of the material inspector, URP > OToonLit or URP > OToonCustomLit or Shader Graphs/OToonCustomLit.


Gradient Settings Manager(Deprecated, 1.00~1.03)

:bulb:Since OToon 1.1, OToon will store gradient keys data into texture’s meta file instead of GradientSettingsManager.asset.

:bulb:For Otoon 1.1 updating guide please refer to Upgrading guide to OToon 1.1.


Shader Parameters

When you choose the OtoonLit/CustomLit shader inside the material inspector. You will see a custom material editor as following screenshot.

image

Each section is a foldout title that can be use to show/hide it’s detailed parameters. Combine different features inside different sections to make your unique stylized shading.

We’ll go through each section and explain the detail of it.


Surface Options

image The surface options are identical to standard shader. If you’re using OToon Lit, you can choose between metalic and specular workflow. See Metallic vs. specular workflow.


Surface Inputs

image Surface inputs are also nearly identical to standard shader, OToon Lit inherited inputs from Lit, OToon Custom Lit inherited inputs from SimpleLit, This way it let you setup albedo texture and normal map just like how you work with Standard shader.


Toon Specular Hightlights

image

The specular light on the surface can be enable through Enable Toon Shading toggle. Once enable, you can custom 2 parameters:

Specular Size : Size of the specular light area.

Specular Falloff : Distance falloff of the specular lighting, The smaller the value are. The harder the specular edge become.

For OToonLit, Set both Specular Size and Specular Falloff to 1 will make it identical to PBR BRDF specular. tweak these value to make your specular light more stylized. For OToonCustomLit, The specular light model using a simpler NdotH model. Instead of BRDF.

image Setting both value to 1, the result will identical to regular lit shader.

image Tweak the parameter to make stylized BRDF Specular

Toon Specular Brush Mask

An extra option which you can assign a pattern texture. The specular will sample the Alpha channel and clip the specular light.

image image

Specular Clip Map Sacle : Control the tilling of the clip pattern.

Specular Clip Strenth : The threshold of clipping.

The clipping mask value is sampled from the pattern texture’s R channel.


Toon Options

This sections provide different parameters for toon shading based on which shader you choose.

Option That Only Visible For OToonLit


Enable Toon Shading : Enable Toon shading, If disabled. The shader will use standard PBR lighting model. For OtoonCustomLit, the shader will always use toon shading.

Toon Blending : Blending the results of PBR shading and your toon shading.


Toon Shading Model

We provide up to 3 mode to chose from :

1 Step Only Mode : Use 2-tone shading. Ramp texture is not required.

Diffuse Ramp Mode : Use ramp texture & gradient editor to control the lighting model. You can achieve N-Tone shading and complecate gradient shading with this mode.

:bulb:It sample the ramp texture’s R channel

Color Ramp Mode : Similar to Diffuse Ramp mode. But with this mode, Ramp texture not only control the light model strength. But also influence the base color of the object. Give you more freedom to shade your object with the ramp texture.

Additional Parameters

Toon Diffuse Offset : Offseting the diffuse wrap of the toon shading.

Override Shadow Color With Ramp Color : Only visible in Color Ramp mode, Use the left side color of your ramp texture as shadowed color.

:bulb: You can change the Shadow Color inside the Light & Shadow section to perform same result, whether or not to use this toggle is up to you.

image showcase of 1 step only & Diffuse Ramp mode.

showcase of Color Ramp mode.

Create/Edit the ramp texture

When using Diffuse Ramp or Color Ramp Mode. A ramp texture input is required. Click the New button on the right side of Ramp map property. A file saving panel will popup. Select where you want to save the ramp texture and hit save. Once the Ramp map property is asigned. Click the gradient values property will open up a gradient editor. Here you can edit the ramp texture content. Always remember to hit the Apply to file button everytime you edit the ramp texture. It will save the gradient key to an local asset file.

Diffuse Noise Wrap

If you click the Diffuse Noise Wrap under Toon options, 3 extra parameter will foldout. Which let you setup an extra noise amp to offsetting the lighting model. Create more artist surface.(You can achieve same effect by using right normal map in surface inputs)

DiffuseWrap Noise Offseting the diffuse wrap via noise texture.

Noise Scale Tilling of the noise texture

Noise Strength Control offseting strength from noise texture.

image A diffuse ramp mode surface with a DiffuseWrapNoise setup.


Rim Lighting

Rim Power : Control the size of the rim light.

Rim Light Align : Control how the rim lighting align with scene light direction. -1 = back light, 0 = default, 1 = align light direction

Rim Light Smoothness : Control the smoothness of rim light edge.

Rim Light Color: color of the rim lighting.


Halftone / Hatching Overlay

Halftone & Hatching overlay can create unique NPR effect. Combine with other feature you can create stunning looking object.

There are 3 modes in this section :

Off : Disable overlay feature

Halftone : Enable haftone Overlay

Hatching : Enable hatching Overlay

Haftone

When choosing Halftone Mode, you will see numerous parameters. image

Halftone Shape Mode : Shape of the halftone pattern, we have 3 built-in patterns : Dots, Stripe, Cross. There’s forth option called Custom, which allow you to use an extra pattern texture to use custom shape.

Pattern Texture : The property will only showup when yuo choose Custom halftone mode. It sample pattern from the texture’s Alpha Channel.

Halftone UV Mode : Enable haftone Overlay

Halftone Color : Color of halftone. Alpha channel will be use to perform alpha blend with surface color.

Brush Tilling : Tilling of the pattern. increase the value to make your pattern more dense.

Halftone Noise : Similar to specular clip mask. An noise that surve as a clip mask textgure.

Noise Clip Strength : The threshold of noise clipping.

Brush Size : Controll each individual halftone shape’s size

Lighting Size Falloff : Contronl the size falloff influenced by lighting.

Halftone Diffuse Offset : Offseting the lihgting calculation for halftone.

Brush Lower Cut : An option to cutout smaller part of the halftone.

Fade Distance : Distance between this object and camera to complete fade out haftone effect.

Fade To Color : 0 => fade out to transpaent, 1 => fade out to NdotL result(lambet light) that using halftone color.

Include Shadow Receving Area : If the halftone also consider area that recived shadow.

image UV mode will affect how shader wrap the halftone pattern on the surface. Object mode mean the pattern is sample with object UV, While in Screen mode the pattern will sample in screenspace.

The Brush Tilling property value should vary based on which UV mode you use. EX: UV mode - Screen , Brush tilling : 160, UV mode - Object, Brush Tilling : 8.

When using Screnspace UV, OToon automatically scale up/down the sampling uv based on camera distance. To give an unforom look of the pattern when the object move away/toward to the camera.

image Set Lighting Size Falloff to 0 will make halftone pattern behave like an overlay. while setting to 1 will make halftone behave like a shadow.

Depend on your needs, use can make halftone fade to complete transparent or lambert-like color based on the Fade to Color slider.

image Use noise clip mask, you can evan achieve different kinds of effect on the surface.

Hatching

The third mode of overlay section is Procedural Hatching. This mode aim to micmic the effect like other classic hatching shader did. While only required 1 input texture.

image

Hatching Color : Color of hatching. Alpha channel will be use to perform alpha blend with surface color.

Hatching NoiseMap : The hatching pattern. try using a perline noise map with scale(0.1, 1) and see what happen.

Hatching Strength : Overal strength / area of the hatching effect.

Hatching Density : Control the number of layer when perform hatching shading. The higher the value, the densior the hatching looks.

Hatching Edge Smoothness : Contronl the overall smoothness.

Hatching Diffuse Offset : Offseting the lihgting calculation for hatching.

Hatching Rotation : The angle between each layer of hatching.(45/90 = cross hatching)

Include Shadow Receving Area : If the hatching also consider area that recived shadow.

image

:point_right::point_right: About Hatching Noise Map(Click to expand)

You will require noise map like above image, in order to perform standard cross hatching. If you use a regular perline noise texture, you can sacling the texture just like above image to make the result look similar.

TLDR : Play around the Hatching Noise Map's scale to see different hatching style.


Outline Options

image

OToon’s outline using the popular normal extrude method. Which require a 2nd pass to render the outline. For URP we need a custom renderer feature to do it. To add renderer feature. navigate to your current URP renderer asset. click the add renderer feature button and choose Outline Object Feature and you’re good to go. Or simply click the auto setup button inside the outline section of OToon material. Which does the same thing automatically.

:point_right::point_right: Example of where to add renderer feature manually (Click to expand)

Once you setup the renderer feature correctly, enable toggle button will be available. image


Light And Shadow

An important feature for stylized rendering is custom shadow color and OToon support it as well. This section currently contains 2 parameters. Shadow Color and Shadow Specular Mask

image

Shadow Color : Custom shadow color, alpha value will use to perform alpha blend with current surface color

Shadow Specular Mask : Control how much specular light can pass through shadowed area.

image Notice how alpha value of the shadow color affect the result. It’s possible to make shadow color invisible by setting alpha to 0. Then you can use halftone or hatching overlay to act as an shadow replacement.

Face & Hair Options

This section contains 2 features : A simple way to fix face normal when toon shade character, And an anisotropic lighting model for hair lighting.

image


Spherized Normal(Deprecated)

:bulb:Since OToon 1.2, We provide a much better option to fix character face : FaceShadowmap.

Spherized Normal Enabled : Treat the normal of the mesh as a shpere. Shpere center is world-space and will required a helper script to work with.

While doing toon shading, the shading on character’s face often become broken due to the normals on face mesh tends to be more coomplex thus resulting undesired shaded. The most common way to deal with is using 3D model program to fix, or simplify normals on mesh manually. OToon provide an option called Spherized Normal that treat your face mesh as an sphere when calculating normal inside pixel shader. with an helper script to setup the world space center of the sphere.

:point_right::point_right:Video tutorail about how to setup Spherized Normal feature (Click to expand)

To use this feature, the face mesh needs to separate from other parts of the character.

image Comparison of spherized face and regular face mesh.


Face Shadowmap(Added in 1.2.0)

By enable face shadowmap feature. We can achieve high quality face shadow while only reuqired very small effort compare to edit face mesh’s normal inside 3D software. The trick behind this technique is the shader will shade the face mesh based on a shadow map that perfectly wrap on the face mesh. The shader sampling the shadowmap by light direction and the mesh’s facing direction.

Face Shadow Map : The shadow map texture for face mesh

Face Shadow Map Power : Control how much light direction influence changing of face shadow. The recommend value is 0.15 ~ 0.3

Face Shadow Map Smoothness : Control the smoothness shadow edge, recommend value is 0 ~ 0.1

Face Front Direction : The Object-space front direction of this mesh.

Face Right Direction : The Object-space right direction of this mesh.

All you need to do is adjust the mesh’s uv to make provided faceshadow texture perfectly wrap on your face mesh. image image


Hair Specular Light

With one single noise texture, you can create stylized specular light for hair(anisotripic light).

Hair Spec Color : Control the anisotropic light color. Alpha channel will be use to perform alpha blend with surface color.

Noise Map : Hair noise pattern texture

Hair Spec Noise Strength : Control how much the anisotropic light stretching with noise map.

Specular Exponent : Exponential value of the anisotropic light.

Hair Spec Size : Control size of the hair anisotropic light,

Hair Spec Smoothness : Control the smoothness of the anistropic light.

image

:bulb:Check the UnityChanAnistropicDemo locate at OToon- URP Toon Shading/Demo(Can be delete)/Scenes/5 Stylized Character UnityChan folder to see how the material was setup.


Advance

This section contains some advance option you probably already familiar with when using unity standarad shader. for usage of stencil please refer to offical doc of stencil buffer;


Dithering

Under Surface Inputs category of the material inspector, we provide paremeters to perform dithering effect for the object.

Dither Size : Control how dense the pixel get discard during dithering.

Dither Threshold : Control the dithering process, going down to 0 will discard the whole object. set to 1 = no dithering.

:bulb: In general, you will need to set the _DitherThreshold property via script to control the dithering. Check the 8 Dithering scene locate at OToon- URP Toon Shading/Demo(Can be delete)/Scenes/1 Tutorials folder to see an usage example.


FlattenGI

Start from OToon 1.5. You can enable Flatten GI option to flat out the GI color. Enable this option will prevent the lambert-ish GI shading from indirect light source (ex : light probe) and environment color. To give your object pure NPR looking.

Flatten GI - OFF (When no directional light)

Flatten GI - ON (When no directional light)


Contacts

Thank you for reading, For more question after purchase please mail to erichobbygames@gmail.com