--- title: ZEPETO BuiltIn Shader slug: studio-guide-ja/zepeto-builtin-shader docTags: createdAt: 2024-09-02T08:34:13.133Z --- :::hint{type="success"} **👍 **始める前に、\[[ZEPETO マテリアルサンプル](https://studio.zepeto.me/console/download/6a671409a6697b40295eb95d)] が最新バージョンにダウンロードされていることを確認してください。このサンプルファイルは容量が大きいため、ダウンロードに時間がかかる場合がありますので、ご了承ください。 ![](https://asset-zepetoful.zepeto.io/ttn7jks47ozr/6RtIX3Wk87fVQYlhSX6Rms2/1s6aa3Wk87mVQYlhTR1jYIV/Material_Example.unitypackage.png) ::: :::hint{type="info"} **📘 ライブラリ** [ZEPETO ビルトインシェーダーライブラリ](https://studio.zepeto.me/console/download/69770e6dc64e8f66f845f6f2) ![](https://api.archbee.com/api/optimize/J13bHMYnEsO_46SqFvReX-aY0op0m2LIzu50g_hyopz-20250825-063116.png) ::: ## STEP 1: 準備 ZEPETOが提供するBuiltInシェーダーは、ZEPETO/BuiltInパスを通じて利用できます。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-zIWks4OC4u9xIG-kOETdA-20240904-102330.png) ## STEP 2-1: Lit ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-qrp7bCbR6TmbXj9UlK84U-20240904-102330.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-U8BYkts46RGqU4SwAzzAx-20240904-102330.png) Litシェーダーは、デフォルトのUnity Standardシェーダーから詳細なノーマルを削除し、カラグレーディングオプションを追加したデフォルトのシェーダーです。 :::hint{type="info"} **📘 **Unityが提供するガイドを参照してください。 \[[Standard Shader Material Parameters](https://docs.unity3d.com/2022.1/Documentation/Manual/StandardShaderMaterialParameters.html)] ::: - 常にカラーグレーディングオプションをオンにして作業してください。 - Metallic、Smoothness、およびOcclusionの場合、テクスチャのR（Metallic）、G（Occlusion）、およびA（Smoothness）チャンネルが使用されるため、単一のテクスチャでそれらを制御できます。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9kQ4GPXDDcyKJobYVuC4h-20240904-102330.png) - Substance Painterからテクスチャを抽出する際、Unity HD Render Pipeline（Metallic Standard）で抽出すると、対応する情報がMaskMapに含まれます。テクスチャをそれぞれMetallicとOcclusionにリンクしてください。 ## STEP 2-2 : LitWithDetailNormal ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-QfeSe_ZRNwykh8qy5d0w4-20240904-102330.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-csIMHgOhY7llBUmgCgzLA-20240904-102330.png) LitWithDetailNormalシェーダーは、Litシェーダーに詳細を追加したシェーダーであり、異なるタイルのセカンダリテクスチャを使用できます。 :::hint{type="info"} **📘 **Unityが提供するガイドを参照してください。 \[[Standard Shader Material Parameters](https://docs.unity3d.com/2022.1/Documentation/Manual/StandardShaderMaterialParameters.html)] ::: :::hint{type="success"} **👍 **このシェーダーはLitシェーダーよりも多くの計算を必要とするため、セカンダリーマップを使用しない場合はLitシェーダーを使用することをお勧めします。 ::: - 常にカラーグレーディングオプションをオンにして作業します。 - メタリック、スムーズネス、オクルージョンの場合、テクスチャのR、A、Gチャンネルが使用されるため、単一のテクスチャで制御できます。 - Substance Painterからテクスチャを抽出する場合、Unity HD Render Pipeline（Metallic Standard）で抽出すると、対応する情報がMaskMapに含まれます。テクスチャをメタリックとオクルージョンにそれぞれリンクします。 - セカンダリーマップ: チャンネルAから値を受け取るディテールマスクで領域を定義できます。 - DetailAlbedoのAチャンネルと結びつけることで、テクスチャの数を効率的に使用できます。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-LdgOBYFY_pRTmD1kxq_br-20240904-102330.png) ## STEP 2-3 : 布 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-sDFODBGNd4JA0iw-2ED_y-20240904-102331.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-B7HHOTv5rqq0aBRZ5Du7i-20240904-102331.png) 布シェーダーはベルベット素材を表現し、共通プロパティでシーンカラーとシーンラフネスのプロパティを追加で制御できます。 - 常にカラーグレーディングオプションをオンにして作業します。 - シーンカラー: 布の表面の光沢のある色を調整できます。 - シーンラフネス: 光沢の粗さを調整できます。 - 布シェーダーのメタリックとスムースネスの値に基づく変更は、リットシェーダーとは異なることに注意してください。 ## STEP 2-4 : CustomEnv ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-LpCZ4rf-HtoEWLsCNWm2V-20240904-102330.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-gNWHf6yhgHYTx0lAV9KdH-20240904-102330.png) CustomEnvシェーダーは、既存のシーンに環境を反映するLitシェーダーから、デフォルトのZEPETO環境では表現が難しい高光沢や宝石のような素材など、選択したカスタム環境を反映できるシェーダーへの移行です。 - 常にColor Gradingオプションをオンにして作業します。 - Env cubemap: 反射されるHDRIリソースを適用します（このテクスチャのTexture ShapeはCubeに設定する必要があります）。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-itaSm857NVA2NJt5SiYDC-20240904-102331.png) - Env horizontal rotation: Materialに反映されるHDRIリソースを回転させます。 - CustomEnvシェーダーのMetallicおよびSmoothnessの値に基づく変更は、Litシェーダーとは異なることに注意してください。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-FhEDLz1_a6dtWV3c8NfKo-20240904-102331.png) ## STEP 2-5 : Fur ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-hOOrkRE_rLUQ-uqird4sJ-20240904-102330.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-rq9EYO6pDffqpXiuxl4Uj-20240904-102330.png) ファーシェーダーはファー素材を表現するために使用され、既存のメタリックおよびスムーズネスプロパティにファー関連およびライティング関連のプロパティが追加されました。 ここでは、ファーの繰り返し感を表現するために、アルベド、メタリックスムーズネスマップのタイルとは別に、ノーマルマップのタイルが存在します（ノーマルマップはファーがオフセットされる方向に影響します）。 - 常にカラーグレーディングオプションをオンにして作業します。 **ファープロパティ** - ファーマップ: ファー関連のプロパティで使用されるテクスチャ。Rチャンネルでファーパターン、Gチャンネルでファーマスク、Bチャンネルで重力の影響を制御します。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-YgFH2xguQfDApW_h41f3o-20240904-102331.png) - ファーの長さを調整します。 - ファーの密度を調整します。 - オブジェクトのエッジでのファーの密度を調整します。 - ファーがオフセットされる方向を調整します。 **照明プロパティ** - ファーオクルージョンカラー: ファーの間のオクルージョンカラーを調整できます。（これにより、ファーに深みが生まれます。） - ファーオクルージョン強度: ファーオクルージョンの強度を調整します。 - リムライトモード: ファーのエッジの光の感じを選択します（None - なし、Natural - アルベドカラーに対して自然、AmbientLight - シーンの環境光、UserDefined - カスタム） - リムファクター: エッジの光の領域を調整します。 - 方向性フレネルを使用: 光を受ける領域にのみリムライトを使用します。 :::hint{type="danger"} **❗️ 注意** モバイルの特性による最適化のため、ファーシェーダーで計算された7つのオフセットパスのみを使用します。したがって、ファーの長さを増やすと、ファーは自然に見えなくなります。長いファーを表現する場合は、大きくモデリングすることをお勧めします。 ::: ## ステップ 2-6 : イリデセンス ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OZ1rGRGQ52_I37LDMWXyW-20240904-102331.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-6cweI4QP32lg9vmeHy0PC-20240904-102330.png) イリデセンスシェーダーは、物体の表面に薄い膜コーティング層が置かれたときに見える虹色のフィルムコーティングシェーダーです。フィルムコーティング層の虹色はユーザーによって設定することはできず、[Hal Open Science](https://hal.science/hal-01518344/document)によって提示された計算によって自動的に生成されます。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-EazinWU94S3RvlKO9lS2r-20240904-102330.png) - カラーグレーディングがオンになっている場合、イリデセンスの表現がうまく表示されないことがあります。 - 厚さ：コーティング層の厚さ - η2：フィルムコーティング層の屈折率 - η3：基材の屈折率 - κ3：基材の内部複素屈折率 η3 + i κ3 を計算する値 - 制御可能なスケール：複数の層にわたって光の角度を強制的に広げる値を調整します。 - イリデセンスシェーダーのメタリックとスムースネスの値に基づく変更は、リットシェーダーとは異なることに注意してください。 :::hint{type="success"} **👍 **イリデセンスシェーダーを使用する場合、目的の外観に近づけるために各プロパティを試してみることをお勧めします。 ::: ## STEP 2-7 : Sparkle ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-FYukQHdpeVU2mx6O_dIE_-20240904-102330.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VaeeGV6eSC842WlufYz30-20240904-102331.png) スパークルシェーダーは、物体の表面に散らばった薄いフレーク層から反射された光を表現します。これは、光とカメラの向きに応じて変化する効果を作成するために使用されます。 :::hint{type="danger"} **❗️ 注意**ノイズリソースはシェーダー自体に組み込まれており、個別に変更することはできませんが、以下のプロパティで感触を調整できます。 ::: - 常にカラーグレーディングオプションをオンにして作業します。 - ノイズ強度: きらめきの度合いを調整します。 - ノイズ濃度: きらめきが見える領域を調整します。 - ノイズサイズ: きらめきのサイズを調整します。 - ノイズ密度: きらめきの密度を調整します。 ## STEP 2-8 : トゥーン :::hint{type="info"} **📘 **以下のガイドを参照してください。[Toon Shader](docId\:DcFwmvzhNDBUfFNUfUgCa) ::: ## ステップ 2-9 : HairAlpha ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Hj1vo03k-eAe9TvSJ2ob8-20240904-102331.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-nLQMCBzJN1HZYh7ytbd4h-20240904-102331.png) HairAlphaシェーダーは髪を作成するために使用され、既存のZEPETO髪シェーダーでAlphaサポートとBridge（髪の色に影響されない部分）を表現するように変更されています。 - 基本的なマテリアル設定はZEPETOアプリに含まれる髪のテクスチャに接続されているため、使用したいAlphaテクスチャを使用しない限り、変更せずに使用してください。 - 髪の場合、デフォルトのRenderTypeはTransparentなので、レンダキューを調整すると他の透明なマテリアルと重なって問題が発生する可能性があります。したがって、レンダキューを変更しないでください。 - 髪を作成する際、複数のマテリアルを設定し、異なるレンダキューを使用して重なり合うメッシュのアルファソートを解決するのが一般的です。**この場合、複数のマテリアルを設定する代わりに、1つのマテリアル（レンダキュー3000）で頂点番号を調整できます。** :::hint{type="danger"} **❗️ 注意** 通常、透明なメッシュをレンダリングする際、頂点番号は低い順に描画されます。この時、後で描画されたメッシュは前に出てきたように見えます。 3Dモデリングプログラムでは頂点番号を任意に変更することはできませんが、メッシュを結合する順序（MayaではCombine、BlenderではJoin）によって後のメッシュの頂点番号が高く設定されるため、単一のマテリアルでもアルファソートを解決できます。 ::: :::hint{type="info"} **📘 **以下のガイドを参照してください。[透明な素材のアルファソート問題を解決する方法](docId\:aaLW1Au9X24-p5KGyf3f4) :::