Toon Shader
❗️ 注意 如果使用ZEPETO提供的Toon Shader以外的着色器制作了类似风格的物品,物品的销售可能会在没有警告的情况下被暂停或删除。
👍 在开始之前,请确保下载了最新版本的Zepeto Studio project file。最新的项目文件版本3.2.12及更高版本包括ZEPETO内置着色器。
ZEPETO Toon Shader 提供以下功能。
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-dc5ojMFEOWEHEeM2uZMxX-20240904-102326.png?format=webp)
功能 | 详情 |
---|---|
渲染模式 | 您可以设置不透明、切割和渐隐的渲染模式。 |
渲染状态详情 | 设置混合模式、ZWrite、剔除模式(后-前、前-后、关闭-双面)等。除非在剔除模式下,否则不要触碰它。 |
反照率 | 反照率纹理 * 颜色值显示为基础颜色。在具有 alpha 的纹理的情况下,您可以通过调整 Alpha 截止值来调整不透明和透明区域之间的边界。 |
轮廓颜色 | 您可以设置轮廓的颜色。 |
轮廓宽度 | 您可以设置轮廓的厚度。轮廓的厚度根据距离保持不变,但随着与相机距离的增加(超过 2 米),轮廓的厚度也会减小。推荐默认值 0.0012 |
轮廓颜色混合 | 控制轮廓的颜色及其与基础颜色的混合程度。推荐默认值 0.4 |
阴影颜色 | 调整阴影区域的颜色。该颜色与基础颜色相乘并渲染。 |
阴影阈值 | 调整阴影区域。 |
阴影平滑 | 控制阴影区域的平滑度。 |
镜面颜色 | 控制光泽颜色。该颜色添加到基础颜色进行渲染。 |
镜面阈值 | 调整光泽区域。 |
镜面平滑 | 控制光泽扩散的平滑度。 |
边缘光颜色 | 调整边缘光颜色。该颜色添加到基础颜色并渲染。 |
边缘光阈值 | 调整边缘光区域。 |
边缘光平滑 | 控制边缘光扩散的平滑度。 |
自发光 | 将自发光颜色添加到基础颜色。基础颜色 +(自发光纹理 * 自发光颜色) |
颜色分级 | 调整颜色以适应 ZEPETO 环境。 |
1. 轮廓控制
- 轮廓颜色 - 您可以设置轮廓的颜色。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-NYUPJfA8nZ6Yh4M6qBtrh-20240904-102331.gif)
- 轮廓宽度 - 您可以设置轮廓的厚度。轮廓的厚度根据距离保持不变,但随着距离摄像机的距离增加(超过2米),轮廓的厚度会随着距离的增加而减小。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-ypk_vQPmzX_KYCAg2szQZ-20240904-102326.gif)
- Outline Color Blend - 调整轮廓的颜色及其与BaseColor的混合程度。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-VEz6_dbmkWQosz9HMXYwH-20240904-102326.gif)
- Outline Off - 选择不绘制轮廓。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-XLqntzlHD3YP8FJCD_Bdn-20240904-102326.gif)
- Outline Normals Source - 此选项用于决定网格的平滑法线信息是表示为Tangent还是Normal。
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-_M_wO4ShbOcq4QVByq-hh-20240904-102326.png?format=webp)
2. 阴影控制
- 阴影颜色 - 调整阴影区域的颜色。该颜色与基础颜色相乘并渲染。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-Q2AAi6TRhAa4MDc3iZ_FU-20240904-102328.gif)
- 阴影阈值 - 调整阴影区域的面积。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-Dk_z1b_VSmiefH4Y9NWHf-20240904-102326.gif)
- 阴影平滑 - 调整阴影区域的平滑度。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-1k8t7klnjssZ5ch9Tv8Kr-20240904-102326.gif)
- 阴影细节 - 控制第二色调的属性。(细节相同)
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N--yOSslJwRZ1IhOEOSfKRK-20240904-102324.png?format=webp)
3. 高光控制
- 高光颜色 - 调整光亮部分的颜色。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-_Lgghj6nUeXbHXwIdrjSA-20240904-102326.gif)
- Specular Threshold - 控制光亮部分的区域。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-CCzUo0sfFFkQj4ceLrmIE-20240904-102326.gif)
- Specular Smooth - 控制光亮区域平滑扩散的程度。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-2tc3XVUkd6tbxgUTIVGJW-20240904-102326.gif)
- Use Specular Highlight - 开启/关闭光泽表达。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-67sLG28DjnhQqOsxILOVH-20240904-102326.gif)
4. 边缘控制
- 边缘颜色 - 调整边缘光的颜色。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-1PxT0m5kz2jdhIIZhSGit-20240904-102330.gif)
- 边缘阈值 - 调整边缘光部分的区域。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-7I3uWoMkL2oLHJVBHtBW8-20240904-102326.gif)
- 边缘平滑 - 控制边缘光扩散的平滑度。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-8Bu_KolNF0TBfIqJzKEMi-20240904-102326.gif)
- 使用边缘光 - 开启/关闭边缘光。
- 基于光的遮罩 - 如果选择遮罩,未受光照的地方将不会显示边缘光。
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-7wIIknNjMxsLK9IfAP_IT-20240904-102326.gif)
1. 阴影阈值纹理
👍 以下细节是在使用相同阴影属性的环境中进行比较的。
- 基于0.5灰色纹理,阴影越暗,阴影越亮。
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-0lMLbjq_zFTMp16T1pGKT-20240904-102324.png?format=webp)
- 当不使用阴影阈值纹理时
![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)
- 当使用阴影阈值纹理时
![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. 遮罩纹理
👍 以下细节是在使用相同轮廓属性的环境中进行比较的。
- 分别在R、B和G通道中控制轮廓、高光和边缘的遮罩纹理。
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-mGR3u_V6zgxPViDvdToZm-20240904-102325.png?format=webp)
当不使用阴影阈值纹理时
![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)
当使用阴影阈值纹理时
轮廓使用纹理的R通道
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-sk6SQ5HkDZDs9EhmHtugn-20240904-102325.png?format=webp)
👍 下面的细节是在使用相同的Specular属性的环境中进行比较的。
- R、B和G通道分别控制轮廓、镜面和边缘的遮罩纹理。
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-ENHerwFzkNUbyRnW1m0iy-20240904-102326.png?format=webp)
当不使用遮罩纹理时
![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)
使用遮罩纹理时
高光使用纹理的G通道
![Document image Document image](https://archbee-image-uploads.s3.amazonaws.com/fCt3n1oCa8rgNJ8fw9I2N-LB8ik0qOV94YXkMhj2PZ4-20240904-102327.gif)
👍 以下细节是在使用相同轮廓属性的环境中进行比较的。
未使用遮罩纹理时
![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)
使用遮罩纹理时
- 轮廓使用纹理的B通道
![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. 纹理画笔
- 在 Toon Shader 的边界上表达特定的图案。纹理是基于 0.5 灰色纹理生成的。
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-uKrgS-Vzr0LaicU0dphbo-20240904-102326.png?format=webp)
当不使用纹理画笔时
![Document image Document image](https://images.archbee.com/fCt3n1oCa8rgNJ8fw9I2N-_JdF-KefDERsnU188Nylk-20240904-102326.png?format=webp)
👍 以下细节是在使用相同属性的环境中进行比较的。
- 当使用纹理画笔时
![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)