Unity│アニメーション制作に役に立つシェーダー 5選

Unityでアニメーションや合成を作るときに役立つシェーダーをまとめました。

加算・アルファブレンド、両面表示、カットアウト、マスクなど実用的なシェーダーを紹介します。

目次

加算とアルファブレンドの違い

通常版とモバイル版のシェーダーは行数が異なりますが(76行 vs 25行)、パフォーマンスの差は大きくないため、基本的に通常のシェーダーで問題ありません。

コードの違い

加算とアルファブレンドは1行変更するだけで切り替えられます。

加算

Blend SrcAlpha One
Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }

アルファブレンド

Blend SrcAlpha OneMinusSrcAlpha
Cull Off Lighting Off ZWrite Off

TintColor付きのシェーダーが必要な場合は以下が参考になります。

参考:https://gist.github.com/keijiro/b91fd4c1a711a0fd3295

シェーダーを両面表示にする方法

板ポリを回転させるときなど、両面表示にしたい場合に使えます。SubShaderのPassの中にCull Offを1行追加するだけです。

Shader "Custom/Transparent_Cutout_DoubleSide" {
    Properties {
        _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
        _Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
    }
    SubShader {
        Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}
        Pass {
            Cull Off
            Lighting Off
            Alphatest Greater [_Cutoff]
            SetTexture [_MainTex] { combine texture }
        }
    }
}

Cullの設定:

  • Cull Back:裏面をカリング(デフォルト)
  • Cull Front:表面をカリング
  • Cull Off:両面表示

カットアウトシェーダーにカラー・加算を追加する方法

Blend SrcAlpha Oneを1行追加するだけで加算になります。アルファブレンドにする場合はBlend SrcAlpha OneMinusSrcAlphaを追加します。

Shader "Unlit/Transparent Cutout Additive" {
    Properties {
        _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
        _Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
    }
    SubShader {
        Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}
        LOD 100
        Blend SrcAlpha One
        Pass {
            Lighting Off
            Alphatest Greater [_Cutoff]
            SetTexture [_MainTex] { combine texture }
        }
    }
}

TintColorも追加したバージョン

TintColor付きカットアウトシェーダー

より高機能なカットアウトシェーダー(透明・カラー・加算・マスク対応)は以下で公開されています。

高機能カットアウトシェーダー

参考:https://pastebin.com/2BpZF2gZ

Unlitシェーダーにマスクを追加する方法

デフォルトのUnlitシェーダーにマスク機能を追加する方法です。

手順

  1. Assets → Create → Shader → Unlit Shaderでベースを作成
  2. プロパティにマスク用テクスチャを追加
  3. タグを透過用に変更
  4. アルファブレンディングを追加
  5. フラグメントシェーダーでマスク計算を追加
Unlitシェーダーの作成
Alpha maskプロパティの追加

完成したシェーダー

マスク付きUnlitシェーダーの結果
Shader "Unlit/Transparent_AlphaMask"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _AlphaTex ("Alpha mask (R)", 2D) = "white" {}
    }
    SubShader
    {
        Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
        LOD 100
        Blend SrcAlpha OneMinusSrcAlpha
    Pass
    {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
        };

        struct v2f
        {
            half2 uv : TEXCOORD0;
            float4 vertex : SV_POSITION;
        };

        sampler2D _MainTex;
        sampler2D _AlphaTex;
        float4 _MainTex_ST;

        v2f vert (appdata v)
        {
            v2f o;
            o.vertex = UnityObjectToClipPos(v.vertex);
            o.uv = TRANSFORM_TEX(v.uv, _MainTex);
            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
            fixed4 col = tex2D(_MainTex, i.uv);
            fixed4 col2 = tex2D(_AlphaTex, i.uv);
            return fixed4(col.r, col.g, col.b, col2.r);
        }
        ENDCG
    }
}
}

デプス(Depth of Field)シェーダーによる素材の作り方

被写界深度用のデプス素材を作る方法です。After Effectsでの合成などに使えます。

手順

  1. デプスシェーダーを作成
  2. マテリアルを作成してCustom/DepthGrayscaleを選択
  3. カメラにスクリプトをアタッチ
  4. カメラのNear/Farを調整してグラデーションを調整

カメラ用スクリプト

using UnityEngine;
[ExecuteInEditMode]
public class PostProcessDepthGrayscale : MonoBehaviour
{
public Material mat;
void Start()
{
    GetComponent<Camera>().depthTextureMode = DepthTextureMode.Depth;
}

void OnRenderImage(RenderTexture source, RenderTexture destination)
{
    Graphics.Blit(source, destination, mat);
}
}
デプスシェーダーの結果

※AEで合成する際は白黒を反転した素材を使うことが多いです。

まとめ

  • 加算とアルファブレンドはBlendの1行で切り替え可能
  • 両面表示はCull Offを追加するだけ
  • カットアウトシェーダーはBlend SrcAlpha Oneで加算に
  • マスク機能は別テクスチャのRチャンネルをアルファに使用
  • デプス素材はポストプロセスで出力可能
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次