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

:::hint{type="danger"}
**❗️ 注意**
ZEPETOが提供するトゥーンシェーダー以外のシェーダーを使用して類似のスタイルのアイテムが制作された場合、警告なしにアイテムの販売が停止または削除されることがあります。
:::



## STEP 1 : 準備

:::hint{type="success"}
**👍 **始める前に、最新バージョンの[Zepeto Studioプロジェクトファイル](docId\:Ygy56_vCYILn2neqpnCNI)をダウンロードしてください。バージョン3.2.12以降の最新プロジェクトファイルには、ZEPETO内蔵シェーダーが含まれています。
:::



ZEPETO Toon Shaderは次の機能を提供します。

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





## STEP 2 : 機能を探索する

**1. アウトラインコントロール**

- **アウトラインカラー** - アウトラインの色を設定できます。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-NYUPJfA8nZ6Yh4M6qBtrh-20240904-102331.gif)



- **アウトライン幅** - アウトラインの厚さを設定できます。アウトラインの厚さは距離に応じて一定ですが、カメラからの距離が増加すると（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として表現されるか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)



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



- **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" showCaption="false" indent="2"}

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



**マスクテクスチャが使用される場合**

- スペキュラはテクスチャの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"}
**👍 **以下の詳細は、同じリムプロパティを使用した環境で比較されました。
:::



**マスクテクスチャが使用されない場合**

![](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. テクスチャブラシ**

- トゥーンシェーダーの境界に特定のパターンを表現します。テクスチャは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)