---
title: Toon Shader
slug: studio-guide-th/toon-shader
docTags: 
createdAt: 2024-09-02T08:34:13.133Z
---

:::hint{type="danger"}
**❗️ caution**
หากมีการผลิตไอเท็มที่มีสไตล์คล้ายกันโดยใช้เชดเดอร์อื่นที่ไม่ใช่ Toon Shader ที่จัดทำโดย ZEPETO การขายไอเท็มนั้นอาจถูกระงับหรือถูกลบโดยไม่มีการเตือนล่วงหน้า
:::



## STEP 1 : Preparation

:::hint{type="success"}
**👍 **ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าได้ดาวน์โหลดเวอร์ชันล่าสุดของ [Zepeto Studio project file](docId\:yjpVaN-RkLQrkHfc5J8ik)  ไฟล์โปรเจกต์ล่าสุดเวอร์ชัน 3.2.12 และสูงกว่ารวมถึงเชดเดอร์ที่ติดตั้งในตัวของ ZEPETO
:::



ZEPETO Toon Shader มีคุณสมบัติดังต่อไปนี้

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dc5ojMFEOWEHEeM2uZMxX-20240904-102326.png)





## ขั้นตอนที่ 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. การควบคุมการแรเงา**

- **สีเงา** - ปรับสีของพื้นที่ที่มีเงา สีนี้จะถูกคูณด้วย BaseColor และแสดงผล

![](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. Rim Control**

- **Rim Color** - ปรับสีของ Rimlight.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-1PxT0m5kz2jdhIIZhSGit-20240904-102330.gif)



- **Rim Threshold** - ปรับพื้นที่ของส่วน Rimlight.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7I3uWoMkL2oLHJVBHtBW8-20240904-102326.gif)



- **Rim Smooth** - ควบคุมความเรียบของการกระจาย Rimlight.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-8Bu_KolNF0TBfIqJzKEMi-20240904-102326.gif)



- **Use Rim Light** - เปิด/ปิด Rimlight.
- **Light-based Mask** - หากเลือก Masked, rim light จะไม่แสดงในที่ที่ไม่ได้รับแสง.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7wIIknNjMxsLK9IfAP_IT-20240904-102326.gif)



## STEP 3 : Enhance the details



**1. Shadow Threshold Texture**

:::hint{type="success"}
**👍 **รายละเอียดด้านล่างถูกเปรียบเทียบในสภาพแวดล้อมที่ใช้คุณสมบัติของเงาเดียวกัน
:::

- จากพื้นผิวสีเทา 0.5 ยิ่งเงามืดมากเท่าไหร่ เงาก็จะยิ่งสว่างมากขึ้นเท่านั้น

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-0lMLbjq_zFTMp16T1pGKT-20240904-102324.png)



- **เมื่อไม่ได้ใช้พื้นผิว Shadow Threshold**

::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)



- **เมื่อใช้พื้นผิว Shadow Threshold**

![](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"}
**👍 **รายละเอียดด้านล่างถูกเปรียบเทียบในสภาพแวดล้อมที่ใช้คุณสมบัติ Outline เดียวกัน
:::

- ควบคุมพื้นผิวหน้ากากสำหรับ Outline, Specular และ Rim ในช่อง R, B และ G ตามลำดับ

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-mGR3u_V6zgxPViDvdToZm-20240904-102325.png)



**เมื่อไม่ได้ใช้พื้นผิว Shadow Threshold**

![](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)



**เมื่อใช้พื้นผิว Shadow Threshold**

- Outline ใช้ช่อง R ของพื้นผิว



  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9bXWbTrDlnoyrY5XMCP7f-20240904-102326.png)

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-sk6SQ5HkDZDs9EhmHtugn-20240904-102325.png)



:::hint{type="success"}
**👍 **รายละเอียดด้านล่างถูกเปรียบเทียบในสภาพแวดล้อมที่ใช้คุณสมบัติ Specular เดียวกัน
:::

- ช่อง R, B และ G ควบคุมพื้นผิวการมาสก์สำหรับ Outline, Specular และ Rim ตามลำดับ

![](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)



**เมื่อใช้พื้นผิวหน้ากาก**

- Specular ใช้ช่อง G ของพื้นผิว



  ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-jRdSu7aJ2y0nyPjH15cvi-20240904-102326.png)

![](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)



**เมื่อใช้พื้นผิวหน้ากาก**

- Rim ใช้ช่อง 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)