RayMarching2：给球加上光照

 

接上文：RayMarching1：用射线的方式画一个圆

四、法线与光照

如果对偏导或者梯度场有了解，那么对于一个规则的平面想要得到某一点的法线就不是难题

考虑到第一节 SDF 函数 ，我们知道：对于刚好在当前表面上的点 x 满足 ，对于在表面内部的点满足 ，对于表面外部的点满足 ，而法线有一个很重要的性质正是：当且仅当点 x 沿着法线的方向移动， 能以最快的速度从负数递增到正数，这个增量可以用  来表示，考虑到每个方向上的偏导，也就是说  正是我们想要的法线

肯定不需要去求导数，就按照周围的采样点求个近似就可以了，如下：

float3 getNormal(float3 sufPos)
{
    float2 offset = float2(_Epsilon, 0.0);
    float3 normal = float3(
        sphereSDF(sufPos + offset.xyy) - sphereSDF(sufPos - offset.xyy),
        sphereSDF(sufPos + offset.yxy) - sphereSDF(sufPos - offset.yxy),
        sphereSDF(sufPos + offset.yyx) - sphereSDF(sufPos - offset.yyx)
    );
    return normalize(normal);
}

拿到法线的方向后，就可以根据自定义光源的方向来计算漫反射和镜面反射了，相对于 UnityShader，片段着色器的写法更接近于 这一章

 

五、考虑摄像机

前面的四节，摄像机的方向永远朝向正下方，但事实上摄像机当然是可以随意移动的，这个就需要在着色器中当场构建摄像机的 view 矩阵

想想看 OpenGL 是怎么计算 view 矩阵的？参考于《OpenGL基础14：摄像机》，可以得到下面的算法：

float4x4 viewMatrix(float3 eye, float3 center, float3 up)
{
    float3 f = normalize(center - eye);
    float3 s = normalize(cross(f, up));
    float3 u = cross(s, f);
    return float4x4(float4(s, 0.0), float4(u, 0.0), float4(-f, 0.0), float4(0.0, 0.0, 0.0, 1));
}

这正是 openGL API glm::lookAt 的实现：其中第一个参数为摄像机位置，第二个参数为目标位置，第三个参数为你所描述的世界空间的上向量

结合前4章，RayMarching 的原理就可以用一张图来表示：

 

当然啦，射线除了可以在片段着色器中计算，也可以在脚本中计算后传入着色器，这样可以在片段着色器中使用游戏中摄像机的属性，也可以在之后混合入场景！

完全参考《UnityShader27：屏幕雾效》这一章中的算法，并在《将ShaderToy中的Shader搬运到Unity》这一章的基础上改进，得到的完整代码如下：

using System;
using UnityEngine;

[ExecuteInEditMode]
public class GetRay: PostEffectsBase
{
    public int horizontal = 2560;
    public int vertical = 1440;
    public bool isMouseScreenPos = false;
    public bool LockView = true;
    public float mouseSpeed = 0.4f;
    public Shader shaderToy;
    private Material _material;

    private float mouse_x = 0.5f;
    private float mouse_y = 0.5f;
    public Material material
    {
        get
        {
            _material = CheckShaderAndCreateMaterial(shaderToy, _material);
            return _material;
        }
    }

    private Camera _myCamera;
    public Camera myCamera
    {
        get
        {
            if (_myCamera == null)
                _myCamera = GetComponent();
            return _myCamera;
        }
    }

