# games101 作业3分析 详解bump mapping

games101 作业3分析 详解bump mapping

代码分析

整体代码结构 其实变化还是不大 主要是引入了vertexshader（什么都没做） 与 fragmentshader（使用了不同的着色方法 直接用法线作为rgb 使用blingphong光照模型 纹理贴图 bumpmapping displacementmapping）

主要变化在光栅化部分 着色计算使用特定的fragmentshader

这里我之前写的代码有问题 boundingbox没有覆盖边界 导致第一次出来的牛牛不同的三角形之间有缝隙hhh

注意这里使用的w值不再是之前错误的1 而是真实深度 但是我感觉这里插值使用的公式还是没有矫正过的 不过整体影响不大

void rst::rasterizer::rasterize_triangle(const Triangle& t, const std::array<Eigen::Vector3f, 3>& view_pos)
{
    //这里不要使用toVector4 会导致深度值直接赋值为1
    auto v = t.v;
    int XMin = std::min(std::min(v[0].x(), v[1].x()), v[2].x());
    int XMax = std::max(std::max(v[0].x(), v[1].x()), v[2].x());
    int YMin = std::min(std::min(v[0].y(), v[1].y()), v[2].y());
    int YMax = std::max(std::max(v[0].y(), v[1].y()), v[2].y());
    for (int x = XMin; x <= XMax; x++) {
        for (int y = YMin; y <= YMax; y++) {
            int index = get_index(x, y);
            if (insideTriangle(x + 0.5, y + 0.5, t.v)) {
                auto [alpha, beta, gamma] = computeBarycentric2D(x + 0.5, y + 0.5, t.v);
                float Z = 1.0 / (alpha / v[0].w() + beta / v[1].w() + gamma / v[2].w());
                float zp = alpha * v[0].z() / v[0].w() + beta * v[1].z() / v[1].w() + gamma * v[2].z() / v[2].w();
                zp *= Z;

                if (zp < depth_buf[index]) {
                    depth_buf[index] = zp;
                    auto interpolated_color = interpolate(alpha, beta, gamma, t.color[0], t.color[1], t.color[2], 1.0f);
                    auto interpolated_normal = interpolate(alpha, beta, gamma, t.normal[0], t.normal[1], t.normal[2], 1.0f);
                    auto interpolated_texcoords = interpolate(alpha, beta, gamma, t.tex_coords[0], t.tex_coords[1], t.tex_coords[2], 1.0f);
                    auto interpolated_shadingcoords = interpolate(alpha, beta, gamma, view_pos[0], view_pos[1], view_pos[2], 1.0f);
                    //frame_buf[index] = t.getColor();
                    fragment_shader_payload FragShader(interpolated_color, interpolated_normal.normalized(), interpolated_texcoords, texture ? &*texture : nullptr);
                    FragShader.view_pos = interpolated_shadingcoords;
                    auto pixel_color = fragment_shader(FragShader);
                    Vector2i point;
                    point << x, y;
                    set_pixel(point, pixel_color);
                }
            }

        }
    }

下面draw函数中还是有一些细节

比如透视除法 w分量保留了z值

用view_Pos来存储真实的世界坐标 因为光照计算必须是在三维空间中计算的 所以这里要存储

法线矫正 防止model矩阵中物体进行了非等比缩放

void rst::rasterizer::draw(std::vector<Triangle *> &TriangleList) {

    float f1 = (50 - 0.1) / 2.0;
    float f2 = (50 + 0.1) / 2.0;

    Eigen::Matrix4f mvp = projection * view * model;
    for (const auto& t:TriangleList)
    {
        Triangle newtri = *t;
        //使用三维空间中的坐标获取着色点坐标
        std::array<Eigen::Vector4f, 3> mm {
                (view * model * t->v[0]),
                (view * model * t->v[1]),
                (view * model * t->v[2])
        };

        std::array<Eigen::Vector3f, 3> viewspace_pos;

        std::transform(mm.begin(), mm.end(), viewspace_pos.begin(), [](auto& v) {
            return v.template head<3>();
        });

        Eigen::Vector4f v[] = {
                mvp * t->v[0],
                mvp * t->v[1],
                mvp * t->v[2]
        };
        //Homogeneous division
        for (auto& vec : v) {
            vec.x()/=vec.w();
            vec.y()/=vec.w();
            vec.z()/=vec.w();
        }
        //法线校正
        Eigen::Matrix4f inv_trans = (view * model).inverse().transpose();
        Eigen::Vector4f n[] = {
                inv_trans * to_vec4(t->normal[0], 0.0f),
                inv_trans * to_vec4(t->normal[1], 0.0f),
                inv_trans * to_vec4(t->normal[2], 0.0f)
        };

        //Viewport transformation
        for (auto & vert : v)
        {
            vert.x() = 0.5*width*(vert.x()+1.0);
            vert.y() = 0.5*height*(vert.y()+1.0);
            vert.z() = vert.z() * f1 + f2;
        }

        for (int i = 0; i < 3; ++i)
        {
            //screen space coordinates
            newtri.setVertex(i, v[i]);
        }

        for (int i = 0; i < 3; ++i)
        {
            //view space normal
            newtri.setNormal(i, n[i].head<3>());
        }

        newtri.setColor(0, 148,121.0,92.0);
        newtri.setColor(1, 148,121.0,92.0);
        newtri.setColor(2, 148,121.0,92.0);

        // Also pass view space vertice position
        rasterize_triangle(newtri, viewspace_pos);
    }
}

理论分析

bling-phong模型 与 纹理映射的理论都比较简单 这里不再赘述

有关纹理寻址 与 纹理过大/过小的问题 大概会再写一篇 参考一下别的资料

重点分析一下 bumpmapping的理论

其实normal mapping 和bumpmapping 很像 Bump Mapping 使用高度图来扰动法线 Normal Mapping 使用法线贴图来直接定义表面法线 理论上normal mapping 能够实现更好的细节 这两者都是为了使用更少的三角形 来实现更多的细节：

不使用bump mapping



使用bump mapping

首先 可以参考一下learnopengl的资料：https://learnopengl-cn.github.io/05 Advanced Lighting/04 Normal Mapping/

简单总结一下： 为什么我们要使用切线空间来存储法线？

如果直接存储物体的法线信息 那么物体只要发生变化 我们的法线贴图就没办法使用了 但是在切线空间下存储 我们只要每次求出一个TBN矩阵 然后进行变换就可以将切线空间的法线转换到世界空间 然后计算光照了

关于TBN矩阵就是对应着切线空间的三个基向量 在世界空间中的坐标 这样进行空间转换

推导方面 需要求出切线 以及副切线 可以看看learnopengl中的推导 本次作业中切线的求解我没看太懂 感觉是做了个近似？

得到了TBN矩阵 如何使用：

我们直接使用TBN矩阵，这个矩阵可以把切线坐标空间的向量转换到世界坐标空间。因此我们把它传给片段着色器中，把通过采样得到的法线坐标左乘上TBN矩阵，转换到世界坐标空间中，这样所有法线和其他光照变量就在同一个坐标系中了。

这也是本次课程中的做法

现在唯一的问题就是我们如何求出这个法线坐标

而games101课程中介绍的就是我们如何求经过bump mapping得到的法线坐标

即经过高度图来扰动点的位置之后 利用偏导数来近似切线 进一步得到法线：

但其实这样也是一个近似的结果

pbr中的推导是这样的：



上述是点的位置发生了变化 d(u,v)代表着高度变化 n(u,v)是表面法线 本来应该是个标量 但是作业中用的是rgb形式的 所以要求它的范数

我们对上述求偏导实际的近似结果应该是：

作业中相当只使用了uv坐标的变化来近似 也是因为我们信息有限嘛

详细分析见:https://www.pbr-book.org/4ed/Textures_and_Materials/Material_Interface_and_Implementations#NormalMapping

这里我们求得的其实是shading normal 而我们之前用的tbn中的n是surface normal 着色是计算我们要用高度扰动之后的位置以及法线（shading normal） 而高度扰动之后的位置计算 我们要使用surface normal来计算 这点很重要 我看到有些网上的答案计算是错误的

实际解决

注意所有的方向向量 都要归一化！

Eigen::Vector3f texture_fragment_shader(const fragment_shader_payload& payload)
{
    Eigen::Vector3f return_color = {0, 0, 0};
    if (payload.texture)
    {
        // TODO: Get the texture value at the texture coordinates of the current fragment
        return_color = payload.texture->getColor(payload.tex_coords.x(), payload.tex_coords.y());
    }
    Eigen::Vector3f texture_color;
    texture_color << return_color.x(), return_color.y(), return_color.z();

    Eigen::Vector3f ka = Eigen::Vector3f(0.005, 0.005, 0.005);
    Eigen::Vector3f kd = texture_color / 255.f;
    Eigen::Vector3f ks = Eigen::Vector3f(0.7937, 0.7937, 0.7937);

    auto l1 = light{{20, 20, 20}, {500, 500, 500}};
    auto l2 = light{{-20, 20, 0}, {500, 500, 500}};

    std::vector<light> lights = {l1, l2};
    Eigen::Vector3f amb_light_intensity{10, 10, 10};
    Eigen::Vector3f eye_pos{0, 0, 10};

    float p = 150;

    Eigen::Vector3f color = texture_color;
    Eigen::Vector3f point = payload.view_pos;
    Eigen::Vector3f normal = payload.normal;

    Eigen::Vector3f result_color = {0, 0, 0};

    for (auto& light : lights)
    {

        Eigen::Vector3f ambient_color = ka.cwiseProduct(amb_light_intensity);
        double distance = (light.position - point).norm();
        Eigen::Vector3f light_dir = (light.position - point).normalized();
        Eigen::Vector3f diffuse_color = kd.cwiseProduct(light.intensity) / (distance * distance) * std::max(normal.normalized().dot(light_dir), 0.0f);
        Eigen::Vector3f half_vector = (light_dir + (eye_pos - point).normalized()).normalized();
        Eigen::Vector3f specular_color = ks.cwiseProduct(light.intensity) / (distance * distance) * std::pow(std::max(normal.normalized().dot(half_vector), 0.0f), p);
        result_color += (ambient_color + diffuse_color + specular_color);
    }

    return result_color * 255.f;
}

Eigen::Vector3f phong_fragment_shader(const fragment_shader_payload& payload)
{
    Eigen::Vector3f ka = Eigen::Vector3f(0.005, 0.005, 0.005);
    Eigen::Vector3f kd = payload.color;
    Eigen::Vector3f ks = Eigen::Vector3f(0.7937, 0.7937, 0.7937);

    auto l1 = light{{20, 20, 20}, {500, 500, 500}};
    auto l2 = light{{-20, 20, 0}, {500, 500, 500}};

    std::vector<light> lights = {l1, l2};
    Eigen::Vector3f amb_light_intensity{10, 10, 10};
    Eigen::Vector3f eye_pos{0, 0, 10};

    float p = 150;

    Eigen::Vector3f color = payload.color;
    Eigen::Vector3f point = payload.view_pos;
    Eigen::Vector3f normal = payload.normal;

    Eigen::Vector3f result_color = {0, 0, 0};
    for (auto& light : lights)
    {

        Eigen::Vector3f ambient_color = ka.cwiseProduct(amb_light_intensity);
        double distance = (light.position - point).norm();
        Eigen::Vector3f light_dir = (light.position - point).normalized();
        Eigen::Vector3f diffuse_color = kd.cwiseProduct(light.intensity) / (distance * distance) * std::max(normal.normalized().dot(light_dir),0.0f);
        Eigen::Vector3f half_vector = (light_dir + (eye_pos - point).normalized()).normalized();
        Eigen::Vector3f specular_color = ks.cwiseProduct(light.intensity) / (distance * distance) * std::pow(std::max(normal.normalized().dot(half_vector),0.0f), p);
        result_color += (ambient_color + diffuse_color + specular_color);
    }

    return (result_color) * 255.f;
}

//
Eigen::Vector3f displacement_fragment_shader(const fragment_shader_payload& payload)
{

    Eigen::Vector3f ka = Eigen::Vector3f(0.005, 0.005, 0.005);
    Eigen::Vector3f kd = payload.color;
    Eigen::Vector3f ks = Eigen::Vector3f(0.7937, 0.7937, 0.7937);

    auto l1 = light{{20, 20, 20}, {500, 500, 500}};
    auto l2 = light{{-20, 20, 0}, {500, 500, 500}};

    std::vector<light> lights = {l1, l2};
    Eigen::Vector3f amb_light_intensity{10, 10, 10};
    Eigen::Vector3f eye_pos{0, 0, 10};

    float p = 150;

    Eigen::Vector3f color = payload.color;
    Eigen::Vector3f point = payload.view_pos;
    Eigen::Vector3f normal = payload.normal;

    float kh = 0.2, kn = 0.1;

    Eigen::Vector3f tagent;
    tagent << normal.x() * normal.y() / std::sqrt(std::pow(normal.x(), 2) + std::pow(normal.z(), 2)),
        std::sqrt(std::pow(normal.x(), 2) + std::pow(normal.z(), 2)),
        normal.z()* normal.y() / std::sqrt(std::pow(normal.x(), 2) + std::pow(normal.z(), 2));
    Eigen::Vector3f bitangent = normal.cross(tagent);
    Eigen::Matrix3f TBN;
    TBN.col(0) = tagent.normalized();
    TBN.col(1) = bitangent.normalized();
    TBN.col(2) = normal.normalized();

    float width = 1.0f / payload.texture->width;
    float height = 1.0f / payload.texture->height;
    float dU = kh * kn * (payload.texture->getColor(payload.tex_coords.x() + width, payload.tex_coords.y()).norm() -
        payload.texture->getColor(payload.tex_coords.x(), payload.tex_coords.y()).norm());
    float dV = kh * kn * (payload.texture->getColor(payload.tex_coords.x() + width, payload.tex_coords.y() + height).norm() -
        payload.texture->getColor(payload.tex_coords.x(), payload.tex_coords.y()).norm());
    //计算扰动之后的位置
    point += kn * normal * payload.texture->getColor(payload.tex_coords.x(), payload.tex_coords.y()).norm();
    Eigen::Vector3f ln;
    ln << -dU, -dV, 1;
    Eigen::Vector3f shading_normal = (TBN * ln).normalized();

    Eigen::Vector3f result_color = {0, 0, 0};

    for (auto& light : lights)
    {

        Eigen::Vector3f ambient_color = ka.cwiseProduct(amb_light_intensity);
        double distance = (light.position - point).norm();
        Eigen::Vector3f light_dir = (light.position - point).normalized();
        Eigen::Vector3f diffuse_color = kd.cwiseProduct(light.intensity) / (distance * distance) * std::max(shading_normal.normalized().dot(light_dir), 0.0f);
        Eigen::Vector3f half_vector = (light_dir + (eye_pos - point).normalized()).normalized();
        Eigen::Vector3f specular_color = ks.cwiseProduct(light.intensity) / (distance * distance) * std::pow(std::max(shading_normal.normalized().dot(half_vector), 0.0f), p);
        result_color += (ambient_color + diffuse_color + specular_color);

    }

    return result_color * 255.f;
}

Eigen::Vector3f bump_fragment_shader(const fragment_shader_payload& payload)
{

    Eigen::Vector3f ka = Eigen::Vector3f(0.005, 0.005, 0.005);
    Eigen::Vector3f kd = payload.color;
    Eigen::Vector3f ks = Eigen::Vector3f(0.7937, 0.7937, 0.7937);

    auto l1 = light{{20, 20, 20}, {500, 500, 500}};
    auto l2 = light{{-20, 20, 0}, {500, 500, 500}};

    std::vector<light> lights = {l1, l2};
    Eigen::Vector3f amb_light_intensity{10, 10, 10};
    Eigen::Vector3f eye_pos{0, 0, 10};

    float p = 150;

    Eigen::Vector3f color = payload.color;
    Eigen::Vector3f point = payload.view_pos;
    Eigen::Vector3f normal = payload.normal;

    float kh = 0.2, kn = 0.1;

    Eigen::Vector3f tagent;
    tagent << normal.x() * normal.y() / std::sqrt(std::pow(normal.x(), 2) + std::pow(normal.z(), 2)),
        std::sqrt(std::pow(normal.x(), 2) + std::pow(normal.z(), 2)),
        normal.z()* normal.y() / std::sqrt(std::pow(normal.x(), 2) + std::pow(normal.z(), 2));
    Eigen::Vector3f bitangent = normal.cross(tagent);
    Eigen::Matrix3f TBN;
    TBN.col(0) = tagent.normalized();
    TBN.col(1) = bitangent.normalized();
    TBN.col(2) = normal.normalized();

    float width = 1.0f / payload.texture->width;
    float height = 1.0f / payload.texture->height;
    float dU = kh * kn * (payload.texture->getColor(payload.tex_coords.x() + width, payload.tex_coords.y()).norm() -
        payload.texture->getColor(payload.tex_coords.x(), payload.tex_coords.y()).norm());
    float dV = kh * kn * (payload.texture->getColor(payload.tex_coords.x() + width, payload.tex_coords.y() + height).norm() -
        payload.texture->getColor(payload.tex_coords.x(), payload.tex_coords.y()).norm());

    Eigen::Vector3f ln;
    ln << -dU, -dV, 1;
    normal = (TBN * ln).normalized();
    Eigen::Vector3f result_color = {0, 0, 0};
    result_color = normal;

    return result_color * 255.f;
}