tinyrenderer笔记（Shader）

• tinyrenderer
• 个人代码仓库：tinyrenderer个人练习代码

---

前言

现在我们将所有的渲染代码都放在了 main.cpp 中，然而在 OpenGL 渲染管线中，渲染的核心逻辑是位于 shader 中的，下面是 OpenGL 的渲染管线：

蓝色是我们可以自定义的 shader，现在让我们来模仿顶点着色器与片段着色器的工作流程（忽略几何着色器）。

UniformVar

在 glsl 中，我们可以定义一些 uniform 变量，在着色器之外设置值，并在着色器之内访问。这些变量在所有着色器都可以访问。为了模拟这种变量访问模式，我定义了一个 UniformVar 结构体，内部通过 unordered_map 以 std::string 索引实际的变量值：

template <typename T>
struct UniformVar
{std::unordered_map<std::string, T> var;void add_var(const std::string& name){var[name] = T();}T get_var(const std::string& name){if (var.find(name) == var.end()){std::cout << "[glProgram] UniformVar get_var " << name << " not found" << std::endl;return T();}return var[name];}void set_var(const std::string& name, const T& value){if (var.find(name) == var.end()){std::cout << "[glProgram] UniformVar set_var " << name << " not found" << std::endl;return;}var[name] = value;}
};

这是一个模板结构体，以满足不同类型的变量定义。

VaryingVar

在 glsl 中，顶点着色器定义的输出变量经过插值之后会输出到片段着色器中。插值是对一个图元考虑的，在我的代码中只考虑三角形图元。我们模拟 varying 变量时，需要一种辅助结构体来帮助我们插值，它会存储三角形三个顶点的属性。

template <typename T>
struct VaryingVar
{std::unordered_map<std::string, std::array<T, 3>> var;void add_var(const std::string& name){var[name] = std::array<T, 3>();}T get_var(const std::string& name, size_t index){if (var.find(name) == var.end()){std::cout << "[glProgram] VaryingVar get_var " << name << " not found" << std::endl;return T();}if (index > 3){std::cout << "[glProgram] VaryingVar get_var " << name << " index out of range" << std::endl;return T();}return var[name][index];}std::array<T, 3> get_var(const std::string& name){if (var.find(name) == var.end()){std::cout << "[glProgram] VaryingVar get_var " << name << " not found" << std::endl;return T();}return var[name];}void set_var(const std::string& name,const T& value, size_t index){if (var.find(name) == var.end()){std::cout << "[glProgram] VaryingVar set_var " << name << " not found" << std::endl;return;}if (index > 3){std::cout << "[glProgram] VaryingVar set_var " << name << " index out of range" << std::endl;return;}var[name][index] = value;}
};

glProgram

我们需要一个能够管理顶点着色器与片段着色器的类，它会使用自定义着色器的功能，并在内部做一些光栅化操作，类比于 OpenGL 的 Program，我们自定义一个 glProgram 类。

glProgram 会管理所有 uniform 与 varying 变量，并提供外部接口来访问不同类型的变量：

UniformVar<glm::mat4>   uniform_mat4;
UniformVar<float>       uniform_float;
·········
VaryingVar<Vec4f>       varying_vec4f;
VaryingVar<Vec3f>       varying_vec3f;
·········

访问通过模板函数来确定访问变量的类型：

template<typename T>
T GetUniformVar(const std::string& name)
{if constexpr (std::is_same_v<T, glm::mat4>){return uniform_mat4.get_var(name);}·········
}template<typename T>
void SetUniformVar(const std::string& name, const T& value)
{if constexpr (std::is_same_v<T, glm::mat4>){uniform_mat4.set_var(name, value);}·········
}template<typename T>
void AddUniformVar(const std::string& name)
{if constexpr (std::is_same_v<T, glm::mat4>){uniform_mat4.add_var(name);}·········
}template<typename T>
T GetVaryingVar(const std::string& name, size_t index)
{if constexpr (std::is_same_v<T, Vec4f>){return varying_vec4f.get_var(name, index);}·········
}template<typename T>
void SetVaryingVar(const std::string& name, const T& value, size_t index)
{if constexpr (std::is_same_v<T, Vec4f>){varying_vec4f.set_var(name, value, index);}·········
}template<typename T>
void AddVaryingVar(const std::string& name)
{if constexpr (std::is_same_v<T, Vec4f>){varying_vec4f.add_var(name);}·········
}

glProgram 会管理顶点着色器与片段着色器，内部会存储它们的指针：

VertexShader*   m_vertexShader;
FragmentShader* m_fragmentShader;
// 注册顶点着色器
void glProgram::RegisterVertexShader(VertexShader* vertexShader)
{m_vertexShader = vertexShader;vertexShader->SetProgram(this);vertexShader->ConfirmVaryingVar();
}
// 注册片段着色器
void glProgram::RegisterFragmentShader(FragmentShader* fragmentShader)
{m_fragmentShader = fragmentShader;fragmentShader->SetProgram(this);
}

会提供一个函数来确定视口：

glm::mat4 m_viewport;
void glProgram::SetViewPort(int width, int height)
{m_viewport = glm::viewport(width, height);
}

最重要的是提供一个函数来绘制一个三角形（功能后续讲解）：

void Draw(TGAImage& target, float* zbuffer, const std::array<VertexInfoBase*, 3>& vertexInfos);// 绘制一个三角面

IShader

这是最基本的着色器类，它会派生一个顶点着色器与片段着色器。所有着色器可以获得全局变量的值，这个值在着色器之外设置。所以 IShader 会为子类提供一个访问 uniform 变量的方法：

class IShader
{friend class glProgram;
public:void SetProgram(glProgram* program){m_program = program;}
protected:template<typename T>T GetUniformVar(const std::string& name){return m_program->GetUniformVar<T>(name);}glProgram* m_program;
};

SetProgram 会在注册着色器的时候调用，保存 glProgram 的指针用于访问 uniform 或者 varying 变量。

VertexShader

顶点着色器基类，下面是顶点着色器的功能：

The main goal of the vertex shader is to transform the coordinates of the vertices. The secondary goal is to prepare data for the fragment shader.

顶点着色器的主要目标是转换顶点的坐标。次要目标是准备片段着色器所需的数据。

最核心的就是这个函数：

virtual Vec4f vertex(VertexInfoBase* vertexInfo) = 0;

会接受一个 VertexInfoBase 类型的变量，然后返回经过 MVP 变换后的顶点坐标。VertexInfoBase 是什么？在 OpenGL 中，我们可以定义一些缓冲区来为顶点着色器输入一些变量（坐标、法线、纹理坐标），每个顶点的数据不一样。VertexInfoBase 就是我用来模仿为顶点着色器输入变量的方法：

// 顶点所需的信息
struct VertexInfoBase
{size_t index;
};

保存了当前顶点在三角形的 index，对于各种不同的自定义着色器，我们所需的顶点信息不同，可以通过继承 VertexInfoBase 来添加一些属性：

struct PhongVertexInfo : VertexInfoBase
{Vec3f location;Vec2f textureCoord;Vec3f normal;
};

顶点着色器会定义一些 varying 变量，插值后给片段着色器使用：

virtual void ConfirmVaryingVar() = 0;// 定义varying变量template<typename T>
void AddVaryingVar(const std::string& name)
{m_program->AddVaryingVar<T>(name);
}
template<typename T>
void SetVaryingVar(const std::string& name, size_t index, const T& value)
{m_program->SetVaryingVar<T>(name, value, index);
}

FragmentShader

对于片段着色器，它的功能如下：

The main goal of the fragment shader - is to determine the color of the current pixel. Secondary goal - we can discard current pixel by returning true.

片段着色器的主要目标是确定当前像素的颜色。次要目标——我们可以通过返回 true 来丢弃当前像素。

最核心的函数是这个：

virtual bool fragment(Vec3f barycentric_coords, TGAColor& color) = 0;

会接受当前像素坐标对应的重心坐标，用于插值得到当前像素的属性。为什么要这么做？其实是我还没想到简易的架构，可以不输入重心坐标而自动获得插值后的属性，所以需要用一个函数显式获得：