    private Matrix4x4 GetRayInWorldSpace()
    {
        Matrix4x4 frustumCorners = Matrix4x4.identity;

        //获得摄像机的竖直方向视角范围，单位为角度
        float fov = myCamera.fieldOfView;
        //获得摄像机与近裁平面的距离
        float near = myCamera.nearClipPlane;
        //获得摄像机平面纵横比
        float aspect = myCamera.aspect;

        //Mathf.Deg2Rad：同等于2PI/360，可以将角度转换为弧度，Mathf.Deg2Rad相反
        float halfHeight = near * Mathf.Tan(fov * 0.5f * Mathf.Deg2Rad);
        Vector3 toRight = myCamera.transform.right * halfHeight * aspect;
        Vector3 toTop = myCamera.transform.up * halfHeight;

        Vector3 topLeft = myCamera.transform.forward * near + toTop - toRight;
        //VectorX.magnitude：获得向量长度
        float scale = topLeft.magnitude / near;

        //向量归一化
        topLeft.Normalize();
        topLeft *= scale;

        Vector3 topRight = myCamera.transform.forward * near + toRight + toTop;
        topRight.Normalize();
        topRight *= scale;

        Vector3 bottomLeft = myCamera.transform.forward * near - toTop - toRight;
        bottomLeft.Normalize();
        bottomLeft *= scale;

        Vector3 bottomRight = myCamera.transform.forward * near + toRight - toTop;
        bottomRight.Normalize();
        bottomRight *= scale;

        //将topRight和topLeft的位置调换一下，可以在顶点着色器中通过dot运算直接得到index而不需要if
        frustumCorners.SetRow(0, bottomLeft);
        frustumCorners.SetRow(1, bottomRight);
        frustumCorners.SetRow(3, topRight);
        frustumCorners.SetRow(2, topLeft);

        return frustumCorners;
    }
    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (material != null)
        {
            RenderTexture scaled = RenderTexture.GetTemporary(horizontal, vertical, 24);
            if (LockView)
                myCamera.transform.LookAt(new Vector3(0, 0, 0));
            if (Input.GetMouseButton(0))
            {
                mouse_x = Mathf.Clamp(Input.mousePosition.x / Screen.width, 0, 1);
                mouse_y = Mathf.Clamp(Input.mousePosition.y / Screen.height, 0, 1);
                if (!isMouseScreenPos)
                {
                    mouse_x = Input.mousePosition.x;
                    mouse_y = Input.mousePosition.y;
                }
                mouse_x *= mouseSpeed;
                mouse_y *= mouseSpeed;
            }
            material.SetFloat("_MouseX", mouse_x);
            material.SetFloat("_MouseY", mouse_y);

            Matrix4x4 frustumCorners = GetRayInWorldSpace();
            material.SetMatrix("_FrustumCornersRay", frustumCorners);

            Graphics.Blit(src, scaled, material);
            Graphics.Blit(scaled, dest);
            RenderTexture.ReleaseTemporary(scaled);
        }
        else
            Graphics.Blit(src, dest);
    }
}

Shader部分：

其中我们使用了自己定义的 .cginc 文件：ShaderToy.cginc，这里面的参数 USE_SCENE_CAMERA 决定了射线 Ray 是否由游戏内的摄像机给到

