簡單的圖形學（二）——材質與反射

在上一篇【遊戲框架系列】簡單的圖形學（一）文章中，咱們講述了光線追蹤的一個最簡單的操做——依每一個像素延伸出一條追蹤光線，光線打到球上(產生交點)，就算出這條線的長度，做爲最終的灰度，打不到球上，就顯示爲黑色。

倉庫：bajdcc/GameFramework

本節代碼：https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/RenderMaterial.cpp

幾何圖形算法接口：https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/Geometries.h。

不管是材質，仍是反射，仍是折射等，無非就是在這個交點處依不一樣算法計算出顏色而已，這個顏色最終會顯示到屏幕上對應的像素上。下面介紹的就是計算交點處顏色的方法。

參考自miloyip的文章用JavaScript玩轉計算機圖形學(一)光線追蹤入門 - Milo Yip - 博客園。

實現材質

Phong材質效果

這裏就實現兩種材質：棋盤和Phong，老實說，我都沒據說過Phong這個東西，應該又是純數學推導出來的一種結論吧。

先寫好接口：

// 材質接口
class Material
{
public:
    Material(float reflectiveness);
    virtual ~Material();
    virtual color Sample(Ray ray, vector3 position, vector3 normal) = 0;

    float reflectiveness;
};

// 棋盤材質
class CheckerMaterial : public Material
{
public:
    CheckerMaterial(float scale, float reflectiveness);

    color Sample(Ray ray, vector3 position, vector3 normal) override;

    float scale;
};

// Phong材質
class PhongMaterial : public Material
{
public:
    PhongMaterial(color diffuse, color specular, float shininess, float reflectiveness);

    color Sample(Ray ray, vector3 position, vector3 normal) override;

    color diffuse;
    color specular;
    float shininess;
};

棋盤是在平面上的，因此咱們事先要實現一個光線與平面的相交算法。

判斷直線與平面相交

IntersectResult Plane::Intersect(Ray ray)
{
    const auto a = DotProduct(ray.direction, normal);

    if (a >= 0)
        // 反方向看不到平面，負數表明角度爲鈍角
        // 舉例，平面法向量n=(0,1,0)，距離d=0，
        // 我從上面往下看，光線方向爲y軸負向，而平面法向爲y軸正向
        // 因此二者夾角爲鈍角，上面的a爲cos(夾角)=負數，不知足條件
        // 當a爲0，即視線與平面平行時，天然看不到平面
        // a爲正時，視線從平面下方向上看，看到平面的反面，所以也看不到平面
        return IntersectResult();

    // 參考 http://blog.sina.com.cn/s/blog_8f050d6b0101crwb.html
    /* 將直線方程寫成參數方程形式，即有：
       L(x,y,z) = ray.origin + ray.direction * t(t 就是距離 dist)
       將平面方程寫成點法式方程形式，即有：
       plane.normal . (P(x,y,z) - plane.position) = 0
       解得 t = {(plane.position - ray.origin) . normal} / (ray.direction . plane.normal )
    */
    const auto b = DotProduct(normal, ray.origin - position);

    const auto dist = -b / a;
    return IntersectResult(this, dist, ray.Eval(dist), normal);
}

純數學推導較多，這裏有個優化：先看光線方向和平面法向量方向是否同向(夾角爲銳角)，是則直接斷定不相交。

肯定好算法後，看看棋盤材質的實現：

color CheckerMaterial::Sample(Ray ray, vector3 position, vector3 normal)
{
    static color black(Gdiplus::Color::Black);
    static color white(Gdiplus::Color::White);
    return fabs(int(floorf(position.x * 0.1f) + floorf(position.z * scale)) % 2) < 1 ? black : white;
}

簡單來講，就是「x座標+z座標」取整是不是2的倍數。

咱們主要分析下材質接口須要哪些成分：

1. 光線Ray，即入射光線的起點位置和方向、交點position、交點法向normal，光線方向和交點法向量是爲了計算反射、折射。
2. 交點位置 position
3. 交點法向 normal

接下來看看Phong材質，參考裏面的網址說明，徹底的數學公式。

