切り絵が趣味の僕がプログラムや創作物について書き溜めるブログ

絵やモデリングやプログラミングなど僕が作った物について。アニメの感想や心動かされたきっかけなどを書き溜めるブログです。Boothで3Dアバターの販売もしていますhttps://paw.booth.pm/

【2日目】VRChat民のための少しづつ身に着けるシェーダー入門

今回、身に着けるのは if文と for文です。
C言語の経験者なら楽勝だと思います!!

前回でシェーダーの作り方、適応の仕方が分かっていると思います。なので、いきなりコードを書いていきましょう。
kiriesto.hatenablog.com

完成するとこんな感じ、
f:id:kiriesto:20210601194139p:plain
画像がちょうど半分のところで色が真っ白になっていると思います。 これは if文を使って画像の x座標が0.5以下のとき真っ白に塗りつぶすということをしています。

・if文とは

まず、if文とは「もし〇〇だったら△△△△してね」という条件分岐を書くときに用いる構文です。
実際にシェーダーで書いてみるとこんな感じ f:id:kiriesto:20210601194638p:plain
追加する場所は赤で囲った場所のみです。

↓こんなイメージ↓ if(条件式){     真だったらここを実行; }else{     偽だったらここを実行; }

さらに、三つ以上に分岐したい場合は else ifを使います。

if(条件式1){     真だったらここを実行; }else if(条件式2){     条件式1が偽かつ条件式2が真ならここを実行; }else {     すべて偽ならここを実行; }

・for文とは

for文とは繰り返して実行したいときに使う構文です。「10回繰り返したい」とか。
実際にシェーダーで書いてみるとこんな感じ
f:id:kiriesto:20210601195529p:plain
実行してみると画像が左に行くほど、だんだんと白くなっていくのが分かると思います。 f:id:kiriesto:20210601195257p:plain

↓こんなイメージ↓
for( 初期化; 条件式; 更新式){
    繰り返し実行したいこと;
}

もっと詳しく知りたい方は ”C言語f or文” でググるといいと思います。

今日はここまでお疲れ様でした!! 習うより慣れろ、いますぐにUnityを起動して下のコードをコピペして実行してみてください。 たった数分でできなかったことができるに!! 少しづづあなたのできることが増えていくのを楽しみにしています。

いい夢を~~~。

このブログが「いいなぁ」、「ためになったなぁ」と思った方はブログの読者に、ツイッターのフォローもよろしくお願いします。 一緒に成長できる仲間を大大大募集中!! コメントも僕の励みになるのでぜひお願いいたします。  

 

・if文のコード

Shader "Unlit/if"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

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

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);

                if(i.uv.x <= 0.5){
                    col = ( 1, 1, 1, 1);
                }

                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

・for文のコード

Shader "Unlit/for"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

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

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);

                for(int n = 0; n < i.uv.x * 10; n++){
                    col += ( 0.1, 0.1 , 0.1, 0.1);
                }
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}