调整图片源

switch-png-to-webp
InkSoul 2025-10-18 14:19:49 +08:00
parent 91b5e87946
commit 2588a3f055
21 changed files with 119 additions and 114 deletions

View File

@ -20,14 +20,14 @@ date: 2022-05-15T17:55:10+08:00
对同一像素点内采用多个采样点的方式来减少走样但将采样点分散到了一段时间内的多个帧上,在每帧采样时对采样点进行偏移,即抖动(jitter)来实现MSAA中放置多个次采样点的效果
采样序列也使用Halto sequence
![](https://lychee.inksoul.top/uploads/original/60/cb/a0483deb812efc3f47e71c5c566a.webp)
![](../../images/图形学/TAA(temporal%20antialiasing)/Halton_sequence.webp)
###### jitter的实现
采样点的位置会在初始化的时候确定,之后需要在与像素中心距离$[0,1]$的范围里发生偏移
实现这个效果只需要对投影矩阵中的值进行改动
![](https://lychee.inksoul.top/uploads/original/90/c7/0dd559801285a37c2a57fa3f9cfc.webp)
![](../../images/图形学/TAA(temporal%20antialiasing)/offset_projection_matrix.webp)
图片中标红的值便是在归一化后的坐标空间里偏移值的替换位置
@ -154,7 +154,7 @@ blendFactor = (lastStencil & 0x18) == (currStencil & 0x18) ? blendFactor : 1.f;
在经过处理后,鬼影现象消失,但当相机从向右旋转时,人物的左侧边缘像素表现效果较差
![](https://lychee.inksoul.top/uploads/original/10/29/473ea54a527865f5577ae9acb3e8.webp)
![](../../images/图形学/TAA(temporal%20antialiasing)/revealed_piels_appear_bad.webp)
为了减少这种情况的产生我们在blendFactor为1时返回一个经过高斯模糊的上一帧的颜色值
```s
@ -170,7 +170,7 @@ Gaussian blur使用的卷积核与$3\times3$相邻像素采样一致
<br>$ \begin{bmatrix} \frac{1}{16} & \frac{1}{8} &\frac{1}{16} \\\\ \frac{1}{8} &\frac{1}{4} &\frac{1}{8} \\\\ \frac{1}{16} &\frac{1}{8} &\frac{1}{16} \end{bmatrix} $
处理后依旧有1像素厚的鬼影存在
![](https://lychee.inksoul.top/uploads/original/63/c5/1c0c800c976feccc81deec6a7138.webp)
![](../../images/图形学/TAA(temporal%20antialiasing)/one_pixel_thick_ghosting.webp)
产生原因:
<br>Color history 是线性采样Stencil history 是点采样,两者在边缘并不相容

View File

@ -29,17 +29,17 @@ date: 2022-07-19T16:04:37+08:00
1. 通过每个像素投射一条光线的方式来生成图像
2. 通过向光源发送光线的方式来生成阴影
![](https://lychee.inksoul.top/uploads/original/ec/04/414b90c3022c716d2624975c7704.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/Ray_Casting_theory.webp)
#### 生成视角射线(Generating Eye Rays)
Pinhole Camera Model
![](https://lychee.inksoul.top/uploads/original/4d/43/8ebc04e289ec5c00933ebd6560cb.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/Ray_Casting_Generate_Eye_Ray.webp)
#### 着色像素(shading pixel)
![](https://lychee.inksoul.top/uploads/original/93/78/eab871ac503716171d83ecdc6b22.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/Ray_Casting_shading_pixel.webp)
### 递归式光线追踪(Recursive Ray Tracing)
@ -48,11 +48,11 @@ Recursiv Ray Tracing 又名 Whitted-Style Ray Tracing 由T.Whitted在1980年提
"An improved Illumination model for shaded display"
![](https://lychee.inksoul.top/uploads/original/51/44/e45e88c6e723c9b5494970236959.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/eg_Recursive_Ray_Tracing.webp)
总体计算流程
![](https://lychee.inksoul.top/uploads/original/99/78/b546da5352d25210e62d0e3ddf57.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/Recursive_Ray_Tracing_progress.webp)
-------------------------------------------
@ -143,14 +143,14 @@ $(p-p') * N = (o + td - p') * N = 0$
$t = \frac{(p'-o) * N }{d * N}$
![](https://lychee.inksoul.top/uploads/original/f7/e2/6aedc56a7ccf58a5185b7577856b.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/Ray_Intersection_With_Plane.webp)
##### Möller Trumbore Algorithm
一种更快地得出重心坐标的算法
![](https://lychee.inksoul.top/uploads/original/62/e8/365bd716459ec4e00d507750122f.webp)
![](../../images/图形学/Whitted-style光线追踪(Whitted-style%20Ray%20Tracing)/Möller_Trumbore_Algorithm.webp)
### 光线追踪的性能瓶颈

View File

@ -10,7 +10,7 @@ date: 2022-05-18T14:07:33+08:00
需要对不同深度的物体进行分类来确定面与面的绘制顺序,复杂度为$O(n\log n)$,其中n为三角形的个数也存在一个无法解决的问题不能处理无法确定绘制顺序的物体例如下图互相遮挡的情况
![](https://lychee.inksoul.top/uploads/original/09/c8/b0e109e8505925e719028d94a648.webp)
![](../../images/图形学/Z-Buffer%20深度缓存/unresolvable_depth_order.webp)
###### Z-Buffer
@ -23,7 +23,7 @@ date: 2022-05-18T14:07:33+08:00
Z-Buffer会在生成渲染图的同时根据各采样点像素的深度值生成深度图,颜色越深代表距离越近,越浅则越远
![](https://lychee.inksoul.top/uploads/original/66/60/4f026f087570efd23e472812ea00.webp)
![](../../images/图形学/Z-Buffer%20深度缓存/Depth_map.webp)
算法
@ -42,5 +42,5 @@ for (each triangle T)
整体算法流程会形成如下图效果复杂度为O(n),n为三角形面的数量
![](https://lychee.inksoul.top/uploads/original/8a/ac/c09ec5438aa56bc7792d3e09f44f.webp)
![](../../images/图形学/Z-Buffer%20深度缓存/Z-Buffer_test.webp)

View File

@ -17,7 +17,7 @@ date: 2022-07-23T15:05:33+08:00
从某个立体角($\omega$)来的Radiance会打在dA上在dA上转换成能量并以光的形式辐射到另一个方向上去(dLr),即表现为出去的Radiance
![](https://lychee.inksoul.top/uploads/original/4e/3b/f59b1b362f5d254cb5f2434d8811.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/reflaction_radiance_irradiance.png)
对于dA来说其接收到的能量只考虑某一方向下立体角的Radiance,在投影后就可以计算dA接收到的Irradiance,Irradiance又会转换成Radiance反射出去
@ -29,7 +29,7 @@ date: 2022-07-23T15:05:33+08:00
BRDF描述了dA表面是如何把一个方向收集到的能量反射到另一个方向去(定义收集到的能量如何如何往各个方向去分配(漫反射还是镜面反射))
![](https://lychee.inksoul.top/uploads/original/88/4a/78ef6cfac4e1ae0502e6a7e62520.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/BRDF_define.png)
镜面反射下,反射出去的方向上分布了所有能量
@ -41,7 +41,7 @@ BRDF本质上描述了光线和物体是如何作用的因而BRDF项也定义
反射方程定义的是任意着色点,在不同的光照下,我们考虑任意一个输入的光照的入射方向对出射方向的贡献,并累加所有入射方向的贡献
![](https://lychee.inksoul.top/uploads/original/0d/c5/9e32a1ab711ef024ecdfc77d8866.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/the_reflection_equation.png)
公式解释:
@ -68,21 +68,21 @@ $$L_o(p,w_o) = L_e(p,w_o) + \int_{\Omega+} {L_i(p,w_i)f_r(p,w_i,w_o)(n\cdot w_i)
* 对于一个点光源反射方程描述Li进来经过BRDF反射到观察方向上去的能量
![](https://lychee.inksoul.top/uploads/original/89/97/009085dc53d641ba6496e09ef89b.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/understanding_flection_equation1.png)
* 如果有多个光源,就累加计算每个点光源光线到这个点反射到观测方向上的能量值
![](https://lychee.inksoul.top/uploads/original/40/13/1f07231941c33641f2dfbb837060.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/understanding_reflection_equation2.png)
* 如果有一个面光源(一堆点光源的集合),则将面光源上任意一个点的贡献积分起来
![](https://lychee.inksoul.top/uploads/original/bb/21/86238989148e0b316ace84757767.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/understanding_reflection_equation3.png)
渲染方程:
* 在考虑其他物体反射过来的光时可以将反射面视为光源由于渲染方程假设所有方向都是向外的所以从x点指向反射面就要变成负的
![](https://lychee.inksoul.top/uploads/original/6f/af/f41aa3b768166899ebd0c69fa7a2.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/understanding_rendering_equation1.png)
该点向某一观察方向辐射出去的Radiance是依赖于其他点辐射出去的Radiance即为递归过程
@ -91,7 +91,7 @@ $$L_o(p,w_o) = L_e(p,w_o) + \int_{\Omega+} {L_i(p,w_i)f_r(p,w_i,w_o)(n\cdot w_i)
在某个方向看向一点时,我们不知道看到的能量(Lr)、从其他反射到这一点的Radiance但其他项都已知可定义物体的不同材质(diffuse、gloss、specular)
![](https://lychee.inksoul.top/uploads/original/40/27/a80f49fa215b3047fe613728779b.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/rendering_equation_simplify.png)
可利用数学上的一些简单表达式进行简化
@ -147,18 +147,19 @@ $$ L = E +KE+ K^2E +K^3E + \ldots $$
* 直接光照(光源能直接照射的地方有颜色,其余位置为黑的)
![](https://lychee.inksoul.top/uploads/original/45/01/e4d2b04314153860d574664a3a76.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/Direct_illumination_eg.png)
* 一次间接光照(光弹射两次)
![](https://lychee.inksoul.top/uploads/original/ba/ce/7f5c8457a1597a33a09ba61d86c9.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/one-bounce_global_illumination_eg.png)
* 两次间接光照(光弹射一次,两次,三次累积后的全局光照效果)
![](https://lychee.inksoul.top/uploads/original/59/12/8d59b532e4cdad22cfba59f68927.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/two-bounce_global_illumination_eg.png)
* 四次间接光照(玻璃灯内部变亮,在弹射三次时,仅足够进入物体,不足以离开物体)(双层玻璃需要两次弹射进入,两次弹射离开)
![](https://lychee.inksoul.top/uploads/original/03/b7/084c3e06872590d6814406a6341f.webp)
![](../../images/图形学/双向反射分布函数(BRDF)/four-bounce_global_illumination_eg.png)
8次弹射和16次弹射只会提高暗处亮度难以感知到

View File

@ -12,11 +12,12 @@ $$Image = Synthesis + Capture$$
当然还有很多种成像方法最简单的捕捉成像方法是使用相机。当然现在还在研究很多别的更好成像技术比如光线的传播其实是有时间的有一些研究会研究光在极短时间内的传播就可以看到光线真正在空间中进行传播的过程这个过程叫Transient image瞬息图像
![](https://lychee.inksoul.top/uploads/original/55/90/c58c54b702b93cda4599859ad519.webp)
![](../../images/图形学/相机与透镜/image_synthesis_capture.webp)
## 相机
![](https://lychee.inksoul.top/uploads/original/57/54/75bbbeb952152363d5786e15808a.webp)
![](../../images/图形学/相机与透镜/inside_the_camera.webp)
最早的相机起源子小孔成像
@ -27,7 +28,7 @@ $$Image = Synthesis + Capture$$
生活中常见的则为带透镜的相机
![](https://lychee.inksoul.top/uploads/original/ea/a6/8558213ab9234e6b5dff73834794.webp)
![](../../images/图形学/相机与透镜/lenses_from_image_on_sensor.webp)
### 相机部件
@ -35,17 +36,17 @@ $$Image = Synthesis + Capture$$
下图为去掉了镜头后的相机快门部分,控制光在多少分之一秒内进入相机
![](https://lychee.inksoul.top/uploads/original/15/2c/14bea629effb105dc4a88d60710d.webp)
![](../../images/图形学/相机与透镜/Shuntter_exposes_sensor_for_precise_duration.webp)
* 传感器
记录传感器上任何一个点(像素)的Irradiance
![](https://lychee.inksoul.top/uploads/original/31/99/987d38bcd12d7c8d942add3a7080.webp)
![](../../images/图形学/相机与透镜/sensor_accumulates_irradiance_during_exposure.webp)
如果一个相机没有透镜或针孔是无法拍出照片的,如果将一个感光元件直接放在一个人的面前,任何一个点上都可能收集到来自不同方向的光,而这个点作为传感器无法区分来自各个方向的光线,此时会将各个方向的能量都综合在这个点上,会导致所有东西都是模糊的
![](https://lychee.inksoul.top/uploads/original/c3/95/0bcf32bfd42a4e35dfd26b634c1d.webp)
![](../../images/图形学/相机与透镜/sensors_without_lenses.webp)
前沿中存在传感器可通过方向性的光分开记录的研究但目前依旧认为只能记录Irradiance而非Radianc
@ -53,15 +54,15 @@ $$Image = Synthesis + Capture$$
小孔成像现象在公元前就已经被发现和提出
![](https://lychee.inksoul.top/uploads/original/90/0a/f98a6fe661cf66f58ff2da3179eb.webp)
![](../../images/图形学/相机与透镜/pinhole_camera.webp)
在今天,针孔摄像机拍摄依旧可行,大多数使用的相机都是带有透镜的,
真正做一个如下图的针孔(硬纸板中间有一个6mm直径能透光的地方),也能用这个小针孔拍摄某个场景,记录在胶片上。但拍出来的东西是没有深度可言的,任何地方都不会是虚的,都一定是清楚的
![](https://lychee.inksoul.top/uploads/original/6c/c8/0f90287f18b34f9b2b64688d6331.webp)
![](../../images/图形学/相机与透镜/largest_pinhole_photograph.webp)
![](https://lychee.inksoul.top/uploads/original/b2/b3/be500ec546d9e7794a862045ed5f.webp)
![](../../images/图形学/相机与透镜/largest_pinhole_photograph1.webp)
虚化正是来源于透镜。在计算光线追踪是,我们使用的就是针孔摄像机的模型,所以也得不出不同的地方会有不同的模糊
@ -69,7 +70,7 @@ $$Image = Synthesis + Capture$$
视场往往意味着能够看到多大的范围对于广角镜头通常意味着能够拍到更广的角度可见的FOV更大对于手机上的相机视场就相对比较小
![](https://lychee.inksoul.top/uploads/original/4a/e8/df1ef898e84063ce73977a4e856f.webp)
![](../../images/图形学/相机与透镜/effect_of_focal_length_on_fov.webp)
#### 从小孔成像的针孔摄像机理解视场
@ -89,7 +90,7 @@ $$FOV = 2\arctan(\frac{h}{2f})$$
不同视场决定不同拍照结果。视场和传感器大小及焦距相关,所以人们通常定义视场(FOV)以35mm格式的胶片为基准固定传感器的大小再通过定义焦距的方式来定义FOV
![](https://lychee.inksoul.top/uploads/original/79/f6/a6ac605eff63664fb29a53206558.webp)
![](../../images/图形学/相机与透镜/focal_length_vs_filed_of_view1.webp)
@ -109,13 +110,13 @@ $$FOV = 2\arctan(\frac{h}{2f})$$
当视场越窄,看到的东西越远
![](https://lychee.inksoul.top/uploads/original/29/b8/e9bbf82065feb57e89ddd7bc8ff7.webp)
![](../../images/图形学/相机与透镜/focle_length_vs_field_of_view2.webp)
#### 传感器(Sensor)大小和视场(FOV)
小一点的传感器会对应小一点的视场
![](https://lychee.inksoul.top/uploads/original/81/81/cbea578b6025cf50e2f1d3f0cdb7.webp)
![](../../images/图形学/相机与透镜/effect_of_sensor_size_on_fov.webp)
##### 传感器与胶片
@ -126,7 +127,7 @@ $$FOV = 2\arctan(\frac{h}{2f})$$
大相机有大的传感器也就有大的分辨率,所以不同相机价格各不相同,相机机身越大,镜头越大越长越好,价格也就越高
![](https://lychee.inksoul.top/uploads/original/14/dd/b254638e1e79e58dfe4cef370af1.webp)
![](../../images/图形学/相机与透镜/sensor_size.webp)
#### 曝光
@ -163,7 +164,7 @@ Irradiance往往由光圈大小(影响镜头接收到多少光)和焦距决定
* 第二行参数使用分数表示快门速度(1/1000即为快门开放1/1000秒)
* 第三行参数是ISO不同ISO可简单理解为相乘
![](https://lychee.inksoul.top/uploads/original/91/18/dba61de761d839ca7c042ded35d8.webp)
![](../../images/图形学/相机与透镜/exposure_aperture_shutter_gain.webp)
#### ISO简单地放大信号会放大噪声
@ -175,7 +176,7 @@ Irradiance往往由光圈大小(影响镜头接收到多少光)和焦距决定
将光认为是光子如果快门时间不足那么进入感光元件的光子数就少光子数少就会造成noisy
![](https://lychee.inksoul.top/uploads/original/28/8a/bc7b10a9a5d9d5430c9597b908b9.webp)
![](../../images/图形学/相机与透镜/ISO_gain_vs_noise_in_canon.webp)
#### 光圈与F数
@ -187,14 +188,14 @@ Irradiance往往由光圈大小(影响镜头接收到多少光)和焦距决定
* 如图,调光圈可以直接调出曝光度
![](https://lychee.inksoul.top/uploads/original/da/b8/2d21bff5d252db768502ded367b2.webp)
![](../../images/图形学/相机与透镜/F-Number_exposure_levels.webp)
#### 快门曝光时间对结果的影响
快门
![](https://lychee.inksoul.top/uploads/original/51/79/f5e780d83a3fcaf2cb708669bde7.webp)
![](../../images/图形学/相机与透镜/physical_shutter.webp)
* 调节曝光度
@ -204,11 +205,11 @@ Irradiance往往由光圈大小(影响镜头接收到多少光)和焦距决定
更长的快门时间会造成更严重的运动模糊,对于等长的快门时间,物体运动越快,越容易出现运动模糊
![](https://lychee.inksoul.top/uploads/original/5d/6e/68aebad838105db3d40e539beaae.webp)
![](../../images/图形学/相机与透镜/side_effect_of_shutter_speed1.webp)
但是更短的快门时间曝光度也降低了所以为了达到相同的亮度就要调节ISO或光圈的大小
![](https://lychee.inksoul.top/uploads/original/cf/31/272f8789dd21f2f0ee2e05c96a85.webp)
![](../../images/图形学/相机与透镜/side_effect_of_shutter_speed2.webp)
运动模糊的好处
@ -219,13 +220,13 @@ rolling shutter问题
电子控制的快门可以认为是任何时刻任何位置同步打开但机械快门则需要一个过程如果物体运动比机械快门的速度快就会出现Rolling Shutter问题因为图像上不同位置可能记录的是不同时间进来的光
![](https://lychee.inksoul.top/uploads/original/fe/db/0ba8b52efe26a86174b6dbb27acd.webp)
![](../../images/图形学/相机与透镜/side_effect_of_shutter_speed.webp)
#### 均衡快门和光圈
快门的时间打开得短就会暗那就可以提高光圈的大小用更小的F数。以下的表格上下对应的参数基本可以达到相同的曝光度。但达到的效果并不会一模一样因为大光圈会引起前景深的问题快门时间又会引起运动模糊
![](https://lychee.inksoul.top/uploads/original/ab/67/563b785e68c60078eb84f366cc6c.webp)
![](../../images/图形学/相机与透镜/f-stop_vs_shutter_speed.webp)
-----
@ -235,17 +236,17 @@ rolling shutter问题
每秒拍摄更多帧数然后按正常帧数播放每张照片的快门时间非常少又需要保证每张都清晰且有正常的曝光度可以用更大的光圈和更高ISO
![](https://lychee.inksoul.top/uploads/original/92/b1/108186184a14ed007598f049ee4d.webp)
![](../../images/图形学/相机与透镜/hight-speed_photography1.webp)
#### 超低速(长曝光)摄影
用非常小的光圈慢慢拍,也就是所谓的延迟摄影,摄影界中称为拉丝,也就是长曝光造成的运动模糊
![](https://lychee.inksoul.top/uploads/original/0e/02/9bb3fb3de9958dff8562086c1aef.webp)
![](../../images/图形学/相机与透镜/long-exposure_photography1.webp)
![](https://lychee.inksoul.top/uploads/original/19/ed/b2bcb5b550500f6ccb5390a4802c.webp)
![](../../images/图形学/相机与透镜/long-exposure_photography2.webp)
![](https://lychee.inksoul.top/uploads/original/56/7b/63cd7c2efb0b45396a1961556a91.webp)
![](../../images/图形学/相机与透镜/long-exposure_photography3.webp)
## 镜头
@ -255,13 +256,13 @@ rolling shutter问题
无论相机还是手机,都不使用单个透镜来成像,往往使用一个透镜组
![](https://lychee.inksoul.top/uploads/original/3c/62/3992136f953815757bd530fad871.webp)
![](../../images/图形学/相机与透镜/real_lens_dfsigns_are_comples.webp)
* 真正的镜头元素是不理想的
如下图,一面是凸的,一面是平的,这样就不可能将光聚在一起
![](https://lychee.inksoul.top/uploads/original/8d/22/3eef19df39ed5e66d87fc3d27c19.webp)
![](../../images/图形学/相机与透镜/real_lens_elements_are_not_ideal.webp)
* 我们研究的是理想的薄透镜(忽略厚度)
@ -271,7 +272,7 @@ rolling shutter问题
2. 光路有可逆性,如果光线穿过焦点,被透镜折射后会变成平行的一束光
3. 假设薄透镜可以任意改变焦距(透镜焦距固定,相机能改是因为透镜组)
![](https://lychee.inksoul.top/uploads/original/99/08/4ba57d0448b0aff2204fb0031b65.webp)
![](../../images/图形学/相机与透镜/ideal_thin_lens_focal_point.webp)
* 透镜满足的物理规律
@ -295,18 +296,19 @@ $$\frac{1}{f} = \frac{1}{z_i}+\frac{1}{z_o}$$
平行光必定过焦点,过焦点的光会变成平行光
![](https://lychee.inksoul.top/uploads/original/b0/4f/a5918eda2ce10679c74542efec81.webp)
![](../../images/图形学/相机与透镜/gauss_ray_diagrams.webp)
忽略中间过透镜中心的光
![](https://lychee.inksoul.top/uploads/original/9d/8a/47b7cebee296b752684e61913a5c.webp)
![](../../images/图形学/相机与透镜/gauss_ray_tracing_construction.webp)
可见如下图的几何关系,左侧在光到达透镜前可形成两个相似三角形,右侧也相同
![](https://lychee.inksoul.top/uploads/original/2d/67/c7abebdbdc893b271dc42e1c2a2c.webp)
![](../../images/图形学/相机与透镜/gauss_ray_tracing_construction1.webp)
将两组关系做运算
![](https://lychee.inksoul.top/uploads/original/85/e5/652969f7c6de62a8b1005a0a6b82.webp)
![](../../images/图形学/相机与透镜/gauss_ray_tracing_construction2.webp)
### 散焦模糊(Defocus Blur)(景深)
@ -318,7 +320,7 @@ $$\frac{1}{f} = \frac{1}{z_i}+\frac{1}{z_o}$$
* 如果物体不在Focal Plane上会出现模糊
![](https://lychee.inksoul.top/uploads/original/16/3d/c8ebb87313d9ae05688c2cd3ba43.webp)
![](../../images/图形学/相机与透镜/computing_circle_of_confusion_size.webp)
* 模糊原因
@ -338,7 +340,7 @@ $$\frac{C}{A} = \frac{d'}{z_i} = \frac{|z_s - z_i|}{z_i}$$
下图光圈f数为1.4,为大光圈,可以看到更模糊的效果
![](https://lychee.inksoul.top/uploads/original/71/ee/c9bdf9b8074b5c1b9dc00344ad69.webp)
![](../../images/图形学/相机与透镜/coc_vs_aperture_size.webp)
#### 光圈大小
@ -360,11 +362,11 @@ $$N = f/A$$
* 例子
![](https://lychee.inksoul.top/uploads/original/12/e2/3a0c47b2e82b82eb1337cd0ba5d5.webp)
![](../../images/图形学/相机与透镜/example_f-stop_caculations.webp)
* CoC的大小和F数成反比
![](https://lychee.inksoul.top/uploads/original/c1/e3/db7e13b36ea5c0816d5a8e1fac6b.webp)
![](../../images/图形学/相机与透镜/size_of_coc_is_inversely_proportional_to_f-stop.webp)
$$C = A\frac{|z_s - z_i|}{z_i} = \frac{f}{N}\frac{|z_s - z_i|}{z_i}$$
@ -376,7 +378,7 @@ $$C = A\frac{|z_s - z_i|}{z_i} = \frac{f}{N}\frac{|z_s - z_i|}{z_i}$$
* 实例
![](https://lychee.inksoul.top/uploads/original/85/a7/55a383710bea90e4fb602e7ea5af.webp)
![](../../images/图形学/相机与透镜/eg_of_rendering_with_lens_focus.webp)
#### 具体实现
@ -388,7 +390,7 @@ $$C = A\frac{|z_s - z_i|}{z_i} = \frac{f}{N}\frac{|z_s - z_i|}{z_i}$$
根据物距$Z_o$和焦距,可计算像距$Z_i$
![](https://lychee.inksoul.top/uploads/original/87/f9/3e1263bae817d22d6d7e89b59165.webp)
![](../../images/图形学/相机与透镜/ray_tracing_for_defocus_blur.webp)
* 使用光线追踪算法渲染
@ -399,7 +401,7 @@ $$C = A\frac{|z_s - z_i|}{z_i} = \frac{f}{N}\frac{|z_s - z_i|}{z_i}$$
在透镜上另选X"两点连线便可知道其方向且感光元件上的X'处会记录这条线上的Radiance
![](https://lychee.inksoul.top/uploads/original/37/df/54a2efda662ebb450cea4f8d72ee.webp)
![](../../images/图形学/相机与透镜/ray_tracing_for_defocus_blur1.webp)
* 景深(Depth of Field)
@ -408,11 +410,11 @@ $$C = A\frac{|z_s - z_i|}{z_i} = \frac{f}{N}\frac{|z_s - z_i|}{z_i}$$
过大的光圈对应大的CoC一个点会变成更大的圆所以就会更模糊但总归在一些地方是不模糊的即不同光圈大小会影响模糊范围
![](https://lychee.inksoul.top/uploads/original/38/06/9a75b831ed3c7a43ef76ab01f09f.webp)
![](../../images/图形学/相机与透镜/depth_of_field.webp)
如下图中一个光经透镜会打到一个成像平面该成像平面附近区域都认为CoC足够小
![](https://lychee.inksoul.top/uploads/original/15/7a/1e6729c8c3de97d56342f200827f.webp)
![](../../images/图形学/相机与透镜/circle_of_confusion_for_depth_of_field.webp)
景深实际场景中有一段深度该深度经透镜后会在成像平面附近形成一段区域区域内认为CoC是足够小的
@ -424,11 +426,11 @@ $$C = A\frac{|z_s - z_i|}{z_i} = \frac{f}{N}\frac{|z_s - z_i|}{z_i}$$
如下图,考虑景深的最远和最近处,分别让它们穿过透镜,到某一地方可以得到右边的范围
![](https://lychee.inksoul.top/uploads/original/39/93/cb49a3af1bca5f59dcc9b9e1bd73.webp)
![](../../images/图形学/相机与透镜/depth_of_filed_fyi.webp)
DOF参数效果
![](https://lychee.inksoul.top/uploads/original/66/a6/6faf890929a130d926d5aa623978.webp)
![](../../images/图形学/相机与透镜/DOF_demonstration_fyi.webp)
* 修改焦距

View File

@ -10,7 +10,7 @@ date: 2022-07-09T21:49:09+08:00
###### 重心坐标定义
![](https://lychee.inksoul.top/uploads/original/d6/cf/1080d9ea973bfb97a4ffeafbdfd6.webp)
![](../../images/图形学/纹理/barycentric_coordinates.webp)
对于一个三角形的三点坐标A,B,C,平面内的一点x,y可以写成三点的线性组合式
@ -24,7 +24,7 @@ $$(x,y)=\alpha A + \beta B + \gamma C = \alpha + \beta + \gamma = 1$$
###### 三角形的几何角度下求解
![](https://lychee.inksoul.top/uploads/original/a5/e4/376a881f375e63165edf61e87ab5.webp)
![](../../images/图形学/纹理/geometric_barycentric.webp)
将点与三个顶点相连,三个三角形的面积分别为$A_A,A_B,A_C$对应的重心坐标的计算式,
@ -57,7 +57,8 @@ $$\alpha = 1 - \beta - \gamma$$
对于重心坐标系存在另一种等价视角:
以A点为原点AB,AC分别为新的坐标系的单位向量构建坐标系如图
![](https://lychee.inksoul.top/uploads/original/d3/b4/07cd33f461d0694f635f28691a01.webp)
![](../../images/图形学/纹理/barycentric_in_coordinates.webp)
给定的任意点P的坐标可表示为$P(\beta , \gamma)$ ,可推出P点坐标满足以下关系
@ -91,7 +92,8 @@ $$
###### 重心坐标的用处
对顶点处的值进行线性插值,如下图
![](https://lychee.inksoul.top/uploads/original/1e/5b/ca06385584938172a2e29202cf2e.webp)
![](../../images/图形学/纹理/barycentric_coor_interpo.webp)
$$V = \alpha V_A + \beta V_B + \gamma V_C$$
@ -176,7 +178,7 @@ sample's color : 通常为漫反射率值 kd
此时我们会选取红点位置周围的四个采样点,同时计算其与周围四个采样点的偏移值(s,t)如下图
![](https://lychee.inksoul.top/uploads/original/73/83/9f6d64581eb88b242af7c8ee0447.webp)
![](../../images/图形学/纹理/bilinear_interpolation.webp)
可得相应的计算过程:
@ -197,7 +199,7 @@ $$f(x,y) = lerp(t,u_0,u_1)$$
此时在点采样下会产生摩尔纹和锯齿,如下图
![](https://lychee.inksoul.top/uploads/original/6c/bc/a4152339ed8948e98ef696912e47.webp)
![](../../images/图形学/纹理/moire_and_jaggies.webp)
通常处理是进行超采样,同时也会有几个问题
@ -209,24 +211,24 @@ $$f(x,y) = lerp(t,u_0,u_1)$$
所以我们更倾向于使用范围序列而非点序列
![](https://lychee.inksoul.top/uploads/original/b7/9c/15a53dedfd66ef932aa14cd6b0cd.webp)
![](../../images/图形学/纹理/point_query_and_range_query.webp)
###### Mipmap(支持 Range Query)
mipmap 可由下图表示
![](https://lychee.inksoul.top/uploads/original/42/c2/8eaf8c973e92d343ae36dddce84c.webp)
![](../../images/图形学/纹理/mipmap_information.webp)
对应产生的mip层次结构也由下图表示
![](https://lychee.inksoul.top/uploads/original/c5/b2/9014aacac7c41a8c1b22f7b5647c.webp)
![](../../images/图形学/纹理/mip_hierarchy.webp)
在计算对应层次的mipmap时我们需要相邻采样点的纹理坐标来估计纹理内存
![](https://lychee.inksoul.top/uploads/original/55/df/007523beff976585caeb4566e810.webp)
![](../../images/图形学/纹理/compute_mip_level_D.webp)
如上图所示,我们能够得到两个值
@ -237,7 +239,7 @@ $$D = \log_2 L$$
在使用时往往D值会四舍五入为整数这会导致纹理的不连续因此我们还需要进行下图所示的Trilinear Interpolation 从而得到一个连续的D值
![](https://lychee.inksoul.top/uploads/original/3c/f5/7b84d7d96078b4d30b8112685b72.webp)
![](../../images/图形学/纹理/Trilinear_interpolation.webp)
在插值处理后的纹理依旧会存在过度模糊(overblur)的现象,但相比于超采样的高性能开销依旧有很大的提升
@ -248,7 +250,7 @@ Anisotropic Filtering
2. 对角线纹理处理依旧存在问题
![](../../images/Anisotropic_filtering.png)
![](../../images/图形学/纹理/Anisotropic_filtering.webp)
EWA filtering
1. 权重均衡
@ -258,7 +260,7 @@ EWA filtering
Irregular Pixel Footprint in Texture的产生情况如下图
![](https://lychee.inksoul.top/uploads/original/3c/08/53edc4fa37cc785e86c2344b7983.webp)
![](../../images/图形学/纹理/irregular_pixel_footprint.webp)
#### 纹理的应用
@ -283,23 +285,23 @@ Irregular Pixel Footprint in Texture的产生情况如下图
环境光贴图通常指在贴图上绘制模型周围环境光效,实现某些模型反射环境光的效果
![](https://lychee.inksoul.top/uploads/original/ce/71/4a6ee29d5f413f0ed65984005aba.webp)
![](../../images/图形学/纹理/Environment_Map.webp)
也用于一些镜面反射的物体实现真实光照
![](https://lychee.inksoul.top/uploads/original/f7/1d/04f1302ecf9069464d3c9f042583.webp)
![](../../images/图形学/纹理/Environmental_Lighting.webp)
![](https://lychee.inksoul.top/uploads/original/af/3e/611949aea492fca51f6f31f802c5.webp)
![](../../images/图形学/纹理/Spherical_Environment_Map.webp)
在一些球型表面贴图会存在形变问题,如下图的顶部和底部
![](https://lychee.inksoul.top/uploads/original/a6/3e/497f064dff6c75de5b6b051174f2.webp)
![](../../images/图形学/纹理/Spherical_Map_Problem.webp)
立方体贴图则由球体上一个向量沿自身方向映射到立方体上的点获得
![](https://lychee.inksoul.top/uploads/original/41/c3/8b5e5c1ea295591b362addd2300f.webp)
![](../../images/图形学/纹理/Cube_Map.webp)
一个立方体使用6个方形纹理贴图来生成纹理
@ -319,7 +321,7 @@ Irregular Pixel Footprint in Texture的产生情况如下图
3. 扰动后的法线值为$$n(p) = (-dp,1).normalized()$$
![](https://lychee.inksoul.top/uploads/original/45/5a/1fc7c951e2280225393f7cdb4b38.webp)
![](../../images/图形学/纹理/perturb_the_normal.webp)
扰动法线的计算(3D)
@ -381,20 +383,20 @@ Displacement mapping
2. 与Bump mapping 使用相同纹理贴图
3. 会改变模型顶点坐标
![](https://lychee.inksoul.top/uploads/original/14/0c/c79521f297ef03aa8466285c8b1d.webp)
![](../../images/图形学/纹理/Displacement_mapping.webp)
3D程序化噪声和实体建模
![](https://lychee.inksoul.top/uploads/original/f1/0f/3adf99cd54a4d167c3baf92da5fc.webp)
![](../../images/图形学/纹理/Procedural_noise_and_Solid.webp)
将部分着色效果提前绘制到贴图上
![](https://lychee.inksoul.top/uploads/original/0d/d0/5cd8cf4e2d2cc0e6abe53160b0f4.webp)
![](../../images/图形学/纹理/Provide_precomputed_shading.webp)
3D图像纹理和体绘制
![](https://lychee.inksoul.top/uploads/original/e0/1c/9e8e797c1db4e778b33d5eec7c11.webp)
![](../../images/图形学/纹理/3D_texture_and_volume.webp)

View File

@ -11,7 +11,7 @@ date: 2022-05-12T22:08:22+08:00
屏幕是由一个个像素组成,在光栅化时,只有中心被三角形覆盖的像素会被着色,而且被覆盖的像素点的分布往往是离散的,自然而然地形成如下图斜线形成的阶梯状的锯齿
![](https://lychee.inksoul.top/uploads/original/2f/fd/f4ac3a158b12185953f6c2d7a7ff.webp)
![](../../images/图形学/走样与反走样/aliasing_pixel.webp)
---------------
@ -20,15 +20,15 @@ date: 2022-05-12T22:08:22+08:00
###### 采样(sample)
采样就是将连续信号转换成离散信号(采样信号),经过滤波后会被恢复成重建信号
![](https://lychee.inksoul.top/uploads/original/24/04/cec66748134129a978c2afe5601d.webp)
![](../../images/图形学/走样与反走样/sample_and_reconstruct.webp)
如果采样的频率过低,则会发生走样或混叠(aliasing),如图中,蓝色的为原信号,红色为采样点,绿色虚线为重建后的信号
过低的采样频率会使重建的信号成为低频信号
![](https://lychee.inksoul.top/uploads/original/43/71/9022119af57198198ccb8afb85d9.webp)
![](../../images/图形学/走样与反走样/figure.5.17.webp)
若采样频率恰好是原信号的两倍,重建信号则表现为一条直线
![](https://lychee.inksoul.top/uploads/original/85/5c/5a0f59b3fa9839ca607f618fec7e.webp)
![](../../images/图形学/走样与反走样/figure5.17.1.webp)
采样理论(sampling theorem):采样频率必须为原信号频率的两倍以上,才能完整地重建原始信号,存在一个最大频率,因而采样频率有频带限制
<br>奎斯特率(Nyquist rate): 频率为原信号频率两倍的采样频率<br>
@ -37,28 +37,28 @@ date: 2022-05-12T22:08:22+08:00
重建时需要采样信号进行滤波,通常使用下图中的三种滤波器(box filter,tent filter,sinc filter)且滤波器的面积必须为1以确保恢复的信号不会被放大或缩小
![](https://lychee.inksoul.top/uploads/original/19/7c/90c0d14931f87653a83e88829735.webp)
![](../../images/图形学/走样与反走样/three_filter.webp)
box filter 对信号进行滤波并重建信号的过程如下图
<br>直接将采样点位置替换为box filter波形的方式会因 box filter 本身的不连续使重建信号产生不平滑的现象<br>
但仍然因其易于实现的特性被用于重建
![](https://lychee.inksoul.top/uploads/original/c5/d8/3668ae8f6f7814d4559fcb5011e3.webp)
![](../../images/图形学/走样与反走样/box_filter_construct.webp)
-----------
tent filter 在滤波时会对每个相邻的采样点之间使用线性插值一次重建的信号更加平滑但采样点位置会发生斜率突变所以tent filter 并不完美
![](https://lychee.inksoul.top/uploads/original/c8/96/51c13da3ef8cf495ee912b2dca95.webp)
![](../../images/图形学/走样与反走样/tent_filter_constructed.webp)
-------------
出于让重建信号保持平滑的目的,我们必须使用一个理想低通滤波器
基于傅立叶变换理论的解释理想低通滤波器在频域中的表现类似于box filter,在频域中相乘时会过滤掉所有超过这个滤波器宽度的频率在频域的box fliter 转换到空域的时候会是一个sinc filter ,在频域相乘也等价于在空域中进行卷积,卷积即为滤波
![](https://lychee.inksoul.top/uploads/original/27/99/3e7a7f9819f05d4cf3e79b8e8215.webp)
![](../../images/图形学/走样与反走样/convolution_theorem.webp)
例如sinc filter就能够实现过滤高频信号保留低频信号的理想低通滤波器效果
![](https://lychee.inksoul.top/uploads/original/78/f8/6db559f3ffe8924bcad55392e80a.webp)
![](../../images/图形学/走样与反走样/sinc_filter_process.webp)
对于sinc filter 在假设采样频率为$f_s$,采样点间隔为$\frac{1}{f_S}$的情况下,它会过滤掉超过$\frac{f_S}{2}$的所有高频信息因此sinc filter 在采样频率为1.0会是一个理想低通滤波器,此时采样信号的最大频率应当小于$\frac{1}{2}$,但是由于sinc filter 有无限的滤波范围,所以它会在某些范围内出现负值
@ -73,17 +73,17 @@ tent filter 在滤波时会对每个相邻的采样点之间使用线性插值
设采样信号灯的采样间隔为整数列间隔为1则我们可以通过重采样来将采样点间隔变为a当$a>1$时会缩小信号(downsampling)$a<1$(upsampling)
如图,对重建信号使用双倍采样率进行重采样便实现了信号放大
![](https://lychee.inksoul.top/uploads/original/00/f8/dbfa6ec4730acc3790404fa8c360.webp)
![](../../images/图形学/走样与反走样/resample_upsample.webp)
这种方法不适用于信号缩小,易使信号过于高频
对于信号缩小的情况我们需要先对1间隔采样信号使用$sinc(\frac{x}{2})$ filter 滤波产生一个连续信号再重采样2间隔由于频谱范围更大的低通滤波器才能过滤更多的高频信号类似于对图像进行第一次模糊再重采样产生一个低分辨率图像
![](https://lychee.inksoul.top/uploads/original/7a/07/1242315ae8342cf4a1107646d63b.webp)
![](../../images/图形学/走样与反走样/resample_downsampling.webp)
由下图可见,滤波可以对三角形的边缘产生模糊,进而产生一定的反走样效果
![](https://lychee.inksoul.top/uploads/original/b7/d4/c1ecd4f7edd993ffe0507664d3ac.webp)
![](https://lychee.inksoul.top/uploads/original/63/42/0e1955ad45d1d3da7a0fe11f08ab.webp)
![](../../images/图形学/走样与反走样/sample_resulst.webp)
![](../../images/图形学/走样与反走样/pre-filter_sample.webp)
### 反走样
@ -93,7 +93,7 @@ tent filter 在滤波时会对每个相邻的采样点之间使用线性插值
对于我们之前提到的采样我们只对像素正方形的中心进行是否在三角形内部的判断这意味着对于边缘的像素正方形无论覆盖面积有多大只要不包含中心点都会被判定在三角形外从而不被渲染当采样率提升如下图的4spp(sample per pixel)以某种方式混合计算获得更好的像素效果
![](https://lychee.inksoul.top/uploads/original/2d/5d/a1873c3c82fe4fa9784a1c8d6bd2.webp)
![](../../images/图形学/走样与反走样/Screen-Based.webp)
Screen-Based Antialiasing 通常在屏幕空间区域使用采样图案来采样从而对颜色进行如下的加权计算
@ -129,7 +129,7 @@ SSAA又被称为全屏幕抗锯齿(full-screen antialiasing,FSAA),也叫超采
实现方式简单只需要一个高分辨率图像和box filter就可以实现
下图是采样点在像素点内位置类型
![](https://lychee.inksoul.top/uploads/original/b4/3a/66b01c0f5b91662230778d7309cc.webp)
![](../../images/图形学/走样与反走样/sample_point_position.webp)
案例NAVIDIA's DSR(dynamic super resolution)
@ -142,11 +142,11 @@ SSAA又被称为全屏幕抗锯齿(full-screen antialiasing,FSAA),也叫超采
MSAA同样在一个像素中设置多个采样点在光栅化时计算三角形在像素内对采样点的覆盖率之后只计算每个片元的像素着色器采样中心点的位置计算颜色信息再乘上覆盖率最后输出这个像素的颜色
颜色计算与深度判断
![](https://lychee.inksoul.top/uploads/original/ec/7b/cd1212607225b575b5abfb2ddddb.webp)
![](../../images/图形学/走样与反走样/MSAA.webp)
总体流程如下
![](https://lychee.inksoul.top/uploads/original/7b/df/e0196cbf62b91996caa8fc78f985.webp)
![](https://lychee.inksoul.top/uploads/original/87/cd/4b1f31ea1c6d1ee7fe4817ee9f32.webp)
![](../../images/图形学/走样与反走样/MSAA_sample.webp)
![](../../images/图形学/走样与反走样/MSAA_color.webp)
与SSAA不同的是MSAA只对每个像素计算一次采样而非对整个图像进行渲染但计算量依旧倍增
@ -159,6 +159,6 @@ MSAA同样在一个像素中设置多个采样点在光栅化时计算三角
例如EQAA在2f4x模式下会对每四个采样点计算并通过表的形式存储颜色和深度值(如下图)这使得四个采样点只需1bit空间就可以确认像素位置的着色颜色值
![](https://lychee.inksoul.top/uploads/original/65/f8/fca2f60f4ea7704f21dc502f683d.webp)
![](../../images/图形学/走样与反走样/EQAA_color_table.webp)

View File

@ -61,7 +61,7 @@ $$
当两个向量垂直或是越趋近于垂直时,平行四边形的面积越大,叉乘的值越大,越趋近于同向,平行四边形越小,叉乘值越小
![](../../images/数学/《线性代数》叉乘/方向与叉乘关系.gif.gif)
![](../../images/数学/《线性代数》叉乘/方向与叉乘关系.gif)
![](../../images/数学/《线性代数》叉乘/向量缩放与叉乘的关系.gif)

View File

@ -18,7 +18,7 @@ date: 2023-08-05T22:33:01+08:00
由线性变换结论可知变换后向量位置是原向量位置与变换后向量相乘
![](../../images/数学/《线性代数》矩阵与线性变换/线性变换推论.png)
![](../../images/数学/《线性代数》矩阵与线性变换/线性变换推论.webp)
由此我们可以推导出在未知变换方式情况下计算变换后向量的方法

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 532 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 550 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 544 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB