GAMES202 on The Only Problem's Blog

Assignment 8. GAMES202 Homework 5

Mon, 16 Jun 2025 00:00:00 +0000

202 系列完结撒花 ✿✿ヽ(°▽°)ノ✿！

0x00 To begin with

这篇文章将会包含以下内容：

部分课程内容回顾
GAMES202 作业 5

For reference👇：

📺B 站视频： GAMES202-高质量实时渲染
📦代码仓库： congyuxiaoyoudao/GAMES202_Homework at working
作业5发布公告及场景下载
📖 GAMES202-作业5：实时光线追踪降噪

master 分支上是 202 全部作业汇总，working 分支用于提交代码。需要原始作业可下载 master 分支的包

0x01 问题修复 TroubleShooting

做作业时遇到一些出现问题的地方，这里一并提一下：

运行 build.bat 后 build 目录下没有出现可执行文件
ReadFloatImage 方法报错
mathutil.h 中 uint32_t was not declared in this scope

第一个问题纯属对 Cmake 不熟练，build.bat 提供的命令只是生成工程文件，要运行构建还需要如下命令（或者直接用 VS 等 IDE 运行）：

1cmake --build build

这里为了简化运行操作，新增了一个 run.bat：

1cmake --build build
2cd build
3Denoise.exe
4cd ..

第二个问题为路径错误，下载完场景后我的根目录文件结构如下：

Assignment 7. GAMES202 Homework 4

Sat, 14 Jun 2025 00:00:00 +0000

好久不见！最近在忙别的工作，这几天难得有时间，赶紧把 202 系列作业做个收尾ε٩(๑> ₃ <)۶з！

0x00 To begin with

这篇文章将会包含以下内容：

部分课程内容回顾
GAMES202 作业 4

For reference👇：

📺B 站视频： GAMES202-高质量实时渲染
📦代码仓库： congyuxiaoyoudao/GAMES202_Homework at working
📃 Revisiting Physically Based Shading at Imageworks

master 分支上是 202 全部作业汇总，working 分支用于提交代码。需要原始作业可下载 master 分支的包

0x01 课程回顾 Recap

能量守恒的 BSDF Energy-Preserving BSDFs

Cook-Torrance 提出的微表面 BRDF 只考虑光线在表面经过一次弹射后出射到观察方向的能量，然而忽略了多次弹射最终出射到观察方向的能量，这就造成了能量损失。尤其是当材质的 roughness 较高时，G 项减小，多次弹射的比例增加，能量损失越严重。

2017 年 Kulla 和 Conty 受到 Disney Principle BRDF 的启发，提出了一种改进的方法，即通过引入一个能量补偿项，将多次弹射出射到观察方向的能量补充回来，就能近似地保持能量守恒。

Assignment 6. GAMES202 Homework 3

Sat, 10 May 2025 00:00:00 +0000

HiZ 还在施工中……

0x00 To begin with

这篇文章将会包含以下内容：

部分课程内容回顾
GAMES202 作业 3

For reference👇：

📺B 站视频： GAMES202-高质量实时渲染
📦代码仓库： congyuxiaoyoudao/GAMES202_Homework at working

master 分支上是 202 全部作业汇总，working 分支用于提交代码。需要原始作业可下载 master 分支的包

0x01 课程回顾 Recap

SSR（Screen Space Reflection）是一种基于屏幕空间的反射算法，也被应用于模拟全局光照。因为是屏幕空间的算法，不能且无需像传统全局光照算法那样需要获取场景的原始几何信息，而是只在当前相机的视野范围计算反射，所以效率相对较高，但也存在一些屏幕空间的 Artifacts。

SSR 算法有两个假设：

屏幕范围内的反射光，其反射源也同样来自屏幕空间的某个像素；
所有被直接光照亮的物体（在屏幕空间中则表现为像素），都可以作为次级光源参与对反射的贡献；

SSR 对反射表面没有要求，即不仅能模拟镜面反射，还可以模拟各种粗糙度的反射

SSR 算法的步骤如下：

对每个需要计算反射的像素沿反射方向发射一条光线；
沿光线方向步进在屏幕空间中查找深度缓冲并与场景求交；
若有交点，则将交点颜色作为反射颜色添加到原始像素上；

其中最关键的步骤就是光线求交，最简单的方法就是 Linear RayMarching，光线每次行进一个固定的距离，每次行进后获取该位置的深度值再与场景深度进行比较，如果某次判断光线深度大于场景深度，则认为发生了相交。

当然这种方法的精细度很依赖光线步长，小的步长效果更好但消耗大，反之，更大的步长则可能导致光线“穿过”场景而误判相交，造成错误计算反射的情况。

为了在提高精度的同时节省开销，研究人员又提出了一种动态步长的方法，即 Hierarchical ray trace。允许光线根据场景信息在行进期间选取不同的步长，例图中光线一开始至少可以以 7 倍的 gap 作为步长，之后再缩减到原始的步长。

