LoginSignup
2
0

More than 3 years have passed since last update.

[Unity]イベントとかでよく見るWipeをShaderで書いてみる

Last updated at Posted at 2019-09-15

初めまして、demです。
最近UnityでShaderを勉強しているのですが、学びの中でできたものを不定期に載せていこうと思います。
タイトルにもあるようにイベントでよく見るWipeを作っていこうかと思います。
今回はShaderとそれを描画するスクリプトを書いていきます。
早速コードの方を・・・まずはShaderの方から。

EventWipe.shader
Shader"SmyCustom/EventWipe"{
    Properties{
        _MainTex("None",2D)="white"{}
        _Length("Length",Range(0,0.5))=0.5
    }
    SubShader{
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

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

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

            sampler2D _MainTex;
            float _Length;

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

            fixed4 frag(v2f i) :COLOR{
                //ここでカメラに写っている色情報を取得する
                fixed4 c = tex2D(_MainTex,i.uv);
                //uv座標のyから0.5を引いた値の絶対値(ここでは画面の真ん中を(0.5,0.5)としている)
                fixed l = abs(i.uv.y - 0.5);
                //lの値が_Length以下ならそのまま描画する。違うのなら黒く描画
                fixed4 color = (l < _Length) ? c : fixed4(0, 0, 0, 1);

                return color;
            }
            ENDCG
        }
    }
}

次に実際に描画するためのスクリプトを書きます。

EffectDisplay.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class EffectDisplay: MonoBehaviour
{
    [SerializeField]
    private Material mat = null;

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        Graphics.Blit(source, destination, mat);
    }
}

そのあとはこのスクリプトをカメラにアタッチしてマテリアルの部分に先ほど書いたShaderを適応したマテリアルを入れてあげればOKです!数値はマテリアルにあるスライダーを動かすとワイプが上下から出てきます!

Wipe1.PNG

スライダーの数値を0に近づけると黒い部分が多くなるのでフェードとかでも使えそうですね。
Wipe2.PNG

Shaderというよりポストエフェクト的な何か・・・?
以上になります。まだまだ初心者なのでコードに関しては変なことをしているかもしれませんが温かい目で見守っていただけると幸いです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0