Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions com.unity.toonshader/Documentation~/AngelRing.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Angel Ring Projection Settings

The Angel Ring effect for UTS expresses shine or luster in hair. This effect always appears in a fixed position as seen from the Camera. Angel Ring requires the 2nd UV in the meshes.
The Angel Ring effect for UTS expresses shine or luster in hair. This effect always appears in a fixed position as seen from the camera. Angel Ring requires the 2nd UV in the meshes.


![The head of a chibi-style character with feathered hair and cat ears. The head is oriented from three angles: side, front, and back. In each angle, two bright highlights appear in the same place on the left and right.](images/AR_Image.png)
Expand All @@ -16,16 +16,16 @@ Enable the Angel Ring effect for UTS, which expresses shine or luster in hair.


### Angel Ring
Angel Ring : Texture(sRGB) × Color(RGB). Default:Black.
By default, the **Unity Toon Shader** adds the color to the lighting results. Texture alpha channel doesn't affect.
Please refer to [Alpha Channel as Clipping Mask](#alpha-chennel-as-clipping-mask) when alpha clipping is desirable.
Angel Ring: Texture(sRGB) × Color(RGB). Default: Black.
By default, the **Unity Toon Shader** adds the color to the lighting results. The texture alpha channel has no effect.
Please refer to [Alpha Channel as Clipping Mask](#alpha-channel-as-clipping-mask) when alpha clipping is desirable.

![A dark square texture, with lighter v-shaped areas at the left and right edges.](images/para_height2.png)<br/>
Angel Ring Texture Example

### Offset U
Adjusts the Angel Rings shape in the horizontal direction. The range is from 0.0 to 0.5. The default is 0.
please refer to the image in [Offset V](#offset-v).
Adjusts the Angel Ring's shape in the horizontal direction. The range is from 0.0 to 0.5. The default is 0.
Please refer to the image in [Offset V](#offset-v).

### Offset V
Adjusts the Angel Ring’s shape in the vertical direction. The range is from 0.0 to 1.0. The default is 0.3.
Expand Down
18 changes: 9 additions & 9 deletions com.unity.toonshader/Documentation~/Basic.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Three Color Map and Control Map Settings

**Three Color Map and Control Map Settings** provide basic cell shading settings in the **Unity Toon Shader**. These settings allow you to control the rendering of light and shadow areas independent from the actual light color. UTS allows detailed control whether the directional light color effects on materials. Please refer to [Scene Light Effectiveness Settings](SceneLight.md).
**Three Color Map and Control Map Settings** provide basic cel-shading settings in the **Unity Toon Shader**. These settings allow you to control the rendering of light and shadow areas independently from the actual light color. UTS provides detailed control over whether the directional light color affects materials. Please refer to [Scene Light Effectiveness Settings](SceneLight.md) for more information.

* [Three Basic Color Maps](#Three-basic-color-maps)
* [Base Map](#base-map)
Expand All @@ -21,45 +21,45 @@
## Three Basic Color Maps

## Base Map
Base Color : Texture(sRGB) × Color(RGB). The default color is White. The base color represents the color of the unshaded area of object or character.
Base Color: Texture(sRGB) × Color(RGB). The default color is white. The base color represents the color of the unshaded areas of objects or characters.

| Base Color Map (Face) | (Hair) | Result |
| ---- | ---- |---- |
| <img alt="A yellow texture map with different-colored areas for skin, ears, eyes, cheeks, and other parts of a face." src="images/yuko_face3_main.png" height="256"> | <img alt="A grey texture map with two brown areas for cat-like ears, and lighter grey brushstrokes for parts of the hair." src="images/yuko_hair.png" height="256"> |<img alt="A chibi-style face with yellow skin, grey hair, brown cat ears, large eyes, and rosy cheeks." src="images/YukoFace.png" height="256"> |


### Apply to 1st Shading Map
Apply **Base Map** to the **1st Shading Map**. When you check **Apply to 1st Shading Map**, the texture map in **1st Shading Map** isn't applied for rendering and the Inspector Window disables its texture UI.
Apply **Base Map** to the **1st Shading Map**. When you check **Apply to 1st Shading Map**, the texture map in **1st Shading Map** is not applied for rendering and the Inspector window disables its texture UI.


## 1st Shading Map
The map used for the brighter portions of the shadow. Texture(sRGB) × Color(RGB). The default color is White.
The map used for the brighter portions of the shadow. Texture(sRGB) × Color(RGB). The default color is white.

| **1st Shading Map** (Face) | (Hair) | Result |
| ---- | ---- | ---- |
| <img alt="A similar texture map to the base map, but the background is now tan." src="images/yuko_face3_B.png" height="256"> | <img alt="A similar hair map to the base map, but the background is darker, and the brushstrokes have a blue gradient." src="images/yuko_hairB.png" height="256"> |<img alt="The chibi-style face, now with shadows at the bottom of the hair and face, and over the eyes." src="images/YukoFace1stShadingMap.png" height="256"> |


### Apply to 2nd Shading Map
Apply **Base Map** or the **1st Shading Map** to the **2nd Shading Map**. When you check the **Apply to 2nd Shading Map**, texture map in **2nd Shading Map** isn't applied for rendering and the Inspector Window disables its texture UI.
Apply **Base Map** or the **1st Shading Map** to the **2nd Shading Map**. When you check **Apply to 2nd Shading Map**, the texture map in **2nd Shading Map** is not applied for rendering and the Inspector window disables its texture UI.


### 2nd Shading Map
The map used for the darker portions of the shadow. Texture(sRGB) × Color(RGB). The default color is White.
The map used for the darker portions of the shadow. Texture(sRGB) × Color(RGB). The default color is white.

| **2nd Shading Map** (Face) | (Hair) | Result |
| ---- | ---- | ---- |
| <img alt="A similar texture map to the base map, but the background is now a dark orange." src="images/yuko_face3_C.png" height="256"> | <img alt="A similar hair map to the base map, but the background is even darker." src="images/yuko_hairC.png" height="256"> |<img alt="The chibi-style face, now with darker shadows at the edges of the hair." src="images/YukoFace2ndShadingMap.png" height="256"> |


## Shadow Control Maps
Textures that dictates the fixed shadows of the material.
Textures that dictate the fixed shadows of the material.

### 1st Shading Position Map
Specify the position of fixed shadows that falls in 1st shade color areas in UV coordinates. **1st Position Map** : Texture(linear).
Specifies the position of fixed shadows that fall in 1st shade color areas in UV coordinates. **1st Position Map**: Texture(linear).

### 2nd Shading Position Map
Specify the position of fixed shadows that falls in 2nd shade color areas in UV coordinates. **2nd Position Map** : Texture(linear).
Specifies the position of fixed shadows that fall in 2nd shade color areas in UV coordinates. **2nd Position Map**: Texture(linear).


<br><br>
Expand Down
4 changes: 2 additions & 2 deletions com.unity.toonshader/Documentation~/Emission.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Emission Settings

Emission controls the color and intensity of light emitted from the surface. When you use an emissive Material in your Scene, it appears as a visible source of light. The meshes appear to be self-illuminated.
Emission controls the color and intensity of light emitted from the surface. When you use an emissive material in your scene, it appears as a visible source of light. The meshes appear to be self-illuminated.

[A chibi-style model standing between two red cubes, which light the model with emissive light.](images/EmissiveAnimation.png)

Expand All @@ -27,7 +27,7 @@ Primarily used with the Bloom Post Effect and represents luminous objects.
![The Unity logo against a transparent background. The color fades from bright white at the center to black at the edges. The texture dimensions are 1024 x 1024, the texture size is 1.3MB, and the texture type is RBGA Compressed DXT5|BC3 UNorm.](images/EmissionMapSample.png)

## Emission Map Animation
When Enabled, the UV and Color of the **Emission Map** animate.
When enabled, the UV and color of the **Emission Map** animate.

<video title="A cube with the Unity logo on each face. The logo loops through the color spectrum, and vertical black bars scroll horizontally across the face." src="images/EmissionAnimation.mp4" width="auto" height="auto" autoplay="true" loop="true" controls></video>

Expand Down
48 changes: 24 additions & 24 deletions com.unity.toonshader/Documentation~/GettingStarted.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
# Getting started with Unity Toon Shader

The **Unity Toon Shader**(UTS) provides tons of properties for professional cel-shading, though. In this page, you'll learn what are keys for basic cel-shading step by step.
The **Unity Toon Shader** (UTS) provides many properties for professional cel-shading. On this page, you'll learn the key concepts for basic cel-shading step by step.

What you have to do for simple cel-shading are:
The steps for simple cel-shading are:
* [Make sure at least one directional light is in the scene](#put-a-directional-light-in-the-scene).
* [Create materials for cel-shading and set appropriate shader path](#creating-a-new-material-and-applying-unity-toon-shader).
* [Create materials for cel-shading and set the appropriate shader](#creating-a-new-material-and-applying-unity-toon-shader).
* [Set up three basic colors](#setting-up-three-basic-colors).
* [Determine touch of the character](#adjusting-edge-of-three-basic-color-region).
* [Set Outline](#set-outline).
* [Determine the character's visual style](#adjusting-edge-of-three-basic-color-region).
* [Set up the outline](#set-outline).

After mastering above you might want to check:
After mastering the basics, you might want to explore:
* [Advanced techniques](#advanced-techniques).
* [Eliminate outlines around eyes](#eliminating-outlines-around-eyes).
* [Add luster to hair](#adding-luster-to-hair).
* [Options for stunning professional cel-shading](#more-options-for-stunning-professional-cel-shading).


## Put a directional light in the scene
To make cel-shading work. You need to place at least one [directional light](https://docs.unity3d.com/2022.2/Documentation/Manual/Lighting.html) in the scene.
To make cel-shading work, you need to place at least one [directional light](https://docs.unity3d.com/2022.2/Documentation/Manual/Lighting.html) in the scene.

## Creating a new material and applying Unity Toon Shader

Start from [creating a material](https://docs.unity3d.com/2022.2/Documentation/Manual/materials-introduction.html).
Start by [creating a material](https://docs.unity3d.com/2022.2/Documentation/Manual/materials-introduction.html).

![A fully white chibi-style character model with long hair and rabbit ears. The Inspector window is open with the Lit material of the Universal Render Pipeline.](images/UrpLitMaterial.png)<br/>
Selecting the appropriate shader for the material.
Next, select the appropriate shader for the material.

Because the **Unity Toon Shader**(UTS) is capable of all the render pipelines, the Built-in Render Pipeline, URP, and HDRP, The shaders you need to choose are just Toon or Toon(Tessellation). They are not under Universal Render Pipeline nor HDRP in menus.
Because the **Unity Toon Shader** (UTS) is compatible with all render pipelinesthe Built-in Render Pipeline, URP, and HDRP—the shaders you need to choose are simply **Toon** or **Toon (Tessellation)**. They are not listed under Universal Render Pipeline or HDRP in the menus.

![The same character model with the Toon shader selected in the Inspector window. The model is now a flat white silhouette.](images/AppliedUTS.png)

You see the directional light isn't affecting like usual shading. This is because UTS controls the response of the lighting according to the artist's intentions. UTS allows detailed control whether the directional light color effects on materials. Please refer to [Scene Light Effectiveness Settings](SceneLight.md). But, while learning this section, setting the light color to **white** is recommendable.
You'll notice that the directional light doesn't affect the shading like usual. This is because UTS controls the lighting response according to the artist's intentions. UTS provides detailed control over whether the directional light color affects materials. Please refer to [Scene Light Effectiveness Settings](SceneLight.md) for more information. However, while learning this section, it's recommended to set the light color to **white**.

## Setting up three basic colors

The most basic function of the UTS is to render the mesh in three regions. **Base Map** for regions with no shadows, **1st shading map** for regions with shaded lighter , and **2nd shading map** for regions with shaded darker. [Three Color Map and Control Map Settings](Basic.md) provide the properties to control this fundamental settings. For basic cel-shading, two maps, **Base Map** and **1st Shading Map** work fine.
The most basic function of UTS is to render the mesh in three regions: **Base Map** for regions with no shadows, **1st Shading Map** for lighter shaded regions, and **2nd Shading Map** for darker shaded regions. [Three Color Map and Control Map Settings](Basic.md) provides the properties to control these fundamental settings. For basic cel-shading, two maps**Base Map** and **1st Shading Map**work fine.

![The same character model with the same shader selected. The Base Map property and the 1st Shading Map properties in the Inspector window are set to UV texture maps that have the shapes and colors for the model. The character is now fully textured.](images/AppliedTextures.png)

Applying the Base Map and 1st Shading Map to the material. The difference between the two texture is the color tone. In this sample, applied two different textures. But, applying one texture and differ colors to apply is also possible.
Apply the Base Map and 1st Shading Map to the material. The difference between the two textures is the color tone. In this example, two different textures are applied. However, it's also possible to apply one texture and use different colors.

![A UV map texture that contains all the parts of a chibi-style model](images/utc_all2_light.png)<br/>
An example Base Map.

![The same UV map but some areas have a darker color.](images/utc_all2_dark.png)</br>
An example 1st Shading Map.

## Adjusting edge of three basic color region
## Adjusting the edges of the three basic color regions

Touch of the image is one of the most important factors that determine the style of the work. [Shading Steps and Feather Settings](ShadingStepAndFeather.md) provides ways to adjust the position of the border between the regions and whether they're clearly separated or blended. First, you should adjust **Base Color Step** to make **1st Shading Map**, darker texture above, displayed.
The visual style of the image is one of the most important factors that determine the overall look of the work. [Shading Steps and Feather Settings](ShadingStepAndFeather.md) provides ways to adjust the position of the border between regions and whether they're clearly separated or blended. First, you should adjust **Base Color Step** to make the **1st Shading Map** (the darker texture shown above) visible.

![The same character model. In the Inspector window of the Toon shader, the Base Color Step property is set to 0.609. The shadows on the model are more prominent.](images/WithoutOutline.png)

In the above, the boundary of **Base Map** and **1st Shading Map** is cleary separated. Try adjusting **Base Shading Feather** to see how to control the boundary clearness. Sometimes, blended borders are favorable.
In the image above, the boundary between **Base Map** and **1st Shading Map** is clearly separated. Try adjusting **Base Shading Feather** to see how to control the boundary sharpness. Sometimes, blended borders are more desirable.

![The same character model. In the Inspector window of the Toon shader, the Base Shading Feather property is set to 0.279. The shadows on the model are more blended.](images/AdjustingFeather.png)

## Set outline
The Outline is another important factor that determines the animation touch. The color of the border should be close to the background or clearly distinguishable, and its thickness affects the style of the animation. [Outline Settings](Outline.md) provides the properties to control them.
## Set up the outline
The outline is another important factor that determines the animation style. The color of the outline should either be close to the background or clearly distinguishable, and its thickness affects the overall style of the animation. [Outline Settings](Outline.md) provides the properties to control these aspects.

<canvas class="image-comparison" role="img" aria-label="The same character model. In the Inspector window of the Toon shader, the Outline Color property is set to gray, and the Outline Width property is set to 4, then 6.44.">
<img src="images/ThinOutline2.png" title="Outline Width: 4">
Expand All @@ -66,25 +66,25 @@ The Outline is another important factor that determines the animation touch. The
<br />Drag the slider to compare the images.

## Advanced techniques
Now, you learned basic cel-sheding. But, professional cel-shading often requires more treatments. You will learn a couple of techniques in this section.
Now that you've learned basic cel-shading, professional cel-shading often requires additional techniques. You'll learn a couple of advanced techniques in this section.

### Eliminating outlines around eyes
Look at the character's face above again. You will notice outlines around characters' eyes spoiling the images. UTS provides [Outline Width Map](Outline.md#outline-width-map) to solve this. By applying that map, you can control the thickness of outlines around every part of the meshes to your satisfaction.
Look at the character's face in the images above again. You'll notice that outlines around the character's eyes can detract from the overall appearance. UTS provides an [Outline Width Map](Outline.md#outline-width-map) to solve this issue. By applying this map, you can control the thickness of outlines around every part of the mesh to your satisfaction.

![The same character model. In the Inspector window of the Toon shader, the Outline Width Map property is set to a texture. There's no longer an outline around the eyes of the character.](images/OutlineWidthMap3.png)


### Adding luster to hair
You might still see the image appear flat and lacking in three-dimensionality.
[Highlight](Highlight.md) on hair is common expression in anime production.
[Angel Ring](AngelRing.md) and [Material Capture(MatCap)](MatCap.md) are more specialized for hair luster. This time, apply MatCap on the hair. Create another material, then set [MatCap map](MatCap.md#matcap-map) in it.
You might notice that the image still appears flat and lacks three-dimensionality.
[Highlight](Highlight.md) on hair is a common technique in anime production.
[Angel Ring](AngelRing.md) and [Material Capture (MatCap)](MatCap.md) are more specialized techniques for hair luster. In this example, we'll apply MatCap to the hair. Create another material, then set the [MatCap map](MatCap.md#matcap-map) in it.

![The same character model. In the Inspector window of the Toon shader, the MatCap Map property is set to a texture. The shadows and outlines on the hair look more three-dimensional.](images/Luster3.png)



## More options for stunning professional cel-shading
The following factors are also essential in nowadays animation/game production when using cel-shading. Please try these out after mastering this page.
The following features are also essential in modern animation and game production when using cel-shading. Please try these out after mastering the techniques on this page.

* [Emission](Emission.md)
* [Normal Map](NormalMap.md)
Expand Down
Loading