Toon Shader
βοΈ caution If an item with a similar style is produced using a shader other than the Toon Shader provided by ZEPETO, the sale of the item may be suspended or deleted without warning.
ο»Ώ
π Before starting, make sure that the latest version of Zepeto Studio project fileο»Ώ is downloaded. The latest project files version 3.2.12 and higher include ZEPETO built-in shaders.
ο»Ώ
ZEPETO Toon Shader provides the following features.
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-dc5ojMFEOWEHEeM2uZMxX-20240904-102326.png?format=webp)
ο»Ώ
Function | Details |
---|---|
Rendering Mode | You can set the rendering mode of Opaque, Cutout, and Fade. |
Render State Detail | Set Blend Mode, ZWrite, Cull Mode (Back-Front, Front-Back, Off-Duplex), etc. Do not touch it except in Cull Mode. |
Albedo | Albedo texture * Color value is displayed as BaseColor. In the case of a texture with alpha, you can adjust the boundary between opaque and transparent areas by adjusting the Alpha Cutoof value. |
Outline Color | You can set the color of the outline. |
Outline Width | You can set the thickness of the outline. The thickness of the outline remains constant depending on the distance, but as the distance from the camera increases (more than 2m), the thickness of the outline also decreases. Default value 0.0012 recommended |
Outline Color Blend | Controls the color of the outline and how well it blends with the BaseColor. Default 0.4 recommended |
Shadow Color | Adjusts the color of the shaded area. That color is multiplied by the BaseColor and rendered. |
Shadow Threshold | Adjust the shaded area. |
Shadow Smooth | Control the smoothness of the shaded area. |
Specular Color | Control the gloss color. The color is added to the BaseColor for rendering. |
Specular Threshold | Adjust the glossy area. |
Specular Smooth | Control how smooth the gloss spreads. |
Rim Color | Adjust the Rimlight color. That color is added to the BaseColor and rendered. |
Rim Threshold | Adjust the Rimlight area. |
Rim Smooth | Control how smooth the Rimlight spreads. |
Emission | Add EmissionColor to BaseColor. BaseColor + (Emission Texture * Emission Color) |
Color Grading | Adjust the color to suit the ZEPETO environment. |
ο»Ώ
1. Outline Control
- Outline Color - You can set the color of the outline.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-NYUPJfA8nZ6Yh4M6qBtrh-20240904-102331.gif)
ο»Ώ
- Outline Width - You can set the thickness of the outline. The thickness of the outline remains constant according to the distance, but as the distance from the camera increases (more than 2M), the thickness of the outline decreases as the distance increases.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-ypk_vQPmzX_KYCAg2szQZ-20240904-102326.gif)
ο»Ώ
- Outline Color Blend - Adjust the color of the outline and the degree to which it blends with the BaseColor.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-VEz6_dbmkWQosz9HMXYwH-20240904-102326.gif)
ο»Ώ
- Outline Off - Option to not draw outlines.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-XLqntzlHD3YP8FJCD_Bdn-20240904-102326.gif)
ο»Ώ
- Outline Normals Source - This option is used to decide whether the mesh's smooth normal information is represented as Tangent or Normal.
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-_M_wO4ShbOcq4QVByq-hh-20240904-102326.png?format=webp)
ο»Ώ
2. Shading Control
- Shadow Color - Adjust the color of the shaded area. That color is multiplied by the BaseColor and rendered.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-Q2AAi6TRhAa4MDc3iZ_FU-20240904-102328.gif)
ο»Ώ
- Shadow Threshold - Adjust the area of ββthe shaded area.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-Dk_z1b_VSmiefH4Y9NWHf-20240904-102326.gif)
ο»Ώ
- Shadow Smooth - Adjust the smoothness of the shadowed area.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-1k8t7klnjssZ5ch9Tv8Kr-20240904-102326.gif)
ο»Ώ
- Shading Detail - Controlling properties for the second tone. (Details are the same)
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N--yOSslJwRZ1IhOEOSfKRK-20240904-102324.png?format=webp)
ο»Ώ
3. Specular Control
- Specular Color - Adjust the color of the glossy part.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-_Lgghj6nUeXbHXwIdrjSA-20240904-102326.gif)
ο»Ώ
- Specular Threshold - Control the area of ββthe glossy part.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-CCzUo0sfFFkQj4ceLrmIE-20240904-102326.gif)
ο»Ώ
- Specular Smooth - Control the degree to which the glossy area spreads smoothly.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-2tc3XVUkd6tbxgUTIVGJW-20240904-102326.gif)
ο»Ώ
- Use Specular Highlight - Turn on/off gloss expression.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-67sLG28DjnhQqOsxILOVH-20240904-102326.gif)
ο»Ώ
4. Rim Control
- Rim Color - Adjust the Rimlight color.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-1PxT0m5kz2jdhIIZhSGit-20240904-102330.gif)
ο»Ώ
- Rim Threshold - Adjust the area of ββthe Rimlight part.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-7I3uWoMkL2oLHJVBHtBW8-20240904-102326.gif)
ο»Ώ
- Rim Smooth - Control how smooth the Rimlight spreads.
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-8Bu_KolNF0TBfIqJzKEMi-20240904-102326.gif)
ο»Ώ
- Use Rim Light - Turn Rimlight On/Off.
- Light-based Mask - If Masked is selected, the rim light will not be displayed where it is not receiving light..
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-7wIIknNjMxsLK9IfAP_IT-20240904-102326.gif)
ο»Ώ
ο»Ώ
1. Shadow Threshold Texture
π The details below were compared in an environment using the same Shadow properties.
- Based on the 0.5 gray texture, the darker the shadow is, the brighter the shadow is.
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-0lMLbjq_zFTMp16T1pGKT-20240904-102324.png?format=webp)
ο»Ώ
- When the Shadow Threshold texture is not used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-RtdIxhPV9_FQpY8HkDlZO-20240904-102326.png?format=webp)
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-OhhsxdJGAVOFVFxPJojU1-20240904-102325.gif)
ο»Ώ
- When the Shadow Threshold texture is used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-LHjUlswWyXuKJgfPJhvSx-20240904-102326.png?format=webp)
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-JPk3yVK8PCIe6LADcI62i-20240904-102327.gif)
ο»Ώ
2. Mask Texture
π The details below were compared in an environment using the same Outline property.
- Control the masking texture for Outline, Specular, and Rim in R, B, and G channels, respectively.
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-mGR3u_V6zgxPViDvdToZm-20240904-102325.png?format=webp)
ο»Ώ
When the Shadow Threshold texture is not used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-844J6_wg3EGsPDho_6N3s-20240904-102326.png?format=webp)
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-Sy-dPVxUE-hEBhT8ApHW5-20240904-102325.png?format=webp)
ο»Ώ
When the Shadow Threshold texture is used
Outline uses the R channel of the texture
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-sk6SQ5HkDZDs9EhmHtugn-20240904-102325.png?format=webp)
ο»Ώ
π The details below were compared in an environment using the same Specular property.
- The R, B, and G channels control the masking textures for the Outline, Specular, and Rim, respectively.
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-ENHerwFzkNUbyRnW1m0iy-20240904-102326.png?format=webp)
ο»Ώ
When Mask texture is not used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-wQWNCRJ8XWDB6hSqenGNH-20240904-102326.png?format=webp)
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-NRkU_LJDe7P8cPNvSu8Di-20240904-102327.gif)
ο»Ώ
When the Mask texture is used
Specular uses the G channel of the texture
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-LB8ik0qOV94YXkMhj2PZ4-20240904-102327.gif)
ο»Ώ
π The details below were compared in an environment using the same rim properties.
ο»Ώ
When Mask texture is not used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-ylG2KMhDkl2jwhK6UrSpc-20240904-102326.png?format=webp)
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-gfxfN63Qj3qohXUkYuBxL-20240904-102329.gif)
ο»Ώ
When the Mask texture is used
- Rim uses the B channel of the texture
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-tQh06mlifPE9BZJ3T4iXS-20240904-102326.png?format=webp)
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-vcuUIyEHQ-jxLPyn5GMZH-20240904-102330.gif)
ο»Ώ
3. Textured Brush
- Expresses a specific pattern on the boundary of the Toon Shader. The texture is produced based on 0.5 gray texture.
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-uKrgS-Vzr0LaicU0dphbo-20240904-102326.png?format=webp)
ο»Ώ
When the Textured Brush is not used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-_JdF-KefDERsnU188Nylk-20240904-102326.png?format=webp)
ο»Ώ
π The details below were compared in an environment using the same properties.
ο»Ώ
- When the Textured Brush is used
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-xx-4fPqYqB-1-bc_yLujR-20240904-102326.png?format=webp)
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-A-HS-qJqUIh63DBSNN0en-20240904-102328.gif)
ο»Ώ
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-DrOANeZUIz1b8s9Osf1H4-20240904-102327.gif)
ο»Ώ
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-7li6zFtF2nwV9zqXz8bBC-20240904-102328.gif)
ο»Ώ
![Doc contributor](https://s3.amazonaws.com/archbee-animals/lion.png)
![Doc contributor](https://s3.amazonaws.com/archbee-animals/gorilla.png)
![Doc contributor](https://s3.amazonaws.com/archbee-animals/rabbit.png)