GAMES202作业1-实现过程详细步骤

不念不忘少年蓝@ 2023-09-28 14:39 0阅读 0赞

**目录**

查看初始模型

Shadow Map

要求

1 CalcLightMVP()

了解1-该方法如何参与到后续的环节

了解2-WebGL中glMatrix的使用

补充代码（截图）

useShadowMap()

参数传入1 -> shadowMap

参数传入2 -> shadowCoord

WebGL内置函数 -> texture2D

unpack()

转化成NDC坐标

补充代码（截图）

硬阴影实现结果

优化->自适应Shadow Bias

shadow bias 代码（截图）

优化自遮挡后的结果

新问题->Peter Panning 阴影丢失

PCF

要求

采样方法X2

Filtering

filter size 卷积核大小？

采样偏移值 -> 与步长Sride关系

代码实现（截图）

PCF结果

NUM\_SAMPLES=20, Stride=10

NUM\_SAMPLES=100, Stride=10

Stride=2, NUM\_SAMPLES=100

Stride=20, NUM\_SAMPLES=100

均匀圆盘采样 Stride=20, NUM\_SAMPLES=100

泊松圆盘采样 Stride=20, NUM\_SAMPLES=100

EPS=1e-2, NUM\_SAMPLES=80, Stride=10

EPS=1e-3, NUM\_SAMPLES=80, Stride=10

PCSS

要求

半影范围 编辑

1 Blocker Search

实现代码（截图）

2 Penumbra estimation

3 PCF

实现代码（截图）

PCSS结果

--------------------

*  首先说明一下，由于闫老师建议我们不要直接贴出完整的代码，不利于独立完成作业。因此从202开始我也不会贴出全部的代码啦，涉及到作业的代码仅以截图的形式贴出每一步骤作为分享，希望大家一起讨论独立完成作业~！
 *  详细了解作业1代码框架可戳：[GAMES202作业1-万字分析代码框架&帮助更好理解框架内容][GAMES202_1-]

## **查看初始模型** ##

首先打开查看一下初始模型：

![6b70a22b7f914a7c93203442174ea2c0.png][]

很好！可以打开！另外，我最开始是直接从VS Code右键选择index.html进入的页面，会出现打开界面但不显示模型的情况，只有一个202，F12也没有任何报错，然后多刷新几次又行了：

![6fe3c9fecfd34176b690c90db6a003bb.png][]

保险起见每次从终端进入就行。

## Shadow Map ##

### 要求 ###

![57d8013a843a4a12a6ad4d67a99565e0.png][]

![f79ff7b5d4ae4562b91a9a7f5cb88f85.png][]

### 1 CalcLightMVP() ###

#### 了解1-该方法如何参与到后续的环节 ####

需要补全这个函数以得到光源方向的lightMVP，这个CalcLightMVP()方法通过以下途径参与到后面的环节中：

*  **1-1 PhongMaterial.js的buildPhongMaterial()函数通过调用PhongMaterial**

return new PhongMaterial(color, specular, light, translate, scale, vertexShader, fragmentShader);

在PhongMaterial中进行

let lightMVP = light.CalcLightMVP(translate, scale);

*  **1-2 ShadowMaterial.js的buildShadowMaterial()函数通过调用ShadowMaterial**

return new ShadowMaterial(light, translate, scale, vertexShader, fragmentShader);

在ShadowMaterial中进行

let lightMVP = light.CalcLightMVP(translate, scale);

*  **2 并在loadOBJ中结合定义的transform和scale赋值传入material**

let material, shadowMaterial;
    let Translation = [transform.modelTransX, transform.modelTransY, transform.modelTransZ];
    let Scale = [transform.modelScaleX, transform.modelScaleY, transform.modelScaleZ];
    
    let light = renderer.lights[0].entity;
    //根据材质，有两个材质
    switch (objMaterial) {
    	case 'PhongMaterial':
    		material = buildPhongMaterial(colorMap, mat.specular.toArray(), light, Translation, Scale, "./src/shaders/phongShader/phongVertex.glsl", "./src/shaders/phongShader/phongFragment.glsl");
    		shadowMaterial = buildShadowMaterial(light, Translation, Scale, "./src/shaders/shadowShader/shadowVertex.glsl", "./src/shaders/shadowShader/shadowFragment.glsl");
    		break;
    }

还需要知道的一点，传入的transform和scale是在engine中定义好的：

