Unityで赤青メガネ #Unity

追記：URP/HDRP版シェーダーブラフも用意しました

赤青メガネといえばなんだか懐かしい技術ですが、意外と立体に見えるんです。

原理はとても簡単なので、Unityでやってみました。

とりあえず何か置く

まずは何でもいいからオブジェクトを表示します。
自分はこちらを使わせていただきました。

カメラを追加

MainCameraの下にCreate>Cameraで２つカメラを追加します。右目用と左目用になります。

追加したらそれぞれ名前をCameraL,CameraRとしておきます。
追加したカメラにはAudioListenerがついているのですが、これがあると
実行時にワーニングが出るので外しておきます。

カメラの位置・角度を変更

追加したカメラを、それぞれ左右の目にあたる場所に移動します。
ひとまず位置を左右に3cm,向きを±1°にしておきます。
後で出したいスケール感や奥行き感に応じて調整してください。

RenderTextureを用意

次にRenderTextureを用意します。
Create>RenderTexture でこれも
RenderTextureL,RenderTextureRとして左右分用意します。

左右のカメラに左右のRenderTextureを適用

CameraL/CameraRのTargetTextureにRenderTextureL/RenderTextureRを
それぞれドラッグ＆ドロップでセットします。

UnlitShaderを用意

Create>Shader>UnlitShaderで新しいシェーダーを用意し、名前を
UnlitAnaglyphShaderとしておきます。

中身はバージョンによって多少異なりますが、大体こんな感じになっているかと思います。

UnlitAnaglyphShader.shader

Shader "Unlit/UnlitAnaglyphShader"
{
    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);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

それをこんな風に変更します。

UnlitAnaglyphShader.shader

Shader "Unlit/UnlitAnaglyphShader"
{
    Properties
    {
        _TexL ("TextureL", 2D) = "white" {} // <--
		_TexR ("TextureR", 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 _TexL; // <--
            float4 _TexL_ST; // <--
			sampler2D _TexR; // <--
			float4 _TexR_ST; // <--

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _TexL); // <--
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_TexL, i.uv); // <--
                fixed4 colR = tex2D(_TexR, i.uv); // <--
				col.gb = colR.gb; // <--
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

Materialを用意

修正したShaderを使ってMaterialを作成します。
Create>Material でMaterialを作成し、
AnaglyphMaterialという名前に変更します。

Project>AnaglyphMaterialを選択し、Inspectorで先ほどの
Unlit>UnlitAnaglyphShaderを指定します。
するとTextureL/TextureRを選択する箇所が現れるので、
RenderTextureを用意 のところで作成した
RenderTextureL/RenderTextureRを
TextureL/TextureR のところにドラッグ＆ドロップで設定します。
設定するとしたのサンプル画像が赤青メガネ仕様になっていると思います。