渲染器开发 on wanfeng

OpenGLRender开发记录（3）：后处理Pass（大气渲染）

Sun, 19 Oct 2025 14:20:40 +0800

大气渲染

渲染方法分析

光如何与Participating Media Particles（包括小粒子（气体分子），大粒子（气溶胶、水滴、烟雾））交互？

吸收
外散射
自发光
内散射 M点为着色点，那从P点看向M点时，需要计算两个值（1）Transmittance(透光度):有多少光能透过来(2) Scattering：粒子会把来自各个方向的光散射到观察方向

真实大气物理

太阳光由不同波长的光组成，人眼把这些波长光的组合定义成了白色而已大气中包含两种粒子：气体分子一般小于这些光的波长，其他的气溶胶大于这些波长有两种完全不同的散射模型来末说这两种粒子的散射

瑞利散射 Rayleigh Scattering （针对气体分子）

散射特点：对波长敏感，短波长（蓝光）更容易被散射，所以天空是蓝色。各种波长光散射形状差不多，但是强度不同，各个方向上散射大致相同具体的模型公式有两部分，前半部分是各种系数、后半部分是模型形状（花生形状）。公式表达含义是在在散射方向 θ上的散射光强，它与光的波长、海拔高度有关直观理解天空为什么是蓝色，太阳直射时，大量的蓝光被散射开来，红光散射比较弱。太阳落山时，大量的蓝光散射到了太空和地面，红光的散射效果体现了出来

米氏散射 Mie scattering （针对大分子）

米氏散射对波长依赖弱 → 散射几乎不偏色，所以雾和云看起来白色或灰色所有波长的光一视同仁，但是不同的散射方向能力有巨大差异奇怪的形状。

光的吸收

这两种气体会吸收光，但模型过于复杂，在渲染中假设他们均匀分布

单次散射和多次散射

单次散射只考虑太阳光到一个粒子后散射到摄像机多次散射就是考虑一个粒子散射到另一个粒子这样不停散射最终到达摄像机主要看山的背面，多次散射才能表达出这种感觉

大气渲染实践

瑞利散射和米氏散射建模

参考别的论文，他们是用h = 0时求出的解作为基准，用一个高度衰减函数进行高度衰减。函数都有两部分，一部分求解散射系数一部分求解相函数瑞利散射：

vec3 RayleighCoefficient(in AtmosphereParameter param, float h)
{
    const vec3 sigma = vec3(5.802, 13.558, 33.1) * 1e-6;
    float H_R = param.RayleighScatteringScalarHeight;
    float rho_h = exp(-(h / H_R));
    return sigma * rho_h;
}

float RayleighPhase(in AtmosphereParameter param, float cos_theta)
{
    return (3.0 / (16.0 * 3.14159265)) * (1.0 + cos_theta * cos_theta);
}

米氏散射多一个g，用来控制米氏散射的形状


vec3 MieCoefficient(AtmosphereParameter param, float h)
{
    const vec3 sigma = vec3(3.996e-6);
    float H_M = param.MieScatteringScalarHeight;
    float rho_h = exp(-(h / H_M));
    return sigma * rho_h;
}

float MiePhase(AtmosphereParameter param, float cos_theta)
{
    float g = param.MieAnisotropy;

    float a = 3.0 / (8.0 * 3.14159265);
    float b = (1.0 - g * g) / (2.0 + g * g);
    float c = 1.0 + cos_theta * cos_theta;
    float d = pow(1.0 + g * g - 2.0 * g * cos_theta, 1.5);

    return a * b * (c / d);
}

散射结果，将两种散射结果相加，得到太阳光被一个粒子散射到摄像机的三色比例

vec3 Scattering(AtmosphereParameter param, vec3 p, vec3 lightDir, vec3 viewDir)
{
    float cos_theta = dot(lightDir, viewDir);

    float h = length(p) - param.PlanetRadius;
    vec3 rayleigh = RayleighCoefficient(param, h) * RayleighPhase(param, cos_theta);
    vec3 mie = MieCoefficient(param, h) * MiePhase(param, cos_theta);

    return rayleigh + mie;
}

吸收建模

瑞利散射没有吸收，米氏有吸收，另外大气中的臭氧也有吸收效应

vec3 MieAbsorption(AtmosphereParameter param, float h)
{
    const vec3 sigma = vec3(4.4e-6);
    float H_M = param.MieScatteringScalarHeight;
    float rho_h = exp(-(h / H_M));
    return sigma * rho_h;
}

vec3 OzoneAbsorption(AtmosphereParameter param, float h)
{
    const vec3 sigma_lambda = vec3(0.650, 1.881, 0.085) * 1e-6;
    float center = param.OzoneLevelCenterHeight;
    float width = param.OzoneLevelWidth;
    float rho = max(0.0, 1.0 - abs(h - center) / width);
    return sigma_lambda * rho;
}

透光率

透光率与经过的路径和吸收有关，由于每个点的吸收不同，所以采样处理

vec3 Transmittance(in AtmosphereParameter param, vec3 p1, vec3 p2)
{
    const int N_SAMPLE = 32;

    vec3 dir = normalize(p2 - p1);
    float distance = length(p2 - p1);
    float ds = distance / float(N_SAMPLE);
    vec3 sum = vec3(0.0);
    vec3 p = p1 + dir * ds * 0.5;

    for(int i = 0; i < N_SAMPLE; i++)
    {
        float h = length(p) - param.PlanetRadius;

        vec3 scattering = RayleighCoefficient(param, h) + MieCoefficient(param, h);
        vec3 absorption = OzoneAbsorption(param, h) + MieAbsorption(param, h);
        vec3 extinction = scattering + absorption;

        sum += extinction * ds;
        p += dir * ds;
    }

    // 计算透光率
    return exp(-sum);
}

单次散射

首先要有一个光线与球体求交的计算

float RayIntersectSphere(vec3 center, float radius, vec3 rayStart, vec3 rayDir)
{
    float OS = length(center - rayStart);
    float SH = dot(center - rayStart, rayDir);
    float OH = sqrt(OS * OS - SH * SH);

    // 射线未击中球体
    if(OH > radius) return -1.0;

    float PH = sqrt(radius * radius - OH * OH);

    // 使用最小正距离
    float t1 = SH - PH;
    float t2 = SH + PH;
    float t = (t1 < 0.0) ? t2 : t1;

    return t;
}

对于单次散射而言，从摄像机位置RM获得每一个采样点，每一个采样点进行光照计算，最后汇总

vec3 singleScatterSkyColor(vec3 camPosInPlanet, AtmosphereParameter param, vec3 viewDir){
    vec3 lightDir = normalize(-lightPos);
    int N_SAMPLE = 16;
    float dstToPlanet = RayIntersectSphere(vec3(0,0,0), param.PlanetRadius, camPosInPlanet, viewDir);
    float dstToAtmosphere = RayIntersectSphere(vec3(0,0,0), param.PlanetRadius + param.AtmosphereHeight, camPosInPlanet, viewDir);
    // 还没实现别的渲染，纯黑的，先不判断
//    if(dstToPlanet > 0.0 || dstToAtmosphere < 0.0){
//        return vec3(0);
//    }
    float stepSize = dstToAtmosphere / float(N_SAMPLE);
    vec3 testPoint = camPosInPlanet;
    vec3 color = vec3(0);
    for (int i =0; i<N_SAMPLE; i++) {
        // 太阳方向rayMarching的距离
        float disToLight = RayIntersectSphere(vec3(0,0,0), param.PlanetRadius + param.AtmosphereHeight, testPoint, lightDir);
        // 太阳到采样点之间的透光率
        vec3 tramsmittanceLightToTest = Transmittance(param,testPoint + lightDir * disToLight,testPoint);
        // 散射光比例
        vec3 scattering = Scattering(param, testPoint, lightDir, viewDir);
        // 摄像机到采样点之间的透光度
        vec3 tramsmittanceTestToCam = Transmittance(param,testPoint,camPosInPlanet);
        // 采样点的光照计算。// TODO：需要把太阳光放大很多倍才有比较亮的效果（因为ToneMapping压黑的）
        vec3 inScattering = tramsmittanceLightToTest * scattering * tramsmittanceTestToCam  * stepSize * lightColor * 4;
        testPoint += viewDir * stepSize;
        color += inScattering;
    }
    float cosAngle = dot(viewDir, lightDir);
    if(cosAngle > cos(0.02)) {
        // 视线指向太阳圆盘
        color += Transmittance(param, lightPos + vec3(0,param.PlanetRadius + param.AtmosphereHeight,0), camPosInPlanet) * lightColor;
    }
    return color;
}

透射率预计算

对于T2，因为每次都是固定在一个方向上进行透射率累加，所以一边计算一边缓存即可，不用每次都从头开始计算透射率，主要来看T1的预计算（因为每次计算太阳光到采样点的透射率都是一个全新的方向，不能利用之前的数据）地球是圆的，大气层具有对称性，所以左右晃动不会影响透射率也就是说，对于某一高度的着色点，不同方向上的透射率只和天顶角有关。高度和天顶角两个参数就能确定透射率。（待实现，可参考https://zhuanlan.zhihu.com/p/595576594）

展示

这里还有一点点遮挡关系没有出来，不过不是重点

多重散射

就像渲染方程，除了来自光源的直接光照+散射，场景中其他方向的粒子也会散射，也会对着色点有贡献，所以要积分获得整个球面上所有方向上的贡献之和，同时还有大量预计算这就做到了多重散射。这块的实现暂时放弃，同样可参考https://zhuanlan.zhihu.com/p/595576594

OpenGLRender开发记录（2）：阴影（shadowMap，PCF，PCSS）

Sun, 19 Oct 2025 14:19:37 +0800

已实现功能

除了上次实现IBL之外，项目目前新增了imGUI的渲染，更方便地进行调试可以随意切换IBL贴图、模型控制、灯光控制灯。并且添加了一个PBR材质的地板。下一步就是实现阴影

阴影

shadowMap

这个东西很简单，直接实现了，不讲原理

PCF

取周围一圈的像素求平均，让阴影更软

PCSS

① Blocker Search 阶段（寻找遮挡者）目的：估算遮挡物与被遮挡物之间的距离 → 用于计算 penumbra（阴影模糊程度）

步骤：从当前 fragment 的 light space 坐标，投影到 shadow map 中：projCoords.xy

以该位置为中心，在 shadow map 中进行小范围采样（通常 3x3 或 5x5）：

收集所有比当前 fragment 深度更小的样本（说明它们挡住了光）

累加这些“遮挡者”的深度值

记录 blocker 数量

若存在 blocker：

计算平均 blocker 深度 avgBlockerDepth

② Penumbra Size 计算阶段（决定模糊程度）目的：用当前 fragment 深度与 avgBlockerDepth 的距离估算光源发散导致的阴影模糊程度

③ Filtering 阶段（模糊阴影边缘）目的：根据 penumbra 大小，用可变范围 PCF 模糊阴影边缘

所以PCSS可以叫自适应PCF

实现

shadowMap

初始化一个FBO用于shadowMap的渲染，创建一张纹理存储深度结果

void ShadowPass::init() {
    glGenFramebuffers(1, &shadowFBO);

    // 创建深度纹理
    glGenTextures(1, &shadowMap);
    glBindTexture(GL_TEXTURE_2D, shadowMap);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT,
                 scene.width, scene.height, 0, GL_DEPTH_COMPONENT, GL_FLOAT, NULL);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    // attach 深度纹理到FBO
    glBindFramebuffer(GL_FRAMEBUFFER, shadowFBO);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, shadowMap, 0);
    glDrawBuffer(GL_NONE);
    glReadBuffer(GL_NONE);
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
    isInit = true;
}

下一步就是在光源视角下渲染，首先得找到摄像机的位置，其实就是MVP矩阵的VP用光源而不是用摄像机，下面是对于平行光的shadowMap渲染

void ShadowPass::render() {
    if (!isInit){
        std::cout << "shadowPass init" << std::endl;
        return;
    }
    glViewport(0, 0, scene.width, scene.height);
    glBindFramebuffer(GL_FRAMEBUFFER, shadowFBO);
    glClear(GL_DEPTH_BUFFER_BIT);

//    glCullFace(GL_FRONT); // 可选，防止 Peter-panning
    shadowShader.bind();

    glm::mat4 lightProjection, lightView;
    float orthoSize = 10.0f;
    float near_plane = 0.1f;
    float far_plane = 100.0f; // 你可以再根据场景大小动态调整
    // 平行光使用正交投影
    lightProjection = glm::ortho(-orthoSize, orthoSize, -orthoSize, orthoSize, near_plane, far_plane);
    // TODO：只实现了平行光，他的position存储的是方向，而不是位置，所以要取反
    lightView = glm::lookAt(-scene.lights[0]->position * 10.0f, glm::vec3(0.0f), glm::vec3(0.0, 1.0, 0.0));
    lightSpaceMatrix = lightProjection * lightView;
    shadowShader.setMat4("lightSpaceMatrix", lightSpaceMatrix);
    // 渲染所有模型（只写深度）
    for (auto& model : scene.models) {
        glm::mat4 modelMatrix = model.getModelMatrix();
        shadowShader.setMat4("model", modelMatrix);
        model.draw(shadowShader);
    }
    shadowShader.unBind();
//    glCullFace(GL_BACK);
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
    glViewport(0, 0, scene.width, scene.height);
}

顶点着色器，物体要乘以lightSpaceMatrix来转到光源视角下

#version 330 core
layout (location = 0) in vec3 aPos;

uniform mat4 model;
uniform mat4 lightSpaceMatrix;

void main() {
    gl_Position = lightSpaceMatrix * model * vec4(aPos, 1.0);
}

片段着色器不需要执行操作

#version 330 core
void main() {
    // 空着就行，只写深度
}

下一步将生成的shadowMap传递到lightPass来参与光照计算，另外需要把lightMatrix也传递过去，用于把模型距离值转移到视角下来进行比较

float ShadowCalculation(vec3 fragPosWorld, vec3 normal) {
    vec4 fragPosLightSpace = lightSpaceMatrix * vec4(fragPosWorld, 1.0);
    vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w;
    projCoords = projCoords * 0.5 + 0.5; // [-1,1] → [0,1]

    // 从深度贴图采样
    float closestDepth = texture(shadowMap, projCoords.xy).r;
    float currentDepth = projCoords.z;

    // 简单 bias 防止 shadow acne
//    float bias = max(0.005 * (1.0 - dot(normal, normalize(lightPos))), 0.001);

    // 超出边界不产生阴影
    if (projCoords.z > 1.0)
    return 0.0;

    // 进行一次比较
    return (currentDepth) > closestDepth ? 1.0 : 0.0;
}

有了计算阴影的函数后，只需要在计算光照的最后*（1-shadow）

`1`	`vec3 Lo = (kD * albedo / PI + specular) * radiance * NdotL * (1-ShadowCalculation(WorldPos, N));`

结果如下，经典的自阴影现象，主要原因就是shadowMap的分辨率不足，一些不在同一高度的位置被记录了相同高度，在主摄像机渲染时，某个位置在shadowMap存储的高度比自己本来还要高，就会被认为是阴影（但是这种情况下很好分辨光源摄像机的覆盖范围，方便调试🙂）当我把shadowMap的分辨率提高后，自然就消失了，但这肯定不是最优通常的做法是加一个自偏移，也就是说shadowMap存的高度和我用来比较的高度差异不超过bias，就认为没有阴影

float ShadowCalculation(vec3 fragPosWorld, vec3 normal) {
    vec4 fragPosLightSpace = lightSpaceMatrix * vec4(fragPosWorld, 1.0);
    vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w;
    projCoords = projCoords * 0.5 + 0.5; // [-1,1] → [0,1]

    // 从深度贴图采样
    float closestDepth = texture(shadowMap, projCoords.xy).r;
    float currentDepth = projCoords.z;

    // 简单 bias 防止 shadow acne
    float bias = max(0.005 * (1.0 - dot(normal, normalize(lightPos))), 0.001);

    // 超出边界不产生阴影
    if (projCoords.z > 1.0)
    return 0.0;

    // 进行一次比较
    return (currentDepth - bias) > closestDepth ? 1.0 : 0.0;
}

PCF

