Help us understand the problem. What is going on with this article?

GameBoy風のImageEffectシェーダコード

twitterにアップしたGameBoy風に見えるようなImageEffectのシェーダコードを貼っておきます。


さて、昨日と今日にかけて4つの記事(3つ+α)を投稿しました。

ここで全部の集大成としてGameBoy風の見た目になるようなImageEffect用シェーダを作ります。

正直に3つ(モザイク、モノクロ(スクリーン合成)、Posterization)のImageEffectをかけても良いのですが、
3回もGraphic.Blit()を行うのは処理がもったいないので、計算部分を一つにまとめたOldMobileGame.shaderを用意しました。

OldMobileGame.shader
Shader "ScreenPocket/ImageEffect/OldMobileGame"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _UvDivideNum ( "UV Divide Num", Float ) = 128
        _ColorDivideNum ( "Color Divide Num", Float ) = 4
        _Color ("Main Color", Color ) = (0.025,0.35,0,1)
    }

    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

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

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

            sampler2D _MainTex;
            float _UvDivideNum;
            float _ColorDivideNum;
            fixed4 _Color;

            fixed4 frag (v2f i) : SV_Target
            {
                //モザイク状にサンプリングする
                float2 uv = floor(i.uv * _UvDivideNum) / _UvDivideNum;
                half4 col = tex2D( _MainTex, uv );
                //モノクロ化
                col.rgb = Luminance(col.rgb);
                //ポスタリゼーションで色数を刻ませる
                col.rgb = floor(col.rgb * _ColorDivideNum) / _ColorDivideNum;
                //スクリーン合成で色を乗せる
                col.rgb = 1 - (1 - col.rgb) * (1 - _Color.rgb);
                return col;
            }
            ENDCG
        }
    }
}

スクリーンショット 2020-04-15 21.30.10.png
それっぽい感じが出せたかな?
そのまま使うのも良いですが、元の色(tex2D( _MainTex, i.uv ))をキープしておいてシームレスに切り替えてみるとか、
ドット絵が急にリアルになるような世界観の切り替わり演出にも応用できそうですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした