Games202 on wanfeng

GAMES202 高质量实时渲染（Assignment 3）

Sun, 19 Oct 2025 14:05:15 +0800

作业介绍

首先看一下整体渲染流程

绘制光源
绘制shadowMap
diffuse、depth、normal、shadow、worldPos五个GBuffer信息
最后利用上边的信息来真正进行渲染

        // Draw light
        light.meshRender.mesh.transform.translate = light.entity.lightPos;
        light.meshRender.draw(this.camera, null, updatedParamters);

        // Shadow pass
        gl.bindFramebuffer(gl.FRAMEBUFFER, light.entity.fbo);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        for (let i = 0; i < this.shadowMeshes.length; i++) {
            this.shadowMeshes[i].draw(this.camera, light.entity.fbo, updatedParamters);
            // this.shadowMeshes[i].draw(this.camera);
        }
        // return;

        // Buffer pass
        gl.bindFramebuffer(gl.FRAMEBUFFER, this.camera.fbo);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        for (let i = 0; i < this.bufferMeshes.length; i++) {
            this.bufferMeshes[i].draw(this.camera, this.camera.fbo, updatedParamters);
            // this.bufferMeshes[i].draw(this.camera);
        }
        // return

        // Camera pass
        for (let i = 0; i < this.meshes.length; i++) {
            this.meshes[i].draw(this.camera, null, updatedParamters);
        }

直接光照

EvalDiffuse(wi, wo, uv)

通过入射方向、出射方向、漫反射率纹理图uv坐标来计算BRDF的返回值，因为是计算diffuse的BRDF，所以它是一个常数分母π保证了反射光的总能量不超过入射光能量

vec3 EvalDiffuse(vec3 wi, vec3 wo, vec2 uv) {
  vec3 albedo = GetGBufferDiffuse(uv);
  vec3 normal = GetGBufferNormalWorld(uv);
  // 这里把cos项和BRDF项放在一起了
  float cosTheta = max(0,dot(normal,wi));
  return albedo * cosTheta * INV_PI;
}

这样就得到了渲染方程中的BRDF项

EvalDirectionalLight(vec2 uv)

这里需要计算一个着色点的直接光照项（需要通过shadowMap来考虑阴影）

vec3 EvalDirectionalLight(vec2 uv) {
    vec3 Le = GetGBufferuShadow(uv) * uLightRadiance;
  return Le;
}

其中GetGBufferuShadow方法返回的就是Visbility项，它在上一轮渲染中存储了每个像素的可见性信息

float GetGBufferuShadow(vec2 uv) {
  float visibility = texture2D(uGShadow, uv).x;
  return visibility;
}

最后修改main函数，它还做了伽马矫正

void main() {
  float s = InitRand(gl_FragCoord.xy);

  vec3 L = vec3(0.0);
  vec3 color = vec3(0.0);
  vec3 worldPos = vPosWorld.xyz;
  vec2 screenUV = GetScreenCoordinate(vPosWorld.xyz);
  vec3 wi = normalize(uLightDir);
  vec3 wo = normalize(uCameraPos - worldPos);

  // 直接光照
  L = EvalDiffuse(wi, wo, screenUV) * EvalDirectionalLight(screenUV);
  // gamma矫正
  color = pow(clamp(L, vec3(0.0), vec3(1.0)), vec3(1.0 / 2.2));
  gl_FragColor = vec4(vec3(color.rgb), 1.0);
}

我的电脑是mac，根据网上只有mac电脑会出下如下问题，根据视角移动会不断变换出错的位置我们先把可见性设置为1，避免阴影生成，看看是什么情况举个例子：假设地板深度值为0.5001，上方模型为0.5002。在16位深度缓冲区中，两者可能被四舍五入为相同值（如0.500），导致GPU随机选择显示其中一个67。此时地板可能因浮点舍入误差被误判为更小Z值，从而错误覆盖模型。

NDC坐标下的Z值并不是线性的，越靠近近平面的地方，精度越高，远的地方精度越低，参考下图所以说当我把摄像机离得特别近时，这种问题慢慢就得到了缓解，因为接近近平面精度比较高所以说这种问题的一种解决思路就是调整远近平面的距离，越小，精度高的范围越大，出现z-fighting可能性越低

1
2
3

	// Add camera
	// const camera = new THREE.PerspectiveCamera(75, gl.canvas.clientWidth / gl.canvas.clientHeight, 1e-3, 1000);
	const camera = new THREE.PerspectiveCamera(75, gl.canvas.clientWidth / gl.canvas.clientHeight, 5e-2, 1e2);

为了验证这一说法的正确性，我们拉远镜头，就看出来这种问题又出现了，说明远处z值精度小不过这种解决方案只适合玩具，调整NF参数属于是把整个项目的东西都改了，还有一种解决思路就是在有这种重叠放置的地方进行手动偏移

间接光照

bool RayMarch(vec3 ori, vec3 dir, out vec3 hitPos)

这一步需要实现linear RayMarch，通过一条光线，求出击中点的坐标基本思路就是从着色点沿着光照方向每次向前一小步，查看这一点对应的深度值，并于深度缓冲中的深度值做比较，如果这一点深度值比深度缓冲中深度值大了，说明他已经处于可见物体的内部

bool RayMarch(vec3 ori, vec3 dir, out vec3 hitPos) {
  const int totalStepTimes = 60;
  const float threshold = 0.0001;
  float step = 0.05;
  vec3 stepDir = normalize(dir) * step;
  vec3 curPos = ori;
  for(int i = 0; i < totalStepTimes; i++) {
    vec2 screenUV = GetScreenCoordinate(curPos);
    float rayDepth = GetDepth(curPos);
    float gBufferDepth = GetGBufferDepth(screenUV);

    // 已经在可见物体内部
    if(rayDepth > gBufferDepth + threshold){
      hitPos = curPos;
      return true;
    }
    curPos += stepDir;
  }
}

现在已经有方法对光线求交了，下面就来实现间接光照

void main() {
  float s = InitRand(gl_FragCoord.xy);

  vec3 worldPos = vPosWorld.xyz;
  vec2 screenUV = GetScreenCoordinate(vPosWorld.xyz);
  vec3 wi = normalize(uLightDir);
  vec3 wo = normalize(uCameraPos - worldPos);
  vec3 normal = GetGBufferNormalWorld(screenUV);
  // 着色点的直接光照
  vec3 L = vec3(0.0);
  L = EvalDiffuse(wi, wo, screenUV) * EvalDirectionalLight(screenUV);

  // 着色点的间接光照
  vec3 L_ind = vec3(0.0);
  for(int i = 0; i < SAMPLE_NUM; i++){
    float pdf;
    vec3 localDir = SampleHemisphereCos(s, pdf);
    vec3 b1, b2;
    // 通过空间法线得到两个切线，从而建立切线空间坐标系
    LocalBasis(normal, b1, b2);
    // 通过BTN矩阵将局部坐标系转为世界坐标系
    vec3 dir = normalize(mat3(b1, b2, normal) * localDir);

    vec3 hit_pos = vec3(0.0);
    // 向采样方向发出光线
    if(RayMarch(worldPos, dir, hit_pos)){
      vec2 hitScreenUV = GetScreenCoordinate(hit_pos);
      // 通过蒙特卡洛积分来近似渲染方程的积分值
      L_ind += EvalDiffuse(dir, wo, screenUV) / pdf * EvalDiffuse(wi, dir, hitScreenUV) * EvalDirectionalLight(hitScreenUV);
    }
  }

  L_ind /= float(SAMPLE_NUM);
  L = L + L_ind;

  vec3 color = pow(clamp(L, vec3(0.0), vec3(1.0)), vec3(1.0 / 2.2));
  gl_FragColor = vec4(vec3(color.rgb), 1.0);
}