阴影问题解决了，下面就是提升效果，当前的阴影是硬阴影，锯齿很严重 PCF思路就是取周围像素的shadow来取平均，柔化阴影边界

        // --- PCF ---
        float shadow = 0.0;
        ivec2 texSize = textureSize(shadowMap, 0);
        vec2 texelSize = 1.0 /vec2(texSize);
        int range = 10;  // 5x5
        int samples = 0;

        for (int x = -range; x <= range; ++x) {
            for (int y = -range; y <= range; ++y) {
                float pcfDepth = texture(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
                shadow += (currentDepth - bias > pcfDepth) ? 1.0 : 0.0;
                samples++;
            }
        }
        shadow /= float(samples);
        return shadow;

PCSS

三步走，一些参数我已经提取出去当uniform，可以控制第一步的搜索半径、第二步的半影大小、以及控制一下最大的滤波核大小

        float avgBlockerDepth = 0.0;
        int blockers = 0;

        ivec2 texSize = textureSize(shadowMap, 0);
        vec2 texelSize = 1.0 / vec2(texSize);

        int searchRadius = int(PCSSBlockerSearchRadius);
        for (int x = -searchRadius; x <= searchRadius; ++x) {
            for (int y = -searchRadius; y <= searchRadius; ++y) {
                float sampleDepth = texture(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
                if (sampleDepth < currentDepth - bias) {
                    avgBlockerDepth += sampleDepth;
                    blockers++;
                }
            }
        }
        if (blockers == 0) return 0.0;
        avgBlockerDepth /= blockers;
        float penumbra = (currentDepth - avgBlockerDepth) * PCSSScale;
        int kernel = int(clamp(penumbra * float(texSize.x), 1.0, PCSSKernelMax));
        float shadow = 0.0;
        for (int x = -kernel; x <= kernel; ++x) {
            for (int y = -kernel; y <= kernel; ++y) {
                float sampleDepth = texture(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
                shadow += (currentDepth - bias > sampleDepth) ? 1.0 : 0.0;
            }
        }
        shadow /= float((2 * kernel + 1) * (2 * kernel + 1));
        return shadow;

阴影

三种阴影可以写在一起

float ShadowCalculation(vec3 fragPosWorld, vec3 normal) {
    vec4 fragPosLightSpace = lightSpaceMatrix * vec4(fragPosWorld, 1.0);
    vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w;
    projCoords = projCoords * 0.5 + 0.5;

    if (projCoords.z > 1.0) return 0.0;

    float closestDepth = texture(shadowMap, projCoords.xy).r;
    float currentDepth = projCoords.z;
    float bias = max(0.005 * (1.0 - dot(normal, normalize(lightPos))), 0.001);

    // shadow type switching
    if (shadowType == 0) {
        return 0.0; // no shadow
    }
    else if (shadowType == 1) {
        return (currentDepth - bias > closestDepth) ? 1.0 : 0.0; // hard shadow
    }
    else if (shadowType == 2) {
        // --- PCF ---
        float shadow = 0.0;
        ivec2 texSize = textureSize(shadowMap, 0);
        vec2 texelSize = 1.0 /vec2(texSize);
        int range = pcfScope;
        int samples = 0;

        for (int x = -range; x <= range; ++x) {
            for (int y = -range; y <= range; ++y) {
                float pcfDepth = texture(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
                shadow += (currentDepth - bias > pcfDepth) ? 1.0 : 0.0;
                samples++;
            }
        }
        shadow /= float(samples);
        return shadow;
    }
    else if (shadowType == 3) {
        float avgBlockerDepth = 0.0;
        int blockers = 0;

        ivec2 texSize = textureSize(shadowMap, 0);
        vec2 texelSize = 1.0 / vec2(texSize);

        int searchRadius = int(PCSSBlockerSearchRadius);
        for (int x = -searchRadius; x <= searchRadius; ++x) {
            for (int y = -searchRadius; y <= searchRadius; ++y) {
                float sampleDepth = texture(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
                if (sampleDepth < currentDepth - bias) {
                    avgBlockerDepth += sampleDepth;
                    blockers++;
                }
            }
        }
        if (blockers == 0) return 0.0;
        avgBlockerDepth /= blockers;
        float penumbra = (currentDepth - avgBlockerDepth) * PCSSScale;
        int kernel = int(clamp(penumbra * float(texSize.x), 1.0, PCSSKernelMax));
        float shadow = 0.0;
        for (int x = -kernel; x <= kernel; ++x) {
            for (int y = -kernel; y <= kernel; ++y) {
                float sampleDepth = texture(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
                shadow += (currentDepth - bias > sampleDepth) ? 1.0 : 0.0;
            }
        }
        shadow /= float((2 * kernel + 1) * (2 * kernel + 1));
        return shadow;
    }

    return 0.0;
}

OpenGLRender开发记录（1）：基于图像的光照（IBL）

Sun, 19 Oct 2025 14:13:50 +0800

已实现功能

前边基础架构部分就不专门写了。这里展示一下已有的功能

延迟渲染管线
G-Buffer的可视化调试
PBR材质直接光照渲染下面开始研究IBL在OpenGL中的实现

理论准备

基于图像的光照(Image based lighting, IBL)将周围环境整体视为一个大光源。IBL 通常使用立方体贴图的每个像素视为光源

在IBL中，不只有直接光照对着色点有贡献，而是四面八方的环境光都有贡献。之前总觉得为什么渲染方程中有积分，为什么在shader中没见积分运算，原来是它只是一个理想状态，要计算所有方向的光照是很困难的，给定任何方向向量 wi，我们需要一些方法来获取这个方向上场景的辐射度，并且需要实时计算积分。可以使用蒙特卡洛采样来近似积分值，但IBL并不是这样。说实话听YLQ讲，越听越是迷糊。

下面看看IBL是如何避免积分运算的

避免积分运算

首先渲染方程的形式如下，已经被分成了漫反射和镜面反射两部分进一步把+号拆开，可以拆成两个积分

漫反射部分

首先来看漫反射部分，这里用的BRDF是Lambertian模型，它是一个常数，所以可以直接提出去，分子代表颜色另外kd的计算，基本原理就是先算出漫反射的比例，再进一步去除金属度的影响（金属没有漫反射），为什么这样设计，我查AI应该是迪士尼的论文提出的。 kd与光线方向有关系（因为F的计算需要wi），所以不能移出积分，做一个近似操作，本来F需要wi和半程向量来计算，改为用摄像机观察方向w0和法线方向来近似，这样就可以挪出去了其中（F0表示垂直入射时的反射率）

最终

积分内部就只有光源和cos了。到现在对于不同的法线方向n，就可以预计算一个积分值。也就是说这张贴图存储的是不同法线方向上的积分值这样分析半天，其实从理论上想，也应该这样，我不管从什么方向上看（即不同的w0，irrandance是方向无关的）当我观察一个点时，环境贴图对他的贡献都是它法线为中心形成的半球上的光对他的贡献之和（因为是漫反射）

因此我们可以预计算这个积分值，得到一个 cubemap，称为 irradiance map。积分方法就是蒙特卡洛积分，我们可以简单的在半球面上均匀采样。下面给出learnOpenGL的采样方案首先改为球面坐标系用黎曼积分来近似

注意实际场景中 = 多个局部环境（多个“局部场景”）在全局场景下：每个区域（Probe volume）都有自己的局部环境 map；然后通过探针插值（或者 voxel GI）做出空间连续的光照过渡。比如室内室外的map肯定得不一样才对，即使法线方向一致。这就是为什么要用探针

镜面反射部分

这部分比较夸张，与w0、法线方向、以及BRDF中各种参数有关，即使一个方向向量用球面坐标系，也有9个因素。所以不能直接预计算。首先基本思路是蒙特卡罗积分，但是当前采样方法实时太慢 Epic提出了很好的解决方案：分割求和近似法（split sum approximation）

首先思路是把积分中的光照项提出来如果想求解提出来的这一项Lc(wo)是什么，就需要进行蒙特卡洛积分运算，运算通过法线分布函数进行采样化简，化简过程如下（本质是把法线分布函数的PDF求出来带进去，进行分子分母化简，得到最终结果）进一步近似，F对结果影响不大，直接去掉了

再近似，把w0和法线方向都近似成R(反射方向)，这样预计算就与观察无关了（把摄像机方向、法线方向全部换成反射方向R来计算），这样处理会让掠射角处理出问题

总结来说就是利用了各种近似手段把这个积分拆成了两部分，第一部分放在坐标，剩余放在右边，通过各种化简近似出第一部分是什么，然后放回原式第一部分的预计算其实就是在以反射方向为中心，整个半球的光照进行积分的预计算，但是需要通过粗糙度来进行mipmap，因为各种近似的前提是法线分布函数，他是由粗糙度参与控制的，越粗糙的表面，越要用level更高的mipmap

第一部分通过在法线分布函数上进行采样蒙特卡洛积分进行预计算下面看第二部分，他的参数包括w0,n,F0(通过金属度和albedo决定)和粗糙度。 F0是常数，看看怎么挪出去又是一个拆分，把积分拆成两项（这里就是拆加法，没有近似），然后把F0挪出去，得到关于scale和bias两项的计算这两项用法线分布函数进行蒙特卡洛积分，可以抵消很多项。拆掉F0后，积分结果只和cos和粗糙度了，用一个2D纹理的两个通道存储结果即可。这个预计算部分叫做LUT，这个 LUT 是由 BRDF 决定的，所以确定的 BRDF 就有确定的 LUT。

OpenGL实现

HDR与cubemap

在 PBR 渲染管线中考虑高动态范围(High Dynamic Range, HDR)的场景光照非常重要。由于 PBR 的大部分输入基于实际物理属性和测量，因此为入射光值找到其物理等效值是很重要的 第一步：加载HDR图片，存储为纹理

#include "stb_image.h"
stbi_set_flip_vertically_on_load(true);
int width, height, nrComponents;
float *data = stbi_loadf("newport_loft.hdr", &width, &height, &nrComponents, 0);
unsigned int hdrTexture;
if (data)
{
    glGenTextures(1, &hdrTexture);
    glBindTexture(GL_TEXTURE_2D, hdrTexture);
    // 这里必须用32F，有些HDR图片太亮了
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB32F, width, height, 0, GL_RGB, GL_FLOAT, data); 
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    stbi_image_free(data);
}
else
{
    std::cout << "Failed to load HDR image." << std::endl;
}

第二步：从纹理到立方体贴图 顶点着色器传递世界坐标

#version 330 core
layout (location = 0) in vec3 aPos;

out vec3 localPos;

uniform mat4 projection;
uniform mat4 view;

void main()
{
    localPos = aPos;  
    gl_Position =  projection * view * vec4(localPos, 1.0);
}

片段着色器，在HDR图上进行采样

#version 330 core
out vec4 FragColor;
in vec3 localPos;

uniform sampler2D equirectangularMap;

const vec2 invAtan = vec2(0.1591, 0.3183);
vec2 SampleSphericalMap(vec3 v)
{
    vec2 uv = vec2(atan(v.z, v.x), asin(v.y));
    uv *= invAtan;
    uv += 0.5;
    return uv;
}

void main()
{       
    vec2 uv = SampleSphericalMap(normalize(localPos)); // make sure to normalize localPos
    vec3 color = texture(equirectangularMap, uv).rgb;

    FragColor = vec4(color, 1.0);
}

要将等距柱状投影图转换为立方体贴图，我们需要渲染一个（单位）立方体，并从内部将等距柱状图投影到立方体的每个面，先创建一张立方体贴图

unsigned int envCubemap;
glGenTextures(1, &envCubemap);
glBindTexture(GL_TEXTURE_CUBE_MAP, envCubemap);
for (unsigned int i = 0; i < 6; ++i)
{
    // note that we store each face with 16 bit floating point values
    glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB16F, 
                 512, 512, 0, GL_RGB, GL_FLOAT, nullptr);
}
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

对同一个立方体渲染六次，每次面对立方体的一个面，并用帧缓冲对象记录其结果

unsigned int captureFBO, captureRBO;
glGenFramebuffers(1, &captureFBO);
glGenRenderbuffers(1, &captureRBO);

glBindFramebuffer(GL_FRAMEBUFFER, captureFBO);
glBindRenderbuffer(GL_RENDERBUFFER, captureRBO);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, 512, 512);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, captureRBO);

下面正式进入转换

// 让摄像机对准6个轴方向
glm::mat4 captureProjection = glm::perspective(glm::radians(90.0f), 1.0f, 0.1f, 10.0f);
glm::mat4 captureViews[] = 
{
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(-1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f,  1.0f,  0.0f), glm::vec3(0.0f,  0.0f,  1.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f, -1.0f,  0.0f), glm::vec3(0.0f,  0.0f, -1.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f,  0.0f,  1.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f,  0.0f, -1.0f), glm::vec3(0.0f, -1.0f,  0.0f))
};

// convert HDR equirectangular environment map to cubemap equivalent
equirectangularToCubemapShader.use();
equirectangularToCubemapShader.setInt("equirectangularMap", 0);
equirectangularToCubemapShader.setMat4("projection", captureProjection);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, hdrTexture);

glViewport(0, 0, 512, 512); // don't forget to configure the viewport to the capture dimensions.
glBindFramebuffer(GL_FRAMEBUFFER, captureFBO);
for (unsigned int i = 0; i < 6; ++i)
{
    equirectangularToCubemapShader.setMat4("view", captureViews[i]);
    // 把这 6 次渲染结果写入到立方体贴图的六个面上
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, 
                           GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, envCubemap, 0);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    renderCube(); // renders a 1x1 cube
}
glBindFramebuffer(GL_FRAMEBUFFER, 0);

还可以用这个立方体贴图来渲染天空盒 shader部分

#version 330 core
layout (location = 0) in vec3 aPos;

uniform mat4 projection;
uniform mat4 view;

out vec3 localPos;

void main()
{
    localPos = aPos;

    mat4 rotView = mat4(mat3(view)); // remove translation from the view matrix
    vec4 clipPos = projection * rotView * vec4(localPos, 1.0);

    gl_Position = clipPos.xyww;
}

#version 330 core
out vec4 FragColor;

in vec3 localPos;

uniform samplerCube environmentMap;

void main()
{
    vec3 envColor = texture(environmentMap, localPos).rgb;

    envColor = envColor / (envColor + vec3(1.0));
    envColor = pow(envColor, vec3(1.0/2.2)); 

    FragColor = vec4(envColor, 1.0);
}

代码部分

        // 天空盒
        glDepthFunc(GL_LEQUAL);
        skyboxShader.use();
        skyboxShader.setMat4("projection", scene.camera->getProjectionMatrix());
        skyboxShader.setMat4("view", scene.camera->getViewMatrix());
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_CUBE_MAP, envCubemap);
        scene.renderCube();
        glDepthFunc(GL_LESS);

到这里就得到了立方体贴图和天空盒渲染

irradance Map

预计算对于每个方向来说对半球进行积分的结果，当计算好后，每次需要漫反射，就可以通过法线方向得到漫反射值

`1`	`vec3 irradiance = texture(irradianceMap, N);`

这一步的做法与生成cubemap的做法一致，只是片段着色器不一致。由于辐照度图对所有周围的辐射值取了平均值，因此它丢失了大部分高频细节，所以我们可以以较低的分辨率（32x32）存储，我可以把它渲染成天空盒来看看，基本没有场景信息了，所以不需要高分辨率

GLuint preComputer::computeIrradianceMap(GLuint envCubemap)
{
    Shader irradianceMapShader = Shader("shader/irradianceMap.vert","shader/irradianceMap.frag");
    const glm::mat4 captureProjection = glm::perspective(glm::radians(90.0f), 1.0f, 0.1f, 10.0f);
    const glm::mat4 captureViews[] =
    {
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(-1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f,  1.0f,  0.0f), glm::vec3(0.0f,  0.0f,  1.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, -1.0f,  0.0f), glm::vec3(0.0f,  0.0f, -1.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f,  0.0f,  1.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f,  0.0f, -1.0f), glm::vec3(0.0f, -1.0f,  0.0f))
    };
    GLuint FrameBuffer;
    GLuint RenderBuffer;
    glGenFramebuffers(1, &FrameBuffer);
    glGenRenderbuffers(1, &RenderBuffer);
    unsigned int irradianceMap;
    glGenTextures(1, &irradianceMap);
    glBindTexture(GL_TEXTURE_CUBE_MAP, irradianceMap);
    for (unsigned int i = 0; i < 6; ++i)
    {
        glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB16F, 32, 32, 0,
                     GL_RGB, GL_FLOAT, nullptr);
    }
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    glBindFramebuffer(GL_FRAMEBUFFER, FrameBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, RenderBuffer);
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, 32, 32);
    irradianceMapShader.use();
    irradianceMapShader.setInt("environmentMap", 0);
    irradianceMapShader.setMat4("projection", captureProjection);
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_CUBE_MAP, envCubemap);

    glViewport(0, 0, 32, 32); // don't forget to configure the viewport to the capture dimensions.
    glBindFramebuffer(GL_FRAMEBUFFER, FrameBuffer);
    for (unsigned int i = 0; i < 6; ++i)
    {
        irradianceMapShader.setMat4("view", captureViews[i]);
        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
                               GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, irradianceMap, 0);
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

        scene.renderCube();
    }
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
}

具体的shader

#version 330 core
layout (location = 0) in vec3 aPos;

out vec3 WorldPos;

uniform mat4 projection;
uniform mat4 view;

void main()
{
    WorldPos = aPos;
    gl_Position =  projection * view * vec4(WorldPos, 1.0);
}

#version 330 core
out vec4 FragColor;
in vec3 WorldPos;

uniform samplerCube environmentMap;

const float PI = 3.14159265359;

void main()
{
    vec3 N = normalize(WorldPos);

    vec3 irradiance = vec3(0.0);

    // tangent space calculation from origin point
    vec3 up    = vec3(0.0, 1.0, 0.0);
    vec3 right = normalize(cross(up, N));
    up         = normalize(cross(N, right));

    float sampleDelta = 0.025;
    float nrSamples = 0.0;
    for(float phi = 0.0; phi < 2.0 * PI; phi += sampleDelta)
    {
        for(float theta = 0.0; theta < 0.5 * PI; theta += sampleDelta)
        {
            // spherical to cartesian (in tangent space)
            vec3 tangentSample = vec3(sin(theta) * cos(phi),  sin(theta) * sin(phi), cos(theta));
            // tangent space to world
            vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * N;

            irradiance += texture(environmentMap, sampleVec).rgb * cos(theta) * sin(theta);
            nrSamples++;
        }
    }
    irradiance = PI * irradiance * (1.0 / float(nrSamples));

    FragColor = vec4(irradiance, 1.0);
}

prefilterMap

先创建一张cubemap

unsigned int prefilterMap;
glGenTextures(1, &prefilterMap);
glBindTexture(GL_TEXTURE_CUBE_MAP, prefilterMap);
for (unsigned int i = 0; i < 6; ++i)
{
    glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB16F, 128, 128, 0, GL_RGB, GL_FLOAT, nullptr);
}
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); 
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glGenerateMipmap(GL_TEXTURE_CUBE_MAP);

需要的shader，渲染了5层的mipmap，使用法线分布函数进行重要性采样，预计算每个方向上的积分值

#version 330 core
out vec4 FragColor;
in vec3 WorldPos;

uniform samplerCube environmentMap;
// 当前贴图的粗糙度
uniform float roughness;

const float PI = 3.14159265359;
// ----------------------------------------------------------------------------
float DistributionGGX(vec3 N, vec3 H, float roughness)
{
    float a = roughness*roughness;
    float a2 = a*a;
    float NdotH = max(dot(N, H), 0.0);
    float NdotH2 = NdotH*NdotH;

    float nom   = a2;
    float denom = (NdotH2 * (a2 - 1.0) + 1.0);
    denom = PI * denom * denom;

    return nom / denom;
}
// ----------------------------------------------------------------------------
// http://holger.dammertz.org/stuff/notes_HammersleyOnHemisphere.html
// efficient VanDerCorpus calculation.

float RadicalInverse_VdC(uint bits)
{
    bits = (bits << 16u) | (bits >> 16u);
    bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);
    bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);
    bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);
    bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);
    return float(bits) * 2.3283064365386963e-10; // / 0x100000000
}
// 低差异序列
vec2 Hammersley(uint i, uint N)
{
    return vec2(float(i)/float(N), RadicalInverse_VdC(i));
}
// ----------------------------------------------------------------------------
// GGX法线分布函数下的重要性采样
vec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness)
{
    float a = roughness*roughness;

    float phi = 2.0 * PI * Xi.x;
    float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a*a - 1.0) * Xi.y));
    float sinTheta = sqrt(1.0 - cosTheta*cosTheta);

    // from spherical coordinates to cartesian coordinates - halfway vector
    vec3 H;
    H.x = cos(phi) * sinTheta;
    H.y = sin(phi) * sinTheta;
    H.z = cosTheta;

    // from tangent-space H vector to world-space sample vector
    vec3 up          = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0);
    vec3 tangent   = normalize(cross(up, N));
    vec3 bitangent = cross(N, tangent);

    vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z;
    return normalize(sampleVec);
}
// ----------------------------------------------------------------------------
void main()
{
    vec3 N = normalize(WorldPos);  // 以像素位置为法线方向（其实是在做 cube map 采样方向）

    vec3 R = N; // 反射向量设为法线
    vec3 V = R; // 视线向量也设为法线（这是预计算贴图，所以默认观察方向和反射方向一致）

    const uint SAMPLE_COUNT = 1024u; // importance sample 的数量
    vec3 prefilteredColor = vec3(0.0);
    float totalWeight = 0.0;

    for(uint i = 0u; i < SAMPLE_COUNT; ++i)
    {
        vec2 Xi = Hammersley(i, SAMPLE_COUNT);           // 第 i 个低差异采样点
        vec3 H = ImportanceSampleGGX(Xi, N, roughness);  // 半程向量 H
        vec3 L  = normalize(2.0 * dot(V, H) * H - V);     // 入射光方向 L = reflect(-V, H)

        float NdotL = max(dot(N, L), 0.0);
        if(NdotL > 0.0)
        {
            // 计算重要性采样的 pdf
            float D = DistributionGGX(N, H, roughness);
            float NdotH = max(dot(N, H), 0.0);
            float HdotV = max(dot(H, V), 0.0);
            float pdf = D * NdotH / (4.0 * HdotV) + 0.0001;

            // 环境贴图的信息
            float resolution = 512.0; // 原始 cube map 每个面宽度
            float saTexel  = 4.0 * PI / (6.0 * resolution * resolution); // 每个 texel 的立体角大小
            float saSample = 1.0 / (float(SAMPLE_COUNT) * pdf + 0.0001); // 当前 sample 对应的立体角

            // 根据 sample 的“模糊度”选择 mipmap 层级
            float mipLevel = roughness == 0.0 ? 0.0 : 0.5 * log2(saSample / saTexel);

            // 对 cube map 进行 LOD 采样（选定 mip level）
            prefilteredColor += textureLod(environmentMap, L, mipLevel).rgb * NdotL;
            totalWeight += NdotL;
        }
    }

    prefilteredColor = prefilteredColor / totalWeight; // 归一化亮度

    FragColor = vec4(prefilteredColor, 1.0); // 输出颜色
}

