Make Simple Shader Partially Transparent

I have a simple shader that comes from the default shader when you create a new one. I made a single change where all I return is the red value of the color. I made another one exactly the same that only returns the green and blue. The effect should be that one shader make the result red and the other cyan (yes, I am messing with stereographic effects).

The source images are coming from 2 different places. I have each shader put on top of a plane. They are both the same size. I have one plane in front of the other.

When the planes are right on top of each other I want them to combine to form the original image. I will be slider them 2 planes horizontally to get the correct offset I want.

The issue I am having is that they don’t seem to have any transparency to them so which ever one is in front is the only one that shows.

I modified the Tags rendertype to transparent, but that didn’t seem to help.

How do I make the shaders so they are semi transparent?

Bonus points for helping me add a slider that will allow me to change the transparency value in the inspector.

Here are the 2 shaders:

Shader "Unlit/RedOnlyUnlitShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" }
        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);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return half4(col.r, 0, 0, 0.5);
            }
            ENDCG
        }
    }
}

Shader "Unlit/CyanOnlyUnlitShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" }
        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);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return half4(0, col.g, col.b, 0);
            }
            ENDCG
        }
    }
}

After messing around with this I realized that maybe I should finally take the time to learn Shader Graph and see what it could do.

Boy and I glad I did!

I am probably like most people. When I first look at shader graph I am overwhelmed. I don’t know shaders at all and the many videos and tutorials just make it seem super complicated (that is before you actually watch the video and you are just looking at the previews).

I am here to say that Shader Graph is a breeze. You just have to take the time to understand the interface and give it some time to sink in a little.

Once you do that Shader Graph is fantastic!

I was able to go even further than what I originally wanted. Instead of having 2 simple shaders (one for Red and one for Cyan), I was actually able to make a single Shader Graph that took the 2 images, separated the channels and even added in the horizontal translation that I was planning on doing manually using the surface planes in the scene.

Now I am able to do everything I needed within the shader graph itself. I am even seeing where I can do a whole lot more.

I am now a big fan of Shader Graph.

Thank you Unity team!!!