function setTransform(t_x, t_y, t_z, s_x, s_y, s_z) {
    	return {
    		modelTransX: t_x,
    		modelTransY: t_y,
    		modelTransZ: t_z,
    		modelScaleX: s_x,
    		modelScaleY: s_y,
    		modelScaleZ: s_z,
    	};

#### 了解2-WebGL中glMatrix的使用 ####

要想实现MVP变换矩阵，现在我们就不用像101一样自己写出变换矩阵了，借助WebGL的API就行！

还记得我们再index.html中从lib中加入了文件gl-matrix-min：

这就是加入了js用于矩阵处理的库glMatrix，可以用它来实现MVP矩阵以创建camera和model、view、projection变换的操作。

我们需要了解都有哪些跟矩阵相关的API，这些操作相关的我会在代码中给一点点注释，这里推荐我了解glMatrix参考的博客：

[glMatrix — WebGL — Den's Website (dens.website)][glMatrix _ WebGL _ Den_s Website _dens.website]

[WebGL学习06-投影,视图和模型矩阵 - 掘金 (juejin.cn)][WebGL_06-_ - _ _juejin.cn]

[学习WebGL之变换矩阵 - 简书 (jianshu.com)][WebGL_ - _ _jianshu.com]

#### 补充代码（截图） ####

以上是了解CalcLightMVP()做的准备，下面是我分别对方法每一步实现做的注释：

*  **创建4x4的单位矩阵以储存变换矩阵**

//创建4x4的单位矩阵以储存变换矩阵
            let lightMVP = mat4.create();
            let modelMatrix = mat4.create();
            let viewMatrix = mat4.create();
            let projectionMatrix = mat4.create();

*   **Model transform**

![cbd283b65852476591b216bac87c8ef1.png][]

*   **View transform**

![d0cac12fdf6d4fa5bbc40b4c54b70d08.png][]

*   **Projection transform**

![ad9837ad862943f2a9b79e86620adb2d.png][]

### useShadowMap() ###

#### 参数传入1 -> shadowMap ####

useShadowMap(sampler2D shadowMap, vec4 shadowCoord)

main()调用它时传入的参数为

visibility = useShadowMap(uShadowMap, vec4(shadowCoord, 1.0));

其中

*  uShadowMap —— 提取来自方向光中创建的FBO中的深度信息

DirectialLight >>
    this.fbo = new FBO(gl);//创建了一个帧缓冲区
    
    ...
    
    PhongMaterial >>
    //Phong
    'uSampler': { type: 'texture', value: color }
    // Shadow
    'uShadowMap': { type: 'texture', value: light.fbo }
    
    ...

这里出现了新的关键字**sampler2D**，这是WeblGL在处理图片纹理时会声明的一个变量，它跟vec、float一样也表示一种数据类型，它表示的是一种取样器变量，从对应的纹理图片中提取像素值。

关于这个type为什么是texture?这个type其实是模型绘制入口MeshRender.js中为了绑定材质中参数所创建的字符串，除了'texture'外还有：'3fv' '1f'等等。

#### 参数传入2 -> shadowCoord ####

*  shadowCoord —— 纹理图片上像素对应的坐标，main()中有对应的归一化坐标计算

//实现了归一化
    vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;

#### WebGL内置函数 -> texture2D ####

实现ShadowMap第一步就需要查询纹理图片对应坐标上的深度值，而实现深度值查询首先要查血对应的颜色，WebGL就提供了这样一个glsl的内建函数来查询对应位置纹理的颜色RGBA值——texture2D。

//第一个参数 -> 图片纹理
    //第二个参数 -> 纹理坐标
    vec4 texture2D(sampler2D sampler, vec2 coord)

关于WebGL其他的内置函数，我看了这篇文章总结了比较常用的，贴过来以供参考：[WebGL内置函数 - 简书 (jianshu.com)][WebGL_ - _ _jianshu.com 1]

#### unpack() ####

这个函数在框架分析那个博客就提到过，用来将RGBA值转换成在范围\[0,1\]的float值。

#### 转化成NDC坐标 ####

main()中首先将像素坐标归一化了

// 归一化
      vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;

也就是说，像素被缩放成了\[-1,1\]³（1指的只是一个unit，并非像素尺寸那个1），那么转换成\[0,1\]³的NDC坐标就先要进行一系列矫正：

(-1,-1,-1) -> (0,0,0) (1,1,1) -> (1,1,1) (-1,1,0) -> (0,1,0)

带入就能知道需要先+1再/2

// 需要转化到NDC，才能在纹理uv坐标中使用
      shadowCoord.xyz=(shadowCoord.xyz+1.0)/2.0;

#### 补充代码（截图） ####

*  **1 查询最近深度 closest depth**

![32c388b8ebf840e68091fa563a292f95.png][]

*   **2 获取当前深度值&进行比较**

![a15491e07a6046d7ab07748c54475ef1.png][]

并在main()把以下被注释掉的useShadowMap和gl\_FragColor放出来，以实现替换

// 应用shadowmap/PCF/PCSS
    void main(void) {
      // 归一化
      vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;
      // 需要转化到NDC，才能在纹理uv坐标中使用
      shadowCoord.xyz = (shadowCoord.xyz + 1.0) / 2.0;
      float visibility;
      visibility = useShadowMap(uShadowMap, vec4(shadowCoord, 1.0));
      // visibility = PCF(uShadowMap, vec4(shadowCoord, 1.0));
      // visibility = PCSS(uShadowMap, vec4(shadowCoord, 1.0));
    
      vec3 phongColor = blinnPhong();
    
      gl_FragColor = vec4(phongColor * visibility, 1.0);
      // gl_FragColor = vec4(phongColor, 1.);
    }

#### 硬阴影实现结果 ####

![b35f4dece95c4f84b3f63111fdd7b5b3.png][]

### 优化->自适应Shadow Bias ###

可以发现上面实现出来的阴影是有问题的，由于自遮挡导致锯齿：

![1be9bc822f3a41d790a003df76fbcdcb.png][]![76cbdba15b76485f997f586f68871a01.png][]

这个由于自遮挡产生锯齿的问题叫做阴影瑕疵（**shadow acne**），而shadow bias就是为了解决这个问题而提出的。

![457d152e95da272b906da1dcffb7de57.jpeg][]

课上也提到，可以在进行深度判断时给个bias，在判断前先每个shading point深度往光照方向挪一挪，让由于自遮挡被判断处于阴影的点挪到有光照的地方，就能很大程度改善这一点。朝着光照方向挪动的距离即为bias，但是这个方法暂且是给每个shading point执行一个固定长度的bias。

[自适应Shadow Bias算法 - 知乎 (zhihu.com)][Shadow Bias_ - _ _zhihu.com]这篇文章中给出了更加清晰地数学模型，并给出了bias为什么产生的，感兴趣的话可以去看看，这里就不赘述。

根据上面参考文章最后给出的公式：

![28ba755b7e61408da88e114e3011696d.png][]

#### shadow bias 代码（截图） ####

添加一个函数getBias()以计算bias，给了一个调整量ctrl。

![26e103bc4b024c3e81ae0804188127c0.png][]

根据效果调整大小，最终定在了1.4效果最佳，useShadowMap()也需要加上计算bias的步骤

*  **3 加上bias再进行比较**

![fbe139e545304d39ad6040c83fd79133.png][]

#### 优化自遮挡后的结果 ####

![5ece6539b8734c7eb08bece0bcfd5713.png][]![eeb9e8d9688e4c549729dcec0b5c5466.png][]

#### **新问题->Peter Panning 阴影丢失** ####

可以发现优化了acne后，有了新问题，阴影会“悬浮”

![4a2b27995c0f4dc78ebd81525e341571.png][]

解决阴影丢失问题的对策是：采取基于物体斜度的bias，称为 slope scale based depth bias。这理就不再继续写代码了，具体步骤可参考：[Unity基础6 Shadow Map 阴影实现 - RubbyZhang - 博客园 (cnblogs.com)][Unity_6 Shadow Map _ - RubbyZhang - _ _cnblogs.com]

## PCF ##

### 要求 ###

![af1d16c9c21b42c0ab8a17b0fb3b7ec6.png][]

### 采样方法X2 ###

框架中给我们提供了两个采样方法，一个是泊松圆盘采样一个是均匀圆盘采样，二者都是根据

// Shadow map related variables
    #define NUM_SAMPLES 20
    #define BLOCKER_SEARCH_NUM_SAMPLES NUM_SAMPLES
    #define PCF_NUM_SAMPLES NUM_SAMPLES
    #define NUM_RINGS 10

定义的样本数量NUM\_SAMPLES，这个过程会进行20次，得到的结果就是

vec2 poissonDisk[NUM_SAMPLES]; // NUM_SAMPLES = 20

### Filtering ###

关于卷积可以参考文章：[CNN 基础知识 - 卷积 (Convolution) 填充 (Padding) 步长 (Stride)-老唐笔记 (oldtang.com)][CNN _ - _ _Convolution_ _ _Padding_ _ _Stride_-_ _oldtang.com]

课上老师也提到过，PCF其实是基于shadow map做AA（Anti-Aliasing，即反走样）。

在进行shading point的深度与shadowmap比较时，不只比较一个方向的值，而是与周围像素做卷积，在周围采样多个点的深度值，逐一比较之后求平均值，就能得到一个\[0,1\]的连续分布，可以表示不同明暗程度的阴影，不再是硬阴影那样非0即1对比强烈的感觉，阴影就变得柔和起来，也就实现了人工软阴影化。

注意，PCF是实现的并不是：

*  Filter深度（×）
 *  Filter shadow Map的结果 （×）

而是比较深度后再计算一个平均值。

#### **filter size 卷积核大小？** ####

PCF就是在做卷积，把卷积核也叫做过滤器，也就是filter。

*  作业1中filter的大小由采样数量决定，也就是一开始给定的NUM\_SAMPLES，初始值设置成了20。
 *  filter的大小、个数一般都是先设定一个初始值，再根据实验效果进行调整。
 *  在进行卷积时，在输出要求相同的情况下，filter越大参与计算的参数越多，那么对于作业1来说达到的阴影柔和的效果越明显。

#### 采样偏移值 -> 与步长Sride关系 ####

在卷积过程中，将每次卷积核滑动的行数/列数称为Stride（步长）。有时需要在卷积时通过设置的Stride来压缩一部分信息，成倍缩小尺寸。

对于作业1而言，由于PCF输入的坐标coords归一到了\[0,1\]的范围，那么给定采样点的偏移值poissonDiskSamples\[i\]也需要缩小一定范围以迎合coords坐标的尺寸，因此需要给定Stride以缩小尺寸。缩小比例当然是Stride/ShaodowMapSize，框架中ShadowMapSize=2048，Stride可以给定一个初始值1，根据效果进行调整。

### 代码实现（截图） ###

*  **1 定义参数**

![b10901b3d17f4fc69ccf9eb1955583af.png][]

*  **2 泊松采样得到采样点**

![8c082c486a804ae79b76552463ddc3e9.png][]

*   **3 对每个点进行比较深度并累加**

![2c8882c7161d44339b515dae051a9cf3.png][]

*  **4 返回均值**

![64ae5394898a45b78cf06328bd7e6f3d.png][]

*  **5 并在main()实现PCF**

![a193951e4d564608b0e3d9d6028db355.png][]

### PCF结果 ###

通过给NUM\_SAMPLES和Stride赋值，调整阴影的效果，可以发现：

*  **NUM\_SAMPLES越小阴影边缘噪点越多**

#### NUM\_SAMPLES=20, Stride=10 ####

![1fdffb86c53d48a09e5e6bb1b5c015a1.png][]

#### NUM\_SAMPLES=100, Stride=10 ####

![930386d74d0b4432b070f5e1bc7e4f5f.png][]

*  **Stride越大，边缘越模糊**

#### Stride=2, NUM\_SAMPLES=100 ####

![4ebd447200bf428bbc4cc254d904abc6.png][]

#### Stride=20, NUM\_SAMPLES=100 ####

![57d2438eaeac4090a05dd2ea85b54a3b.png][]

*  **对比两种采样方式的结果**

#### 均匀圆盘采样 Stride=20, NUM\_SAMPLES=100 ####

![c5f86771cda645ea9e416c25357d2b0f.png][]

#### 泊松圆盘采样 Stride=20, NUM\_SAMPLES=100 ####

![841e82d47f9541799fbeccc75fc2f9e1.png][]

可以看到泊松圆盘确实比均匀圆盘效果要好一点，且均匀圆盘采样消耗也会更多。

*  **EPS大小的影响**

在调整的过程中还发现，EPS的大小虽然对地板上的阴影没啥影响，但是对模型上阴影判断效果有很大的影响，其实原因其实跟shadowmap的一样，shadow acne。EPS初始值给的是0.001，浅看一下0.001和0.01的区别：

#### EPS=1e-2, NUM\_SAMPLES=80, Stride=10 ####

![1c376117165741a48e0dae233e44ec88.png][]

![3dec7acd70ae4fb68f08b146e3a6d6c7.png][]

#### EPS=1e-3, NUM\_SAMPLES=80, Stride=10 ####

![7f3cf2b8ce3149ab90d6c32073d89e8f.png][]![c8e9dc4672414c7c8a25add147c6bb7f.png][]

## PCSS ##

总算到了最后的PCSS环节了！

### 要求 ###

![5e8e3a2b253546688528b7e804633f09.png][]

![e2817a888e1a48b88f037d50cc66f0f0.png][]

### **半影范围 ![w\_\{Penumbra\}][w_Penumbra]** ###

![d22ff4f373be46c88a58eebb22cda94b.png][]

![w\_\{Penumbra\}][w_Penumbra 1] 为半影范围，它其实就可以表示我们的阴影程度，![w\_\{Penumbra\}][w_Penumbra 1] 越大，我们的阴影越“软”，这一点也可以由相似三角形表示出来

*  光源Light越大，![w\_\{Penumbra\}][w_Penumbra 1]越大，阴影越软；
 *  遮挡物Blocker越接近接受物Receiver，![w\_\{Penumbra\}][w_Penumbra 1]越小，阴影越硬；
 *  遮挡物Blocker越接近光源Light，![w\_\{Penumbra\}][w_Penumbra 1]越大，阴影越软；

由相似三角形就能得到

![w\_\{Penumbra\}=w\_\{Light\}\*(d\_\{Receiver\}-d\_\{Blocker\})/d\_\{Blocker\}][w_Penumbra_w_Light_d_Receiver_-d_Blocker_d_Blocker]

### 1 Blocker Search ###

这一步其实就是在计算上面公式里的![d\_\{Blocker\}][d_Blocker]——**Blocker depth**。

首先给定基数BlockerNum和总的Block\_depth。从当前的shading point连向方向光源light，方向上击中一点P，取点P周围的一个区域（利用到了泊松圆盘采样），判断区域里的点是否在阴影里，如果在则：BlockerNum++、Block\_depth+=cur\_depth；如果不在，则不纳入计算。

可以发现这个判断过程跟前面的shadowmap和PCF都是一样的，但是目的不同，这里是在求blocker的深度！

#### 实现代码（截图） ####

![7d45dfd280434dc3a8fd8eac9ae579c4.png][]

### 2 Penumbra estimation ###

利用上面的公式计算![w\_\{Penumbra\}][w_Penumbra 1]

### 3 PCF ###

这里其实就是又进行了一次PCF，不过与PCF不同的是！这里考虑了阴影接受面与光源距离（dReceiver）对阴影软硬的影响， 这也是我们第二步计算得到半影范围的用途，使得到的阴影达到**距离光源近的更硬，距离光源远的更软**的效果，也更接近现实。

#### 实现代码（截图） ####

![ef2a3ab3b64f46e995af8cfc17bea278.png][]

最后在main()里给PCSS去掉注释即可。

### PCSS结果 ###

![6eff0079ac804e578bb288c53b3cb827.png][]

--------------------

到这里作业1内容就做完了

[GAMES202_1-]: https://blog.csdn.net/qq_41835314/article/details/125619239?spm=1001.2014.3001.5502
[6b70a22b7f914a7c93203442174ea2c0.png]: https://img-blog.csdnimg.cn/6b70a22b7f914a7c93203442174ea2c0.png
[6fe3c9fecfd34176b690c90db6a003bb.png]: https://img-blog.csdnimg.cn/6fe3c9fecfd34176b690c90db6a003bb.png
[57d8013a843a4a12a6ad4d67a99565e0.png]: https://img-blog.csdnimg.cn/57d8013a843a4a12a6ad4d67a99565e0.png
[f79ff7b5d4ae4562b91a9a7f5cb88f85.png]: https://img-blog.csdnimg.cn/f79ff7b5d4ae4562b91a9a7f5cb88f85.png
[glMatrix _ WebGL _ Den_s Website _dens.website]: https://dens.website/tutorials/webgl/gl-matrix
[WebGL_06-_ - _ _juejin.cn]: https://juejin.cn/post/6886698316189401096
[WebGL_ - _ _jianshu.com]: https://www.jianshu.com/p/905f969d37e1
[cbd283b65852476591b216bac87c8ef1.png]: https://img-blog.csdnimg.cn/cbd283b65852476591b216bac87c8ef1.png
[d0cac12fdf6d4fa5bbc40b4c54b70d08.png]: https://img-blog.csdnimg.cn/d0cac12fdf6d4fa5bbc40b4c54b70d08.png
[ad9837ad862943f2a9b79e86620adb2d.png]: https://img-blog.csdnimg.cn/ad9837ad862943f2a9b79e86620adb2d.png
[WebGL_ - _ _jianshu.com 1]: https://www.jianshu.com/p/8cfea5ced530
[32c388b8ebf840e68091fa563a292f95.png]: https://img-blog.csdnimg.cn/32c388b8ebf840e68091fa563a292f95.png
[a15491e07a6046d7ab07748c54475ef1.png]: https://img-blog.csdnimg.cn/a15491e07a6046d7ab07748c54475ef1.png
[b35f4dece95c4f84b3f63111fdd7b5b3.png]: https://img-blog.csdnimg.cn/b35f4dece95c4f84b3f63111fdd7b5b3.png
[1be9bc822f3a41d790a003df76fbcdcb.png]: https://img-blog.csdnimg.cn/1be9bc822f3a41d790a003df76fbcdcb.png
[76cbdba15b76485f997f586f68871a01.png]: https://img-blog.csdnimg.cn/76cbdba15b76485f997f586f68871a01.png
[457d152e95da272b906da1dcffb7de57.jpeg]: https://img-blog.csdnimg.cn/img_convert/457d152e95da272b906da1dcffb7de57.jpeg
[Shadow Bias_ - _ _zhihu.com]: https://zhuanlan.zhihu.com/p/370951892
[28ba755b7e61408da88e114e3011696d.png]: https://img-blog.csdnimg.cn/28ba755b7e61408da88e114e3011696d.png
[26e103bc4b024c3e81ae0804188127c0.png]: https://img-blog.csdnimg.cn/26e103bc4b024c3e81ae0804188127c0.png
[fbe139e545304d39ad6040c83fd79133.png]: https://img-blog.csdnimg.cn/fbe139e545304d39ad6040c83fd79133.png
[5ece6539b8734c7eb08bece0bcfd5713.png]: https://img-blog.csdnimg.cn/5ece6539b8734c7eb08bece0bcfd5713.png
[eeb9e8d9688e4c549729dcec0b5c5466.png]: https://img-blog.csdnimg.cn/eeb9e8d9688e4c549729dcec0b5c5466.png
[4a2b27995c0f4dc78ebd81525e341571.png]: https://img-blog.csdnimg.cn/4a2b27995c0f4dc78ebd81525e341571.png
[Unity_6 Shadow Map _ - RubbyZhang - _ _cnblogs.com]: https://www.cnblogs.com/zsb517/p/6817373.html#:~:text=%E6%9B%B4%E5%A5%BD%E7%9A%84%E7%BA%A0%E6%AD%A3%E5%81%9A%E6%B3%95%E6%98%AF%E5%9F%BA%E4%BA%8E%E7%89%A9%E4%BD%93%E4%B8%8E%E5%85%89%E7%85%A7%E6%96%B9%E5%90%91%E7%9A%84%E5%A4%B9%E8%A7%92%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%20Slope-Scale%20Depth%20Bias,%EF%BC%8C%E8%BF%99%E7%A7%8D%E6%96%B9%E5%BC%8F%E7%9A%84%E6%8F%90%E5%87%BA%E4%B8%BB%E8%A6%81%E6%98%AF%E5%9F%BA%E4%BA%8E%E7%89%A9%E4%BD%93%E8%A1%A8%E9%9D%A2%E5%92%8C%E5%85%89%E7%85%A7%E7%9A%84%E5%A4%B9%E8%A7%92%E8%B6%8A%E5%A4%A7%EF%BC%8C%20Perspective%20Aliasing%20%E7%9A%84%E6%83%85%E5%86%B5%E8%B6%8A%E4%B8%A5%E9%87%8D%EF%BC%8C%E4%B9%9F%E5%B0%B1%E8%B6%8A%E5%AE%B9%E6%98%93%E5%87%BA%E7%8E%B0Shadow%20Acne%EF%BC%8C%E5%A6%82%E4%B8%8B%E5%9B%BE%E6%89%80%E4%BB%A5%E3%80%82
[af1d16c9c21b42c0ab8a17b0fb3b7ec6.png]: https://img-blog.csdnimg.cn/af1d16c9c21b42c0ab8a17b0fb3b7ec6.png
[CNN _ - _ _Convolution_ _ _Padding_ _ _Stride_-_ _oldtang.com]: https://oldtang.com/6775.html
[b10901b3d17f4fc69ccf9eb1955583af.png]: https://img-blog.csdnimg.cn/b10901b3d17f4fc69ccf9eb1955583af.png
[8c082c486a804ae79b76552463ddc3e9.png]: https://img-blog.csdnimg.cn/8c082c486a804ae79b76552463ddc3e9.png
[2c8882c7161d44339b515dae051a9cf3.png]: https://img-blog.csdnimg.cn/2c8882c7161d44339b515dae051a9cf3.png
[64ae5394898a45b78cf06328bd7e6f3d.png]: https://img-blog.csdnimg.cn/64ae5394898a45b78cf06328bd7e6f3d.png
[a193951e4d564608b0e3d9d6028db355.png]: https://img-blog.csdnimg.cn/a193951e4d564608b0e3d9d6028db355.png
[1fdffb86c53d48a09e5e6bb1b5c015a1.png]: https://img-blog.csdnimg.cn/1fdffb86c53d48a09e5e6bb1b5c015a1.png
[930386d74d0b4432b070f5e1bc7e4f5f.png]: https://img-blog.csdnimg.cn/930386d74d0b4432b070f5e1bc7e4f5f.png
[4ebd447200bf428bbc4cc254d904abc6.png]: https://img-blog.csdnimg.cn/4ebd447200bf428bbc4cc254d904abc6.png
[57d2438eaeac4090a05dd2ea85b54a3b.png]: https://img-blog.csdnimg.cn/57d2438eaeac4090a05dd2ea85b54a3b.png
[c5f86771cda645ea9e416c25357d2b0f.png]: https://img-blog.csdnimg.cn/c5f86771cda645ea9e416c25357d2b0f.png
[841e82d47f9541799fbeccc75fc2f9e1.png]: https://img-blog.csdnimg.cn/841e82d47f9541799fbeccc75fc2f9e1.png
[1c376117165741a48e0dae233e44ec88.png]: https://img-blog.csdnimg.cn/1c376117165741a48e0dae233e44ec88.png
[3dec7acd70ae4fb68f08b146e3a6d6c7.png]: https://img-blog.csdnimg.cn/3dec7acd70ae4fb68f08b146e3a6d6c7.png
[7f3cf2b8ce3149ab90d6c32073d89e8f.png]: https://img-blog.csdnimg.cn/7f3cf2b8ce3149ab90d6c32073d89e8f.png
[c8e9dc4672414c7c8a25add147c6bb7f.png]: https://img-blog.csdnimg.cn/c8e9dc4672414c7c8a25add147c6bb7f.png
[5e8e3a2b253546688528b7e804633f09.png]: https://img-blog.csdnimg.cn/5e8e3a2b253546688528b7e804633f09.png
[e2817a888e1a48b88f037d50cc66f0f0.png]: https://img-blog.csdnimg.cn/e2817a888e1a48b88f037d50cc66f0f0.png
[w_Penumbra]: https://latex.csdn.net/eq?%5Cdpi%7B150%7D%20w_%7BPenumbra%7D
[d22ff4f373be46c88a58eebb22cda94b.png]: https://img-blog.csdnimg.cn/d22ff4f373be46c88a58eebb22cda94b.png
[w_Penumbra 1]: https://latex.csdn.net/eq?w_%7BPenumbra%7D
[w_Penumbra_w_Light_d_Receiver_-d_Blocker_d_Blocker]: https://latex.csdn.net/eq?%5Cdpi%7B150%7D%20w_%7BPenumbra%7D%3Dw_%7BLight%7D*%28d_%7BReceiver%7D-d_%7BBlocker%7D%29/d_%7BBlocker%7D
[d_Blocker]: https://latex.csdn.net/eq?%5Cdpi%7B120%7D%20d_%7BBlocker%7D
[7d45dfd280434dc3a8fd8eac9ae579c4.png]: https://img-blog.csdnimg.cn/7d45dfd280434dc3a8fd8eac9ae579c4.png
[ef2a3ab3b64f46e995af8cfc17bea278.png]: https://img-blog.csdnimg.cn/ef2a3ab3b64f46e995af8cfc17bea278.png
[6eff0079ac804e578bb288c53b3cb827.png]: https://img-blog.csdnimg.cn/6eff0079ac804e578bb288c53b3cb827.png