渲染代码

GLuint preComputer::computePrefilterMap(GLuint envCubemap)
{
    const glm::mat4 captureProjection = glm::perspective(glm::radians(90.0f), 1.0f, 0.1f, 10.0f);
    const glm::mat4 captureViews[] =
    {
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(-1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f,  1.0f,  0.0f), glm::vec3(0.0f,  0.0f,  1.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, -1.0f,  0.0f), glm::vec3(0.0f,  0.0f, -1.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f,  0.0f,  1.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
        glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f,  0.0f, -1.0f), glm::vec3(0.0f, -1.0f,  0.0f))
    };
    glEnable(GL_TEXTURE_CUBE_MAP_SEAMLESS);
    Shader prefilterShader = Shader("shader/prefiltermap.vert","shader/prefiltermap.frag");

    GLuint FrameBuffer;
    GLuint RenderBuffer;
    glGenFramebuffers(1, &FrameBuffer);
    glGenRenderbuffers(1, &RenderBuffer);
    unsigned int prefilterMap;
    glGenTextures(1, &prefilterMap);
    glBindTexture(GL_TEXTURE_CUBE_MAP, prefilterMap);
    for (unsigned int i = 0; i < 6; ++i)
    {
        glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB16F, 128, 128, 0, GL_RGB, GL_FLOAT, nullptr);
    }
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    glGenerateMipmap(GL_TEXTURE_CUBE_MAP);

    prefilterShader.use();
    prefilterShader.setInt("environmentMap", 0);
    prefilterShader.setMat4("projection", captureProjection);
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_CUBE_MAP, envCubemap);

    glBindFramebuffer(GL_FRAMEBUFFER, FrameBuffer);

    unsigned int maxMipLevels = 5;
    // 单独生成5张map，对应不同的粗糙度，来组成mipmap
    for (unsigned int mip = 0; mip < maxMipLevels; ++mip)
    {
        // reisze framebuffer according to mip-level size.
        unsigned int mipWidth  = 128 * std::pow(0.5, mip);
        unsigned int mipHeight = 128 * std::pow(0.5, mip);
        glBindRenderbuffer(GL_RENDERBUFFER, RenderBuffer);
        glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, mipWidth, mipHeight);
        glViewport(0, 0, mipWidth, mipHeight);

        float roughness = (float)mip / (float)(maxMipLevels - 1);
        prefilterShader.setFloat("roughness", roughness);
        for (unsigned int i = 0; i < 6; ++i)
        {
            prefilterShader.setMat4("view", captureViews[i]);
            glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
                                   GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, prefilterMap, mip);

            glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
            scene.renderCube();
        }
    }
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
    return prefilterMap;
}

用prefilterMap渲染天空盒的结果

LUT

现在渲染方程就剩最后一部分积分的预计算了通过一系列变换变成了这个式子只和观察方向与法线的夹角以及粗糙都有关，所以用一张2D贴图存储，采样计算积分仍然使用GGX重要性采样

vec2 IntegrateBRDF(float NdotV, float roughness)
{
    vec3 V;
    V.x = sqrt(1.0 - NdotV*NdotV);
    V.y = 0.0;
    V.z = NdotV;

    float A = 0.0;
    float B = 0.0;

    vec3 N = vec3(0.0, 0.0, 1.0);

    const uint SAMPLE_COUNT = 1024u;
    for(uint i = 0u; i < SAMPLE_COUNT; ++i)
    {
        vec2 Xi = Hammersley(i, SAMPLE_COUNT);
        vec3 H  = ImportanceSampleGGX(Xi, N, roughness);
        vec3 L  = normalize(2.0 * dot(V, H) * H - V);

        float NdotL = max(L.z, 0.0);
        float NdotH = max(H.z, 0.0);
        float VdotH = max(dot(V, H), 0.0);

        if(NdotL > 0.0)
        {
            float G = GeometrySmith(N, V, L, roughness);
            float G_Vis = (G * VdotH) / (NdotH * NdotV);
            float Fc = pow(1.0 - VdotH, 5.0);

            A += (1.0 - Fc) * G_Vis;
            B += Fc * G_Vis;
        }
    }
    A /= float(SAMPLE_COUNT);
    B /= float(SAMPLE_COUNT);
    return vec2(A, B);
}
// ----------------------------------------------------------------------------
void main() 
{
    vec2 integratedBRDF = IntegrateBRDF(TexCoords.x, TexCoords.y);
    FragColor = integratedBRDF;
}

GLuint preComputer::computeLutMap(GLuint envCubemap)
{
    Shader lutShader = Shader("shader/lut.vert","shader/lut.frag");

    GLuint brdfLUTTexture;
    glGenTextures(1, &brdfLUTTexture);
    GLuint FrameBuffer;
    GLuint RenderBuffer;
    glGenFramebuffers(1, &FrameBuffer);
    glGenRenderbuffers(1, &RenderBuffer);
    // pre-allocate enough memory for the LUT texture.
    glBindTexture(GL_TEXTURE_2D, brdfLUTTexture);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RG16F, 512, 512, 0, GL_RG, GL_FLOAT, 0);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glBindFramebuffer(GL_FRAMEBUFFER, FrameBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, RenderBuffer);
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, 512, 512);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, brdfLUTTexture, 0);

    glViewport(0, 0, 512, 512);
    lutShader.use();
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    scene.renderQuad();

    glBindFramebuffer(GL_FRAMEBUFFER, 0);
    return brdfLUTTexture;
}

整合

到这里就以及有了所有预计算贴图，下面就是把这些贴图整合到PBR渲染管线，下面给出一个支持一个光源的IBL+PBR渲染Shader

#version 330 core
out vec4 FragColor;

in vec3 T;
in vec3 B;
in vec3 N;


in vec3 WorldPos;
in vec2 TexCoords;


uniform vec3 camPos;
uniform vec3 lightPos;
uniform vec3 lightColor;

// IBL
uniform samplerCube irradianceMap;
uniform samplerCube prefilterMap;
uniform sampler2D lutMap;

// Material maps
uniform sampler2D texture_albedo;
uniform sampler2D texture_normal;
uniform sampler2D texture_metallic;
uniform sampler2D texture_roughness;
uniform sampler2D texture_ao;
uniform sampler2D texture_emission;
// material parameters
//uniform vec3 albedo;
//uniform float metallic;
//uniform float roughness;
//uniform float ao;
const float PI = 3.14159265359;

// Convert normal map to world space
vec3 getNormalFromMap()
{
    vec3 n = normalize(N);
    vec3 t = normalize(T - dot(T, n) * n);
    vec3 b = normalize(cross(n, t));

    mat3 TBN = mat3(t, b, n);
    vec3 normalTS = texture(texture_normal, TexCoords).rgb;
    normalTS = normalTS * 2.0 - 1.0;
    return normalize(TBN * normalTS);
}

// GGX NDF
float DistributionGGX(vec3 N, vec3 H, float roughness)
{
    float a = roughness*roughness;
    float a2 = a*a;
    float NdotH = max(dot(N, H), 0.0);
    float NdotH2 = NdotH*NdotH;

    float nom   = a2;
    float denom = (NdotH2 * (a2 - 1.0) + 1.0);
    denom = PI * denom * denom;

    return nom / denom;
}

// Geometry: Schlick-GGX
float GeometrySchlickGGX(float NdotV, float roughness)
{
    float r = (roughness + 1.0);
    float k = (r*r) / 8.0;

    float nom   = NdotV;
    float denom = NdotV * (1.0 - k) + k;

    return nom / denom;
}

float GeometrySmith(vec3 N, vec3 V, vec3 L, float roughness)
{
    float NdotV = max(dot(N, V), 0.0);
    float NdotL = max(dot(N, L), 0.0);
    float ggx2 = GeometrySchlickGGX(NdotV, roughness);
    float ggx1 = GeometrySchlickGGX(NdotL, roughness);

    return ggx1 * ggx2;
}

// Fresnel: Schlick Approximation
vec3 fresnelSchlick(float cosTheta, vec3 F0)
{
    return F0 + (1.0 - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}
vec3 fresnelSchlickRoughness(float cosTheta, vec3 F0, float roughness)
{
    return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}
void main()
{
    // 纹理采样
    vec3 albedo     = pow(texture(texture_albedo, TexCoords).rgb, vec3(2.2));
    float metallic  = texture(texture_metallic, TexCoords).r;
    float roughness = texture(texture_roughness, TexCoords).r;
    float ao        = texture(texture_ao, TexCoords).r;
    vec3 emission     = pow(texture(texture_emission, TexCoords).rgb, vec3(2.2)); // gamma correct
//    vec3 emission = vec3(0,0,0);

    // 参数准备
    vec3 N = getNormalFromMap();   // 法线
    vec3 V = normalize(camPos - WorldPos); // 视线方向
    vec3 R = reflect(-V, N); // 反射方向
    vec3 F0 = mix(vec3(0.04), albedo, metallic); // 菲涅尔反射 F0
    vec3 L = normalize(lightPos - WorldPos); // 光源方向
    vec3 H = normalize(V + L); // 半程向量

    // 光照部分
    float NDF = DistributionGGX(N, H, roughness);
    float G   = GeometrySmith(N, V, L, roughness);
    vec3  F   = fresnelSchlick(max(dot(H, V), 0.0), F0);
    vec3 nominator = NDF * G * F;
    float denominator = 4.0 * max(dot(N, V), 0.0) * max(dot(N, L), 0.0) + 0.001;
    vec3 specular = nominator / denominator;
    vec3 kS = F;
    vec3 kD = (1.0 - kS) * (1.0 - metallic);
    float NdotL = max(dot(N, L), 0.0);
    vec3 radiance = lightColor;
    vec3 Lo = (kD * albedo / PI + specular) * radiance * NdotL;


    // IBL ambient
    const float MAX_REFLECTION_LOD = 4.0;
    vec3 prefilteredColor = textureLod(prefilterMap, R,  roughness * MAX_REFLECTION_LOD).rgb;
    F        = fresnelSchlickRoughness(max(dot(N, V), 0.0), F0, roughness);
    vec2 lut = texture(lutMap, vec2(max(dot(N, V), 0.0), roughness)).rg;
    vec3 specularIBL = prefilteredColor * (F * lut.x + lut.y);
    vec3 irradiance = texture(irradianceMap, N).rgb;
    vec3 diffuse    = irradiance * albedo / PI;  // learnOpenGL中并没有 /PI，实践下来除以效果更好
    vec3 ambient = (kD * diffuse + specularIBL) * ao;


    // 光照相加
    vec3 color = ambient + Lo + emission;
    // toneMapping
    color = color / (color + vec3(1.0));
    // 伽马矫正
    color = pow(color, vec3(1.0 / 2.2));
    FragColor = vec4(color, 1.0);
}

效果展示

切换为ACES Filmic Tone Mapping

vec3 RRTAndODTFit(vec3 v)
{
    vec3 a = v * (v + 0.0245786) - 0.000090537;
    vec3 b = v * (0.983729 * v + 0.4329510) + 0.238081;
    return a / b;
}

vec3 ACESFilmToneMapping(vec3 color)
{
    // 适当的曝光缩放，可以视为手动曝光调整（可调参数）
    color *= 0.6;

    // ACES tone mapping 曲线
    color = RRTAndODTFit(color);

    // Clamp 到 [0, 1]
    return clamp(color, 0.0, 1.0);
}

TinyRender开发记录 5-7

Sun, 19 Oct 2025 13:42:48 +0800

Lesson 5: Gouraud shading

本节课实现了 Gouraud shading，对三角形每个顶点用法线求光照，进一步插值到内部像素，相比于phong，phong是要对每个内部像素都需要计算光照，这里简单处理就是默认为255，255，255的白光，计算顶点法线和光照方向的夹角（注意单位化和钝角处理)，得到cos直接乘以光照，就得到了每个顶点的变暗比例，之后再插值到各个像素，关键代码如下

void Triangle::setShadingColor(Eigen::Vector3f lightDir) {
    lightDir.normalize();
    Vector3f basecolor = Vector3f(255,255,255);
    for (int i = 0; i < 3; ++i) {
        // 确保法线已归一化，并限制点积结果非负
        float intensity = std::max(0.0f, normal[i].normalized().dot(lightDir));
        color[i] = basecolor * intensity;
    }
}

因为我的MVP变换和课程设置不一致，所以角度不一样，下面展示 lightDir(1,-1,1)情况下的渲染完整代码在（Gouraud-shading分支）：https://github.com/sdpyy1/CppLearn/tree/Gouraud-shading

Lesson 6: Shaders for the software renderer

phongShading

首先是进行了PhongShading，思路就是插值出每个像素的法向量、每个像素对应的原来的位置（即着色点的位置，需要在顶点着色器中提前存储）以及光源的位置、摄像机的位置来计算高光、漫反射以及加上环境光,主要代码如下（自己实现注意颜色值的变化，防止过曝）

Eigen::Vector3f TGAColorToVector3f(const TGAColor& color) {
    float r = static_cast<float>(color.bgra[2]) / 255.0f;
    float g = static_cast<float>(color.bgra[1]) / 255.0f;
    float b = static_cast<float>(color.bgra[0]) / 255.0f;
    return Eigen::Vector3f(r, g, b);
}
// 将Eigen::Vector3f转换为TGAColor的函数
TGAColor Vector3fToTGAColor(const Eigen::Vector3f& vectorColor) {
    auto clamp = [](float v) { return std::max(0.0f, std::min(1.0f, v)); };
    unsigned char r = static_cast<unsigned char>(clamp(vectorColor.x()) * 255.0f);
    unsigned char g = static_cast<unsigned char>(clamp(vectorColor.y()) * 255.0f);
    unsigned char b = static_cast<unsigned char>(clamp(vectorColor.z()) * 255.0f);
    return TGAColor(r, g, b);
}
// blinnPhongShading
TGAColor blinnPhongShading(const TGAColor & kdColor,const Vector3f & point,const Vector3f & normal) {
    Eigen::Vector3f ka = Eigen::Vector3f(0.005, 0.005, 0.005);
    Eigen::Vector3f kd = TGAColorToVector3f(kdColor);
    Eigen::Vector3f ks = Eigen::Vector3f(0.7937, 0.7937, 0.7937);
    // 环境光强度
    Eigen::Vector3f amb_light_intensity{10, 10, 10};
    // 高光的指数，越大对角度越敏感
    float p = 150;
    // 计算点到光源的向量
    Eigen::Vector3f light_vec = lightDir - point;
    // 计算点到光源的距离
    float r = light_vec.norm();
    // 归一化从点到光源的向量
    Eigen::Vector3f light_dir = light_vec.normalized();
    // 漫反射
    Eigen::Vector3f diffuse = kd.cwiseProduct(lightIntensity / (r * r)) * std::max(0.0f, normal.dot(light_dir));
    // 高光反射
    // 计算从表面点到观察者的向量
    Eigen::Vector3f view_dir = (viewDir - point).normalized();
    // 计算半程向量
    Eigen::Vector3f halfVector = (light_dir + view_dir).normalized();
    Eigen::Vector3f specular = ks.cwiseProduct(lightIntensity / (r * r)) * std::pow(std::max(0.0f, normal.dot(halfVector)), p);
    Eigen::Vector3f all = diffuse + specular + ka.cwiseProduct(amb_light_intensity);
    return Vector3fToTGAColor(all);
}

法线贴图

法线贴图是通过使用 RGB 纹理的红色、绿色和蓝色分量来存储法线的 XYZ 分量，但是存储在法线贴图中的法线是模型坐标系下的法线坐标，如果模型在空间中发生了旋转，那法线位置就会发生变化，所以如果要用法线贴图，需要对法线变换到global坐标系下才行。另外不能简单地给法线左乘一个模型变换矩阵，解释及正确做法如下（也不是一定不行，有几种模型变换是不行滴）下面使用法线贴图作为color得到的图片下面使用法线贴图作为phongshading的法线来渲染光照，注意贴图范围是[-1，1]，而颜色通道是[0,1]，也就是拿到的材质颜色是[0,1]的，需要先转成[-1,1]才可以使用，关键代码如下

1
2

            // 法线来自法线贴图
            Eigen::Vector3f barycentricNorm = TGAColorToVector3f(nm.getColor(texU,texV))*2-Vector3f{1,1,1};

对比直接使用插值的法线和使用贴图法线的效果区别，区别还是很明显的，使用法线贴图并没有增加模型的结构，但精细程度大大提升了

Specular mapping 高光贴图

在之前的设置中镜面反射系数是自己设置的，使用高光贴图就是用来获取这个参数

`1`	`Eigen::Vector3f ks = Eigen::Vector3f(0.7937, 0.7937, 0.7937);`

修改为从高光贴图中获得

1
2

            // 高光系数来自高光贴图
            TGAColor specKd = spec.getColor(texU,texV);

最终效果如下，变化看不太出来了，主要是一些奇怪的高光点消失了

tangent space normal mapping ‌切线空间法线贴图

将法线方向存储在‌切线空间‌（Tangent Space）中，而非模型或世界空间。这种技术可以显著提升表面凹凸感，且对模型变形（如动画）更友好，首先解释一下切线空间这个东西就是把法线存储在切线空间坐标下，如果需要法线就在着色器中，通过 ‌TBN矩阵‌（Tangent-Bitangent-Normal Matrix）将法线从切线空间转换到世界空间

为什么有了法线贴图，还需要切线法线贴图呢？

普通法线贴图与特定的模型紧密绑定的，当模型的形状、朝向或者拓扑结构发生变化时，法线贴图可能就不再适用。切线空间是每个顶点局部的一个坐标系，它由切线（Tangent）、副切线（Bitangent）和法线（Normal）三个向量定义。切线空间法线贴图中的法向量是相对于每个顶点的切线空间而言的。这种表示方式使得法线贴图具有更好的可移植性，同一个切线空间法线贴图可以应用到不同形状和朝向的模型上，只要每个模型的切线空间能够正确计算，就可以得到正确的光照效果。
切线空间法线贴图能够很好地支持模型变形。因为切线空间是随着顶点一起变形的，当模型发生变形时，切线空间也会相应地改变，而切线空间法线贴图中的法向量在新的切线空间中仍然能够正确表示表面的细节。所以，即使模型在动画过程中发生了变形，光照效果依然能够保持正确。