Shader "ShaderToy/RedCircle"
{
    Properties
    {
        _MainTex("Base (RGB)", 2D) = "white" {}
        _MinDist("MinDist", Float) = 0.0            //射线步进起点
        _MaxDist("MaxDist", Float) = 100.0          //射线步进终点
        _Volsteps("Volsteps", Int) = 255            //最大步进次数
        _Epsilon("Volsteps", Float) = 0.001         //精度

        _Diffuse("Diffuse", Vector) = (0.7, 0.2, 0.2)         //漫发射强度
        _Specular("Specular", Vector) = (1.0, 1.0, 1.0)       //镜面反射强度
        _LightPos("LightPos", Vector) = (4.0, 2.0, 4.0)     //点光源位置
        _LightIntensity("LightIntensity", Vector) = (0.4, 0.4, 0.4)     //光照颜色
        _Shininess("Shininess", Float) = 10.0       //反光度
    }

    CGINCLUDE
    sampler2D _MainTex;
    float _MaxDist;
    float _MinDist;
    int _Volsteps;
    float _Epsilon;

    float3 _Diffuse;
    float3 _Specular;
    float3 _LightPos;
    float3 _LightIntensity;
    float _Shininess;

    half4 _MainTex_TexelSize;
    float4x4 _FrustumCornersRay;
    float cubeSDF(float3 rayPoint)
    {
        //默认这个立方体中心为(0, 0, 0)，其长宽高为2, 2, 2
        float3 d = abs(rayPoint) - float3(1.0, 1.0, 1.0);
        float insideDistance = min(max(d.x, max(d.y, d.z)), 0.0);
        float outsideDistance = length(max(d, 0.0));
        
        return insideDistance + outsideDistance;
    }

    //球体的SDF
    float sphereSDF(float3 rayPoint)
    {
        return length(rayPoint) - 1;
    }

    //物体的SDF
    float sceneSDF(float3 rayPoint)
    {
        return cubeSDF(rayPoint);
    }

    //采样点近似，求出\nabla f(SDF)，也就是法向量
    float3 getNormal(float3 sufPos)
    {
        float2 offset = float2(_Epsilon, 0.0);
        float3 normal = float3(
            sceneSDF(sufPos + offset.xyy) - sceneSDF(sufPos - offset.xyy),
            sceneSDF(sufPos + offset.yxy) - sceneSDF(sufPos - offset.yxy),
            sceneSDF(sufPos + offset.yyx) - sceneSDF(sufPos - offset.yyx)
        );
        //其实当球心为原点时，刚好 normal = sufPos
        return normalize(normal);
    }

    //计算点光源光照
    float3 phongLight(float3 k1, float3 k2, float power, float3 sufPos, float3 eye, float3 lightPos, float3 lightIntensity)
    {
        float3 normal = getNormal(sufPos);
        float3 lightDir = normalize(lightPos - sufPos);
        float3 viewDir = normalize(eye - sufPos);
        float3 Reflect = normalize(reflect(-lightDir, normal));
        
        float dotLN = dot(lightDir, normal);
        float dotRV = dot(Reflect, viewDir);
        
        if (dotLN < 0.0)
            return float3(0.0, 0.0, 0.0);
        if (dotRV < 0.0)
            return lightIntensity * (k1 * dotLN);
        return lightIntensity * (k1 * dotLN + k2 * pow(dotRV, power));
    }

    //获得摄像机到当前片段的射线
    float3 getRay(float viewAngle, float2 screenSize, float2 pos)
    {
        float2 up = pos - screenSize / 2.0;
        float z = screenSize.y / tan(radians(viewAngle) / 2.0);
        float3 ray = normalize(float3(up, -z));
        return ray;
    }

    //通过rayMarching算法得到射线与表面接触点
    float rayMarching(float3 cameraPos, float3 ray, float start, float end)
    {
        float nowDepth = start;
        for (int i = 0; i < _Volsteps; i++)
        {
            float dist = sceneSDF(cameraPos + nowDepth * ray);
            if (dist < _Epsilon)
                return nowDepth;
            nowDepth += dist;
            if (dist > end)
                return end;
        }
        return end;
    }

    //view矩阵构建，其中第一个参数为摄像机位置，第二个参数为目标位置，第三个参数为你所描述的世界空间的上向量
    float4x4 viewMatrix(float3 eye, float3 center, float3 up)
    {
        float3 f = normalize(center - eye);
        float3 s = normalize(cross(f, up));
        float3 u = cross(s, f);
        return float4x4(float4(s, 0.0), float4(u, 0.0), float4(-f, 0.0), float4(0.0, 0.0, 0.0, 1));
    }
    ENDCG

    SubShader
    {
        PASS
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #include "../CGINC/ShaderToy.cginc"
 
            struct v2f
            {
                float4 pos: SV_POSITION;
                float4 ray: TEXCOORD0;
            };
 
            v2f vert(appdata_img v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);

                int index = 0;
                //直接通过dot运算来获取对应的index
                index = (int)dot(v.texcoord, float2(1, 2));
        
                //当在 DirectX 平台上使用渲染到纹理技术时，Unity 会自动为我们翻转屏幕图像纹理，所以大部分情况下我们都不需要关系在意纹理翻转问题，但是有特殊情况：一个例子就是开启抗锯齿后再对得到的渲染纹理进行后处理时，这些图像在竖直方向的朝向就可能是不同的
                //在这些情况下，_MainTex_TexelSize.y 就会为负值，我们需要对索引也进行翻转
                #if UNITY_UV_STARTS_AT_TOP
                if (_MainTex_TexelSize.y < 0)
                    index = 3 - index;
                #endif
                o.ray = _FrustumCornersRay[index];
                return o;
            }
 
            fixed4 frag(v2f i): SV_Target
            {
                float3 eye = _WorldSpaceCameraPos;           //摄像机位置
                #if USE_SCENE_CAMERA
                    float3 ray = normalize(i.ray);
                #else
                    float3 ray = getRay(45.0, _ScreenParams.xy, i.pos.xy);
                    float4x4 VMatrix = viewMatrix(eye, float3(0, 0, 0), float3(0, 1, 0));
                    ray = mul(float4(ray, 1.0), VMatrix).xyz;
                #endif
                    
                float dist = rayMarching(eye, ray, _MinDist, _MaxDist);

                fixed4 color = fixed4(0.0, 0.0, 0.0, 1.0);
                if (dist < _MaxDist - _Epsilon)
                {
                    color = fixed4(0.1, 0.1, 0.1, 1.0);
                    float3 sufPos = eye + dist * ray;

                    float3 realLightPos = float3(_LightPos.x * sin(_Time.y), _LightPos.y, _LightPos.z * sin(_Time.z));
                    color.xyz += phongLight(_Diffuse, _Specular, _Shininess, sufPos, eye, realLightPos, _LightIntensity);
                }
                return color;
            }
            ENDCG
        }
    }
}

可以看出，两者完全一致，不过 Game 视图中的正方形是画出来的！

 

参考文章：

• https://zhuanlan.zhihu.com/p/90245545
• http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/#signed-distance-functions
• https://iquilezles.org/www/articles/distfunctions/distfunctions.htm