--- title: Toon Shader slug: studio-guide-ch/toon-shader docTags: createdAt: 2024-09-02T08:34:13.133Z --- :::hint{type="danger"} **❗️ 注意** 如果使用ZEPETO提供的Toon Shader以外的着色器制作了类似风格的物品，物品的销售可能会在没有警告的情况下被暂停或删除。 ::: ## 步骤 1：准备 :::hint{type="success"} **👍 **在开始之前，请确保下载了最新版本的[Zepeto Studio project file](docId\:AFQ_HryPnDRo0feGQi6Fd)。最新的项目文件版本3.2.12及更高版本包括ZEPETO内置着色器。 ::: ZEPETO Toon Shader 提供以下功能。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dc5ojMFEOWEHEeM2uZMxX-20240904-102326.png) | 功能 | 详情 | | ------ | ------------------------------------------------------------------------ | | 渲染模式 | 您可以设置不透明、切割和渐隐的渲染模式。 | | 渲染状态详情 | 设置混合模式、ZWrite、剔除模式（后-前、前-后、关闭-双面）等。除非在剔除模式下，否则不要触碰它。 | | 反照率 | 反照率纹理 \* 颜色值显示为基础颜色。在具有 alpha 的纹理的情况下，您可以通过调整 Alpha 截止值来调整不透明和透明区域之间的边界。 | | 轮廓颜色 | 您可以设置轮廓的颜色。 | | 轮廓宽度 | 您可以设置轮廓的厚度。轮廓的厚度根据距离保持不变，但随着与相机距离的增加（超过 2 米），轮廓的厚度也会减小。**推荐默认值 0.0012** | | 轮廓颜色混合 | 控制轮廓的颜色及其与基础颜色的混合程度。**推荐默认值 0.4** | | 阴影颜色 | 调整阴影区域的颜色。该颜色与基础颜色相乘并渲染。 | | 阴影阈值 | 调整阴影区域。 | | 阴影平滑 | 控制阴影区域的平滑度。 | | 镜面颜色 | 控制光泽颜色。该颜色添加到基础颜色进行渲染。 | | 镜面阈值 | 调整光泽区域。 | | 镜面平滑 | 控制光泽扩散的平滑度。 | | 边缘光颜色 | 调整边缘光颜色。该颜色添加到基础颜色并渲染。 | | 边缘光阈值 | 调整边缘光区域。 | | 边缘光平滑 | 控制边缘光扩散的平滑度。 | | 自发光 | 将自发光颜色添加到基础颜色。基础颜色 +（自发光纹理 \* 自发光颜色） | | 颜色分级 | 调整颜色以适应 ZEPETO 环境。 | ## 步骤 2：探索功能 **1. 轮廓控制** - **轮廓颜色** - 您可以设置轮廓的颜色。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-NYUPJfA8nZ6Yh4M6qBtrh-20240904-102331.gif) - **轮廓宽度** - 您可以设置轮廓的厚度。轮廓的厚度根据距离保持不变，但随着距离摄像机的距离增加（超过2米），轮廓的厚度会随着距离的增加而减小。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ypk_vQPmzX_KYCAg2szQZ-20240904-102326.gif) - **Outline Color Blend** - 调整轮廓的颜色及其与BaseColor的混合程度。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VEz6_dbmkWQosz9HMXYwH-20240904-102326.gif) - **Outline Off** - 选择不绘制轮廓。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-XLqntzlHD3YP8FJCD_Bdn-20240904-102326.gif) - **Outline Normals Source** - 此选项用于决定网格的平滑法线信息是表示为Tangent还是Normal。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_M_wO4ShbOcq4QVByq-hh-20240904-102326.png) **2. 阴影控制** - **阴影颜色** - 调整阴影区域的颜色。该颜色与基础颜色相乘并渲染。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Q2AAi6TRhAa4MDc3iZ_FU-20240904-102328.gif) - **阴影阈值** - 调整阴影区域的面积。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Dk_z1b_VSmiefH4Y9NWHf-20240904-102326.gif) - **阴影平滑** - 调整阴影区域的平滑度。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-1k8t7klnjssZ5ch9Tv8Kr-20240904-102326.gif) - **阴影细节** - 控制第二色调的属性。（细节相同） ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N--yOSslJwRZ1IhOEOSfKRK-20240904-102324.png) **3. 高光控制** - **高光颜色** - 调整光亮部分的颜色。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_Lgghj6nUeXbHXwIdrjSA-20240904-102326.gif) - **Specular Threshold** - 控制光亮部分的区域。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-CCzUo0sfFFkQj4ceLrmIE-20240904-102326.gif) - **Specular Smooth** - 控制光亮区域平滑扩散的程度。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-2tc3XVUkd6tbxgUTIVGJW-20240904-102326.gif) - **Use Specular Highlight** - 开启/关闭光泽表达。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-67sLG28DjnhQqOsxILOVH-20240904-102326.gif) **4. 边缘控制** - **边缘颜色** - 调整边缘光的颜色。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-1PxT0m5kz2jdhIIZhSGit-20240904-102330.gif) - **边缘阈值** - 调整边缘光部分的区域。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7I3uWoMkL2oLHJVBHtBW8-20240904-102326.gif) - **边缘平滑** - 控制边缘光扩散的平滑度。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-8Bu_KolNF0TBfIqJzKEMi-20240904-102326.gif) - **使用边缘光** - 开启/关闭边缘光。 - **基于光的遮罩** - 如果选择遮罩，未受光照的地方将不会显示边缘光。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7wIIknNjMxsLK9IfAP_IT-20240904-102326.gif) ## 步骤 3：增强细节 **1. 阴影阈值纹理** :::hint{type="success"} **👍 **以下细节是在使用相同阴影属性的环境中进行比较的。 ::: - 基于0.5灰色纹理，阴影越暗，阴影越亮。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-0lMLbjq_zFTMp16T1pGKT-20240904-102324.png) - **当不使用阴影阈值纹理时** ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-RtdIxhPV9_FQpY8HkDlZO-20240904-102326.png" size="48" width="360" height="109" position="center" showCaption="false"} ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OhhsxdJGAVOFVFxPJojU1-20240904-102325.gif) - **当使用阴影阈值纹理时** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-LHjUlswWyXuKJgfPJhvSx-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-JPk3yVK8PCIe6LADcI62i-20240904-102327.gif) **2. 遮罩纹理** :::hint{type="success"} **👍 **以下细节是在使用相同轮廓属性的环境中进行比较的。 ::: - 分别在R、B和G通道中控制轮廓、高光和边缘的遮罩纹理。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-mGR3u_V6zgxPViDvdToZm-20240904-102325.png) **当不使用阴影阈值纹理时** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-844J6_wg3EGsPDho_6N3s-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Sy-dPVxUE-hEBhT8ApHW5-20240904-102325.png) **当使用阴影阈值纹理时** - 轮廓使用纹理的R通道 - ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9bXWbTrDlnoyrY5XMCP7f-20240904-102326.png" size="100" isUploading="false" width="884" height="328" darkWidth="884" darkHeight="328" showCaption="false" indent="2"} ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-sk6SQ5HkDZDs9EhmHtugn-20240904-102325.png) :::hint{type="success"} **👍 **下面的细节是在使用相同的Specular属性的环境中进行比较的。 ::: - R、B和G通道分别控制轮廓、镜面和边缘的遮罩纹理。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ENHerwFzkNUbyRnW1m0iy-20240904-102326.png) **当不使用遮罩纹理时** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wQWNCRJ8XWDB6hSqenGNH-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-NRkU_LJDe7P8cPNvSu8Di-20240904-102327.gif) **使用遮罩纹理时** - 高光使用纹理的G通道 - ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-jRdSu7aJ2y0nyPjH15cvi-20240904-102326.png" size="100" isUploading="false" width="884" height="328" darkWidth="884" darkHeight="328" showCaption="false" indent="2"} ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-LB8ik0qOV94YXkMhj2PZ4-20240904-102327.gif) :::hint{type="success"} **👍 **以下细节是在使用相同轮廓属性的环境中进行比较的。 ::: **未使用遮罩纹理时** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ylG2KMhDkl2jwhK6UrSpc-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-gfxfN63Qj3qohXUkYuBxL-20240904-102329.gif) **使用遮罩纹理时** - 轮廓使用纹理的B通道 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-tQh06mlifPE9BZJ3T4iXS-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-vcuUIyEHQ-jxLPyn5GMZH-20240904-102330.gif) **3. 纹理画笔** - 在 Toon Shader 的边界上表达特定的图案。纹理是基于 0.5 灰色纹理生成的。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-uKrgS-Vzr0LaicU0dphbo-20240904-102326.png) **当不使用纹理画笔时** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_JdF-KefDERsnU188Nylk-20240904-102326.png) :::hint{type="success"} **👍 **以下细节是在使用相同属性的环境中进行比较的。 ::: - **当使用纹理画笔时** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-xx-4fPqYqB-1-bc_yLujR-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-A-HS-qJqUIh63DBSNN0en-20240904-102328.gif) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-DrOANeZUIz1b8s9Osf1H4-20240904-102327.gif) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7li6zFtF2nwV9zqXz8bBC-20240904-102328.gif)