如果不对切线法线贴图进行转换，直接使用，效果如下哈哈哈获取到切线法线贴图后，需要左乘一个TBN矩阵，转为空间法线才能使用，第一列是三角形的切线，第二列是副切线，第三列是法线具体转化函数如下

// 从切线法线转为法线
Eigen::Vector3f getNormalFromTangent(const Triangle& triangle, const Eigen::Vector3f& tangentSpaceNormal, const Eigen::Vector3f& barycentricNorm) {
    // 计算切线
    Eigen::Vector3f edge1 = triangle.globalCoords[1].head<3>() - triangle.globalCoords[0].head<3>();
    Eigen::Vector3f edge2 = triangle.globalCoords[2].head<3>() - triangle.globalCoords[0].head<3>();
    Eigen::Vector2f deltaUV1 = triangle.texCoords[1] - triangle.texCoords[0];
    Eigen::Vector2f deltaUV2 = triangle.texCoords[2] - triangle.texCoords[0];

    float f = 1.0f / (deltaUV1.x() * deltaUV2.y() - deltaUV2.x() * deltaUV1.y());

    Eigen::Vector3f tangent;
    tangent.x() = f * (deltaUV2.y() * edge1.x() - deltaUV1.y() * edge2.x());
    tangent.y() = f * (deltaUV2.y() * edge1.y() - deltaUV1.y() * edge2.y());
    tangent.z() = f * (deltaUV2.y() * edge1.z() - deltaUV1.y() * edge2.z());
    tangent.normalize();

    // 计算副切线
    Eigen::Vector3f bitangent;
    bitangent.x() = f * (-deltaUV2.x() * edge1.x() + deltaUV1.x() * edge2.x());
    bitangent.y() = f * (-deltaUV2.x() * edge1.y() + deltaUV1.x() * edge2.y());
    bitangent.z() = f * (-deltaUV2.x() * edge1.z() + deltaUV1.x() * edge2.z());
    bitangent.normalize();


    // 构建 TBN 矩阵
    Eigen::Matrix3f TBN;
    TBN.col(0) = tangent;
    TBN.col(1) = bitangent;
    TBN.col(2) = barycentricNorm;

    // 将切向法线转换到世界空间
    return TBN * tangentSpaceNormal;
}

最终用转化后的切线作为像素的切线得到的图片如下

Lesson 7: Shadow mapping

简单理解就是把光源当作摄像机，重新渲染一遍场景，但只需要记录每个点离光源最近的点，也就是哪些点能被光源照到，在正式渲染时，判断一个点颜色时，先去刚才记录的光照缓存中查看该点是否能被光照到，来决定是否进行渲染完成的做法是对于一个像素，先去找它原本在空间中的位置，紧接着做MVP变换和视口变换变到以光源为摄像机下的对应像素块的位置，判断该位置深度是否需要阴影，不需要阴影才去正常进行光照，我的简单做法是如果在阴影，就让光照最终结果*0.2,从而变暗，这里这样做只是为了效果好看，不过这个光照模型本身就是不准确的，我的做法并不特别准确，但是理解原理即可整体实现代码如下，其他未展示文件可以在仓库中找到

#include "thirdParty/tgaimage.h"
#include "model.h"
#include <vector>
#include <cmath>
#include "iostream"
using namespace std;
constexpr static int width  = 1000;
constexpr static int height = 1000;
float angleX = 0.0f;
float angleY = 0.0f;
float angleZ = 0.0f;
float tx = 0.0f;
float ty = 0.0f;
float tz = 0.0f;
float sx = 1.0f;
float sy = 1.0f;
float sz = 1.0f;
Eigen::Vector3f eye_pos{0,0,3};
Eigen::Vector3f eye_dir(0.0f, 0.0f, -1.0f);
Eigen::Vector3f up(0.0f, 1.0f, 0.0f);
float fovY = 45.0f;
float aspectRatio = 1.0f;
float near = 0.1f;
float far = 100.0f;
Eigen::Vector3f lightDir{1,1,0};
Eigen::Vector3f lightIntensity{5,5,5};
// 计算三角形面积，可能返回负数，表示背对屏幕
float signed_triangle_area(float ax, float ay, float bx, float by, float cx, float cy) {
    return .5f*((by-ay)*(bx+ax) + (cy-by)*(cx+bx) + (ay-cy)*(ax+cx));
}
Eigen::Vector3f TGAColorToVector3f(const TGAColor& color) {
    float r = static_cast<float>(color.bgra[2]) / 255.0f;
    float g = static_cast<float>(color.bgra[1]) / 255.0f;
    float b = static_cast<float>(color.bgra[0]) / 255.0f;
    return Eigen::Vector3f(r, g, b);
}
// 将Eigen::Vector3f转换为TGAColor的函数
TGAColor Vector3fToTGAColor(const Eigen::Vector3f& vectorColor) {
    auto clamp = [](float v) { return std::max(0.0f, std::min(1.0f, v)); };
    unsigned char r = static_cast<unsigned char>(clamp(vectorColor.x()) * 255.0f);
    unsigned char g = static_cast<unsigned char>(clamp(vectorColor.y()) * 255.0f);
    unsigned char b = static_cast<unsigned char>(clamp(vectorColor.z()) * 255.0f);
    return TGAColor(r, g, b);
}
// blinnPhongShading
TGAColor blinnPhongShading(const TGAColor & textureColor, const Vector3f & point, const Vector3f & normal,TGAColor specKd,bool isShadow) {
    // 环境光系数
    Eigen::Vector3f ka = Eigen::Vector3f(0.005, 0.005, 0.005);
    // 漫反射系数（来自材质贴图）
    Eigen::Vector3f kd = TGAColorToVector3f(textureColor);
    // 高光系数（来自高光贴图）
    Eigen::Vector3f ks = TGAColorToVector3f(specKd);
    Eigen::Vector3f amb_light_intensity{10, 10, 10};

    // 环境光强度
    // 高光的指数，越大对角度越敏感
    float p = 150;
    // 计算点到光源的向量
    Eigen::Vector3f light_vec = lightDir - point;
    // 计算点到光源的距离
    float r = light_vec.norm();
    // 归一化从点到光源的向量
    Eigen::Vector3f light_dir = light_vec.normalized();
    // 漫反射
    Eigen::Vector3f diffuse = kd.cwiseProduct(lightIntensity / (r * r)) * std::max(0.0f, normal.dot(light_dir));
    // 高光反射
    // 计算从表面点到观察者的向量
    Eigen::Vector3f view_dir = (eye_pos - point).normalized();
    // 计算半程向量
    Eigen::Vector3f halfVector = (light_dir + view_dir).normalized();
    Eigen::Vector3f specular = ks.cwiseProduct(lightIntensity / (r * r)) * std::pow(std::max(0.0f, normal.dot(halfVector)), p);
    Eigen::Vector3f all = diffuse + specular + ka.cwiseProduct(amb_light_intensity);
    if (isShadow){
        return Vector3fToTGAColor(all*0.2);
    }
    return Vector3fToTGAColor(all);
}
// 插值函数
Eigen::Vector3f interpolate(const Eigen::Vector3f& v0, const Eigen::Vector3f& v1, const Eigen::Vector3f& v2, double alpha, double beta, double gamma) {
    return alpha * v0 + beta * v1 + gamma * v2;
}
float interpolate(float v0, float v1, float v2, float alpha, float beta, float gamma) {
    return alpha * v0 + beta * v1 + gamma * v2;
}

// 从切线法线转为法线
Eigen::Vector3f getNormalFromTangent(const Triangle& triangle, const Eigen::Vector3f& tangentSpaceNormal, const Eigen::Vector3f& barycentricNorm) {
    // 计算切线
    Eigen::Vector3f edge1 = triangle.globalCoords[1].head<3>() - triangle.globalCoords[0].head<3>();
    Eigen::Vector3f edge2 = triangle.globalCoords[2].head<3>() - triangle.globalCoords[0].head<3>();
    Eigen::Vector2f deltaUV1 = triangle.texCoords[1] - triangle.texCoords[0];
    Eigen::Vector2f deltaUV2 = triangle.texCoords[2] - triangle.texCoords[0];

    float f = 1.0f / (deltaUV1.x() * deltaUV2.y() - deltaUV2.x() * deltaUV1.y());

    Eigen::Vector3f tangent;
    tangent.x() = f * (deltaUV2.y() * edge1.x() - deltaUV1.y() * edge2.x());
    tangent.y() = f * (deltaUV2.y() * edge1.y() - deltaUV1.y() * edge2.y());
    tangent.z() = f * (deltaUV2.y() * edge1.z() - deltaUV1.y() * edge2.z());
    tangent.normalize();

    // 计算副切线
    Eigen::Vector3f bitangent;
    bitangent.x() = f * (-deltaUV2.x() * edge1.x() + deltaUV1.x() * edge2.x());
    bitangent.y() = f * (-deltaUV2.x() * edge1.y() + deltaUV1.x() * edge2.y());
    bitangent.z() = f * (-deltaUV2.x() * edge1.z() + deltaUV1.x() * edge2.z());
    bitangent.normalize();


    // 构建 TBN 矩阵
    Eigen::Matrix3f TBN;
    TBN.col(0) = tangent;
    TBN.col(1) = bitangent;
    TBN.col(2) = barycentricNorm;

    // 将切向法线转换到世界空间
    return TBN * tangentSpaceNormal;
}

void shadow(Triangle &triangle,std::vector<std::vector<float>> *shadowBuffer){
    float ax = triangle.screenCoords[0].x();
    float ay = triangle.screenCoords[0].y();
    float bx = triangle.screenCoords[1].x();
    float by = triangle.screenCoords[1].y();
    float cx = triangle.screenCoords[2].x();
    float cy = triangle.screenCoords[2].y();
    int bbminx = std::floor(std::min(std::min(ax, bx), cx));
    int bbminy = std::ceil(std::min(std::min(ay, by), cy));
    int bbmaxx = std::floor(std::max(std::max(ax, bx), cx));
    int bbmaxy = std::ceil(std::max(std::max(ay, by), cy));
    float total_area = signed_triangle_area(ax, ay, bx, by, cx, cy);

    for (int x = bbminx; x <= bbmaxx; x++) {
        for (int y = bbminy; y <= bbmaxy; y++) {
            // 虽然可以把整个三角形直接剔除，但是我希望只是把屏幕外的像素剔除
            if (x < 0 || x >= width || y < 0 || y >= height) {
                continue;
            }
            float alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
            float beta = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
            float gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
            if (alpha < 0 || beta < 0 || gamma < 0) continue; // 说明当前像素不在三角形内部
            float barycentricZ = interpolate(triangle.screenCoords[0].z(), triangle.screenCoords[1].z(),triangle.screenCoords[2].z(), alpha, beta, gamma);
            if (shadowBuffer->at(x).at(y) < barycentricZ) {
                shadowBuffer->at(x).at(y) = barycentricZ;
            }
        }
    }
}





// 绘制一个三角形
    void drawTriangle(Triangle &triangle, TGAImage &framebuffer, std::vector<std::vector<float>> *zBuffer, std::vector<std::vector<float>> *shadowBuffer,Texture &texture,
                 Texture &nm, Texture &spec, Texture &nm_tangent,Eigen::Matrix4f mvpForShadow) {
        float ax = triangle.screenCoords[0].x();
        float ay = triangle.screenCoords[0].y();
        float bx = triangle.screenCoords[1].x();
        float by = triangle.screenCoords[1].y();
        float cx = triangle.screenCoords[2].x();
        float cy = triangle.screenCoords[2].y();
        int bbminx = std::floor(std::min(std::min(ax, bx), cx));
        int bbminy = std::ceil(std::min(std::min(ay, by), cy));
        int bbmaxx = std::floor(std::max(std::max(ax, bx), cx));
        int bbmaxy = std::ceil(std::max(std::max(ay, by), cy));

        // 如果面积为负数，背对屏幕，被裁剪
        float total_area = signed_triangle_area(ax, ay, bx, by, cx, cy);
        if (total_area < 1) return;

#pragma omp parallel for
        for (int x = bbminx; x <= bbmaxx; x++) {
            for (int y = bbminy; y <= bbmaxy; y++) {
                // 虽然可以把整个三角形直接剔除，但是我希望只是把屏幕外的像素剔除
                if (x < 0 || x >= width || y < 0 || y >= height) {
                    continue;
                }
                float alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
                float beta = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
                float gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
                if (alpha < 0 || beta < 0 || gamma < 0) continue; // 说明当前像素不在三角形内部
                float barycentricZ = interpolate(triangle.screenCoords[0].z(), triangle.screenCoords[1].z(),triangle.screenCoords[2].z(), alpha, beta, gamma);
                Eigen::Vector3f barycentricGlobalCoord = interpolate(triangle.globalCoords[0].head<3>(),triangle.globalCoords[1].head<3>(),triangle.globalCoords[2].head<3>(), alpha, beta,gamma);
                float texU = interpolate(triangle.texCoords[0].x(), triangle.texCoords[1].x(),triangle.texCoords[2].x(), alpha, beta, gamma);
                float texV = interpolate(triangle.texCoords[0].y(), triangle.texCoords[1].y(),triangle.texCoords[2].y(), alpha, beta, gamma);
                TGAColor texColor = texture.getColor(texU, texV);
                Eigen::Vector3f barycentricNorm = interpolate(triangle.normal[0], triangle.normal[1],triangle.normal[2], alpha, beta, gamma);
                // 法线来自法线贴图
//            Eigen::Vector3f barycentricNorm = TGAColorToVector3f(nm.getColor(texU,texV))*2-Vector3f{1,1,1};
                // 切线法线贴图
//                Eigen::Vector3f barycentricNmTangent =TGAColorToVector3f(nm_tangent.getColor(texU, texV)) * 2 - Vector3f{1, 1, 1};
//                barycentricNmTangent = getNormalFromTangent(triangle, barycentricNmTangent, barycentricNorm);
                // 高光系数来自高光贴图
                TGAColor specKd = spec.getColor(texU, texV);
                // zbuffer中缓存的渲染物体距离小于当前渲染物体的距离时，才覆盖渲染
                if (zBuffer->at(x).at(y) < barycentricZ) {
                    zBuffer->at(x).at(y) = barycentricZ;
                    // 阴影处理
                    // 1. 找到该像素对应物体在原空间的位置
                    Eigen::Vector4f locationInShaowBuffer = mvpForShadow * (barycentricGlobalCoord.homogeneous());
                    locationInShaowBuffer.x() /= locationInShaowBuffer.w();
                    locationInShaowBuffer.y() /= locationInShaowBuffer.w();
                    locationInShaowBuffer.z() /= locationInShaowBuffer.w();
                    locationInShaowBuffer.x() = 0.5*width*(locationInShaowBuffer.x()+1);
                    locationInShaowBuffer.y() = 0.5*height*(locationInShaowBuffer.y()+1);
                    bool isShadow = false;
                    // 在阴影中
                    if (locationInShaowBuffer.z() < shadowBuffer->at(locationInShaowBuffer.x()).at(locationInShaowBuffer.y())){
                        isShadow = true;
                    }
                    // 直接使用贴图
//                framebuffer.set(x,y, texture.getColor(texU,texV));
                    // 使用phongshading光照模型
                    framebuffer.set(x,y, blinnPhongShading(texColor,barycentricGlobalCoord,barycentricNorm,specKd,isShadow));
                    // 直接使用法线贴图
//                framebuffer.set(x,y, nm.getColor(texU,texV));
                    // 使用法线贴图的法线配合phongshading
//                framebuffer.set(x,y, blinnPhongShading(texColor,barycentricGlobalCoord,barycentricNorm,specKd));
                    // 使用切线法线贴图配合phongshaing
//                    framebuffer.set(x, y,blinnPhongShading(texColor, barycentricGlobalCoord, barycentricNmTangent, specKd));
                }
            }
        }
    }

    int main() {
        Model model("./obj/diablo3_pose/diablo3_pose.obj", "./obj/diablo3_pose/diablo3_pose_diffuse.tga");
        TGAImage framebuffer(width, height, TGAImage::RGB);
        // 定义一个zBuffer,并设置全部数据为最小负数
        auto *zBuffer = new std::vector<std::vector<float>>(width, std::vector<float>(height,std::numeric_limits<float>::lowest()));
        // 用于shadow
        auto *shadowBuffer = new std::vector<std::vector<float>>(width, std::vector<float>(height,std::numeric_limits<float>::lowest()));
        // 获取法线贴图
        Texture nm("./obj/diablo3_pose/diablo3_pose_nm.tga");
        Texture spec("./obj/diablo3_pose/diablo3_pose_spec.tga");
        Texture nm_tangent("./obj/diablo3_pose/diablo3_pose_nm_tangent.tga");

        // 首先先从光源位置渲染，来赋值shadowBuffer
        model.setModelTransformation(angleX, angleY, angleZ, tx, ty, tz, sx, sy, sz);
        model.setViewTransformation(lightDir*4, eye_dir, up);
        model.setProjectionTransformation(fovY, aspectRatio, near, far);
        // 获取所有变换矩阵
        Eigen::Matrix4f mvpForShadow = model.getMVP();
        for (Triangle triangle: model.triangleList) {
            // 坐标投影
            triangle.setScreenCoords(mvpForShadow, width, height);
            // 绘制三角形
            shadow(triangle, shadowBuffer);
        }


        // 转回正常视角，进行渲染
        model.setModelTransformation(angleX, angleY, angleZ, tx, ty, tz, sx, sy, sz);
        model.setViewTransformation(eye_pos, eye_dir, up);
        model.setProjectionTransformation(fovY, aspectRatio, near, far);
        // 获取所有变换矩阵
        Eigen::Matrix4f mvp = model.getMVP();

        // 遍历obj文件中的每个三角形
        for (Triangle triangle: model.triangleList) {
            // 坐标投影
            triangle.setScreenCoords(mvp, width, height);
            // 摄像机空间点转光源空间点的矩阵
            Eigen::Matrix4f viewToLightTrans = mvpForShadow * (mvp.inverse());
            // 绘制三角形
            drawTriangle(triangle, framebuffer, zBuffer,shadowBuffer, model.texture, nm, spec, nm_tangent,mvpForShadow);
        }
        framebuffer.write_tga_file("framebuffer.tga");
        delete (zBuffer);
        delete (shadowBuffer);
        return 0;
    }

最终呈现效果如下，很合理哈，因为右手并未被挡住，所以还是亮的下图通过过曝来展示哪些像素被阴影化了，还是蛮合理的～在使用普通的材质贴图下效果比较好

对于出现的不合理的黑色纹路解释来自别的博客：

原文链接：https://blog.csdn.net/qq_42987967/article/details/125011820 上述照片脖子部位下面有很明显的z-fighting痕迹，主要是因为浮点数精度不足导致的冲突(即当前的点可能索引到附近的点了，而附近的点的shadowbuffer值比该点大造成误判)，毕竟连续的像素位置很接近，则有的像素大于shadow map，有的则小于shadow map，从而产生了离散的显示。此处采用一个解决z-fighting问题的暴力解法，即对于每一个像素投影光源的z轴值都进行一个偏移，只要在该偏移位置不存在连续像素即可展示不错的画面。

我需要将最终比较的z值加一个很小的偏移量，瞬间这些黑色条纹就消失了～