说到实时渲染中的一些动态操作，几乎就离不开预处理。同样的，这种方法运行的前提是，光线需要知道行进的“最大安全距离”，即可以迈多大的步子而不与场景发生相交。

这里最大安全距离是类比 SDF 的说法，或者应该说当前层级规定的步长

一种实现它的方法是预先生成深度图的 Mip-Map，这里四个像素的最小值作为 Mip 生成的逻辑，具体原因涉及到比较的保号性：如果光线与上一级 Mip 都不相交（$D_{ray}

Assignment 5. GAMES202 Homework 2

Sat, 19 Apr 2025 00:00:00 +0000

(∩^o^)⊃━☆ﾟ.*･｡

0x00 To begin with

这篇文章将会包含以下内容：

部分课程内容回顾
GAMES202 作业 2

For reference👇：

📺B 站视频： GAMES202-高质量实时渲染
📦代码仓库： congyuxiaoyoudao/GAMES202_Homework at working
📃 The rendering equation | ACM SIGGRAPH Computer Graphics
📃 Precomputed radiance transfer for real-time rendering in dynamic, low-frequency lighting environments | ACM Transactions on Graphics

master 分支上是 202 全部作业汇总，working 分支用于提交代码。需要原始作业可下载 master 分支的包

0x01 前置准备 Warm Up

渲染方程 Render Equation

James T. Kajiya（没错就是那个提出 Kajiya-Kay 头发着色模型的 Kajiya）在 1986 年提出了渲染方程（The Render Equation），原论文里长这样：

$$ I(x,x')=g(x,x')\left[ \epsilon(x,x')+\int_{S}\rho(x,x',x'')I(x',x'')dx'' \right] $$

当然现在看得更舒服的形式长这样：

Assignment 4. GAMES202 Homework 1

Mon, 14 Apr 2025 00:00:00 +0000

🚩 0x00 To begin with

这篇文章将会包含以下内容：

GAMES202 作业 1

For reference👇：

📺 B 站视频： GAMES202-高质量实时渲染
📦 代码仓库： congyuxiaoyoudao/GAMES202_Homework at working

master 分支上是 202 全部作业汇总，working 分支用于提交代码。需要原始作业可下载 master 分支的包

0x01 Shadow Map

完成两个任务点：

第一个 Pass 以光源作为相机渲染一张 ShadowMap，需要为 Shader 传递正确的 uLightMVP 矩阵；
第二个 Pass 获取光源传递的统一变量 FBO （ShadowMap），需要比较当前 ShadingPoint 的深度值与 ShadowMap 上记录的深度值，得出可见性项与 Shading 结果相乘。

DirectionalLight.js 中，完善 CalcLightMVP 函数：

 1		// Model transform
 2        mat4.translate(modelMatrix, modelMatrix, translate);
 3        mat4.scale(modelMatrix, modelMatrix, scale);
 4
 5        // View transform
 6        mat4.lookAt(viewMatrix, this.lightPos, this.focalPoint, this.lightUp);
 7
 8        // Projection transform
 9        var r = 100;
10        var l = -r;
11        var t = 100;
12        var b = -t;
13        var n = 0.01;
14        // caution! Depth of far plane should be a bit more larger
15        var f = 400;
16        
17        mat4.ortho(projectionMatrix, l, r, b, t, n, f);

远平面需设置得稍微大一点，避免光源的视锥范围无法覆盖全部场景

Assignment 3. GAMES202 Homework 0

Mon, 07 Apr 2025 00:00:00 +0000

开个新坑，之前囫囵吞枣地过了一遍 202，现在忘得差不多了，该捡起来。正好给枯燥的生活增添一点色彩（？），最近比较忙但还是争取一周做一个作业

🚩 0x00 To begin with

这篇文章将会包含以下内容：

GAMES202 作业 0
不包含作业框架分析

For reference👇：

📺 B 站视频： GAMES202-高质量实时渲染
📦 代码仓库： congyuxiaoyoudao/GAMES202_Homework at working

master 分支上是 202 全部作业汇总，working 分支用于提交代码。需要原始作业可下载 master 分支的包

⚙️ 0x01 Configuration 环境配置

选择使用 VSCode 插件搭建本地服务器，在扩展中搜索 Live Server，安装此插件。

在编辑 Html 代码窗口按 F1（或者右键）选择 Live Server: Open with Live Server，随后会自动打开浏览器，导航至本地服务器端口，一切正常的话是下面这个效果：

可以使用鼠标和右上角的控制面板进行一些简单的交互。

如果遇到模型贴图加载不出来（只有 202 字样），可以选择多刷新几次。或者直接在加载脚本前预加载贴图，可以根治这个问题。

1<link rel="preload" href="assets/mary/MC003_Kozakura_Mari.png" as="image" type="image/png" crossorigin/>

🤔 0x02 Blinn-Phong Shading Model

没什么好说的，CV 工程师

使用 GLSL 编写 Shader

如果使用字符串的方式引入 Shader，就在 InternalShader.js 中加上：