--- title: Toon Shader slug: studio-guide-kr/toon-shader docTags: createdAt: 2024-09-02T08:34:13.133Z --- :::hint{type="danger"} **❗️ 주의사항** 제페토에서 제공하는 Toon Shader가 아닌 다른 Shader를 사용하여 유사한 스타일의 아이템이 제작되었을 경우, 경고 없이 아이템의 판매가 중지되거나 삭제 처리될 수 있습니다. ::: ## STEP 1 : 준비 :::hint{type="success"} **👍 **시작하기 전에 최신 버전의 ZEPETO Studio 프로젝트 파일이 다운로드되었는지 확인하세요. \[[3D 모델링 준비하기](docId:5rBfVT98Xj0ACnx3RWUIu)] 최신 프로젝트 파일 버전 3.2.12 이상에는 ZEPETO 내장 셰이더가 포함되어 있습니다. ::: ZEPETO Toon Shader는 다음과 같은 기능을 제공합니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dc5ojMFEOWEHEeM2uZMxX-20240904-102326.png) | Rendering Mode | 불투명(Opaque),컷아웃(Cutout),투명(Fade)의 렌더링 모드를 설정 할 수 있습니다. | | ------------------- | -------------------------------------------------------------------------------------------------------------------- | | Render State Detail | 블렌드 모드, ZWrite, Cull Mode(Back-앞면, Front-뒷면, Off-양면)등을 설정합니다. Cull Mode를 제외하고는 건들지 않도록 합니다. | | Albedo | Albedo텍스쳐 \* Color 값이 BaseColor로 표시됩니다. 알파가 들어간 텍스쳐의 경우, Alpha Cutoof 수치를 조절하여 불투명 영역과 투명 영역의 경계를 조절 할 수 있습니다. | | Outline Color | 윤곽선의 컬러를 설정 할 수 있습니다. | | Outline Width | 윤곽선의 두께를 설정 할 수 있습니다. 윤곽선의 두께는 거리에 따라서 일정하게 유지 되지만, 카메라거리가 많이 멀어지면(2m이상) 멀어질 수록 윤곽선의 두께도 같이 줄어듭니다. **기본값 0.0012 권장** | | Outline Color Blend | 윤곽선의 색상과 BaseColor와 혼합되는 정도를 조절합니다. **기본값 0.4 권장** | | Shadow Color | 음영이 지는 부분의 색상을 조절합니다. 해당 컬러는 BaseColor에 곱해져서 렌더링 됩니다. | | Shadow Threshold | 음영이 지는 부분의 영역을 조절합니다. | | Shadow Smooth | 음영이 지는 영역의 부드럽게 퍼지는 정도를 조절합니다. | | Specular Color | 광택 컬러를 조절합니다.해당 컬러는 BaseColor에 더해져서 렌더링 됩니다. | | Specular Threshold | 광택 영역을 조절합니다. | | Specular Smooth | 광택이 부드럽게 퍼지는 정도를 조절합니다. | | Rim Color | Rimlight 컬러를 조절합니다. 해당 컬러는 BaseColor에 더해져서 렌더링 됩니다. | | Rim Threshold | Rimlight 영역을 조절합니다. | | Rim Smooth | Rimlight가 부드럽게 퍼지는 정도를 조절합니다. | | Emission | BaseColor에 EmissionColor를 더해줍니다. BaseColor + (Emission 텍스쳐 \* Emission Color) | | Color Grading | 제페토 환경에 맞게 색상을 조절합니다. | STEP 2 : 기능 살펴보기 ---------------- **1. Outline Control** - **Outline Color** - 윤곽선의 컬러를 설정할 수 있습니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-NYUPJfA8nZ6Yh4M6qBtrh-20240904-102331.gif) - **Outline Width** - 윤곽선의 두께를 설정 할 수 있습니다. 윤곽선의 두께는 거리에 따라서 일정하게 유지 되지만, 카메라 거리가 많이 멀어지면(2M이상) 거리가 멀어질 수록 윤곽선의 두께도 같이 줄어듭니다. ![](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로 할지, 노말로 할지 정할 수 있습니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_M_wO4ShbOcq4QVByq-hh-20240904-102326.png) **2. Shading Control** - **Shadow Color** - 음영이 지는 부분의 색상을 조절합니다. 해당 컬러는 BaseColor에 곱해져서 렌더링 됩니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Q2AAi6TRhAa4MDc3iZ_FU-20240904-102328.gif) - **Shadow Threshold** - 음영이 지는 부분의 영역을 조절합니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Dk_z1b_VSmiefH4Y9NWHf-20240904-102326.gif) - **Shadow Smooth** - 음영이 지는 영역의 부드럽게 퍼지는 정도를 조절합니다 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-1k8t7klnjssZ5ch9Tv8Kr-20240904-102326.gif) - **Shading Detail** - 두번째 톤에 대한 제어프로퍼티입니다. (세부내용은 똑같습니다) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N--yOSslJwRZ1IhOEOSfKRK-20240904-102324.png) **** **3. Specular Control** - **Specular Color** - 광택부분의 컬러를 조절합니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_Lgghj6nUeXbHXwIdrjSA-20240904-102326.gif) - **Rim Threshold** - Rimlight 부분의 영역을 조절합니다. ![](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** - 광택표현을 On/Off합니다. ![](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를 On/Off합니다 - **Light-based Mask** - Masked를 선택하면 Light가 받지 않는 곳에 Rim Light를 표시하지 않습니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7wIIknNjMxsLK9IfAP_IT-20240904-102326.gif) STEP 3 : 디테일 높이기 ---------------- **1. Shadow Threshold Texture** :::hint{type="success"} **👍 **아래 디테일은 동일한 Shadow 프로퍼티를 사용한 환경에서 비교되었습니다. ::: - 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. Mask Texture** :::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 텍스처를 사용했을 때** - 윤곽선은 텍스처의 R 채널을 사용합니다 - ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9bXWbTrDlnoyrY5XMCP7f-20240904-102326.png" size="100" isUploading="false" showCaption="false" indent="2"} ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-sk6SQ5HkDZDs9EhmHtugn-20240904-102325.png) :::hint{type="success"} **👍 **아래 디테일은 동일한 Specular 프로퍼티를 사용한 환경에서 비교되었습니다. ::: - Outline, Specular, Rim에 대한 마스킹 텍스쳐를 각각 R채널, B채널, G채널에서 제어합니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ENHerwFzkNUbyRnW1m0iy-20240904-102326.png) **Mask 텍스처를 사용하지 않았을 때** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wQWNCRJ8XWDB6hSqenGNH-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-NRkU_LJDe7P8cPNvSu8Di-20240904-102327.gif) **Mask 텍스처를 사용했을 때** - Specular는 텍스처의 G 채널을 사용합니다 - ::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-jRdSu7aJ2y0nyPjH15cvi-20240904-102326.png" size="100" isUploading="false" showCaption="false" indent="2"} ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-LB8ik0qOV94YXkMhj2PZ4-20240904-102327.gif) :::hint{type="success"} **👍 **아래 디테일은 동일한 Rim 프로퍼티를 사용한 환경에서 비교되었습니다. ::: **Mask 텍스처를 사용하지 않았을 때** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ylG2KMhDkl2jwhK6UrSpc-20240904-102326.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-gfxfN63Qj3qohXUkYuBxL-20240904-102329.gif) **Mask 텍스처를 사용했을 때** - 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. Textured Brush** - Toon Shader 경계에 특정 패턴을 표현합니다. 텍스처는 0.5 그레이텍스처 기준으로 제작합니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-uKrgS-Vzr0LaicU0dphbo-20240904-102326.png) **Textured Brush 프로퍼티를 사용하지 않았을 때** ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_JdF-KefDERsnU188Nylk-20240904-102326.png) :::hint{type="success"} **👍 **아래 디테일은 동일한 프로퍼티를 사용한 환경에서 비교되었습니다. ::: - **Textured Brush 프로퍼티를 사용했을 때** ![](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)