1
2
3

                if (locationInShadowBuffer.z()+0.005 < shadowBuffer->at(locationInShadowBuffer.x()).at(locationInShadowBuffer.y())){
                    isShadow = true;
                }

ai给出的解释：这种现象叫做自阴影

深度图的精度限制‌：Shadow Mapping 需要从光源视角生成深度图（Shadow Map）。由于深度图的分辨率有限，物体表面在光源视角下的离散采样可能导致实际连续的几何表面在深度图中被“阶梯化”。当从摄像机视角比较深度时，同一表面的不同片段可能被错误判定为处于阴影中。
浮点数精度误差‌：深度值存储为浮点数，计算时可能因精度不足导致比较错误。例如，光源视角和摄像机视角的深度计算存在微小差异，导致同一位置被误判为“低于”深度图记录的深度，从而触发阴影。

TinyRender开发记录 1-4

Sun, 19 Oct 2025 13:37:45 +0800

项目介绍

Tiny Renderer or how OpenGL works: software rendering in 500 lines of code 项目地址：https://github.com/ssloy/tinyrenderer In this series of articles, I want to show how OpenGL works by writing its clone (a much simplified one). Surprisingly enough, I often meet people who cannot overcome the initial hurdle of learning OpenGL / DirectX. Thus, I have prepared a short series of lectures, after which my students show quite good renderers. So, the task is formulated as follows: using no third-party libraries (especially graphic ones), get something like this picture:

所以学习最终目标是不使用第三方代码，得到下面这种图，建议学完games101后来复习，不过过程很详细，作为入门也是不错的

环境搭建

虽然项目旨在不使用第三方库，但提供了图片读取、保存、设置像素点颜色的代码 tagimage.h

#pragma once
#include <cstdint>
#include <fstream>
#include <vector>

#pragma pack(push,1)
struct TGAHeader {
    std::uint8_t  idlength{};
    std::uint8_t  colormaptype{};
    std::uint8_t  datatypecode{};
    std::uint16_t colormaporigin{};
    std::uint16_t colormaplength{};
    std::uint8_t  colormapdepth{};
    std::uint16_t x_origin{};
    std::uint16_t y_origin{};
    std::uint16_t width{};
    std::uint16_t height{};
    std::uint8_t  bitsperpixel{};
    std::uint8_t  imagedescriptor{};
};
#pragma pack(pop)

struct TGAColor {
    std::uint8_t bgra[4] = {0,0,0,0};
    std::uint8_t bytespp = {0};

    TGAColor() = default;
    TGAColor(const std::uint8_t R, const std::uint8_t G, const std::uint8_t B, const std::uint8_t A=255) : bgra{B,G,R,A}, bytespp(4) { }
    TGAColor(const std::uint8_t *p, const std::uint8_t bpp) : bytespp(bpp) {
        for (int i=bpp; i--; bgra[i] = p[i]);
    }
    std::uint8_t& operator[](const int i) { return bgra[i]; }
};

struct TGAImage {
    enum Format { GRAYSCALE=1, RGB=3, RGBA=4 };

    TGAImage() = default;
    TGAImage(const int w, const int h, const int bpp);
    bool  read_tga_file(const std::string filename);
    bool write_tga_file(const std::string filename, const bool vflip=true, const bool rle=true) const;
    void flip_horizontally();
    void flip_vertically();
    TGAColor get(const int x, const int y) const;
    void set(const int x, const int y, const TGAColor &c);
    int width()  const;
    int height() const;
private:
    bool   load_rle_data(std::ifstream &in);
    bool unload_rle_data(std::ofstream &out) const;

    int w   = 0;
    int h   = 0;
    int bpp = 0;
    std::vector<std::uint8_t> data = {};
};

tgaimage.cpp

#include <iostream>
#include <cstring>
#include "tgaimage.h"

TGAImage::TGAImage(const int w, const int h, const int bpp) : w(w), h(h), bpp(bpp), data(w*h*bpp, 0) {}

bool TGAImage::read_tga_file(const std::string filename) {
    std::ifstream in;
    in.open (filename, std::ios::binary);
    if (!in.is_open()) {
        std::cerr << "can't open file " << filename << "\n";
        in.close();
        return false;
    }
    TGAHeader header;
    in.read(reinterpret_cast<char *>(&header), sizeof(header));
    if (!in.good()) {
        in.close();
        std::cerr << "an error occured while reading the header\n";
        return false;
    }
    w   = header.width;
    h   = header.height;
    bpp = header.bitsperpixel>>3;
    if (w<=0 || h<=0 || (bpp!=GRAYSCALE && bpp!=RGB && bpp!=RGBA)) {
        in.close();
        std::cerr << "bad bpp (or width/height) value\n";
        return false;
    }
    size_t nbytes = bpp*w*h;
    data = std::vector<std::uint8_t>(nbytes, 0);
    if (3==header.datatypecode || 2==header.datatypecode) {
        in.read(reinterpret_cast<char *>(data.data()), nbytes);
        if (!in.good()) {
            in.close();
            std::cerr << "an error occured while reading the data\n";
            return false;
        }
    } else if (10==header.datatypecode||11==header.datatypecode) {
        if (!load_rle_data(in)) {
            in.close();
            std::cerr << "an error occured while reading the data\n";
            return false;
        }
    } else {
        in.close();
        std::cerr << "unknown file format " << (int)header.datatypecode << "\n";
        return false;
    }
    if (!(header.imagedescriptor & 0x20))
        flip_vertically();
    if (header.imagedescriptor & 0x10)
        flip_horizontally();
    std::cerr << w << "x" << h << "/" << bpp*8 << "\n";
    in.close();
    return true;
}

bool TGAImage::load_rle_data(std::ifstream &in) {
    size_t pixelcount = w*h;
    size_t currentpixel = 0;
    size_t currentbyte  = 0;
    TGAColor colorbuffer;
    do {
        std::uint8_t chunkheader = 0;
        chunkheader = in.get();
        if (!in.good()) {
            std::cerr << "an error occured while reading the data\n";
            return false;
        }
        if (chunkheader<128) {
            chunkheader++;
            for (int i=0; i<chunkheader; i++) {
                in.read(reinterpret_cast<char *>(colorbuffer.bgra), bpp);
                if (!in.good()) {
                    std::cerr << "an error occured while reading the header\n";
                    return false;
                }
                for (int t=0; t<bpp; t++)
                    data[currentbyte++] = colorbuffer.bgra[t];
                currentpixel++;
                if (currentpixel>pixelcount) {
                    std::cerr << "Too many pixels read\n";
                    return false;
                }
            }
        } else {
            chunkheader -= 127;
            in.read(reinterpret_cast<char *>(colorbuffer.bgra), bpp);
            if (!in.good()) {
                std::cerr << "an error occured while reading the header\n";
                return false;
            }
            for (int i=0; i<chunkheader; i++) {
                for (int t=0; t<bpp; t++)
                    data[currentbyte++] = colorbuffer.bgra[t];
                currentpixel++;
                if (currentpixel>pixelcount) {
                    std::cerr << "Too many pixels read\n";
                    return false;
                }
            }
        }
    } while (currentpixel < pixelcount);
    return true;
}

bool TGAImage::write_tga_file(const std::string filename, const bool vflip, const bool rle) const {
    constexpr std::uint8_t developer_area_ref[4] = {0, 0, 0, 0};
    constexpr std::uint8_t extension_area_ref[4] = {0, 0, 0, 0};
    constexpr std::uint8_t footer[18] = {'T','R','U','E','V','I','S','I','O','N','-','X','F','I','L','E','.','\0'};
    std::ofstream out;
    out.open (filename, std::ios::binary);
    if (!out.is_open()) {
        std::cerr << "can't open file " << filename << "\n";
        out.close();
        return false;
    }
    TGAHeader header;
    header.bitsperpixel = bpp<<3;
    header.width  = w;
    header.height = h;
    header.datatypecode = (bpp==GRAYSCALE?(rle?11:3):(rle?10:2));
    header.imagedescriptor = vflip ? 0x00 : 0x20; // top-left or bottom-left origin
    out.write(reinterpret_cast<const char *>(&header), sizeof(header));
    if (!out.good()) {
        out.close();
        std::cerr << "can't dump the tga file\n";
        return false;
    }
    if (!rle) {
        out.write(reinterpret_cast<const char *>(data.data()), w*h*bpp);
        if (!out.good()) {
            std::cerr << "can't unload raw data\n";
            out.close();
            return false;
        }
    } else if (!unload_rle_data(out)) {
        out.close();
        std::cerr << "can't unload rle data\n";
        return false;
    }
    out.write(reinterpret_cast<const char *>(developer_area_ref), sizeof(developer_area_ref));
    if (!out.good()) {
        std::cerr << "can't dump the tga file\n";
        out.close();
        return false;
    }
    out.write(reinterpret_cast<const char *>(extension_area_ref), sizeof(extension_area_ref));
    if (!out.good()) {
        std::cerr << "can't dump the tga file\n";
        out.close();
        return false;
    }
    out.write(reinterpret_cast<const char *>(footer), sizeof(footer));
    if (!out.good()) {
        std::cerr << "can't dump the tga file\n";
        out.close();
        return false;
    }
    out.close();
    return true;
}

// TODO: it is not necessary to break a raw chunk for two equal pixels (for the matter of the resulting size)
bool TGAImage::unload_rle_data(std::ofstream &out) const {
    const std::uint8_t max_chunk_length = 128;
    size_t npixels = w*h;
    size_t curpix = 0;
    while (curpix<npixels) {
        size_t chunkstart = curpix*bpp;
        size_t curbyte = curpix*bpp;
        std::uint8_t run_length = 1;
        bool raw = true;
        while (curpix+run_length<npixels && run_length<max_chunk_length) {
            bool succ_eq = true;
            for (int t=0; succ_eq && t<bpp; t++)
                succ_eq = (data[curbyte+t]==data[curbyte+t+bpp]);
            curbyte += bpp;
            if (1==run_length)
                raw = !succ_eq;
            if (raw && succ_eq) {
                run_length--;
                break;
            }
            if (!raw && !succ_eq)
                break;
            run_length++;
        }
        curpix += run_length;
        out.put(raw?run_length-1:run_length+127);
        if (!out.good()) {
            std::cerr << "can't dump the tga file\n";
            return false;
        }
        out.write(reinterpret_cast<const char *>(data.data()+chunkstart), (raw?run_length*bpp:bpp));
        if (!out.good()) {
            std::cerr << "can't dump the tga file\n";
            return false;
        }
    }
    return true;
}

TGAColor TGAImage::get(const int x, const int y) const {
    if (!data.size() || x<0 || y<0 || x>=w || y>=h)
        return {};
    return TGAColor(data.data()+(x+y*w)*bpp, bpp);
}

void TGAImage::set(int x, int y, const TGAColor &c) {
    if (!data.size() || x<0 || y<0 || x>=w || y>=h) return;
    memcpy(data.data()+(x+y*w)*bpp, c.bgra, bpp);
}

void TGAImage::flip_horizontally() {
    int half = w>>1;
    for (int i=0; i<half; i++)
        for (int j=0; j<h; j++)
            for (int b=0; b<bpp; b++)
                std::swap(data[(i+j*w)*bpp+b], data[(w-1-i+j*w)*bpp+b]);
}

void TGAImage::flip_vertically() {
    int half = h>>1;
    for (int i=0; i<w; i++)
        for (int j=0; j<half; j++)
            for (int b=0; b<bpp; b++)
                std::swap(data[(i+j*w)*bpp+b], data[(i+(h-1-j)*w)*bpp+b]);
}

int TGAImage::width() const {
    return w;
}

int TGAImage::height() const {
    return h;
}

写一个测试来确保环境正常

#include "tgaimage.h"
const TGAColor white = TGAColor(255, 255, 255, 255);
const TGAColor red   = TGAColor(255, 0,   0,   255);
int main(int argc, char** argv) {
    TGAImage image(100, 100, TGAImage::RGB);
    image.set(52, 41, red);
    image.flip_vertically(); // 垂直方向翻转图片，反转y坐标，作者解释是希望图片的原点在左下角，但很多库原点都在左上角
    image.write_tga_file("output.tga");
    return 0;
}

运行后图片如下

Lesson 1: Bresenham’s Line Drawing Algorithm（画线算法）

首先进行初始化，在图上标记三个位置

#include "tgaimage.h"
constexpr TGAColor white   = {255, 255, 255, 255}; // attention, BGRA order
constexpr TGAColor green   = {  0, 255,   0, 255};
constexpr TGAColor red     = {  255,   0, 0, 255};
constexpr TGAColor blue    = {255, 128,  64, 255};
constexpr TGAColor yellow  = {  0, 200, 255, 255};
int main(int argc, char** argv) {
    constexpr int width  = 64;
    constexpr int height = 64;
    TGAImage framebuffer(width, height, TGAImage::RGB);
    int ax =  7, ay =  3;
    int bx = 12, by = 37;
    int cx = 62, cy = 53;
    framebuffer.set(ax, ay, white);
    framebuffer.set(bx, by, white);
    framebuffer.set(cx, cy, white);
    framebuffer.write_tga_file("framebuffer.tga");
    return 0;
}

得到结果如下首先来学习下如何在像素上画一条线第一次尝试：想象用参数t来表示的一个在$x_a和x_b$之间的点$(x(t),y(t))$

$$ \begin{cases} x(t) = a_x + t \cdot (b_x - a_x) \\ y(t) = a_y + t \cdot (b_y - a_y) \end{cases} $$

如果我们变换一下形式就会发现，这就是插值的公式

$$ \begin{cases} x(t) = (1-t) \cdot a_x + t \cdot b_x \\ y(t) = (1-t) \cdot a_y + t \cdot b_y \end{cases} $$

下面来尝试一下通过控制t来绘制这条直线

void drawLine_first(int x1,int y1,int x2,int y2,TGAImage &img,TGAColor color){
    for(float t = 0;t<=1;t+=0.02){
        int x = std::round(x1 + t * (x2-x1)); // round会进行四舍五入
        int y = std::round(y1 + t * (y2-y1));
        img.set(x,y,color);
    }
}

考虑左下角的a点和右上角的c点，如果我从a向c绘制一次，再从c向a绘制一次，结果如下

图中能明显看出问题，一是在x上有缝隙，二是不同的绘制方向结果是不同的，第三另外t步长的设置也不容易控制接下来看第二种尝试，代码的改变写在了注释中

void drawLine_Second(int ax, int ay, int bx, int by, TGAImage &img, TGAColor color){
    for (int x = ax ; x<= bx; x++) { // 不再以t控制，而是以x的进行进行控制，保证了水平方向上不会有空隙
    	// 如果不加强制转换，当分子分母都是整数时，计算结果的小数部分会被截断
        float t = (x-ax)/static_cast<float>(bx-ax); // 变换了形式，表示出当x移动一格时，t是多少，
        int y = std::round( ay + (by-ay)*t );
        img.set(x, y, color);
    }
}

这里碰到了Cpp的static_cast，顺便学习一下是什么隐式转换（Implicit Conversion）：编译器或解释器‌自动完成‌的类型转换，无需程序员显式指定。显式转换（Explicit Conversion）：程序员‌主动指定‌的类型转换，通常通过语法或函数强制实现。 static_cast是 C++ 中一种显式类型转换操作符，‌用于在编译时进行类型转换，‌适用场景‌：明确的、安全的类型转换（如基本类型转换、向上转换、void* 转换），不用c语言风格的强制转换是为了规避风险。从下图看到问题2，3已经解决了，原本有的问题1空隙也没有了，但是出现了新的很大的空隙，甚至一条线直接消失了线消失比较好解决，原因就是从右上角向左下角画线，if就进不去

