Unity AR Plane Occlusionの実装について

ARで現実世界にオブジェクトを生成する時、開発者が指示しなければ、カメラは生成したバーチャルオブジェクトと現実世界のオブジェクト（机とか）との位置関係を正しく認識することができず、結果的に不自然な描画になってしまいます。

このオブジェクトの重なりをいかに描画するかと言う問題は何もARに限った話ではなく、Computer Graphicsにおける基本的な問題の１つです。
もちろんすでに先人達が解決してくれているので、その知恵を基にこの問題に対処したいと思います。

今回、AR Plane Occlusionを実装するに当たって、レンダリングパイプラインやdepth bufferについての理解が必要不可欠だったので、そこら辺も含めて記事にしたいと思います。

## 今回実現したいこと
### ARでより現実味のある自然な描画を実現したい！

## 現状
- ARで出力された描画が不自然
- レンダリングパイプラインのどの部分をいじれば、自然な描画に近づけるのかわからない。

## 準備
そもそもレンダリングパイプラインとは、パイプライン処理によって入力されたデータ(3次元モデルデータなど)を最終的に2次元の画像として出力するまでの過程全体のことです。

[Unity道場 2019.2 シェーダを書けるプログラマになろう #1 シェーダを理解しよう](https://www.youtube.com/watch?v=wUx_Y9BgC7k&t=1024s)
と言う動画で非常にわかりやすくUnityにおける描画プロセスが解説されています。

この動画の一部を転載すると
<img width="720" alt="スクリーンショット 2019-12-23 0.18.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/c89d3b76-095d-420c-2c6e-89665cf73e59.png">

各ステップについては先ほどの動画を見てもらうとして、今回注目したいのはステップ6と8です。

### ステップ6
ステップ6はZTestと言われるものです。
描画するオブジェクトが重なっている場合、depth bufferの値を基に、奥にあるのか手前にあるのかを判定します。

Depth Bufferとはざっくり言えば、カメラから対象とするオブジェクトまでの奥行き(z値)を保持しているバッファになります。なので今回のようなオブジェクト同士の前後関係（手前か奥か）を判定するとは、各オブジェクトのz値を比較すると言っても過言ではないでしょう。
### ステップ8
ステップ8ではZWriteがOnならばZ値の更新を行います。基本的には不透明なオブジェクトの描画の際はOnで、部分的な透過などを実装したい際はOffにします。

後述しますが今回は不透明な場合なのでOnにします。


## AR Plane Occlusionの実装
ZTestで手前にあるオブジェクトが描画されるようにすれば良いまでは分かりました。
しかし現実にある机や椅子はそのままではオブジェクトとして扱えません。そこで、机やら椅子やらに対してマッピングするように透明なplaneを生成します。

ARFoundationではAR Plane Managerなるものがあり自動的に平面を検知して、指定したplaneオブジェクトを生成してくれます。

まずAR Session OriginにAR Plane Managerコンポーネントをアタッチする。
<img width="600" alt="スクリーンショット 2019-12-23 2.06.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/7cdca620-b899-4b29-7757-267c932ac50e.png">

AR Default Planeを作成し、MeshRendererには自作のMaterialをセットします。
Line Rendererも必要ないのでremoveしても良いです。

自作Materialには以下のシェーダーを指定するだけで良いです。

```glsl:PlaneOcclusion
Shader "Custom/PlaneOcclusion"
{
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue" = "Geometry-1" }
        ZWrite On
        ZTest LEqual
        ColorMask 0

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
            };

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

            fixed4 frag (v2f i) : SV_Target
            {
                return fixed4(0, 0, 0, 0);
            }
            ENDCG
        }
    }
}
```

大したことはしていませんが、注目ポイントはPassの前の設定の部分です。

```glsl:
Tags { "RenderType"="Opaque" "Queue" = "Geometry-1" }
ZWrite On
ZTest LEqual
ColorMask 0
```
まずQueueタグに関して

```glsl:
"Queue" = "Geometry-1"
```
Queueタグはレンダリングの順番を指定するためのタグです。Stack, Queueとかでよく出てくるQueueと同じで、値が小さいほど先に描画されます。半透明なオブジェクトを描くためには、不透明オブジェクトとの描画順を正しく指定してあげる必要があったりしますので、Queueはそういう時のために力を発揮します。Unityでは

|Name|Value|
|:--:|:--:|
|Background|1000|
|Geometry|2000|
|AlphaTest|2450|
|Transparent|3000|
|Overlay|4000|

の順番に従って描画されます。今回はGeometry-1とすることでこのshaderをアタッチしたオブジェクトが通常のGeometryタグが指定されているオブジェクトよりも先に描画されると言うことがわかります。

```glsl:
ZWrite On
ZTest LEqual
```
ZWrite Onとはdepth bufferの更新を行うと言うことなので
また、Z値の比較判定はLess than equalの時(つまりよりカメラに近くある時)に成功とします。

こうすることで、例えば現実世界にある机が生成したバーチャルオブジェクトよりもカメラ側により近くにあるならば、机が描かれて、バーチャルオブジェクトは描かれなくなります。

```glsl:
ColorMask 0
```
これを指定することで色の出力を無効にすることができます。現実のオブジェクトに対して色付けなどしないので、より自然な描画となります。

## 結果
![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/22e27c53-edb1-0f37-d267-8153605f458f.gif)


plane detectionの精度が高くなく、段ボールの面よりも大きくplaneをマッピングしているために、不自然な描画になってしまいました。
しかし、今回目標としていたplane occlusionはできていることが分かります。

## Next Step
- AR People Occlusionを実現したい!

## 参考文献
- [Unity道場 2019.2 シェーダを書けるプログラマになろう #1 シェーダを理解しよう](https://www.youtube.com/watch?v=wUx_Y9BgC7k&t=1024s)
- [[Unity] モデルをマスクするボックスを作るシェーダ](https://qiita.com/edo_m18/items/133395d1e127a2133181)

## 最後に
間違いがあれば指摘していただけると嬉しく思います！