template<typename T>
T GetInterVaryingVar(const std::string& name, const Vec3f& barycentric_coords)
{std::array<T, 3> varyings;T res{};for (int i = 0; i < 3; i++){varyings[i] = m_program->GetVaryingVar<T>(name, i);res = res + varyings[i] * barycentric_coords[i];}return res;
}

Draw

最后来介绍 glProgram 的 Draw 函数，其实这里面的代码就是将之前 triangle 函数与 drawModel 的功能合并。

void Draw(TGAImage& target, float* zbuffer, const std::array<VertexInfoBase*, 3>& vertexInfos);// 绘制一个三角面

首先会调用顶点着色器获得顶点对应的屏幕坐标：

Vec3f viewport_coords[3];
for (int i = 0;i < 3;i++)
{// 顶点着色器返回投影坐标vertexInfos[i]->index = i;Vec4f coord = m_vertexShader->vertex(vertexInfos[i]);// 透视除法coord = coord / coord.w;// 视口变换viewport_coords[i] = m_viewport * coord;
}

然后就是计算三个顶点的包围盒：

// 包围盒范围
Vec2f bboxmin(width - 1, height - 1);
Vec2f bboxmax(0, 0);
bboxmin.x = std::min({ bboxmin.x, viewport_coords[0].x, viewport_coords[1].x, viewport_coords[2].x});
bboxmin.y = std::min({ bboxmin.y, viewport_coords[0].y, viewport_coords[1].y, viewport_coords[2].y });
bboxmax.x = std::max({ bboxmax.x, viewport_coords[0].x, viewport_coords[1].x, viewport_coords[2].x });
bboxmax.y = std::max({ bboxmax.y, viewport_coords[0].y, viewport_coords[1].y, viewport_coords[2].y });

遍历包围盒的每个像素：

for (int x = bboxmin.x; x <= bboxmax.x; x++)
{for (int y = bboxmin.y; y <= bboxmax.y; y++){······}
}

循环内先获得当前像素的重心坐标，然后插值获得深度值：

Vec3f P = Vec3f(x, y, 0);
Vec3f bc_screen = glm::barycentric(viewport_coords[0], viewport_coords[1], viewport_coords[2], P);
if (bc_screen.x < 0 || bc_screen.y < 0 || bc_screen.z < 0) continue;
if (x < 0 || x >= width || y < 0 || y >= height)
{continue;
}
// 重心坐标插值
P.z = bc_screen.x * viewport_coords[0].z + bc_screen.y * viewport_coords[1].z + bc_screen.z * viewport_coords[2].z;
if (P.z < 0 || P.z > 1 || zbuffer[x + y * width] < P.z)
{continue;
}

深度测试与裁剪判断通过之后，就会调用片段着色器来获得当前像素的颜色值：

TGAColor color;
bool bDiscard = m_fragmentShader->fragment(bc_screen, color);
if (!bDiscard)
{zbuffer[x + y * width] = P.z;target.set(x, y, color);
}

main

在框架的基础上，来看看我们实现之前的 Phong Shading 需要干些什么。

首先定义每个顶点所需的属性：

struct PhongVertexInfo : VertexInfoBase
{Vec3f location;// 位置Vec2f textureCoord;// 纹理坐标Vec3f normal;// 法线
};

来看看顶点着色器：

class PhongVertexShader : public VertexShader
{
public:// 确定有哪些 Varying 变量virtual void ConfirmVaryingVar() override{AddVaryingVar<Vec2f>("textureCoord");AddVaryingVar<Vec3f>("normal");}virtual Vec4f vertex(VertexInfoBase* vertexInfos) override{// 解码顶点属性实际类型auto* info = static_cast<PhongVertexInfo*>(vertexInfos);// 获得矩阵glm::mat4 modelMatrix = GetUniformVar<glm::mat4>("Model");glm::mat4 viewMatrix = GetUniformVar<glm::mat4>("View");glm::mat4 proMatrix = GetUniformVar<glm::mat4>("Proj");// 设置 Varying 变量SetVaryingVar<Vec2f>("textureCoord", info->index, info->textureCoord);glm::mat3 normalMatrix = modelMatrix.inverse().transpose().to_mat3();Vec3f normal = normalMatrix * info->normal;SetVaryingVar<Vec3f>("normal", info->index, normal);return proMatrix * viewMatrix * modelMatrix * Vec4f(info->location, 1.f);}
};