void drawLine_Second(int ax, int ay, int bx, int by, TGAImage &img, TGAColor color){
    if (ax>bx) { // make it left−to−right
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    for (int x = ax ; x<= bx; x++) { // 不再以t控制，而是以x的进行进行控制，保证了水平方向上不会有空隙
        // 如果不加强制转换，当分子分母都是整数时，计算结果的小数部分会被截断
        float t = (x-ax)/static_cast<float>(bx-ax); // 变换了形式，表示出当x移动一格时，t是多少，
        int y = std::round( ay + (by-ay)*t );
        img.set(x, y, color);
    }
}

下面就要解决a->b这么大空隙了，这个问题就是斜率大的线段的采样不足，因为x只走了几步就到了，也就只会画出几个点接下来进行第三次尝试，解决思路就是如果斜率太大，就从y进行for，而不是x，教程中的解决思路十分巧妙，如果斜率太大，就交换x坐标和y坐标，同时绘制时绘制坐标变成$(y,x)$

// 最终版本
void drawLine(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    bool steep = std::abs(ax-bx) < std::abs(ay-by);
    if (steep) { // if the drawLine is steep, we transpose the image
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if (ax>bx) { // make it left−to−right
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    int y = ay;
    int ierror = 0;
    for (int x=ax; x<=bx; x++) {
        if (steep) // if transposed, de−transpose
            framebuffer.set(y, x, color);
        else
            framebuffer.set(x, y, color);
        ierror += 2 * std::abs(by-ay);
        y += (by > ay ? 1 : -1) * (ierror > bx - ax);
        ierror -= 2 * (bx-ax)   * (ierror > bx - ax);
    }
}

至此就完成了比较好的效果的直线绘制，第四次尝试是如何优化算法的运行速度，这里就不说了，直接上他最终的优化代码作为后续使用，但是走样（锯齿）问题没有解决，这里不详细说，后边课程肯定会涉及到。

Lesson 2: Triangle rasterization 三角形光栅化

本节课目的是画一个实心的三角形（上节课只画了边）首先提供一个画线框三角形的代码

constexpr int width  = 128;
constexpr int height = 128;
// 绘制一个三角形
void drawTriangle(int ax, int ay, int bx, int by, int cx, int cy, TGAImage &framebuffer, TGAColor color) {
    drawLine(ax, ay, bx, by, framebuffer, color);
    drawLine(bx, by, cx, cy, framebuffer, color);
    drawLine(cx, cy, ax, ay, framebuffer, color);
}
// 绘制三个三角形进行测试
int main(int argc, char** argv) {
    TGAImage framebuffer(width, height, TGAImage::RGB);
    drawTriangle(  7, 45, 35, 100, 45,  60, framebuffer, red);
    drawTriangle(120, 35, 90,   5, 45, 110, framebuffer, white);
    drawTriangle(115, 83, 80,  90, 85, 120, framebuffer, green);
    framebuffer.write_tga_file("framebuffer.tga");
    return 0;
}

填充三角形需要做的事情：

它应该简单快捷
它应该是对称的 —— 输出不应该依赖于传递给函数的顶点顺序
如果两个三角形共享两个顶点，由于光栅化舍入误差，它们之间不应该有间隙

Scanline rendering 线性扫描

这块不是很想实现，因为学过games101后，已经知道更好的方法是什么了😂，这里参考别的博客看看原理是啥吧。

https://blog.csdn.net/qq_42987967/article/details/124831459

思路就是先对顶点y坐标进行排序，并从中间顶点水平切一刀，这样扫描时比例变化是正常的不会突然反向，交点A沿t0到t2的主斜边移动，B沿t0到t1的侧边移动，移动过程中填充内部的像素

void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color) { 
    // sort the vertices, t0, t1, t2 lower−to−upper (bubblesort yay!) 
    if (t0.y>t1.y) std::swap(t0, t1); 
    if (t0.y>t2.y) std::swap(t0, t2); 
    if (t1.y>t2.y) std::swap(t1, t2); 
    int total_height = t2.y-t0.y; 
    for (int y=t0.y; y<=t1.y; y++) { 
        int segment_height = t1.y-t0.y+1; 
        float alpha = (float)(y-t0.y)/total_height; 
        float beta  = (float)(y-t0.y)/segment_height; // be careful with divisions by zero 
        Vec2i A = t0 + (t2-t0)*alpha; 
        Vec2i B = t0 + (t1-t0)*beta; 
        if (A.x>B.x) std::swap(A, B); 
        for (int j=A.x; j<=B.x; j++) { 
            image.set(j, y, color); // attention, due to int casts t0.y+i != A.y 
        } 
    } 
    for (int y=t1.y; y<=t2.y; y++) { 
        int segment_height =  t2.y-t1.y+1; 
        float alpha = (float)(y-t0.y)/total_height; 
        float beta  = (float)(y-t1.y)/segment_height; // be careful with divisions by zero 
        Vec2i A = t0 + (t2-t0)*alpha; 
        Vec2i B = t1 + (t2-t1)*beta; 
        if (A.x>B.x) std::swap(A, B); 
        for (int j=A.x; j<=B.x; j++) { 
            image.set(j, y, color); // attention, due to int casts t0.y+i != A.y 
        } 
    } 
}

Modern rasterization approach 现代栅格化方法

基本思路就是用包围盒围住三角形，减少需要遍历的三角形数量，之后遍历盒子中每个像素，判断是否在三角形内部，伪代码如下

triangle(vec2 points[3]) {
    vec2 bbox[2] = find_bounding_box(points);
    for (each pixel in the bounding box) {
        if (inside(points, pixel)) {
            put_pixel(pixel);
        }
    }
}

首先是包围盒的建立，其实就找三个顶点的最大值和最小值，就能画出一个围住三角形最小的矩形

    int bbminx = std::min(std::min(ax, bx), cx); // bounding box for the triangle
    int bbminy = std::min(std::min(ay, by), cy); // defined by its top left and bottom right corners
    int bbmaxx = std::max(std::max(ax, bx), cx);
    int bbmaxy = std::max(std::max(ay, by), cy);

之后就是剔除不在三角形内部的像素，在games101提供的方法是用像素坐标叉乘三条边顺序组成的向量，如果叉乘结果都在一个方向，那这个像素点就在三角形内部，在这个教程中并不是这样做的，它是利用重心坐标，计算出一个点对于这个三角形的重心坐标$(\alpha,\beta,\gamma)$，只要有一个是负数，就表示不再三角形内，那就用他这种方法吧。重心坐标反映的是划分为三个小三角形的面积比，如果点在三角形外，那面积算出来就成负数了。首先提供一个算三角形面积的函数

1
2
3

double signed_triangle_area(int ax, int ay, int bx, int by, int cx, int cy) {
    return .5*((by-ay)*(bx+ax) + (cy-by)*(cx+bx) + (ay-cy)*(ax+cx));
}

下来就可以用面积比来求重心坐标了

#pragma omp parallel for
    for (int x=bbminx; x<=bbmaxx; x++) {
        for (int y=bbminy; y<=bbmaxy; y++) {
            double alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
            double beta  = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
            double gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
            if (alpha<0 || beta<0 || gamma<0) continue; // negative barycentric coordinate => the pixel is outside the triangle
            framebuffer.set(x, y, color);
        }
    }
}

#pragma omp parallel for是OpenMP中的一个指令，用于并行化for循环。OpenMP是一种并行编程模型，可以在支持OpenMP的编译器上使用最终的三角形绘制如下

// 绘制一个三角形
void drawTriangle(int ax, int ay, int bx, int by, int cx, int cy, TGAImage &framebuffer, TGAColor color) {
    int bbminx = std::min(std::min(ax, bx), cx); // bounding box for the triangle
    int bbminy = std::min(std::min(ay, by), cy); // defined by its top left and bottom right corners
    int bbmaxx = std::max(std::max(ax, bx), cx);
    int bbmaxy = std::max(std::max(ay, by), cy);
    double total_area = signed_triangle_area(ax, ay, bx, by, cx, cy);

#pragma omp parallel for
    for (int x=bbminx; x<=bbmaxx; x++) {
        for (int y=bbminy; y<=bbmaxy; y++) {
            double alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
            double beta  = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
            double gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
            if (alpha<0 || beta<0 || gamma<0) continue; // negative barycentric coordinate => the pixel is outside the triangle
            framebuffer.set(x, y, color);
        }
    }
}

back-face culling 背面剔除

一般来说法线背对相机或光线方向的平面可认为是没用的，可以不用绘制将其剔除以减少运算量。原理是如果正面的三角形都是顺时针，那背面的都是逆时针，另外一种方法是计算三角形法向量与摄像机的点乘，小于0说明它是背对的。在第2课中使用的是计算三角形的面积，下面这个代码是带符号的，所以负的面积说明三角形是背对的。

1
2
3

double signed_triangle_area(int ax, int ay, int bx, int by, int cx, int cy) {
    return .5*((by-ay)*(bx+ax) + (cy-by)*(cx+bx) + (ay-cy)*(ax+cx));
}

在这里引入向量和模型导入的函数 vector.h

生成下图，可以看出来把所有三角形全画出来，脸部轮廓都不见了修改三角形绘制函数，如果计算出来的三角形面积是负数，就直接不绘制了，这里设置小于1，是把面积太小的三角形直接省略了

void drawTriangle(int ax, int ay, int bx, int by, int cx, int cy, TGAImage &framebuffer, TGAColor color) {
    int bbminx = std::min(std::min(ax, bx), cx);
    int bbminy = std::min(std::min(ay, by), cy);
    int bbmaxx = std::max(std::max(ax, bx), cx);
    int bbmaxy = std::max(std::max(ay, by), cy);
    double total_area = signed_triangle_area(ax, ay, bx, by, cx, cy);
    if (total_area<1) return;

#pragma omp parallel for
    for (int x=bbminx; x<=bbmaxx; x++) {
        for (int y=bbminy; y<=bbmaxy; y++) {
            double alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
            double beta  = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
            double gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
            if (alpha<0 || beta<0 || gamma<0) continue;
            framebuffer.set(x, y, color);
        }
    }
}

修改后明显可以看出脸部轮廓出来了

使用2k分辨率，效果更好了

Lesson 3: Hidden faces removal (z buffer)

首先介绍一下代码变动模型获取使用开源库

//
// Created by LEI XU on 4/28/19.
//
//
// This loader is created by Robert Smith.
// https://github.com/Bly7/OBJ-Loader
// Use the MIT license.


#ifndef RASTERIZER_OBJ_LOADER_H
#define RASTERIZER_OBJ_LOADER_H

#pragma once


#include <iostream>
#include <vector>
#include <string>
#include <fstream>
#include <math.h>

// Print progress to console while loading (large models)
#define OBJL_CONSOLE_OUTPUT

// Namespace: OBJL
//
// Description: The namespace that holds eveyrthing that
//	is needed and used for the OBJ Model Loader
namespace objl
{
    // Structure: Vector2
    //
    // Description: A 2D Vector that Holds Positional Data
    struct Vector2
    {
        // Default Constructor
        Vector2()
        {
            X = 0.0f;
            Y = 0.0f;
        }
        // Variable Set Constructor
        Vector2(float X_, float Y_)
        {
            X = X_;
            Y = Y_;
        }
        // Bool Equals Operator Overload
        bool operator==(const Vector2& other) const
        {
            return (this->X == other.X && this->Y == other.Y);
        }
        // Bool Not Equals Operator Overload
        bool operator!=(const Vector2& other) const
        {
            return !(this->X == other.X && this->Y == other.Y);
        }
        // Addition Operator Overload
        Vector2 operator+(const Vector2& right) const
        {
            return Vector2(this->X + right.X, this->Y + right.Y);
        }
        // Subtraction Operator Overload
        Vector2 operator-(const Vector2& right) const
        {
            return Vector2(this->X - right.X, this->Y - right.Y);
        }
        // Float Multiplication Operator Overload
        Vector2 operator*(const float& other) const
        {
            return Vector2(this->X *other, this->Y * other);
        }

        // Positional Variables
        float X;
        float Y;
    };

    // Structure: Vector3
    //
    // Description: A 3D Vector that Holds Positional Data
    struct Vector3
    {
        // Default Constructor
        Vector3()
        {
            X = 0.0f;
            Y = 0.0f;
            Z = 0.0f;
        }
        // Variable Set Constructor
        Vector3(float X_, float Y_, float Z_)
        {
            X = X_;
            Y = Y_;
            Z = Z_;
        }
        // Bool Equals Operator Overload
        bool operator==(const Vector3& other) const
        {
            return (this->X == other.X && this->Y == other.Y && this->Z == other.Z);
        }
        // Bool Not Equals Operator Overload
        bool operator!=(const Vector3& other) const
        {
            return !(this->X == other.X && this->Y == other.Y && this->Z == other.Z);
        }
        // Addition Operator Overload
        Vector3 operator+(const Vector3& right) const
        {
            return Vector3(this->X + right.X, this->Y + right.Y, this->Z + right.Z);
        }
        // Subtraction Operator Overload
        Vector3 operator-(const Vector3& right) const
        {
            return Vector3(this->X - right.X, this->Y - right.Y, this->Z - right.Z);
        }
        // Float Multiplication Operator Overload
        Vector3 operator*(const float& other) const
        {
            return Vector3(this->X * other, this->Y * other, this->Z * other);
        }
        // Float Division Operator Overload
        Vector3 operator/(const float& other) const
        {
            return Vector3(this->X / other, this->Y / other, this->Z / other);
        }

        // Positional Variables
        float X;
        float Y;
        float Z;
    };

    // Structure: Vertex
    //
    // Description: Model Vertex object that holds
    //	a Position, Normal, and Texture Coordinate
    struct Vertex
    {
        // Position Vector
        Vector3 Position;

        // Normal Vector
        Vector3 Normal;

        // Texture Coordinate Vector
        Vector2 TextureCoordinate;
    };

    struct Material
    {
        Material()
        {
            name;
            Ns = 0.0f;
            Ni = 0.0f;
            d = 0.0f;
            illum = 0;
        }

        // Material Name
        std::string name;
        // Ambient Color
        Vector3 Ka;
        // Diffuse Color
        Vector3 Kd;
        // Specular Color
        Vector3 Ks;
        // Specular Exponent
        float Ns;
        // Optical Density
        float Ni;
        // Dissolve
        float d;
        // Illumination
        int illum;
        // Ambient Texture Map
        std::string map_Ka;
        // Diffuse Texture Map
        std::string map_Kd;
        // Specular Texture Map
        std::string map_Ks;
        // Specular Hightlight Map
        std::string map_Ns;
        // Alpha Texture Map
        std::string map_d;
        // Bump Map
        std::string map_bump;
    };

    // Structure: Mesh
    //
    // Description: A Simple Mesh Object that holds
    //	a name, a vertex list, and an index list
    struct Mesh
    {
        // Default Constructor
        Mesh()
        {

        }
        // Variable Set Constructor
        Mesh(std::vector<Vertex>& _Vertices, std::vector<unsigned int>& _Indices)
        {
            Vertices = _Vertices;
            Indices = _Indices;
        }
        // Mesh Name
        std::string MeshName;
        // Vertex List
        std::vector<Vertex> Vertices;
        // Index List
        std::vector<unsigned int> Indices;

        // Material
        Material MeshMaterial;
    };

    // Namespace: Math
    //
    // Description: The namespace that holds all of the math
    //	functions need for OBJL
    namespace math
    {
        // Vector3 Cross Product
        Vector3 CrossV3(const Vector3 a, const Vector3 b)
        {
            return Vector3(a.Y * b.Z - a.Z * b.Y,
                           a.Z * b.X - a.X * b.Z,
                           a.X * b.Y - a.Y * b.X);
        }

        // Vector3 Magnitude Calculation
        float MagnitudeV3(const Vector3 in)
        {
            return (sqrtf(powf(in.X, 2) + powf(in.Y, 2) + powf(in.Z, 2)));
        }

        // Vector3 DotProduct
        float DotV3(const Vector3 a, const Vector3 b)
        {
            return (a.X * b.X) + (a.Y * b.Y) + (a.Z * b.Z);
        }

        // Angle between 2 Vector3 Objects
        float AngleBetweenV3(const Vector3 a, const Vector3 b)
        {
            float angle = DotV3(a, b);
            angle /= (MagnitudeV3(a) * MagnitudeV3(b));
            return angle = acosf(angle);
        }

        // Projection Calculation of a onto b
        Vector3 ProjV3(const Vector3 a, const Vector3 b)
        {
            Vector3 bn = b / MagnitudeV3(b);
            return bn * DotV3(a, bn);
        }
    }

    // Namespace: Algorithm
    //
    // Description: The namespace that holds all of the
    // Algorithms needed for OBJL
    namespace algorithm
    {
        // Vector3 Multiplication Opertor Overload
        Vector3 operator*(const float& left, const Vector3& right)
        {
            return Vector3(right.X * left, right.Y * left, right.Z * left);
        }

        // A test to see if P1 is on the same side as P2 of a line segment ab
        bool SameSide(Vector3 p1, Vector3 p2, Vector3 a, Vector3 b)
        {
            Vector3 cp1 = math::CrossV3(b - a, p1 - a);
            Vector3 cp2 = math::CrossV3(b - a, p2 - a);

            if (math::DotV3(cp1, cp2) >= 0)
                return true;
            else
                return false;
        }

        // Generate a cross produect normal for a triangle
        Vector3 GenTriNormal(Vector3 t1, Vector3 t2, Vector3 t3)
        {
            Vector3 u = t2 - t1;
            Vector3 v = t3 - t1;

            Vector3 normal = math::CrossV3(u,v);

            return normal;
        }

        // Check to see if a Vector3 Point is within a 3 Vector3 Triangle
        bool inTriangle(Vector3 point, Vector3 tri1, Vector3 tri2, Vector3 tri3)
        {
            // Test to see if it is within an infinite prism that the triangle outlines.
            bool within_tri_prisim = SameSide(point, tri1, tri2, tri3) && SameSide(point, tri2, tri1, tri3)
                                     && SameSide(point, tri3, tri1, tri2);

            // If it isn't it will never be on the triangle
            if (!within_tri_prisim)
                return false;

            // Calulate Triangle's Normal
            Vector3 n = GenTriNormal(tri1, tri2, tri3);

            // Project the point onto this normal
            Vector3 proj = math::ProjV3(point, n);

            // If the distance from the triangle to the point is 0
            //	it lies on the triangle
            if (math::MagnitudeV3(proj) == 0)
                return true;
            else
                return false;
        }

        // Split a String into a string array at a given token
        inline void split(const std::string &in,
                          std::vector<std::string> &out,
                          std::string token)
        {
            out.clear();

            std::string temp;

            for (int i = 0; i < int(in.size()); i++)
            {
                std::string test = in.substr(i, token.size());

                if (test == token)
                {
                    if (!temp.empty())
                    {
                        out.push_back(temp);
                        temp.clear();
                        i += (int)token.size() - 1;
                    }
                    else
                    {
                        out.push_back("");
                    }
                }
                else if (i + token.size() >= in.size())
                {
                    temp += in.substr(i, token.size());
                    out.push_back(temp);
                    break;
                }
                else
                {
                    temp += in[i];
                }
            }
        }

        // Get tail of string after first token and possibly following spaces
        inline std::string tail(const std::string &in)
        {
            size_t token_start = in.find_first_not_of(" \t");
            size_t space_start = in.find_first_of(" \t", token_start);
            size_t tail_start = in.find_first_not_of(" \t", space_start);
            size_t tail_end = in.find_last_not_of(" \t");
            if (tail_start != std::string::npos && tail_end != std::string::npos)
            {
                return in.substr(tail_start, tail_end - tail_start + 1);
            }
            else if (tail_start != std::string::npos)
            {
                return in.substr(tail_start);
            }
            return "";
        }

        // Get first token of string
        inline std::string firstToken(const std::string &in)
        {
            if (!in.empty())
            {
                size_t token_start = in.find_first_not_of(" \t");
                size_t token_end = in.find_first_of(" \t", token_start);
                if (token_start != std::string::npos && token_end != std::string::npos)
                {
                    return in.substr(token_start, token_end - token_start);
                }
                else if (token_start != std::string::npos)
                {
                    return in.substr(token_start);
                }
            }
            return "";
        }

        // Get element at given index position
        template <class T>
        inline const T & getElement(const std::vector<T> &elements, std::string &index)
        {
            int idx = std::stoi(index);
            if (idx < 0)
                idx = int(elements.size()) + idx;
            else
                idx--;
            return elements[idx];
        }
    }

    // Class: Loader
    //
    // Description: The OBJ Model Loader
    class Loader
    {
    public:
        // Default Constructor
        Loader()
        {

        }
        ~Loader()
        {
            LoadedMeshes.clear();
        }

        // Load a file into the loader
        //
        // If file is loaded return true
        //
        // If the file is unable to be found
        // or unable to be loaded return false
        bool LoadFile(std::string Path)
        {
            // If the file is not an .obj file return false
            if (Path.substr(Path.size() - 4, 4) != ".obj")
                return false;


            std::ifstream file(Path);

            if (!file.is_open())
                return false;

            LoadedMeshes.clear();
            LoadedVertices.clear();
            LoadedIndices.clear();

            std::vector<Vector3> Positions;
            std::vector<Vector2> TCoords;
            std::vector<Vector3> Normals;

            std::vector<Vertex> Vertices;
            std::vector<unsigned int> Indices;

            std::vector<std::string> MeshMatNames;

            bool listening = false;
            std::string meshname;

            Mesh tempMesh;

#ifdef OBJL_CONSOLE_OUTPUT
            const unsigned int outputEveryNth = 1000;
            unsigned int outputIndicator = outputEveryNth;
#endif

            std::string curline;
            while (std::getline(file, curline))
            {
#ifdef OBJL_CONSOLE_OUTPUT
                if ((outputIndicator = ((outputIndicator + 1) % outputEveryNth)) == 1)
                {
                    if (!meshname.empty())
                    {
                        std::cout
                                << "\r- " << meshname
                                << "\t| vertices > " << Positions.size()
                                << "\t| texcoords > " << TCoords.size()
                                << "\t| normals > " << Normals.size()
                                << "\t| triangles > " << (Vertices.size() / 3)
                                << (!MeshMatNames.empty() ? "\t| material: " + MeshMatNames.back() : "");
                    }
                }
#endif

                // Generate a Mesh Object or Prepare for an object to be created
                if (algorithm::firstToken(curline) == "o" || algorithm::firstToken(curline) == "g" || curline[0] == 'g')
                {
                    if (!listening)
                    {
                        listening = true;

                        if (algorithm::firstToken(curline) == "o" || algorithm::firstToken(curline) == "g")
                        {
                            meshname = algorithm::tail(curline);
                        }
                        else
                        {
                            meshname = "unnamed";
                        }
                    }
                    else
                    {
                        // Generate the mesh to put into the array

                        if (!Indices.empty() && !Vertices.empty())
                        {
                            // Create Mesh
                            tempMesh = Mesh(Vertices, Indices);
                            tempMesh.MeshName = meshname;

                            // Insert Mesh
                            LoadedMeshes.push_back(tempMesh);

                            // Cleanup
                            Vertices.clear();
                            Indices.clear();
                            meshname.clear();

                            meshname = algorithm::tail(curline);
                        }
                        else
                        {
                            if (algorithm::firstToken(curline) == "o" || algorithm::firstToken(curline) == "g")
                            {
                                meshname = algorithm::tail(curline);
                            }
                            else
                            {
                                meshname = "unnamed";
                            }
                        }
                    }
#ifdef OBJL_CONSOLE_OUTPUT
                    std::cout << std::endl;
                    outputIndicator = 0;
#endif
                }
                // Generate a Vertex Position
                if (algorithm::firstToken(curline) == "v")
                {
                    std::vector<std::string> spos;
                    Vector3 vpos;
                    algorithm::split(algorithm::tail(curline), spos, " ");

                    vpos.X = std::stof(spos[0]);
                    vpos.Y = std::stof(spos[1]);
                    vpos.Z = std::stof(spos[2]);

                    Positions.push_back(vpos);
                }
                // Generate a Vertex Texture Coordinate
                if (algorithm::firstToken(curline) == "vt")
                {
                    std::vector<std::string> stex;
                    Vector2 vtex;
                    algorithm::split(algorithm::tail(curline), stex, " ");

                    vtex.X = std::stof(stex[0]);
                    vtex.Y = std::stof(stex[1]);

                    TCoords.push_back(vtex);
                }
                // Generate a Vertex Normal;
                if (algorithm::firstToken(curline) == "vn")
                {
                    std::vector<std::string> snor;
                    Vector3 vnor;
                    algorithm::split(algorithm::tail(curline), snor, " ");

                    vnor.X = std::stof(snor[0]);
                    vnor.Y = std::stof(snor[1]);
                    vnor.Z = std::stof(snor[2]);

                    Normals.push_back(vnor);
                }
                // Generate a Face (vertices & indices)
                if (algorithm::firstToken(curline) == "f")
                {
                    // Generate the vertices
                    std::vector<Vertex> vVerts;
                    GenVerticesFromRawOBJ(vVerts, Positions, TCoords, Normals, curline);

                    // Add Vertices
                    for (int i = 0; i < int(vVerts.size()); i++)
                    {
                        Vertices.push_back(vVerts[i]);

                        LoadedVertices.push_back(vVerts[i]);
                    }

                    std::vector<unsigned int> iIndices;

                    VertexTriangluation(iIndices, vVerts);

                    // Add Indices
                    for (int i = 0; i < int(iIndices.size()); i++)
                    {
                        unsigned int indnum = (unsigned int)((Vertices.size()) - vVerts.size()) + iIndices[i];
                        Indices.push_back(indnum);

                        indnum = (unsigned int)((LoadedVertices.size()) - vVerts.size()) + iIndices[i];
                        LoadedIndices.push_back(indnum);

                    }
                }
                // Get Mesh Material Name
                if (algorithm::firstToken(curline) == "usemtl")
                {
                    MeshMatNames.push_back(algorithm::tail(curline));

                    // Create new Mesh, if Material changes within a group
                    if (!Indices.empty() && !Vertices.empty())
                    {
                        // Create Mesh
                        tempMesh = Mesh(Vertices, Indices);
                        tempMesh.MeshName = meshname;
                        int i = 2;
                        while(1) {
                            tempMesh.MeshName = meshname + "_" + std::to_string(i);

                            for (auto &m : LoadedMeshes)
                                if (m.MeshName == tempMesh.MeshName)
                                    continue;
                            break;
                        }

                        // Insert Mesh
                        LoadedMeshes.push_back(tempMesh);

                        // Cleanup
                        Vertices.clear();
                        Indices.clear();
                    }

#ifdef OBJL_CONSOLE_OUTPUT
                    outputIndicator = 0;
#endif
                }
                // Load Materials
                if (algorithm::firstToken(curline) == "mtllib")
                {
                    // Generate LoadedMaterial

                    // Generate a path to the material file
                    std::vector<std::string> temp;
                    algorithm::split(Path, temp, "/");

                    std::string pathtomat = "";

                    if (temp.size() != 1)
                    {
                        for (int i = 0; i < temp.size() - 1; i++)
                        {
                            pathtomat += temp[i] + "/";
                        }
                    }


                    pathtomat += algorithm::tail(curline);

#ifdef OBJL_CONSOLE_OUTPUT
                    std::cout << std::endl << "- find materials in: " << pathtomat << std::endl;
#endif

                    // Load Materials
                    LoadMaterials(pathtomat);
                }
            }

#ifdef OBJL_CONSOLE_OUTPUT
            std::cout << std::endl;
#endif

            // Deal with last mesh

            if (!Indices.empty() && !Vertices.empty())
            {
                // Create Mesh
                tempMesh = Mesh(Vertices, Indices);
                tempMesh.MeshName = meshname;

                // Insert Mesh
                LoadedMeshes.push_back(tempMesh);
            }

            file.close();

            // Set Materials for each Mesh
            for (int i = 0; i < MeshMatNames.size(); i++)
            {
                std::string matname = MeshMatNames[i];

                // Find corresponding material name in loaded materials
                // when found copy material variables into mesh material
                for (int j = 0; j < LoadedMaterials.size(); j++)
                {
                    if (LoadedMaterials[j].name == matname)
                    {
                        LoadedMeshes[i].MeshMaterial = LoadedMaterials[j];
                        break;
                    }
                }
            }

            if (LoadedMeshes.empty() && LoadedVertices.empty() && LoadedIndices.empty())
            {
                return false;
            }
            else
            {
                return true;
            }
        }

        // Loaded Mesh Objects
        std::vector<Mesh> LoadedMeshes;
        // Loaded Vertex Objects
        std::vector<Vertex> LoadedVertices;
        // Loaded Index Positions
        std::vector<unsigned int> LoadedIndices;
        // Loaded Material Objects
        std::vector<Material> LoadedMaterials;

    private:
        // Generate vertices from a list of positions,
        //	tcoords, normals and a face line
        void GenVerticesFromRawOBJ(std::vector<Vertex>& oVerts,
                                   const std::vector<Vector3>& iPositions,
                                   const std::vector<Vector2>& iTCoords,
                                   const std::vector<Vector3>& iNormals,
                                   std::string icurline)
        {
            std::vector<std::string> sface, svert;
            Vertex vVert;
            algorithm::split(algorithm::tail(icurline), sface, " ");

            bool noNormal = false;

            // For every given vertex do this
            for (int i = 0; i < int(sface.size()); i++)
            {
                // See What type the vertex is.
                int vtype;

                algorithm::split(sface[i], svert, "/");

                // Check for just position - v1
                if (svert.size() == 1)
                {
                    // Only position
                    vtype = 1;
                }

                // Check for position & texture - v1/vt1
                if (svert.size() == 2)
                {
                    // Position & Texture
                    vtype = 2;
                }

                // Check for Position, Texture and Normal - v1/vt1/vn1
                // or if Position and Normal - v1//vn1
                if (svert.size() == 3)
                {
                    if (svert[1] != "")
                    {
                        // Position, Texture, and Normal
                        vtype = 4;
                    }
                    else
                    {
                        // Position & Normal
                        vtype = 3;
                    }
                }

                // Calculate and store the vertex
                switch (vtype)
                {
                    case 1: // P
                    {
                        vVert.Position = algorithm::getElement(iPositions, svert[0]);
                        vVert.TextureCoordinate = Vector2(0, 0);
                        noNormal = true;
                        oVerts.push_back(vVert);
                        break;
                    }
                    case 2: // P/T
                    {
                        vVert.Position = algorithm::getElement(iPositions, svert[0]);
                        vVert.TextureCoordinate = algorithm::getElement(iTCoords, svert[1]);
                        noNormal = true;
                        oVerts.push_back(vVert);
                        break;
                    }
                    case 3: // P//N
                    {
                        vVert.Position = algorithm::getElement(iPositions, svert[0]);
                        vVert.TextureCoordinate = Vector2(0, 0);
                        vVert.Normal = algorithm::getElement(iNormals, svert[2]);
                        oVerts.push_back(vVert);
                        break;
                    }
                    case 4: // P/T/N
                    {
                        vVert.Position = algorithm::getElement(iPositions, svert[0]);
                        vVert.TextureCoordinate = algorithm::getElement(iTCoords, svert[1]);
                        vVert.Normal = algorithm::getElement(iNormals, svert[2]);
                        oVerts.push_back(vVert);
                        break;
                    }
                    default:
                    {
                        break;
                    }
                }
            }

            // take care of missing normals
            // these may not be truly acurate but it is the
            // best they get for not compiling a mesh with normals
            if (noNormal)
            {
                Vector3 A = oVerts[0].Position - oVerts[1].Position;
                Vector3 B = oVerts[2].Position - oVerts[1].Position;

                Vector3 normal = math::CrossV3(A, B);

                for (int i = 0; i < int(oVerts.size()); i++)
                {
                    oVerts[i].Normal = normal;
                }
            }
        }

        // Triangulate a list of vertices into a face by printing
        //	inducies corresponding with triangles within it
        void VertexTriangluation(std::vector<unsigned int>& oIndices,
                                 const std::vector<Vertex>& iVerts)
        {
            // If there are 2 or less verts,
            // no triangle can be created,
            // so exit
            if (iVerts.size() < 3)
            {
                return;
            }
            // If it is a triangle no need to calculate it
            if (iVerts.size() == 3)
            {
                oIndices.push_back(0);
                oIndices.push_back(1);
                oIndices.push_back(2);
                return;
            }

            // Create a list of vertices
            std::vector<Vertex> tVerts = iVerts;

            while (true)
            {
                // For every vertex
                for (int i = 0; i < int(tVerts.size()); i++)
                {
                    // pPrev = the previous vertex in the list
                    Vertex pPrev;
                    if (i == 0)
                    {
                        pPrev = tVerts[tVerts.size() - 1];
                    }
                    else
                    {
                        pPrev = tVerts[i - 1];
                    }

                    // pCur = the current vertex;
                    Vertex pCur = tVerts[i];

                    // pNext = the next vertex in the list
                    Vertex pNext;
                    if (i == tVerts.size() - 1)
                    {
                        pNext = tVerts[0];
                    }
                    else
                    {
                        pNext = tVerts[i + 1];
                    }

                    // Check to see if there are only 3 verts left
                    // if so this is the last triangle
                    if (tVerts.size() == 3)
                    {
                        // Create a triangle from pCur, pPrev, pNext
                        for (int j = 0; j < int(tVerts.size()); j++)
                        {
                            if (iVerts[j].Position == pCur.Position)
                                oIndices.push_back(j);
                            if (iVerts[j].Position == pPrev.Position)
                                oIndices.push_back(j);
                            if (iVerts[j].Position == pNext.Position)
                                oIndices.push_back(j);
                        }

                        tVerts.clear();
                        break;
                    }
                    if (tVerts.size() == 4)
                    {
                        // Create a triangle from pCur, pPrev, pNext
                        for (int j = 0; j < int(iVerts.size()); j++)
                        {
                            if (iVerts[j].Position == pCur.Position)
                                oIndices.push_back(j);
                            if (iVerts[j].Position == pPrev.Position)
                                oIndices.push_back(j);
                            if (iVerts[j].Position == pNext.Position)
                                oIndices.push_back(j);
                        }

                        Vector3 tempVec;
                        for (int j = 0; j < int(tVerts.size()); j++)
                        {
                            if (tVerts[j].Position != pCur.Position
                                && tVerts[j].Position != pPrev.Position
                                && tVerts[j].Position != pNext.Position)
                            {
                                tempVec = tVerts[j].Position;
                                break;
                            }
                        }

                        // Create a triangle from pCur, pPrev, pNext
                        for (int j = 0; j < int(iVerts.size()); j++)
                        {
                            if (iVerts[j].Position == pPrev.Position)
                                oIndices.push_back(j);
                            if (iVerts[j].Position == pNext.Position)
                                oIndices.push_back(j);
                            if (iVerts[j].Position == tempVec)
                                oIndices.push_back(j);
                        }

                        tVerts.clear();
                        break;
                    }

                    // If Vertex is not an interior vertex
                    float angle = math::AngleBetweenV3(pPrev.Position - pCur.Position, pNext.Position - pCur.Position) * (180 / 3.14159265359);
                    if (angle <= 0 && angle >= 180)
                        continue;

                    // If any vertices are within this triangle
                    bool inTri = false;
                    for (int j = 0; j < int(iVerts.size()); j++)
                    {
                        if (algorithm::inTriangle(iVerts[j].Position, pPrev.Position, pCur.Position, pNext.Position)
                            && iVerts[j].Position != pPrev.Position
                            && iVerts[j].Position != pCur.Position
                            && iVerts[j].Position != pNext.Position)
                        {
                            inTri = true;
                            break;
                        }
                    }
                    if (inTri)
                        continue;

                    // Create a triangle from pCur, pPrev, pNext
                    for (int j = 0; j < int(iVerts.size()); j++)
                    {
                        if (iVerts[j].Position == pCur.Position)
                            oIndices.push_back(j);
                        if (iVerts[j].Position == pPrev.Position)
                            oIndices.push_back(j);
                        if (iVerts[j].Position == pNext.Position)
                            oIndices.push_back(j);
                    }

                    // Delete pCur from the list
                    for (int j = 0; j < int(tVerts.size()); j++)
                    {
                        if (tVerts[j].Position == pCur.Position)
                        {
                            tVerts.erase(tVerts.begin() + j);
                            break;
                        }
                    }

                    // reset i to the start
                    // -1 since loop will add 1 to it
                    i = -1;
                }

                // if no triangles were created
                if (oIndices.size() == 0)
                    break;

                // if no more vertices
                if (tVerts.size() == 0)
                    break;
            }
        }

        // Load Materials from .mtl file
        bool LoadMaterials(std::string path)
        {
            // If the file is not a material file return false
            if (path.substr(path.size() - 4, path.size()) != ".mtl")
                return false;

            std::ifstream file(path);

            // If the file is not found return false
            if (!file.is_open())
                return false;

            Material tempMaterial;

            bool listening = false;

            // Go through each line looking for material variables
            std::string curline;
            while (std::getline(file, curline))
            {
                // new material and material name
                if (algorithm::firstToken(curline) == "newmtl")
                {
                    if (!listening)
                    {
                        listening = true;

                        if (curline.size() > 7)
                        {
                            tempMaterial.name = algorithm::tail(curline);
                        }
                        else
                        {
                            tempMaterial.name = "none";
                        }
                    }
                    else
                    {
                        // Generate the material

                        // Push Back loaded Material
                        LoadedMaterials.push_back(tempMaterial);

                        // Clear Loaded Material
                        tempMaterial = Material();

                        if (curline.size() > 7)
                        {
                            tempMaterial.name = algorithm::tail(curline);
                        }
                        else
                        {
                            tempMaterial.name = "none";
                        }
                    }
                }
                // Ambient Color
                if (algorithm::firstToken(curline) == "Ka")
                {
                    std::vector<std::string> temp;
                    algorithm::split(algorithm::tail(curline), temp, " ");

                    if (temp.size() != 3)
                        continue;

                    tempMaterial.Ka.X = std::stof(temp[0]);
                    tempMaterial.Ka.Y = std::stof(temp[1]);
                    tempMaterial.Ka.Z = std::stof(temp[2]);
                }
                // Diffuse Color
                if (algorithm::firstToken(curline) == "Kd")
                {
                    std::vector<std::string> temp;
                    algorithm::split(algorithm::tail(curline), temp, " ");

                    if (temp.size() != 3)
                        continue;

                    tempMaterial.Kd.X = std::stof(temp[0]);
                    tempMaterial.Kd.Y = std::stof(temp[1]);
                    tempMaterial.Kd.Z = std::stof(temp[2]);
                }
                // Specular Color
                if (algorithm::firstToken(curline) == "Ks")
                {
                    std::vector<std::string> temp;
                    algorithm::split(algorithm::tail(curline), temp, " ");

                    if (temp.size() != 3)
                        continue;

                    tempMaterial.Ks.X = std::stof(temp[0]);
                    tempMaterial.Ks.Y = std::stof(temp[1]);
                    tempMaterial.Ks.Z = std::stof(temp[2]);
                }
                // Specular Exponent
                if (algorithm::firstToken(curline) == "Ns")
                {
                    tempMaterial.Ns = std::stof(algorithm::tail(curline));
                }
                // Optical Density
                if (algorithm::firstToken(curline) == "Ni")
                {
                    tempMaterial.Ni = std::stof(algorithm::tail(curline));
                }
                // Dissolve
                if (algorithm::firstToken(curline) == "d")
                {
                    tempMaterial.d = std::stof(algorithm::tail(curline));
                }
                // Illumination
                if (algorithm::firstToken(curline) == "illum")
                {
                    tempMaterial.illum = std::stoi(algorithm::tail(curline));
                }
                // Ambient Texture Map
                if (algorithm::firstToken(curline) == "map_Ka")
                {
                    tempMaterial.map_Ka = algorithm::tail(curline);
                }
                // Diffuse Texture Map
                if (algorithm::firstToken(curline) == "map_Kd")
                {
                    tempMaterial.map_Kd = algorithm::tail(curline);
                }
                // Specular Texture Map
                if (algorithm::firstToken(curline) == "map_Ks")
                {
                    tempMaterial.map_Ks = algorithm::tail(curline);
                }
                // Specular Hightlight Map
                if (algorithm::firstToken(curline) == "map_Ns")
                {
                    tempMaterial.map_Ns = algorithm::tail(curline);
                }
                // Alpha Texture Map
                if (algorithm::firstToken(curline) == "map_d")
                {
                    tempMaterial.map_d = algorithm::tail(curline);
                }
                // Bump Map
                if (algorithm::firstToken(curline) == "map_Bump" || algorithm::firstToken(curline) == "map_bump" || algorithm::firstToken(curline) == "bump")
                {
                    tempMaterial.map_bump = algorithm::tail(curline);
                }
            }

            // Deal with last material

            // Push Back loaded Material
            LoadedMaterials.push_back(tempMaterial);

            // Test to see if anything was loaded
            // If not return false
            if (LoadedMaterials.empty())
                return false;
                // If so return true
            else
                return true;
        }
    };
}
#endif //RASTERIZER_OBJ_LOADER_H

线性代数使用Eigen库

三角形类

#ifndef TINYRENDERER_TRIANGLE_H
#define TINYRENDERER_TRIANGLE_H
#include <Eigen/Eigen>
using namespace Eigen;
class Triangle{
public:
    Eigen::Vector4f globalCoords[3];
    Eigen::Vector3f color[3];
    Eigen::Vector2f texCoords[3];
    Eigen::Vector3f normal[3];
    Eigen::Vector3f screenCoords[3];
    Triangle();

    void setGlobalCoords(int ind, Eigen::Vector4f ver);
    void setNormal(int ind, Eigen::Vector3f n);
    void setTexCoord(int ind,Eigen::Vector2f uv);
    void setScreenCoord(int ind,int width,int height);
};

#endif //TINYRENDERER_TRIANGLE_H

#include "Triangle.h"

Triangle::Triangle() {
    globalCoords[0] << 0,0,0,1;
    globalCoords[1] << 0,0,0,1;
    globalCoords[2] << 0,0,0,1;

    color[0] << 0.0, 0.0, 0.0;
    color[1] << 0.0, 0.0, 0.0;
    color[2] << 0.0, 0.0, 0.0;

    texCoords[0] << 0.0, 0.0;
    texCoords[1] << 0.0, 0.0;
    texCoords[2] << 0.0, 0.0;
}

void Triangle::setGlobalCoords(int ind, Vector4f ver){
    globalCoords[ind] = ver;
}
void Triangle::setNormal(int ind, Vector3f n){
    normal[ind] = n;
}
void Triangle::setTexCoord(int ind, Vector2f uv) {
    texCoords[ind] = uv;
}
// 简单实现正交投影
Vector3f world2screen(Vector4f globalCoord,int width,int height) {
    return Vector3f(int((globalCoord.x()+1.)*width/2.+.5), int((globalCoord.y()+1.)*height/2.+.5), globalCoord.z());
}
void Triangle::setScreenCoord(int ind,int width,int height) {
    screenCoords[ind] = world2screen(this->globalCoords[ind],width,height);
}

模型类

#ifndef __MODEL_H__
#define __MODEL_H__

#include <vector>
#include <Eigen/Eigen>
#include "Triangle.h"

class Model {
private:
public:
    explicit Model(const char *filename);
    ~Model();
    std::vector<Triangle> triangleList;

};

#endif //__MODEL_H__

#include "model.h"
#include "thirdParty/OBJ_Loader.h"
// 加载模型就直接用教程的代码了！
Model::Model(const char *filename) {
    objl::Loader Loader;
    Loader.LoadFile(filename);
    std::cout << "?";

    for (const auto &mesh: Loader.LoadedMeshes){
        for(int i=0;i<mesh.Vertices.size();i+=3)
        {

            Triangle * t = new Triangle;
            for(int j=0;j<3;j++)
            {
                t->setGlobalCoords(j, Vector4f(mesh.Vertices[i + j].Position.X, mesh.Vertices[i + j].Position.Y,mesh.Vertices[i + j].Position.Z, 1.0));
                t->setNormal(j,Vector3f(mesh.Vertices[i+j].Normal.X,mesh.Vertices[i+j].Normal.Y,mesh.Vertices[i+j].Normal.Z));
                t->setTexCoord(j,Vector2f(mesh.Vertices[i+j].TextureCoordinate.X, mesh.Vertices[i+j].TextureCoordinate.Y));
            }
            this->triangleList.push_back(*t);
        }
    }
}

Model::~Model() {
}

已经告诉了使用zbuffer，其实就是把处于后边的物体就不需要渲染了，在背面剔除后，删掉了不需要处理的三角形，但是在像素层面，位于前面的颜色应该把后边的颜色挡住首先来定义一个zbuffer，我没有使用教程中的一位数组表示，因为我不希望代码理解起来过于复杂

1
2
3

    // 定义一个zbuffer，并设置为无穷小
    std::unique_ptr<std::vector<std::vector<float>>> zBuffer = std::make_unique<std::vector<std::vector<float>>>(width, std::vector<float>(height));
    auto * zBuffer = new std::vector<std::vector<float>>(width, std::vector<float>(std::numeric_limits<float>::lowest()));

在这种情况下，绘制像素前要先判断当前想要绘制的颜色是否被挡住，至于是大于号还是小于号，看如何定义，当前模型是z越大离屏幕越近

	double alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
	double beta  = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
	double gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
	if (alpha<0 || beta<0 || gamma<0) continue; // 说明当前像素不在三角形内部
	float barycentricZ = alpha*triangle.screenCoords[0].z() + beta*triangle.screenCoords[1].z() + gamma*triangle.screenCoords[2].z();
	// zbuffer中缓存的渲染物体距离小于当前渲染物体的距离时，才覆盖渲染
	if (x<width && y < height && zBuffer->at(x).at(y) < barycentricZ){
	    zBuffer->at(x).at(y) = barycentricZ;
	    framebuffer.set(x,y,color);
	}

当前的整体代码如下

#include "thirdParty/tgaimage.h"
#include "model.h"
#include <vector>
#include <cmath>
#include <iostream>

constexpr TGAColor white   = {255, 255, 255, 255};
constexpr TGAColor green   = {  0, 255,   0, 255};
constexpr TGAColor red     = {  255,   0, 0, 255};
constexpr TGAColor blue    = {255, 128,  64, 255};
constexpr TGAColor yellow  = {  0, 200, 255, 255};
constexpr static int width  = 2560;
constexpr static int height = 1920;
// 画线尝试1
void drawLine_first(int ax, int ay, int bx, int by, TGAImage &img, TGAColor color){
    for(float t = 0;t<=1;t+=0.02){
        int x = std::round(ax + t * (bx - ax)); // round会进行四舍五入
        int y = std::round(ay + t * (by - ay));
        img.set(x,y,color);
    }
}
// 画线尝试2
void drawLine_second(int ax, int ay, int bx, int by, TGAImage &img, TGAColor color){
    if (ax>bx) { // make it left−to−right
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    for (int x = ax ; x<= bx; x++) { // 不再以t控制，而是以x的进行进行控制，保证了水平方向上不会有空隙
        // 如果不加强制转换，当分子分母都是整数时，计算结果的小数部分会被截断
        float t = (x-ax)/static_cast<float>(bx-ax); // 变换了形式，表示出当x移动一格时，t是多少，
        int y = std::round( ay + (by-ay)*t );
        img.set(x, y, color);
    }
}
// 画线尝试3
void drawLine_third(int ax, int ay, int bx, int by, TGAImage &img, TGAColor color){
    bool steep = std::abs(ax-bx) < std::abs(ay-by);
    if (steep) { // if the drawLine is steep, we transpose the image
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if (ax>bx) { // make it left−to−right
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    for (int x = ax ; x<= bx; x++) { // 不再以t控制，而是以x的进行进行控制，保证了水平方向上不会有空隙
        // 如果不加强制转换，当分子分母都是整数时，计算结果的小数部分会被截断
        float t = (x-ax)/static_cast<float>(bx-ax); // 变换了形式，表示出当x移动一格时，t是多少，
        int y = std::round( ay + (by-ay)*t );
        if (steep) // if transposed, de−transpose
            img.set(y, x, color);
        else
            img.set(x, y, color);
    }
}
// 最终版本 对计算进行了优化
void drawLine(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    bool steep = std::abs(ax-bx) < std::abs(ay-by);
    if (steep) { // if the drawLine is steep, we transpose the image
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if (ax>bx) { // make it left−to−right
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    int y = ay;
    int ierror = 0;
    for (int x=ax; x<=bx; x++) {
        if (steep) // if transposed, de−transpose
            framebuffer.set(y, x, color);
        else
            framebuffer.set(x, y, color);
        ierror += 2 * std::abs(by-ay);
        y += (by > ay ? 1 : -1) * (ierror > bx - ax);
        ierror -= 2 * (bx-ax)   * (ierror > bx - ax);
    }
}
// 三角形面积，可能返回负数，表示背对屏幕
double signed_triangle_area(int ax, int ay, int bx, int by, int cx, int cy) {
    return .5*((by-ay)*(bx+ax) + (cy-by)*(cx+bx) + (ay-cy)*(ax+cx));
}
// 绘制一个三角形
void drawTriangle(Triangle triangle, TGAImage &framebuffer, std::vector<std::vector<float>> * zBuffer,TGAColor color) {
    float ax = triangle.screenCoords[0].x();
    float ay = triangle.screenCoords[0].y();
    float bx = triangle.screenCoords[1].x();
    float by = triangle.screenCoords[1].y();
    float cx = triangle.screenCoords[2].x();
    float cy = triangle.screenCoords[2].y();
    float bbminx = std::min(std::min(ax, bx), cx);
    float bbminy = std::min(std::min(ay, by), cy);
    float bbmaxx = std::max(std::max(ax, bx), cx);
    float bbmaxy = std::max(std::max(ay, by), cy);

    // 如果面积为负数，背对屏幕，被裁剪
    double total_area = signed_triangle_area(ax, ay, bx, by, cx, cy);
    if (total_area<1) return;

#pragma omp parallel for
    for (int x=bbminx; x<=bbmaxx; x++) {
        for (int y=bbminy; y<=bbmaxy; y++) {
            double alpha = signed_triangle_area(x, y, bx, by, cx, cy) / total_area;
            double beta  = signed_triangle_area(x, y, cx, cy, ax, ay) / total_area;
            double gamma = signed_triangle_area(x, y, ax, ay, bx, by) / total_area;
            if (alpha<0 || beta<0 || gamma<0) continue; // 说明当前像素不在三角形内部
            float barycentricZ = alpha*triangle.screenCoords[0].z() + beta*triangle.screenCoords[1].z() + gamma*triangle.screenCoords[2].z();
            // zbuffer中缓存的渲染物体距离小于当前渲染物体的距离时，才覆盖渲染
            if (x<width && y < height && zBuffer->at(x).at(y) < barycentricZ){
                zBuffer->at(x).at(y) = barycentricZ;
                framebuffer.set(x,y,color);
            }
        }
    }
}

int main() {
    auto * model = new Model("./obj/african_head/african_head.obj");
    TGAImage framebuffer(width, height, TGAImage::RGB);
    // 定义一个zBuffer,并设置全部数据为最小负数
    auto * zBuffer = new std::vector<std::vector<float>>(width, std::vector<float>(height,std::numeric_limits<float>::lowest()));
    // 遍历obj文件中的每个三角形
    for (Triangle triangle : model->triangleList) {
        // 将当前三角形的三个顶点都投影到屏幕
        for (int i = 0; i < 3; ++i) triangle.setScreenCoord(i,width,height);
        // 绘制三角形
        drawTriangle(triangle, framebuffer, zBuffer, TGAColor(rand()%255, rand()%255, rand()%255, 255));
    }
//    framebuffer.flip_vertically();
    framebuffer.write_tga_file("framebuffer.tga");
    return 0;
}

下一步就是把材质贴上去，也就是设置颜色时不再使用随机颜色，而是根据三个顶点的纹理坐标进行插值，获得一个像素点的纹理坐标，从纹理图片对应位置获取颜色来设置首先得有一个承载材质的类，我这里使用的是TGAImage来读取图片,并把材质类作为Model的成员

#ifndef TINYRENDERER_TEXTURE_H
#define TINYRENDERER_TEXTURE_H
#include <Eigen/Eigen>
#include "thirdParty/tgaimage.h"
class Texture{
private:
    TGAImage texture;

public:
    Texture(const std::string& name)
    {

        texture.read_tga_file("");
        width = texture.width();
        height = texture.height();
    }

    int width, height;

    TGAColor getColor(float u, float v)
    {
        auto u_img = u * width;
        auto v_img = (1 - v) * height;
        TGAColor color = texture.get(v_img, u_img);
        return color;
    }
};
#endif //TINYRENDERER_TEXTURE_H

在main中首先对uv坐标进行插值，之后在设置像素颜色时，通过插值的uv坐标，到uv图中找对应位置的颜色

            float texU = alpha*triangle.texCoords[0].x() + beta*triangle.texCoords[1].x() + gamma*triangle.texCoords[2].x();
            float texV = alpha*triangle.texCoords[0].y() + beta*triangle.texCoords[1].y() + gamma*triangle.texCoords[2].y();
            // zbuffer中缓存的渲染物体距离小于当前渲染物体的距离时，才覆盖渲染
            if (x<width && y < height && zBuffer->at(x).at(y) < barycentricZ){
                zBuffer->at(x).at(y) = barycentricZ;
                framebuffer.set(x,y,texture.getColor(texU,texV));
            }

生成效果如下图所示到目前为止我自己的实现可以在github的分支结点中找到：https://github.com/sdpyy1/CppLearn/tree/56841b79fe7c74bce1d9210f1a42e2a3ca019768/tinyrenderer

Lesson 4: Perspective projection

这里我不希望只完成他课程的简单情况，我直接把MVP矩阵+视口变换全部封装了，详情可查看我的仓库，下边是主要代码

#include "model.h"
#include "thirdParty/OBJ_Loader.h"
Model::Model(const char * objFileName,const char * texFileName) : texture(texFileName){
    objl::Loader Loader;
    Loader.LoadFile(objFileName);
    this->modelMatrix = Eigen::Matrix4f::Identity();
    this->viewMatrix = Eigen::Matrix4f::Identity();
    this->projectionMatrix = Eigen::Matrix4f::Identity();
    for (const auto &mesh: Loader.LoadedMeshes){
        for(int i=0;i<mesh.Vertices.size();i+=3)
        {
            Triangle t;
            for(int j=0;j<3;j++)
            {
                // 此处设置每个三角形的属性
                t.setGlobalCoord(j, Vector4f(mesh.Vertices[i + j].Position.X, mesh.Vertices[i + j].Position.Y,
                                              mesh.Vertices[i + j].Position.Z, 1.0));
                t.setNormal(j,Vector3f(mesh.Vertices[i+j].Normal.X,mesh.Vertices[i+j].Normal.Y,mesh.Vertices[i+j].Normal.Z));
                t.setTexCoord(j,Vector2f(mesh.Vertices[i+j].TextureCoordinate.X, mesh.Vertices[i+j].TextureCoordinate.Y));
                Matrix4f mvp = projectionMatrix * viewMatrix * modelMatrix;
            }
            this->triangleList.push_back(t);
        }
    }
}
// 将角度转换为弧度
constexpr float deg2rad(float degrees) {
    return degrees * M_PI / 180.0f;
}
// 生成绕 x, y, z 轴旋转的变换矩阵
Eigen::Matrix4f rotation(float angleX, float angleY, float angleZ) {
    // 分别计算绕 x, y, z 轴旋转的矩阵
    Eigen::Matrix4f rotationX = Eigen::Matrix4f::Identity();
    float radX = deg2rad(angleX);
    rotationX(1, 1) = std::cos(radX);
    rotationX(1, 2) = -std::sin(radX);
    rotationX(2, 1) = std::sin(radX);
    rotationX(2, 2) = std::cos(radX);

    Eigen::Matrix4f rotationY = Eigen::Matrix4f::Identity();
    float radY = deg2rad(angleY);
    rotationY(0, 0) = std::cos(radY);
    rotationY(0, 2) = std::sin(radY);
    rotationY(2, 0) = -std::sin(radY);
    rotationY(2, 2) = std::cos(radY);

    Eigen::Matrix4f rotationZ = Eigen::Matrix4f::Identity();
    float radZ = deg2rad(angleZ);
    rotationZ(0, 0) = std::cos(radZ);
    rotationZ(0, 1) = -std::sin(radZ);
    rotationZ(1, 0) = std::sin(radZ);
    rotationZ(1, 1) = std::cos(radZ);

    // 组合三个旋转矩阵，这里假设旋转顺序为 Z -> Y -> X
    Eigen::Matrix4f modelMatrix = rotationX * rotationY * rotationZ;
    return modelMatrix;
}
// 生成平移变换矩阵
Eigen::Matrix4f translation(float tx, float ty, float tz) {
    Eigen::Matrix4f translationMatrix = Eigen::Matrix4f::Identity();
    translationMatrix(0, 3) = tx;
    translationMatrix(1, 3) = ty;
    translationMatrix(2, 3) = tz;
    return translationMatrix;
}
// 生成缩放变换矩阵
Eigen::Matrix4f scaling(float sx, float sy, float sz) {
    Eigen::Matrix4f scalingMatrix = Eigen::Matrix4f::Identity();
    scalingMatrix(0, 0) = sx;
    scalingMatrix(1, 1) = sy;
    scalingMatrix(2, 2) = sz;
    return scalingMatrix;
}
// 视图变换矩阵
Eigen::Matrix4f get_view_matrix(Eigen::Vector3f eye_pos, Eigen::Vector3f target, Eigen::Vector3f up) {
    // TODO:还没理解怎么换的
    // 观察方向
    Vector3f z = (eye_pos - target).normalized();
    // 叉乘得右方向
    Vector3f r = z.cross(up).normalized();
    // 叉乘得上方向
    Vector3f u = z.cross(r).normalized();
    Eigen::Matrix4f translate;
    translate << r.x(),r.y(),r.z(),-r.dot(eye_pos),
                u.x(),u.y(),u.z(),-u.dot(eye_pos),
                -z.x(),-z.y(),-z.z(),z.dot(eye_pos),
                0,0,0,1;
    // 效果是将摄像机作为原点情况下各个点的坐标
    return translate;

}
Eigen::Matrix4f get_projection_matrix(float eye_fov, float aspect_ratio, float n, float f) {

    Eigen::Matrix4f projection = Eigen::Matrix4f::Identity();
    float t = -tan((eye_fov/360)*M_PI)*(abs(n)); //top
    float r = t/aspect_ratio;

    Eigen::Matrix4f Mp;//透视矩阵
    Mp <<
       n, 0, 0,   0,
            0, n, 0,   0,
            0, 0, n+f, -n*f,
            0, 0, 1,   0;
    Eigen::Matrix4f Mo_tran;//平移矩阵
    Mo_tran <<
            1, 0, 0, 0,
            0, 1, 0, 0,  //b=-t;
            0, 0, 1, -(n+f)/2 ,
            0, 0, 0, 1;
    Eigen::Matrix4f Mo_scale;//缩放矩阵
    Mo_scale <<
             1/r,     0,       0,       0,
            0,       1/t,     0,       0,
            0,       0,       2/(n-f), 0,
            0,       0,       0,       1;
    projection = (Mo_scale*Mo_tran)* Mp;//投影矩阵
    //这里一定要注意顺序，先透视再正交;正交里面先平移再缩放；否则做出来会是一条直线！
    return projection;
}
void Model::setModelTransformation(float angleX, float angleY, float angleZ, float tx, float ty, float tz, float sx, float sy, float sz){
    if (triangleList.empty()){
        std::cout << "模型未导入！"<<std::endl;
        return;
    }
    Eigen::Matrix4f rotationMatrix = rotation(angleX, angleY, angleZ);
    Eigen::Matrix4f translationMatrix = translation(tx, ty, tz);
    Eigen::Matrix4f scalingMatrix = scaling(sx, sy, sz);
    // 按缩放 -> 旋转 -> 平移的顺序组合变换矩阵
    modelMatrix = translationMatrix * rotationMatrix * scalingMatrix;
}
// 应用视图变换的函数
void Model::setViewTransformation(Eigen::Vector3f eye_pos, Eigen::Vector3f target, Eigen::Vector3f up) {
    viewMatrix = get_view_matrix(eye_pos,target,up);
}
// 应用透视变换的函数
void Model::setProjectionTransformation(float fovY, float aspectRatio, float near, float far) {
    projectionMatrix = get_projection_matrix(fovY, aspectRatio, near, far);
}

Matrix4f Model::getMVP(){
    return projectionMatrix * viewMatrix * modelMatrix;
}


Model::~Model() {
}