【UnityShader】画面をモノクロ・セピア調にする #27

前回の成果

soramamenatan.hatenablog.com

デプスバッファを表示できるようになった

今回やること

前回、デプスバッファを表示するためにポストエフェクトを使用しました。
なので他のポストエフェクトも実装していきたいと思います。

モノクロ
セピア調の2つを制作していきます。

モノクロとは

モノクローム (monochrome) は、直訳すると「1つの色」を意味し、1色で描画・印刷・表示等された図画のことである。

モノクローム - Wikipedia：より引用

事前準備

Scene上にCameraを配置し、今回制作するScriptをアタッチします。
そして、ScriptのSerializeFieldにMaterialをアタッチします。

f:id:soramamenatan:20191106094847p:plain

Shaderのソースコード

Shader "Unlit/Monochrome" {
    Properties {
        _MainTex("MainTex", 2D) = "" {}
    }

    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;

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

            v2f vert(appdata_img v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.texcoord = v.texcoord;
                return o;
            }
            fixed4 frag(v2f i) : COLOR {
                fixed4 c = tex2D(_MainTex, i.texcoord);
                float gray = c.r * 0.3f + c.g * 0.6f + c.b * 0.1f;
                c.rgb = fixed3(gray, gray, gray);
                return c;
            }
            ENDCG
        }
    }
}

Scriptのソースコード

using UnityEngine;

public class PostEffects : MonoBehaviour {
    [SerializeField]
    Material _material;

    void OnRenderImage(RenderTexture source, RenderTexture dest) {
        Graphics.Blit(source, dest, _material);
    }
}

Shader側もScript側も特に詰まるところはなさそうですが、復習も兼ねて記述していきます。

appdata_img

UnityCG.cgincで定義されているもので、

struct appdata_img
{
    float4 vertex : POSITION;
    half2 texcoord : TEXCOORD0;
};

中身はこうなっています。

他のappdataはこちらに参照してあります。

soramamenatan.hatenablog.com

グレースケール

この一文でグレースケールにすることができます。

float gray = c.r * 0.3f + c.g * 0.6f + c.b * 0.1f;

OnRenderImage、Graphics.Blit

こちらは一言で表すのが難しいので、前回の記事を参考にしてください。

soramamenatan.hatenablog.com

結果

このように、Scene全体がモノクロになったら成功です。
Scene上に他のカメラがあると失敗する場合があるので気をつけてください。

f:id:soramamenatan:20191106095149p:plain

次はセピア調にしていきます。

セピア調とは

セピア調（セピアちょう）とは、茶褐色もしくは暗褐色のモノトーン（→モノクローム）の色調のこと。

セピア調 - Wikipedia：より引用

事前準備

先ほどと同じように、ScriptのSerializeFieldにMaterialをアタッチしてください。

f:id:soramamenatan:20191111133348p:plain

Shaderのソースコード

Shader "Unlit/sepiaEffect" {
    Properties {
        _Darkness("Dark", Range(0, 0.1)) = 0.04
        _Strength("Strength", Range(0.05, 0.15)) = 0.05
        _MainTex("MainTex", 2D) = ""{}
    }
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            half _Darkness;
            half _Strength;

            fixed4 frag(v2f_img i) : COLOR {
                fixed4 c = tex2D(_MainTex, i.uv);
                half gray = c.r * 0.3f + c.g * 0.6f + c.b * 0.1 - _Darkness;
                gray = (gray < 0) ? 0 : gray;

                half r = gray + _Strength;
                half b = gray - _Strength;

                r = (r > 1.0f) ? 1.0f : r;
                b = (b < 0) ? 0 : b;
                c.rgb = fixed3(r, gray, b);
                return c;
            }
            ENDCG
        }
    }
}