方块场景

洞穴场景渲染只渲染间接光所以SSR我理解也是在做光线追踪，但只利用了屏幕空间的信息，也就是真正被渲染的位置的信息，被覆盖掉的着色点是不会考虑的，这当然要比直接做光线追踪快很多。课程后边有实时光线渲染，目前还不知道如何实现的。

目前从方块场景能看出一些问题按照目前的一次弹射渲染逻辑，理论上阴影的颜色就应该是黑色（因为即使有击中点，这一点计算出来的直接光照也必然是黑色），而现在有点漏光了说明它判断击中点时，判断了B4位置的颜色，而实际上，它直接穿过了模型，打到了模型的正面，说明步长太大了。参考其他博客的解决思路

https://zhuanlan.zhihu.com/p/668194020 代码的思路跟前面的差不多，每一次步进时，判断下一步位置的深度与gBuffer的深度的关系，如果下一步的位置在gBuffer的前面（nextDepth<gDepth），则可以步进。如果下一步的深度没有gBuffer的深，就判断一下深度相差多少，有没有给定的阈值大。如果比阈值大，那么就直接返回 false ，否则，这个时候就可以执行SSR了。先让当前位置步进一个step，返回给 hitPos ，然后返回真。

bool RayMarch(vec3 ori, vec3 dir, out vec3 hitPos) {
  const float EPS = 1e-2;
  const int totalStepTimes = 20;
  const float threshold = 0.1;
  bool result = false, firstIn = false;
  float step = 0.8;
  vec3 curPos = ori;
  vec3 nextPos;
  for(int i = 0; i < totalStepTimes; i++) {
    nextPos = curPos+dir*step;
    vec2 uvScreen = GetScreenCoordinate(curPos);
    if(any(bvec4(lessThan(uvScreen, vec2(0.0)), greaterThan(uvScreen, vec2(1.0))))) break;
    if(GetDepth(nextPos) < GetGBufferDepth(GetScreenCoordinate(nextPos))){
      curPos += dir * step;
      if(firstIn) step *= 0.5;
      continue;
    }
    firstIn = true;
    if(step < EPS){
      float s1 = GetGBufferDepth(GetScreenCoordinate(curPos)) - GetDepth(curPos) + EPS;
      float s2 = GetDepth(nextPos) - GetGBufferDepth(GetScreenCoordinate(nextPos)) + EPS;
      if(s1 < threshold && s2 < threshold){
        hitPos = curPos + 2.0 * dir * step * s1 / (s1 + s2);
        result = true;
      }
      break;
    }
    if(firstIn) step *= 0.5;
  }
  return result;
}

使用大佬的优化算法，帧数一下就起来了

下面再介绍一下光线求交的加速方法，就是为深度图设置MipMap，上一层存入下一层4个像素的最小深度，也就是离屏幕更近的距离，如果一条光线在上一层中比最小距离更近，那它肯定不会在下一层中相交于物体，这样就可以省去很多if

具体的代码需要涉及到OpenGL如何生成这样的纹理，或者可能根本不支持这种mipmap，毕竟默认的mipmap并不是存最小值，而是平均值，可能需要自己写入缓存然后保存FBO，然后把它当作一张纹理来使用。我就不写了，目前阶段以学习理论为主

GAMES202 高质量实时渲染（Assignment 2）

Sun, 19 Oct 2025 14:04:46 +0800

作业介绍

物体在不同光照下的表现不同，PRT(Precomputed Radiance Transfer) 是一个计算物体在不同光照下表现的方法。光线在一个环境中，会经历反射，折射，散射，甚至还会物体的内部进行散射。为了模拟具有真实感的渲染结果，传统的Path Tracing 方法需要考虑来自各个方向的光线、所有可能的传播形式并且收敛速度极慢。PRT 通过一种预计算方法，该方法在离线渲染的 Path Tracing 工具链中预计算 lighting 以及 light transport 并将它们用球谐函数拟合后储存，这样就将时间开销转移到了离线中。最后通过使用这些预计算好的数据，我们可以轻松达到实时渲染严苛的时间要求，同时渲染结果可以呈现出全局光照的效果。

PRT 方法存在的限制包括： • 不能计算随机动态场景的全局光照 • 场景中物体不可变动

本次作业的工作主要分为两个部分：cpp 端的离线预计算部分以及在 WebGL框架上使用预计算数据部分

PRT课上最终得出的结论是对渲染方程的计算，可以先把光照和其余部分分别计算球谐展开后系数相乘（针对BRDF是diffuse的情况），所以我们只需要针对光照算球谐展开的系数，然后针对其余部分算一个球谐展开的系数，传递给顶点着色器后相乘就是顶点的着色

环境光贴图预计算

