【UnityShader】レイマーチング入門【1】 #32

前回の成果

円でトランジションを行った。

soramamenatan.hatenablog.com

今回やること

今回はレイマーチングをやっていきます。
今回はUnityのバージョンが古いと出来ないので注意してください。
自分は2019.2.17f1で行っています。

gurutaka-log.com

レイマーチングとは

レイマーチングとは距離関数と呼ばれる関数を定義して、その関数が返す値を見ながら「レイがぶつかっているかどうか」を知る手法のこと

GLSL でのレイマーチングについて雑に語ってみます - Qiita：より引用

下記の画像もレイマーチングで描画されています。

正解するカドの「カド」をレイマーチングでリアルタイム描画する | gam0022.net：より引用

レイマーチングのワークフロー

レイマーチングがどのような手順で行われているかを説明します。

カメラ(視点)の方向を決め、その方向にレイを飛ばす
シーン内のオブジェクト全てと当たり判定を行い、現在の位置から一番近いオブジェクトとの距離を求める
2で求めた距離分、レイを進める
step2とstep3を繰り返し、オブジェクトととの距離がしきい値を超える、もしくは規定回数の計算が終われば終了

~~よくわからない~~

上記のフローをわかりやすく画像にしてくださっています。

[GLSL] レイマーチング入門 vol.1 - Qiita：より引用

画像の説明

ワークフローだけだと理解しにくかったので、引用させて頂いた画像を元に具体的に説明していきます。

[GLSL] レイマーチング入門 vol.1 - Qiita：より引用

画像の数字は何回目のレイの計算位置かを表していています。
そして、計算するごとにカメラの視点の方向にある緑色の球体に近づいています。

まず、カメラの位置から一番近いオブジェクトとの距離を求めて、カメラの視点方向にその距離分レイを進めます。
今回の場合、赤色の球が一番距離が近いので画像の1番の点までレイを進めています。
紫色の矢印はあくまで球との距離を利用しているだけであって、レイが進む方向とは全く関係ありません。

これを繰り返していくと、4番の点で赤ではなく、青の球が一番近いオブジェクトとなりました。

更に進めていくと、6番で緑の球が一番近いオブジェクトとなり、緑の球は実際にレイが当たっているオブジェクトとなるため、ここで計算は終了となります。

レイマーチングのイメージとして、ポリゴンを利用せずに、1枚のプレーンにドットを打つ感じでレンダリングされます。

[GLSL] レイマーチング入門 vol.1 - Qiita：より引用

説明が長くなってしまいましたが、ここから実装に移っていきます。

事前準備

Scene上にQuadを配置してください。

f:id:soramamenatan:20191222162856p:plain

ソースコード

Shader "Unlit/simpleRaymarching" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Radius("Radius", Range(0.0, 1.0)) = 0.3
    }
    SubShader {
        Tags { "Queue"="Transparent" "LightMode"="ForwardBase"}
        LOD 100

        Pass {
            ZWrite On
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 pos : POSITION1;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Radius;

            float sphere(float3 pos) {
                return length(pos) - _Radius;
            }

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.pos = mul(unity_ObjectToWorld, v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                float3 pos = i.pos.xyz;
                float3 rayDir = normalize(pos.xyz - _WorldSpaceCameraPos);
                int stepNum = 30;

                for (int i = 0; i < stepNum; i++) {
                    float marcingDist = sphere(pos);
                    if (marcingDist < 0.0001) {
                        return 1.0;
                    }
                    pos.xyz += marcingDist * rayDir.xyz;
                }
                return 0;
            }
            ENDCG
        }
    }
}

解説をしていきます。

"LightMode"="ForwardBase"

Forward Renderingで使用され、環境光、Directional Light、vertex/SHライトが適応されます。

SHライトとは、球面調和のことで詳しくはこちらを参照してください。

docs.unity3d.com

POSITION1

これはセマンティクスで、frontViewPositionのことです。
ちなみにここをPOSITIONにするとエラーとなってしまいます。
他にもあるので紹介します。

セマンティクス名	型	用途
POSITON1	float4	frontViewPosition
POSITON2	float4	leftViewPosition
POSITON3	float4	rightViewPosition

https://forum.unity.com/threads/does-unitys-shader-support-multi-position-data-in-every-vertex.283972/

float3 rayDir = normalize(pos.xyz - _WorldSpaceCameraPos)

frontViewPositionから_WorldSpaceCameraPos(カメラのワールド空間の位置)を引くことにより、カメラからのオブジェクトへのベクトルが取れます。
よって、これがレイの進行方向となります。

length

これはある点から中心(0, 0, 0)までの距離を返す関数です。

length(pos)

この場合、posと中心との距離を返しています。

レイを進める処理

for (int i = 0; i < stepNum; i++) {
    float marcingDist = sphere(pos);
    if (marcingDist < 0.0001) {
        return 1.0;
    }
    pos.xyz += marcingDist * rayDir.xyz;
}
return 0;

この部分でレイを実際に進めています。
sphere関数でレイを進める距離を出します。
そして、レイとオブジェクトが衝突したら白を返し、しなかったらレイを進めます。
これをstepNum分繰り返しています。

今回はオブジェクトが1つなためfor文を回す意味はないですが、フロー通りに行いたかったためforを使用しています。

結果

このような円が出れば成功です。

f:id:soramamenatan:20191222172053p:plain

ソースコードにコメントを付与

Shader "Unlit/simpleRaymarching" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Radius("Radius", Range(0.0, 1.0)) = 0.3
    }
    SubShader {
        Tags { "Queue"="Transparent" "LightMode"="ForwardBase"}
        LOD 100

        Pass {
            ZWrite On
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 pos : POSITION1;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Radius;

            // 中心との距離から円を描画
            float sphere(float3 pos) {
                return length(pos) - _Radius;
            }

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.pos = mul(unity_ObjectToWorld, v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                float3 pos = i.pos.xyz;
                // レイのベクトル
                float3 rayDir = normalize(pos.xyz - _WorldSpaceCameraPos);
                int stepNum = 30;

                for (int i = 0; i < stepNum; i++) {
                    // レイを進める距離
                    float marcingDist = sphere(pos);
                    // 衝突したら、ピクセルを白くする
                    if (marcingDist < 0.0001) {
                        return 1.0;
                    }
                    // レイを進める
                    pos.xyz += marcingDist * rayDir.xyz;
                }
                // stepNum回レイを進めても衝突しなかったらピクセルを透明にする
                return 0;
            }
            ENDCG
        }
    }
}