Unityで赤青メガネ

追記：[URP/HDRP版シェーダーブラフも用意しました](https://qiita.com/ELIXIR/items/bc10c6ae26b97e1bf929)

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

![2019-07-15_234402.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/a143eea9-6f2f-4ff3-9816-2db92d1944c7.png)

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

##### とりあえず何か置く

まずは何でもいいからオブジェクトを表示します。
自分は[こちら](https://assetstore.unity.com/packages/3d/environments/fantasy/a-piece-of-nature-40538)を使わせていただきました。

![2019-07-15_221455.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/2adfa92f-bc60-5fef-ac1b-e5cc8953b1f7.png)

##### カメラを追加

MainCameraの下にCreate>Cameraで２つカメラを追加します。右目用と左目用になります。
![2019-07-15_222011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/2e614843-b0bd-e827-078c-fac6cec37f26.png)

追加したらそれぞれ名前をCameraL,CameraRとしておきます。
追加したカメラにはAudioListenerがついているのですが、これがあると
実行時にワーニングが出るので外しておきます。
![2019-07-15_222147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/a8f21c0b-52f6-793a-7100-b727759c5e64.png)

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

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

![2019-07-15_222917.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/032300e0-d8a3-2040-1782-db6eb2b45c22.png)
![2019-07-15_223008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/c5ffb62f-ddef-9ac5-7fe9-11ba5d34f1f3.png)

##### RenderTextureを用意

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

![2019-07-15_223639.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/ce1b61e2-3ee1-c04f-f48e-c70e275095be.png)

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

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

![2019-07-15_224231.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/9f2b34c6-232d-d254-160c-a64b056a2052.png)

##### UnlitShaderを用意

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

![2019-07-15_224657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1481b67f-c82b-91e3-e8f0-d941d82cf998.png)

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

```HLML: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
        }
    }
}
```

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

```HLML: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という名前に変更します。

![2019-07-15_230034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/15d5abdc-ad62-60d2-c13a-c0354bc4dbad.png)

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

![2019-07-15_230852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/de9cad73-992c-e4af-0a92-7a1eb95193b6.png)

##### 赤青メガネ表示用の板を用意

 Hierarchy上でCreate>3D Object>Quadとして板を用意します。

![2019-07-15_231649.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/4525cbe3-4fb4-c1a0-5a0f-6e167129bd26.png)

用意した板をカメラ前に移動しやすいようにMainCameraの下に入れ、位置を適当に合わせます。
今回は(0,0,1)の位置に合わせました。

![2019-07-15_232422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/dc75ceae-3f84-95c9-584d-ad8824893a42.png)

この(Scene上の)Quadに、 *Materialを用意* のところで作った
AnaglyphMaterialをドラッグ＆ドロップすると
Quadに写し鏡のような絵が表示されます。

![2019-07-15_232932.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/3aa2d01f-6f06-599a-6926-a8c7e9bd35a3.png)

##### メインカメラのターゲットをQuadのみにする

QuadのLayerをDefault以外に設定します（ここではUIにしていますが、
ちゃんとやりたい場合はAddLayerで新しいLayerを作ってください）。

![2019-07-15_233106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/ceaf0ee2-0ce5-bdba-407b-91d739f50013.png)

HierarchyでCameraL,CameraRを選択し、CullingMaskからUIのチェックを外します。

![2019-07-15_233808.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/5e99e6bd-cb3e-0859-1680-51dc873e808c.png)

HierarchyでMainCameraを選択し、CullingMaskをいったんNothingにします。

![2019-07-15_233511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/c9e17dad-8394-2da7-c33b-9edb331db5cc.png)

続けてMainCameraのCullingMaskをUIのみにすると赤青メガネ用の画像が表示されます。

![2019-07-15_234008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/b608cb71-b1c0-9d8f-012d-1fefed62f777.png)

赤青メガネ用の画像が表示されました！