要做的就是把L(wi)项用球谐函数表示，因为球谐函数都一样，不一样的只有系数，所以只需要预计算出系数，系数求法如下，针对球谐函数的任何一项求他的系数都是算一个积分根据作业提示，需要完成函数，输入为天空盒的6个面图片

    std::vector<Eigen::Array3f> PrecomputeCubemapSH(const std::vector<std::unique_ptr<float[]>> &images,
                                                    const int &width, const int &height,
                                                    const int &channel)
    {

下面这一步是把6张贴图每个像素的方向向量都存起来了

        std::vector<Eigen::Vector3f> cubemapDirs;
        cubemapDirs.reserve(6 * width * height);
        for (int i = 0; i < 6; i++)
        {
            Eigen::Vector3f faceDirX = cubemapFaceDirections[i][0];
            Eigen::Vector3f faceDirY = cubemapFaceDirections[i][1];
            Eigen::Vector3f faceDirZ = cubemapFaceDirections[i][2];
            for (int y = 0; y < height; y++)
            {
                for (int x = 0; x < width; x++)
                {
                    float u = 2 * ((x + 0.5) / width) - 1;
                    float v = 2 * ((y + 0.5) / height) - 1;
                    Eigen::Vector3f dir = (faceDirX * u + faceDirY * v + faceDirZ).normalized();
                    cubemapDirs.push_back(dir);
                }
            }
        }

接着对系数数组初始化

// 表示球谐系数的个数
        constexpr int SHNum = (SHOrder + 1) * (SHOrder + 1);
        std::vector<Eigen::Array3f> SHCoeffiecents(SHNum);
        for (int i = 0; i < SHNum; i++)
            SHCoeffiecents[i] = Eigen::Array3f(0);

最后遍历每个方向向量进行计算系数

        for (int i = 0; i < 6; i++)
        {
            for (int y = 0; y < height; y++)
            {
                for (int x = 0; x < width; x++)
                {
                    // TODO: here you need to compute light sh of each face of cubemap of each pixel
                    // TODO: 此处你需要计算每个像素下cubemap某个面的球谐系数
            ![请添加图片描述](f30ab4af6a6c4b1d9ba4c82953bd31d1.png)
        Eigen::Vector3f dir = cubemapDirs[i * width * height + y * width + x];
                    int index = (y * width + x) * channel;
                    Eigen::Array3f Le(images[i][index + 0], images[i][index + 1],
                                      images[i][index + 2]);
                }
            }
        }

计算方法就是遍历每一个像素，通过黎曼积分的方法来说，每个像素点都对每个球谐函数的系数有贡献

        for (int i = 0; i < 6; i++)
        {
            for (int y = 0; y < height; y++)
            {
                for (int x = 0; x < width; x++)
                {
                    // TODO: here you need to compute light sh of each face of cubemap of each pixel
                    // TODO: 此处你需要计算每个像素下cubemap某个面的球谐系数
                    Eigen::Vector3f dir = cubemapDirs[i * width * height + y * width + x];
                    int index = (y * width + x) * channel;
                    // 当前像素的RGB值
                    Eigen::Array3f Le(images[i][index + 0], images[i][index + 1],
                                      images[i][index + 2]);
                    // 计算当前像素的面积
                    float delta_wi = CalcArea(x, y, width, height);
                    Eigen::Vector3d _dir(Eigen::Vector3d(dir[0], dir[1], dir[2]).normalized());//这里dir要变成Eigen::Vector3d类型
                    // 计算当前像素点对每个基函数系数的黎曼积分求法的贡献
                    for(int l = 0;l < SHNum; l++){
                        for(int m = -l; m <= l; m++){
                            SHCoeffiecents[sh::GetIndex(l,m)] += Le * sh::EvalSH(l,m,_dir)*delta_wi;
                        }
                    }
                }
            }
        }

对于作业提到的伽马矫正，可以参考我之前的博客伽马矫正

传输项的预计算

对于漫反射传输项来说，分为 unshadowed, shadowed, interreflection 三种情况，我们将分别计算这三种情况的漫反射传输球谐系数。

Diffuse unshadowed

这种情况下渲染方程的BRDF项为常数，此时渲染方程为 Li项已经处理掉了，就剩下max()项了作业中只需要写出transport部分在给定一个方向时的值

                if (m_Type == Type::Unshadowed)
                {
                    // TODO: here you need to calculate unshadowed transport term of a given direction
                    // TODO: 此处你需要计算给定方向下的unshadowed传输项球谐函数值
                    return 0;
                }

这里就只剩一个点乘和max了

                float dot_product = wi.dot(n);
                if (m_Type == Type::Unshadowed)
                {
                    // TODO: here you need to calculate unshadowed transport term of a given direction
                    // TODO: 此处你需要计算给定方向下的unshadowed传输项球谐函数值
                    return dot_product > 0 ? dot_product : 0;
                }

Indoor的数据

0.518558 0.510921 0.498186
-0.0139227 -0.0198673 -0.0233177
-0.0229861 -0.0361469 -0.0237983
0.0263383 0.0681837 0.0585552
-0.0508792 -0.0607283 -0.0570984
0.0515054 0.035726 0.0207611
0.0147266 0.0112063 -0.026747
0.00411617 0.0257427 0.0428588
0.0642155 0.0399902 0.0190308

每一行代表一个基函数的参数，可以理解为把原光照函数投影到某一个基函数后的RGB分量分别为多少

Diffuse shadowed

相对于unshadowed，就多出来一项Visibility

                    // 从顶点位置发射一条光线，与场景相交说明被遮挡了
                    if(dot_product > 0.0f && !scene->rayIntersect(Ray3f(v, wi.normalized())))
                    {
                        return dot_product;
                    }else{
                        return 0.0f;
                    }

当定义好函数后调用了

`1`	`auto shCoeff = sh::ProjectFunction(SHOrder, shFunc, m_SampleCount);`

这行代码根据SH的阶数、被展开的函数、采样数来得到展开后SH的系数到这里光照项和转移项都分别计算了它们的SH展开的系数并存储在txt文件中（通过跑该程序）

7905
0.213508 0.153329 0.206834 -0.0845127 -0.060769 0.144391 0.0588847 -0.0591535 -0.0178413 
0.219123 0.147477 0.190788 -0.134417 -0.0519802 0.135719 0.0171978 -0.101493 0.0164001 
0.206635 0.160885 0.201914 -0.0758193 -0.0472086 0.167402 0.0471802 -0.052247 -0.00859244 
0.185821 0.153003 0.162114 -0.119748 -0.0931989 0.143295 0.00899377 -0.0984071 -0.0184536 
0.206635 0.160885 0.201914 -0.0758193 -0.0472086 0.167402 0.0471802 -0.052247 -0.00859244

每一行代表一个顶点的球谐展开系数。因为T部分不仅与入射方向有关，也与顶点的具体位置有关，所以每固定一个顶点，球谐展开系数都是不一样的

Diffuse Inter-reflection(bonus)

这里就需要考虑光线的多次弹射，渲染方程变成计算一个顶点的系数时，不仅考虑到来自环境光的光照，还考虑来自别的地方弹射过来的光的影响，仿照光线追踪的写法，从着色点射出采样光线，若击中物体，则把光线反过来求出它对着色点的贡献（如果递归的写就可以求出击中物体的值，递归到最后一层就是本身着色点的值）

std::unique_ptr<std::vector<double>> computeInterreflectionSH(Eigen::MatrixXf* directTSHCoeffs, const Point3f& pos, const Normal3f& normal, const Scene* scene, int bounces)
{
    std::unique_ptr<std::vector<double>> coeffs(new std::vector<double>());
    coeffs->assign(SHCoeffLength, 0.0);

    if (bounces > m_Bounce)
        return coeffs;

    const int sample_side = static_cast<int>(floor(sqrt(m_SampleCount)));
    std::random_device rd;
    std::mt19937 gen(rd());
    std::uniform_real_distribution<> rng(0.0, 1.0);
    for (int t = 0; t < sample_side; t++) {
        for (int p = 0; p < sample_side; p++) {
            double alpha = (t + rng(gen)) / sample_side;
            double beta = (p + rng(gen)) / sample_side;
            double phi = 2.0 * M_PI * beta;
            double theta = acos(2.0 * alpha - 1.0);
	    //这边模仿ProjectFunction函数写

            Eigen::Array3d d = sh::ToVector(phi, theta);
            const auto wi = Vector3f(d.x(), d.y(), d.z());
            double H = wi.normalized().dot(normal);
            Intersection its;
            if (H > 0.0 && scene->rayIntersect(Ray3f(pos, wi.normalized()), its))
            {
                MatrixXf normals = its.mesh->getVertexNormals();
                Point3f idx = its.tri_index;
                Point3f hitPos = its.p;
                Vector3f bary = its.bary;

                Normal3f hitNormal =
                    Normal3f(normals.col(idx.x()).normalized() * bary.x() +
                        normals.col(idx.y()).normalized() * bary.y() +
                        normals.col(idx.z()).normalized() * bary.z())
                    .normalized();

                auto nextBouncesCoeffs = computeInterreflectionSH(directTSHCoeffs, hitPos, hitNormal, scene, bounces + 1);

                for (int i = 0; i < SHCoeffLength; i++)
                {
                    auto interpolateSH = (directTSHCoeffs->col(idx.x()).coeffRef(i) * bary.x() +
                        directTSHCoeffs->col(idx.y()).coeffRef(i) * bary.y() +
                        directTSHCoeffs->col(idx.z()).coeffRef(i) * bary.z());

                    (*coeffs)[i] += (interpolateSH + (*nextBouncesCoeffs)[i]) * H;
                }
            }
        }
    }

    for (unsigned int i = 0; i < coeffs->size(); i++) {
        (*coeffs)[i] /= sample_side * sample_side;
    }

    return coeffs;
}

            for (int i = 0; i < mesh->getVertexCount(); i++)
            {
                const Point3f& v = mesh->getVertexPositions().col(i);
                const Normal3f& n = mesh->getVertexNormals().col(i).normalized();
                auto indirectCoeffs = computeInterreflectionSH(&m_TransportSHCoeffs, v, n, scene, 1);
                for (int j = 0; j < SHCoeffLength; j++)
                {
                    m_TransportSHCoeffs.col(i).coeffRef(j) += (*indirectCoeffs)[j];
                }
                std::cout << "computing interreflection light sh coeffs, current vertex idx: " << i << " total vertex idx: " << mesh->getVertexCount() << std::endl;
            }

实时球谐光照计算

这里我不展示如何跑通代码，只展示主要的逻辑点。跑通代码可以参考博客：https://zhuanlan.zhihu.com/p/596050050

对于预计算数据使用就是在顶点着色器中，要求一个顶点的着色，就要把光照项的每一个系数与T项对应的系数相乘后相加即可

从下面代码可以看出，三个颜色通道单独计算

//prtVertex.glsl

attribute vec3 aVertexPosition;
attribute vec3 aNormalPosition;
attribute mat3 aPrecomputeLT;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uPrecomputeL[3];

varying highp vec3 vNormal;
varying highp mat3 vPrecomputeLT;
varying highp vec3 vColor;

float L_dot_LT(mat3 PrecomputeL, mat3 PrecomputeLT) {
  vec3 L_0 = PrecomputeL[0];
  vec3 L_1 = PrecomputeL[1];
  vec3 L_2 = PrecomputeL[2];
  vec3 LT_0 = PrecomputeLT[0];
  vec3 LT_1 = PrecomputeLT[1];
  vec3 LT_2 = PrecomputeLT[2];
  return dot(L_0, LT_0) + dot(L_1, LT_1) + dot(L_2, LT_2);
}

void main(void) {
  // 无实际作用，避免aNormalPosition被优化后产生警告
  vNormal = (uModelMatrix * vec4(aNormalPosition, 0.0)).xyz;

  for(int i = 0; i < 3; i++)
  {
    vColor[i] = L_dot_LT(aPrecomputeLT, uPrecomputeL[i]);
  }

  gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
}

以R通道举例一行（顶点的系数）乘一列（环境光贴图系数的R通道）结果作为着色点的R通道值

至于还有一个作业要做旋转。我的理解是如果环境光贴图进行了旋转，其实修改的就只是环境光贴图的球谐展开的系数，其他的不会变，而且因为球谐函数的特性，很容易就能求旋转后的系数。先理解了就行

GAMES202 高质量实时渲染（Assignment 1）

Sun, 19 Oct 2025 14:03:49 +0800

Homework1

shadow Map

首先需要完成MVP矩阵的构造，在这里的mvp用来表示如果一个模型在shadowmap视角下的位置

    CalcLightMVP(translate, scale) {
        let lightMVP = mat4.create();
        let modelMatrix = mat4.create();
        let viewMatrix = mat4.create();
        let projectionMatrix = mat4.create();

        // Model transform
        mat4.translate(modelMatrix,modelMatrix,translate);
        mat4.scale(modelMatrix,modelMatrix,scale);
        // View transform
        mat4.lookAt(viewMatrix, this.lightPos, this.focalPoint, this.lightUp);
        // Projection transform
        mat4.ortho(projectionMatrix, -100,100,-100,100,0.1,400); // 实测far要得400可以覆盖到整个平面
        mat4.multiply(lightMVP, projectionMatrix, viewMatrix);
        mat4.multiply(lightMVP, lightMVP, modelMatrix);
        return lightMVP;
    }

他在顶点着色器中使用，目的是传递每个顶点位置在光源视角下坐标 vPositionFromLight = uLightMVP * vec4(aVertexPosition, 1.0); 在片段着色器中，先实现比较的函数

float useShadowMap(sampler2D shadowMap, vec4 shadowCoord){
  // shadowmap中存储的深度
  float lightDepth = unpack(texture2D(shadowMap, shadowCoord.xy));
  // 着色点深度
  float shadowDepth = shadowCoord.z;
  float visibility = 1.0;
  // 被挡住了
  if (shadowDepth > lightDepth) {
    visibility = 0.0;
  }
  return visibility;
}

在主函数中，需要先对光源坐标处理一下，因为它是经过透视投影处理后的NDC坐标，而shadowMap上取值其实需要的是UV坐标（0，1）之间，所以需要先转到[0,1]之间 ⚠️：透视除法在透视投影时才需要，我看别的博客都写了，其实是不需要的

  float visibility = 1.0;
  // 透视投影时才需要
  // vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;
  vec3 shadowCoord = (vPositionFromLight.xyz+1.0)/2.0;
  visibility = useShadowMap(uShadowMap, vec4(shadowCoord, 1.0));

居然没出现自阴影问题，我们手动创建一个，首先光源位置修改在engine.js中lightPos

	// Add lights
	// light - is open shadow map == true
	let lightPos = [0, 90, 80];
	let focalPoint = [0, 0, 0];
	let lightUp = [0, 1, 0]
	const directionLight = new DirectionalLight(5000, [1, 1, 1], lightPos, focalPoint, lightUp, true, renderer.gl);
	renderer.addLight(directionLight);

把光源变斜一点，就会发现场景从远到近逐渐出现自阴影现象 y = 40 y=30 y=20 y=10这时候整个地板都出错了加一个自偏移，就解决了

1
2
3

  if (shadowDepth  > lightDepth + 0.01) {
    visibility = 0.0;
  }

下面是偏移量改为0.05的效果，效果就太差了，偏移量应该根据光照的角度动态调整

走样的情况，下面就用PCF来解决～

PCF(Percentage Closer Filter)

简单理解就是不只判断shadowmap的一个位置，而是一圈位置的平均。作业中提供了两种采样，它的作用就是减少计算量，没必要真的一个一个便利来取均值，偏移记录在了vec2 poissonDisk[NUM_SAMPLES]; 下面是我的实现

float PCF(sampler2D shadowMap, vec4 coords) {
  poissonDiskSamples(coords.xy);
  // 采样数
  float numSamples = 0.0;
  // 没有遮挡的采样数
  float numUnBlock = 0.0;
  // 过滤核大小
  float filterSize = 5.0;
  float mapSize = 2048.0;
  // 过滤核范围
  float filterRange = filterSize / mapSize;
  for(int i = 0;i<NUM_SAMPLES;i++){
    vec2 samplexCoor = coords.xy + poissonDisk[i] * filterRange;
    // 采样时可能会越界
    if(samplexCoor.x > 0.0 && samplexCoor.x < 1.0 && samplexCoor.y > 0.0 && samplexCoor.y < 1.0) {
      numSamples++;
      if(useShadowMap(shadowMap,vec4(samplexCoor,coords.z,1.0)) == 1.0) {
        numUnBlock++;
      }
    }
  }
  return numUnBlock/numSamples;
}

锯齿位置的变化（过滤核大小为5）当改为20时改为100时，出现了大量噪点

PCSS(Percentage Closer Soft Shadow)

用PCF来做软阴影，一句话来说就是动态修改过滤核的尺寸，达到不同的因子区域不同的软硬程度

第一步需要在一定范围内搜索深度比着色点进的点，从而得到一个平均深度

float findBlocker( sampler2D shadowMap,  vec2 uv, float zReceiver ) {
	int numSamples = 0;
  float sumDepth = 0.0;
  float searchSize = 15.0;
  float mapSize = 2048.0;
  float searchRange = searchSize / mapSize;
  for( int i = 0; i < BLOCKER_SEARCH_NUM_SAMPLES; i ++ ) {
    vec2 sampleCoor = uv + poissonDisk[i] * searchRange;
    // 采样时可能会越界
    if(sampleCoor.x > 0.0 && sampleCoor.x < 1.0 && sampleCoor.y > 0.0 && sampleCoor.y < 1.0) {
      float depth = unpack(texture2D(shadowMap, sampleCoor));
      if(depth < zReceiver) {
        sumDepth += depth;
        numSamples++;
      }
    }
  }
  if(numSamples > 0) {
    return sumDepth / float(numSamples);
  } else {
    return zReceiver;
  }
}

下来就计算半影尺寸并把它作为过滤核尺寸来进行PCF

float PCSS(sampler2D shadowMap, vec4 coords){
  uniformDiskSamples(coords.xy);
  // STEP 1: avgblocker depth
  float avgBlockerDepth = findBlocker(shadowMap, coords.xy, coords.z);
  // STEP 2: penumbra size
  // 假设光源尺寸为50
  float Wlight = 50.0;
  float penumbraSize = (coords.z - avgBlockerDepth) * Wlight / avgBlockerDepth;
  // STEP 3: filtering
  // 把半影尺寸当做过滤核大小
  return PCF(shadowMap, coords,penumbraSize);
}

光源尺寸越大，阴影软硬区分程度越大，因为计算出的过滤核尺寸区分度越大 Wlight = 50 Wlight = 100 设置过小时，反而看不出什么效果

GAMES202 GAMES202 高质量实时渲染（Real-Time Ray-Tracing）

Sun, 19 Oct 2025 14:02:08 +0800

RTX

RTX实际做的事：一个像素用一个样本来采样SPP

考虑了一次弹射，第一次primary Ray其实没有必要（从摄像机到着色点），只需要做一遍光栅化就可以实现一整个屏幕的primaryRay。所以一个SPP只需要考虑3条光线

降噪

时间滤波

1SPP噪声非常大。实时光线追踪在算法上并没有区别，主要原因是硬件的突破，让光线追踪达到了实时水平。所以实时光线追踪最关键的技术是降噪！从这幅图可以看出，降噪的效果非常好。降噪的方法有很多，但是应用到实时的降噪技术很少实时降噪使用的是时间上的滤波。当前帧需要前一帧已经滤波。假设运动是连续的。有一个vector叫做motion vector，记录每个点上一帧的位置也就是当前帧用的spp，使用了上一帧的spp，上一帧的spp也用了上上帧的spp，所以作用到当前帧的spp，远大于1。下面首先介绍一个概念，G-buffer，这东西就是延迟渲染用的

Back projection

求一个像素的内容，在上一帧中的位置首先求一个点的世界坐标：

可以提前存储在G-buffer
通过MVP+viewport的逆变换变回世界坐标
我们是知道每个世界坐标是如何变换的，所以通过逆变换来找到这个坐标上一帧的坐标，再把世界坐标转为屏幕坐标即可得到上一帧对应像素的像素值，进行线性插值，通常a取0.1-0.2，也就是80%以上都是上一帧得到的下面对比一下groundtruth和降噪结果

有一些该暗的地方仍然是亮的。基于时间的滤波是有问题的，有一下几点：

第一帧/切换场景
当前帧的物体在上一帧不存在
- 当前帧的物体在上一帧被遮挡了（G-buffer中没有存储）会出现脱尾

解决思路：

混合当前帧和上一帧数据之前，把上一帧的结果拉到当前帧周围
检测要不要用上一帧的数据
1. 检测上一帧位置是否为同一个物体
2. 优化混合系数
3. 增大空间滤波但是这样处理噪声又出现了

滤波实现

空间滤波

滤波操作为低通滤波，保留低频信息，移除高频信息

高斯滤波

双边滤波（考虑边界）

高斯滤波会把图像均匀地糊掉，边界也会模糊，公式的第二项表示如果两边颜色差值很大，贡献就会变小

联合双边滤波

使用G-buffer来更好地指导滤波用深度、颜色、法向量来指导滤波如何实现大的滤波核呢？先水平再垂直，效率从

Progressively Growing Sizes

RTRT滤波解决方案

SVGF

3个factors指导的滤波

深度 - 法线
颜色差异

RAE

工业界问题及解法

TAA 时间上的抗锯齿

每一帧采样一个像素的四个角之一，剩余三个角用之前的数据。这样就相当于MSAA了（静止场景）

MSAA vs SSAA

SSAA就是高分辨率渲染再变小 MSAA分辨率不变，在一个像素中采样多次，甚至可以在临近像素复用

SMAA

超级分辨率

延迟渲染

节省shading的时间

GAMES202 高质量实时渲染（Real-Time Physically Based Materials）

Sun, 19 Oct 2025 14:01:31 +0800

Micorfacet BRDF

F项：Fresnel term

Fresnel项（Fresnel term）用于描述光在界面上反射的强度随入射角变化的现象。对于绝缘体材质对于导电材质 Snell’s Law（斯涅尔定律）描述的是光在两种介质交界面上传播时的折射行为如果分为RGB三个通道，三个通道有自己的折射率。 Rs：垂直偏振（s-polarized）反射率 Rp：平行偏振（p-polarized）反射率因为自然光通常是非偏振光（即含有相等的 s 和 p 偏振分量），所以实际使用时我们取两者的平均来得到总反射率：两者通过平均得到Fresnel平均反射率。 R0是垂直入射下的反射率，可以通过两种介质的折射率获得，他是一个三通道。进一步可以用Schlick’s Approximation来近似出θ角度下的反射率

G项：shadowing-masking term（geometry term）

为了解决微表面的自遮挡问题下图左边表示光线被遮挡（shadowing），右图是视线被遮挡（masking）如果没有G项，当视角和法线接近90°时，BRDF分母会接近0，所以BRDF会变得巨大，导致球体一圈变成白色常用的G项为The Smith shadowing-masking term 把shadowing和masking两种情况分开考虑他是基于NDF的值来考虑G项的值的

D项：Normal Distribution Function（NDF）

微表面上看法线方向并不是统一的当法线分布更多在半程向量时，反射光强度更大

glossy和diffuse的表面法线分布情况，glossy的表面分布比较集中有不同的模型来描述法线分布

Benckmann、GGX

Beckmann NDF

两个系数来控制分布。阿尔法控制表面的粗糙程度。sita控制半程向量和法向量的夹角圆心是着色点，红色是微观法线。黑线是宏观着色点法线。他们的夹角就是sita，把红线延长到上面的一条线上。用tansita来定义分布所以说Beckmann NDF是定义在tanθ上的高斯分布

GGX NDF

它的尾巴比较长，如下图橙色尾巴很长。而beckmannNDF在90°时已经衰减为非常接近0。如果把高出定义为高光，那backmannNDF高光周围会迅速衰减。而GGX会缓慢衰减，形成光晕的效果下图可以看出backmann高光周围比较尖锐。GGX比较平滑所以说GGX的长尾可以带来自然过渡的效果。

GGX的拓展定义参数gamma,调整尾巴衰减速度

Multiple Bounces

现在已经学习了BRDF的FGD三项的构成。但是这样渲染出来还有问题。随着roughness的增加，模型逐渐变暗了。下面一行是在做能量损失实验，说明roughness越大，能量损失越多了这种能量损失体现在，越粗糙的表面法线分布更容易被挡住所以要考虑多次bounces，有相关的论文，但是对于实时渲染太慢了所以现在有了基于经验补全的方式，kulla-Conty Approximation 首先根据渲染方程，假设输入的L=1，计算输出的能量是多少所以1-E(u0)就是损失的能量（E与观察方向有关系，所以不同的视角下损失能量是不一样的），最后补上这部分能量。具体怎么算出来就不看了。最终损失能量依赖于观察方向和粗糙度两个变量。所以直接预计算打表即可。补充前后对比

LTC(Shading Microfacet Models using Linearly Transformed Cosines)

LTC 最初是由 Tobias Ritschel 等人在论文《LTC - A Fast and Efficient Approximation of Fresnel Terms and Distribution of Normal Vectors for Real-Time Rendering》提出的，它被设计为一种方法来近似反射分布函数（BRDF） Fresnel项和法线分布函数（例如 GGX）是微面模型的关键组成部分，这些函数非常复杂，计算成本较高。LTC 使用线性时间编码（Linear Time Coding）来近似这些复杂的分布，使得实时渲染时可以快速计算这些项。综上LTC是一种对BRDF项的预计算

首先，它是有限制的。主要是在GGX的法线分布下、没有阴影、多边形光源主要思想是任何BRDF lobe 都可以通过一个变换转化为一个余弦函数实际实现比较复杂，课程没提到

Disney’s Principled BRDF

首先介绍了为什么有了微表面BRDF还需要Disney的BRDF 它被称为principled的BRDF，可以通过调整参数来达到想要的效果，所以他是艺术家友好的介绍一下里边的名词

subsurface（次表面反射）：光线进入表面后并不会直接反射回去，而是穿透表面并在内部多次散射，最终可能以不同的方向从表面射出。
metallic（金属性）
specular（镜面）
specularTint（镜面颜色）：specularTint 是一个与镜面反射（Specular Reflection）相关的参数，用来控制反射光的颜色如何与材质本身的颜色混合。也就是说镜面反射光不是单纯的白色，而且受表面材质颜色的影响
anisotropic（各向异性）：述材料或表面在不同方向上具有不同物理特性的术语
sheen（沿着球的表面有绒毛雾化效果）
clearcoat（添加一层镀膜）

Non-Photorealistic Rendering(NPR)

Outline Rendering 描边

先来看看有哪些Outline，B表示自己的边界，S表示两个面交界处形成的边界，C是折痕，M是材质边界知道了边界，下来就需要描边，可以通过Shading或者图像处理来完成。首先来介绍Shading方法，哪些像素点是S边上呢，根据观察，就是法线与观察方向=之间夹角接近垂直的像素点。可以设置夹角的阈值，来改变边的粗细另外就是外扩法，之前learnOpenGL里有另外看一下从图像上来处理

Color blocks 色块效果

直接把渲染结果量化，就是连续值变成离散

Strokes Surface Stylization 素描效果

GAMES202 高质量实时渲染（Real-Time Global Illumination）

Sun, 19 Oct 2025 14:00:35 +0800

简单理解就是已经被照亮的点作为光源再去照亮别的点

在3D空间的全局光照

Reflective Shadow Maps（RSM）

用非直接光照照亮点p需要什么：

那些点被光源直接照亮（从shadowMap中得到）
其他点对点p的贡献是什么 shadowMap中每个纹素就是一个面光源（因为shadowMap描述的就是那些地方被直接照到），紧接着要求p点的间接光照其实就是求shadowMap每个纹素代表的面光源对p点的贡献

把纹素作为面光源来求渲染方程现在问题就是从纹素反射出来的Radiance如何计算

BRDF项在当前场景中认为是diffuse的
BRDF可以认为是出射的Radiance与入射的irradiance的比例，所以L可以算出这样写的好处是带入渲染方程后把dA项消掉了，这样就不需要patch的面积大小了，公式就变成了有几个问题：
V项没了，因为计算量太大，要计算对于每个着色点从任何一个纹素看向着色点是否被遮挡
方程下边变成4次方，是论文作者对距离衰减做了平方衰减处理，课程中说这是错的，应该是平方，如果说错了直播吃键盘😄（看到第9节课，老师真吃键盘了）

有一些纹素一定不会对着色点有贡献 1. 可见性 2. 方向 3. 距离这个问题就引出了这篇论文的假设，如何知道那些纹素离着色点比较近，论文中认为在shaowMap上比较近，那么世界坐标下就离的比较近（大胆的假设） RSM需要存储的东西 RSM在工业界通常用在手电筒 RSM的优点：

易于实现缺点：
直接光源有多少就得有多少张shadowMap
可见行没法做
很多的假设
采样率和质量的tradeoff

Light Propagation Volumes (LPV)

关键点：Radiance沿直线传播时不会发生变化z 关键做法：把整个场景体积进行切割，成为一个个体素（类比纹素）下图红色箭头就是间接光照的来源，就是求黄色点接收到的红色radiance的计算步骤：

那些点接收到了直接光照
把这些点放在场景到的一个网格中
在网格中传播radiance 通过RSM得到一系列虚拟光源对场景划分3D网格（可以使用3D纹理，定义每个UV是3D空间的哪个网格）计算一个格子中向任何方向上的radiance是多少，并用SH压缩，LPV需要存储场景中每个体素（voxel）的辐射度分布，直接存储全方向的辐射度会导致内存爆炸。通过SH投影（通常用2阶或3阶），可将6D的光照函数压缩为少量系数（如9个或16个），极大降低内存需求。这一步我理解就是把每个次级光源都归为了每个网格的属性，这里记录了每个网格向各个方向的Radiance 一个格子的radiance向上下左右方向进行传播，这一步结束后每个格子的radiance就都记录好了对于一个着色点来说，就可以直接使用当前格子接受到的Radiance来计算间接光照了但是有问题，墙的一边不可能照亮墙的另一边，那把一堵墙放在同一个网格中，那计算着色时墙两边的Radiance都会被考虑，就会出现漏光这样就会出现漏光现象，这就要考虑网格划分粒度了

Voxel Global Illumination (VXGI)

把整个场景网格化，想象成MC用方块搭起来的场景，并做了层级处理，比如上一层的一个格子在下一次划分为8个格子，最终建立起一颗树第一步：用RSM的方法找到直接光照的网格，并记录每个网格接收到的光源的入射方向和法线，并更新到各个层级，高层级整合低层级的光源入射方向和法线开始着色：对于glossy的着色点，光源到达后会反射为一个圆锥的范围从着色点发射锥体，沿锥体轴线步进采样。看场景中那些体素在椎体范围内，那它就对该着色点有贡献（这是利用光路可逆的思想，反过来这些碰到的体素就会通过椎体射到着色点）对于diffuse的着色点

在屏幕空间的全局光照

屏幕空间：只使用屏幕信息，对图像进行后期处理

Screen Space Ambient Occlusion（SSAO）

一种全局光照的近似 key diea 1：

不知道间接光照，假设为一个常数
但不是所有方向都能接收到，会被别的物体挡住显然AO的环境光更好经典从渲染方程中解释把V项拆出去了，拆出去的（蓝色）项就像当于把四面八方的可见行进行了平均，剩下的（橙色）项中L项在SSAO中已经假设为常数，另外还假设BRDF是diffuse的，所以全是常数了其中cossita还没解释用cos项把球面上的积分转为圆面上的积分（把立体角的面积投影到底面圆上进行积分）数学结束，SSAO就是把间接光当常数、BRDF也是diffuse的理论分析结束，现在问题就是如何在屏幕空间求一个着色点四面八方看哪些地方被挡住了 SSAO假设任何一个着色点在周围半径为R的球中进行采样，每个点与对应像素的zbuffer进行比较，如果大，说明这个点被挡住了就是红色但是上图有一个点判断错了用一整个球来采样还有问题，墙体内部的点不需要考虑，只需要半球采样即可

采样越多越准确 AO做法是先低采样得到AO 然后进行模糊 SSAO的一个问题是会出现假遮挡现象，因为在摄像机视角下，看着被遮挡了，但实际上两者距离是很远的进一步有技术叫HBAO，只考虑一定范围内的遮挡

Screen Space Directional Occlusion(SSDO)

是对SSAO的提升，SSAO考虑间接光照是是一样的，但是通过RSM，我们是可以求出间接光照的

下图看出AO只是简单的变暗，而DO考虑的反射物的颜色，让阴影变蓝了

与SSAO想法相反，DO认为如果打出去的光线没有物体挡住，那它才应该没有间接光照的贡献，只有直接光照的贡献，反而打到的物体才会反射回来光实际做法也和SSAO一样，半球面采样，使用Zbuffer来判断采样点是否被挡住，下图ABD点都得到是被遮挡了考虑ABD的间接光照对C点的贡献 DO也有假遮挡问题，A点没有被挡住，但是从视角上看是被挡住了，所以被认为对C点有间接光照贡献只能做小范围的全局光照

Screen Space Reflection（SSR）

在屏幕空间中做光线追踪现在在屏幕空间已经有了红框的东西，现在SSR就只需要加上白框的东西 SSR的思路 Linear Raymarch 目标是找到光线与场景的交点

选定步长，每走一步检查深度还有加速方法，首先对zbuffer生成mipmap 但与常规mipmap不相同，上一层级的一个像素是下一层级4个像素的最小值，而不是平均值存最小值的目的就是，如果一个光线与上层不相交，那下层更不用考虑了，因为下层离得更远算法为首先走一步，每交点，就胆子大一点就在上一层一口气走两步，还没交点走4步，有交点了再慢慢走 SSR也有问题，因为屏幕空间只有最前面的数据，所以藏在背后的但是反射出来应该能看见的物体就渲染不出来了

GAMES202 高质量实时渲染（Real-Time Environment Mapping）

Sun, 19 Oct 2025 13:59:44 +0800

Shading from Environment Lighting

使用环境光计算shading的操作叫做IBL(Image based lighting) ，光照不是来自光源，而是环境贴图下面在不考虑阴影的情况下来看渲染方程，接受来自整个半球面的光来进行渲染之前的做法是使用蒙特卡洛积分来估计积分，但是太慢了放在实时渲染中（采样表现并不好，（但是随着发展形势逐渐变化了），这里就讲避免采样的方法）根据上图，联系上节课如何对visibility拆分的情况，这里的光照项也可以提出去这种操作反应到贴图上就是对贴图进行了过滤，在渲染之前先得到滤波核处理过的贴图这种操作相当于把多次采样近似为先滤波后的镜面反射方向的一次采样到这里对于光照项避免了采样，下来来看BRDF项避免采样的方法，如今已经有更好的方法，这里只是学思想，主要思想就是我们想直接打表来预存每个变量下的积分值，但是维度太高了，这里在分析如何降维微表面模型的BRDF的方程这里主要考虑菲涅耳项和法线分布项的近似 F项 G项看这两幅图，说明如果我们想预计算BRDF函数，实际上只需要3个变量，一张三维的表，但是三维还是太麻烦了 F项还可以进一步简化，这样写之后把R0拆出来了，因为它基本是一个常数这样等式右边的连个积分都可写成一个二维表来进行预计算在这张2d纹理任何一点的值，就是BRDF积分出来的结果，直接渲染方程都不用积分了下图可以看见这种简化方法得到的结果与真实采样得到的结果十分相似，但计算量小了很多这种方法叫做split sum，它是unreal引擎PBR🐮b的基础～（没有采样就没有噪点）我感觉实时渲染目前了解的很多都是如何把计算进行简化的同时偏差并不大！

shadow from environment lighting

可以把环境光贴图当作很多光源，每个光源都需要shadowMap，这是很困难的

Spherical Harmonics (SH)

Spherical Harmonics (SH)（球面谐函数）是一类在球面坐标系中定义的特殊函数

l决定了波动的“频率”或阶数
m 控制了波动的方向性，特别是如何沿着经度这个东西就是用来把一个二维函数展开成SH的线性组合（类似一维的傅里叶变换）

每一项前边的系数用下式来计算（两个函数乘起来求积分），这种求系数叫做投影，同样通过这些系数也可以恢复原来的函数

说了这么多东西，想表达的就是计算时BRDF是低频时，就可以把它比做低通滤波器，所以不管光照项算出来多高频，最终都会被抵消，所以并不需要高频。所以可以用球谐函数前三阶来近似光照项

总结一下上边这些东西。球谐函数的作用是把一个函数展开成从低频到高频的基函数组的线性组合，渲染方程中如果BRDF是diffuse的，那它就是个低通滤波，即使光照是高频的，它的高频信号计算后也会消失，所以直接用球谐函数前几阶来代替它即可。上面这些东西还只是shading，还没有解决shadow

Precomputed Radiance Transfer (PRT)

在实时渲染下，人们更愿意把渲染方程写成下面，PRT假设光照会变，别的不会变的情况上图是考虑下图这一点的数据这三张图就代表了在这一点任何方向的lighting、visibility、brdf。直接对应相乘再相加就是这一点的shading，但是每个像素都这么大的计算了，显然效率太低了
这三项都可以表示为球面函数，那直接把上边三张图对应像素值相乘就可以了 PRT的基本思想就是把渲染方程看成下面的两部分 lighting和light transport PRT的做法就是：（它假设场景所有东西都不变，就光照可以改变）

把lighting进行球谐函数展开，在预计算时就可以算好，因为每个像素的lighting部分都是来自同一张环境光贴图所有点位的值
transport部分也可以预计算球谐函数展开如果BRDF是diffuse的，那可以把它当作一个常数（即任何方向都均匀反射），下图先提出BRDF的常数，然后把光照项换成求和式，之后交换了求和与积分的顺序（在CG中可以认为任何时候求和和积分都可以交换顺序）到这里发现积分内的含义就和之前求球谐函数展开后各项系数的方程是长一样的，所以可以把后边剩下的项先变成球谐函数，然后i不同就是不同项的系数，这样这个积分项就变成了一个离散的一维数组最终渲染方程变成了两个东西的点乘但是预计算后边这一部分就说明整个场景的物体是不能动的。另外球谐函数的一个优点是旋转后可以很快算出系数的变化，所以支持光照的旋转。

最终渲染方程只需要一个light的数组和一个transport的数组来计算另外还有glossy的物体没有处理。 diffuse的BRDF可以当作一个常数，而glossy的BRDF与摄像机的位置o也有关系，不同的摄像机位置o得出的T数组是不一样的因为现在最终的结果与摄像机视角o有关了，进一步把T(o)也进行球谐函数展开最终light项仍然是一个数组，而transport项变成了二维的

SH选择不同的阶的时间复杂度

GAMES202 高质量实时渲染（Real Time Shadows）

Sun, 19 Oct 2025 13:58:35 +0800

Shadow Mapping

这块东西在我OpenGL学习笔记中有详细介绍

https://blog.csdn.net/lzh804121985/article/details/147256140?spm=1001.2014.3001.5502

shadowMapping的问题

阴影痤疮(Shadow Acne)、或者叫自阴影出现该问题的原因可以看下图，光源视角下的一个像素内高度认为是同一个，下一个像素的位置，会被认为比前一个Z值更远，所以平坦的地板会交替出现高低不平的地方，这样就会出现阴影简单解决就是认为z插值在一个范围内就不算在阴影中，虽然能解决这个问题，但是引入了新的问题，阴影发生了偏移。如果bias设置的过大，在靠近脚的地方，就不会出现阴影。在工业界称为“彼得潘效应"(Peter Panning) 对于这种不接触的阴影，解决方法是shadowmapping中不仅存最小深度的表面，还存储第二小深度的表面另外在learnOpenGL提到，在渲染深度贴图时，使用正面剔除，让深度贴图存储的是物体的内面来解决彼得潘问题。因为我们只需要深度贴图的深度值，对于实体物体无论我们用它们的正面还是背面都没问题。使用背面深度不会有错误，因为阴影在物体内部有错误我们也看不见。

另外阴影还有走样问题，毕竟阴影计算就是一个像素一个像素来做的

shadow mapping背后的数学

在实时渲染中，经常会用到一些不等式，但人们更多关注的是不等式相等时成立的条件，也就是说，不等式在什么条件下近似相等。实时渲染中，经常用到的一个约等如下：满足下列两个条件之一时，实时渲染领域认为他们近似相等：当g(x)满足：

g(x)积分域足够小
g(x)足够smooth，g(x)值变化不大，比较平坦

下面来到渲染方程根据上边的不等式，就可以把最后一项（V）提出来这样变换后，渲染方程就变成了正常做shading之后，再乘以一个表示可见不可见的项这时的G(x)就是渲染方程的被积函数

PCF（Percentage Closer Filtering）

以点P为例，并不只找shadowmap中对应的一个像素，而是找一圈的像素，与这些像素都进行比较，最后将比较结果进行平均比较结果就是一个全是1，0的矩阵，最终得到的数就不是非0即1的数了

PCSS（Percentage closer soft shadows）

PCF它原本是用来解决阴影的走样问题的，后来人们又发现它可以用来生成软阴影，就是PCSS 首先来回顾一下软阴影和硬阴影到这里就可以理解软阴影在阴影不同位置有不同的软硬程度就可以通过PCF的滤波核的大小来控制，越大越模糊，越小越硬 w(半影)与光源大小、物体位置之间呈现相似三角形的关系，w就可以用来表示软硬程度。半影举例越大，滤波核尺寸就应该设计的更大，让阴影更软

总结PCSS的算法流程：1. 在一个范围搜索遮挡物，并计算平均深度。2. 用平均深度求出半影距离3. 在对应的滤波核尺寸下进行PCF 上边的步骤1需要选取一个合适的范围，下图就展示了如何选取一个范围来进行遮挡物搜素，假设了ShadowMap在近平面，用光源的大小来决定搜素范围在PCSS第一步和第三步中，为了计算一个像素点的着色，需要考虑多个纹素，从而导致速度慢。如果采用稀疏采样，又会有噪点产生

VSSM（Variance Soft Shadow Mapping）

针对PCSS效率问题，提出VSSM

优化步骤3

PCF和PCSS的 PC（percentage closer）的理解就是在深度纹理的一片区域内，有多少比例的纹素比着色点深度小这就相当于看多少人比我考试分数高，就需要遍历所有同学的成绩 VSSM的解决方案就是用成绩分布（正态分布）来估计（⚠️VSSM并没有用正态分布，这里这样说只是方便理解，后边提到切比雪夫不等式就好理解了）定义一个正态分布需要均值和方差，这个可以快速计算均值可以通过mipmap（因为上一级map到下一级map就是把相邻的正方形进行平均，到最后就整合为了一个平均值）、SAT（是一种用于高效计算矩形区域内元素总和的数据结构）来求，方差则是用一个概率论公式来求得到正态分布分布后，求小于着色点深度的纹素百分比，其实就是阴影部分的线下面积下来VASS还对这种计算进行了简化。直接使用不等式来近似只要给定均值、方差、和要比较的位置t，就有下面的不等式成立，在渲染中就直接用方差、期望、t来估计红色部分的面积，然后马上就能得出剩余部分的面积（t必须大于中间线才好使）至此，对PCSS步骤三的优化结束，在生成shadowMap时，为了计算方差，还需要额外生成一张平方shadowMap，总体来说甚至都不需要进行loop就可以知道一片区域有多少纹素深度小于着色点深度

优化步骤1

为了设置合理大小的过滤核，对一个区域内遮挡物的深度进行平均，需要遍历纹素，效率并不高

例如下图，如果着色点的深度为7，那么这些纹素的深度只有蓝色的是遮挡物，就需要平均他们，而红色不参与计算对蓝色部分和红色部分求均值后，满足下式这里求N1/N就可以直接用刚才步骤三的不等式（用方差、均值、t来估计大于t的比例），之后1减去它就是N2/N。

但我们还不知道红色部分的均值，在VSSM中直接假设红色部分均值就是t（大胆的假设，假设的依据是阴影位置大概率是个平面） VSSM的效果另外课程还提到目前PCSS是压过VSSM的，因为人们对噪声的容忍度越来越高，在图像层面进行降噪手段变强了

SAT（Summed Area Tables）

SAT是给一片区域立刻得到它的均值的一种数据结构

SAT是对原数据的预处理得到的数据，在一维场景下，每个index记录都是前缀和（提前记录好），现在要求中间某一段的和，就直接拿出SAT在范围查询边界（左边是边界-1）的数据相减就行了在二维情况下蓝色的范围查询，可以转化为左上角都是(0,0)的框加减操作

VSSM的问题

VSSM中作了很多假设，有一个就是假设一片区域纹素是符合正态分布的例如右图深度只有3个峰值，不符合正态分布下图就是说本来只有一小部分没遮住，但是假设为正态分布变成了很大一部分，就会让阴影边白有一些地方变白了

Moment Shadow Mapping

为了解决VSSM分布描述不准确的问题，提出MSM，使用更高阶矩来描述分布大概意思就是用数据的高阶来更好的拟合PCF的效果，下图表明用4阶矩下的分布就很好的达到了PCF的效果缺点很明显空间很大

Distance Field Soft Shadows

首先看一下Distance functions是什么,它描述了空间中任意一点到物体表面的最小距离，离得越远值越小，表示到图上就是变白在任何一个点上，以它记录的值为半径画圆，都不可能碰到物体，如果做光线追踪，那可以直接移动到圆的表面上去，这就是SFD的一个应用下来用它来生成软阴影是它的另外一个阴影用SDF可以大概描述多大的范围被物体挡住了，圆圈内为安全距离，不会有物体挡住，用这个圈的大小来定义visbility的大小，从而实现软阴影在不同的位置找圆做切线，最小的切线就是需要的安全距离求角度是一个acrsin的计算，比较慢，人们用一个替代来简化其中根据不同的k值来达到不同的效果显而易见的优缺点空间换时间，但这是不考虑生成距离场的时间