再看看片段着色器：

class PhongFragmentShader : public FragmentShader
{
public:virtual bool fragment(Vec3f barycentric_coords, TGAColor& color) override{Vec3f light_dir = GetUniformVar<Vec3f>("lightDir");// 光线方向TGAImage* tex = GetUniformVar<TGAImage*>("texture");// 纹理贴图glm::mat4 modelMatrix = GetUniformVar<glm::mat4>("Model");light_dir = modelMatrix * Vec4f(light_dir, 0.f);light_dir.normalize();Vec3f normal = GetInterVaryingVar<Vec3f>("normal", barycentric_coords);// 获得插值后的法线normal.normalize();// 插值之后记得归一化Vec2f textureCoord = GetInterVaryingVar<Vec2f>("textureCoord", barycentric_coords);// 获得插值后的纹理坐标TGAColor diffuse = tex->texture(textureCoord.x, textureCoord.y);// 采样得到纹理颜色float intensity = std::max(0.f, -normal.dot(light_dir));// 计算光照强度color = TGAColor(diffuse.r * intensity, diffuse.g * intensity, diffuse.b * intensity, 255);// 设置颜色return false;// do not discard the pixel}
};

在着色器之外呢？

先注册片段着色器与顶点着色器、设置视口：

phongProgram->RegisterVertexShader(vertexShader);
phongProgram->RegisterFragmentShader(fragmentShader);
phongProgram->SetViewPort(width, height);

确定有哪些 uniform 变量：

phongProgram->AddUniformVar<glm::mat4>("Model");
phongProgram->AddUniformVar<glm::mat4>("View");
phongProgram->AddUniformVar<glm::mat4>("Proj");
phongProgram->AddUniformVar<Vec3f>("lightDir");
phongProgram->AddUniformVar<TGAImage*>("texture");

设置 uniform 变量：

glm::mat4 viewMatrix = glm::lookAt(Vec3f(0, 0, 2), Vec3f(0, 0, 0), Vec3f(0, 1, 0));
glm::mat4 projMatrix = glm::perspective(45, float(width) / height, 0.1f, 100.f);
glm::mat4 modelMatrix;
modelMatrix = glm::translate(modelMatrix, Vec3f(-0.5, 0, 0));
modelMatrix = glm::rotate(modelMatrix, 45, Vec3f(0, 1, 0));
modelMatrix = glm::scale(modelMatrix, Vec3f(0.5, 0.5, 0.5));
phongProgram->SetUniformVar<glm::mat4>("Model", modelMatrix);
phongProgram->SetUniformVar<glm::mat4>("View", viewMatrix);
phongProgram->SetUniformVar<glm::mat4>("Proj", projMatrix);
phongProgram->SetUniformVar<Vec3f>("lightDir", light_dir);
phongProgram->SetUniformVar<TGAImage*>("texture", texture);

遍历模型的每个三角面并绘制：

std::array<VertexInfoBase*, 3> vertexInfos;
for (int i = 0; i < model->nfaces(); i++)
{std::vector<int> face_v = model->face_v(i);std::vector<int> face_vt = model->face_vt(i);std::vector<int> face_vn = model->face_vn(i);for (int j = 0; j < 3; j++){auto* info = new PhongVertexInfo();info->location = Vec4f(model->vert(face_v[j]), 1.f);info->textureCoord = model->vertTexture(face_vt[j]);info->normal = model->vertNormal(face_vn[j]);vertexInfos[j] = info;}phongProgram->Draw(result, zbuffer, vertexInfos);
}

over！来看看效果：

效果还不错，整个框架是我花了大概一天时间写出来的，还有很多不成熟的地方，大家可以在这上面自己改进改进，代码仓库在文章开头。

本次代码提交记录：

1. 提交的代码，片段着色器处 light_dir 忘记乘上模型变换矩阵了
2. 这个版本的 LookAt 函数存在错误！2025-4-29 16.23 提交修复

参考

• tinyrenderer