color PhongMaterial::Sample(Ray ray, vector3 position, vector3 normal)
{
    /*
      參考 https://www.cnblogs.com/bluebean/p/5299358.html Blinn-Phong模型
        Ks：物體對於反射光線的衰減係數
        N：表面法向量
        H：光入射方向L和視點方向V的中間向量
        Shininess：高光係數

        Specular = Ks * lightColor * pow(dot(N, H), shininess)

        當視點方向和反射光線方向一致時，計算獲得的H與N平行，dot(N,H)取得最大；當視點方向V偏離反射方向時，H也偏離N。
        簡單來講，入射光與視線的差越接近法向量，鏡面反射越明顯
     */

    const auto NdotL = DotProduct(normal, lightDir);
    const auto H = Normalize(lightDir - ray.direction);
    const auto NdotH = DotProduct(normal, H);
    const auto diffuseTerm = diffuse * fmax(NdotL, 0.0f); // N * L 入射光在鏡面法向上的投影 = 漫反射
    const auto specularTerm = specular * powf(fmax(NdotH, 0.0f), shininess);
    return lightColor * (diffuseTerm + specularTerm);
}

計算時須要四個參數：

1. Ks：物體對於反射光線的衰減係數
2. N：表面法向量
3. H：光入射方向L和視點方向V的中間向量
4. Shininess：高光係數

咱們看到的Phong材質顏色實際上是它表面反射出的光，如何計算反射的光什麼顏色？

Phong材質有三個參數：diffuse漫反射顏色、specular鏡面反射顏色、shininess高光係數(其實就是調節前二者的混合比例)。如題圖中所示，diffuse就是球自己材質的顏色，而specular就是外界光打上去的顏色。所以，這裏會假設有一個外界光源lightColor/lightDir，故而在上述計算過程當中會用到它。

實現反射

反射效果

看到反射，其實就是用遞歸實現的，同時要限制遞歸的深度。

color PhysicsEngine::RenderReflectRecursive(World& world, const Ray& ray, int maxReflect)
{
    static color black(Gdiplus::Color::Black);

    auto result = world.Intersect(ray);

    if (result.body) {
        // 參見 https://www.cnblogs.com/bluebean/p/5299358.html

        // 取得反射係數
        const auto reflectiveness = result.body->material->reflectiveness;

        // 先採樣（取物體自身的顏色）
        auto color = result.body->material->Sample(ray, result.position, result.normal);

        // 加上物體自身的顏色成份（與反射的顏色相區分）
        color = color * (1.0f - reflectiveness);

        if (reflectiveness > 0 && maxReflect > 0) {

            // 公式 R = I - 2 * N * (N . I) ，求出反射光線
            const auto r = result.normal * (-2.0f * DotProduct(result.normal, ray.direction)) + ray.direction;

            // 以反射光線做爲新的光線追蹤射線
            const auto reflectedColor = RenderReflectRecursive(world, Ray(result.position, r), maxReflect - 1);

            // 加上反射光的成份
            color = color + (reflectedColor * reflectiveness);
        }
        return color;
    }
    return black;
}

如代碼中所示，基本思路是：

1. 光線與幾何物體有交點嗎？
2. 沒有交點：返回黑色
3. 有交點：對自身材質採樣，佔比爲(1-反射係數)，計算出反射光線，繼續追蹤，並將追蹤到的採樣佔比爲(反射係數)

即：

color reflect_sample(world, ray, 深度)
{
__ 若是world和ray不相交， 返回 黑色
__ 若是world和ray相交，假設這個相交物體爲body
____ 1. 加上 body的材質顏色 * 比例(1.0f - reflectiveness)
____ 2. 計算出反射光線ray_f
____ 3. 加上反射顏色reflect_sample(world, ray_f, 深度-1) * 比例(reflectiveness)
}

這裏重點是根據入射光線和法向量求反射光線，這是道數學題，參考過程在代碼中的網址中。

到這裏，miloyip的光線追蹤入門就嘗試完成了，接下來是講述基本光源。

由https://zhuanlan.zhihu.com/p/31012319備份。