GAMES 101计算机图形学笔记[1]
课程地址：[*]https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html
渲染（Rendering）流程
Vertex -> Pixel
[*]Vertex Processing：输入三维空间中的顶点（Vertex）
[*]Triangle Processing：对顶点进行处理，构成三角形、四边形
[*]Rasterization：光栅化处理，将三维三角形描述变为二维像素描述，可以打印在屏幕上
[*]Z-buffering：深度缓存处理，比较不同物体的遮挡关系
[*]Shaded fragment：着色，利用二维纹理图、纹理坐标数据进行着色，根据法向量进行插值、光线追踪等
[*]Framebuffe操作
[*]显示二维图片（Pixels）
空间变换
作用：三维顶点、相机位置、相机取景投影等过程，涉及较多关于空间坐标变换的知识
齐次坐标（Homogeneous Coordinates）
[*]在原本坐标维度上增加一维，方便描述位移变换
[*]2D点定义： https://www.zhihu.com/equation?tex=%28x%2Cy%2C1%29%5ET
[*]2D向量定义： https://www.zhihu.com/equation?tex=%28x%2Cy%2C0%29%5ET
[*]3D点定义： https://www.zhihu.com/equation?tex=%28x%2Cy%2Cz%2C1%29%5ET
[*]3D向量定义： https://www.zhihu.com/equation?tex=%28x%2Cy%2Cz%2C0%29%5ET
[*]齐次坐标下的位移变换：
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7D1%260%26t_x%5C%5C0%261%26t_y%5C%5C0%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7Dx%2Bt_x%5C%5Cy%2Bt_y%5C%5C1+%5Cend%7Bbmatrix%7D
叉乘运算
https://www.zhihu.com/equation?tex=%5Cvec%7Ba%7D%5Ctimes%5Cvec%7Bb%7D%3D%5Cbegin%7Bbmatrix%7D+y_az_b-y_bz_a+%5C%5C+z_ax_b-x_az_b%5C%5C+x_ay_b-y_ax_b+%5Cend%7Bbmatrix%7D
2D仿射变换（Affine Transform）
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7Da%26b%26t_x%5C%5Cc%26d%26t_y%5C%5C0%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5C1%5Cend%7Bbmatrix%7D
[*]尺度变换
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7Ds_x%260%260%5C%5C0%26s_y%260%5C%5C0%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5C1%5Cend%7Bbmatrix%7D
[*]旋转变换
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7D%5Ccos+%5Calpha%26-%5Csin+%5Calpha%260%5C%5C%5Csin%5Calpha%26%5Ccos%5Calpha%260%5C%5C0%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5C1%5Cend%7Bbmatrix%7D
[*]位移变换
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7D1%260%26t_x%5C%5C0%261%26t_y%5C%5C0%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5C1%5Cend%7Bbmatrix%7D
3D放射变换
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5Cz%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7Da%26b%26c%26t_x%5C%5Cd%26e%26f%26t_y%5C%5Cg%26h%26i%26t_y%5C%5C0%260%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5Cz%5C%5C1%5Cend%7Bbmatrix%7D
[*]沿轴旋转
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5Cz%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7D1%260%260%260%5C%5C+0%26%5Ccos%5Calpha%26-%5Csin%5Calpha%260%5C%5C+0%26%5Csin%5Calpha%26%5Ccos%5Calpha%260%5C%5C+0%260%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5Cz%5C%5C1%5Cend%7Bbmatrix%7D
[*]沿轴旋转
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5Cz%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7D%5Ccos%5Calpha%260%26%5Csin%5Calpha%260%5C%5C+0%261%260%260%5C%5C+-%5Csin%5Calpha%260%26%5Ccos%5Calpha%260%5C%5C+0%260%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5Cz%5C%5C1%5Cend%7Bbmatrix%7D
[*]沿 https://www.zhihu.com/equation?tex=z 轴旋转
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7Dx%27%5C%5Cy%27%5C%5Cz%27%5C%5C1%5Cend%7Bbmatrix%7D%3D+%5Cbegin%7Bbmatrix%7D+%5Ccos%5Calpha%26-%5Csin%5Calpha%260%260%5C%5C+%5Csin%5Calpha%26%5Ccos%5Calpha%260%260%5C%5C+0%260%261%260%5C%5C+0%260%260%261+%5Cend%7Bbmatrix%7D%5Ccdot+%5Cbegin%7Bbmatrix%7Dx%5C%5Cy%5C%5Cz%5C%5C1%5Cend%7Bbmatrix%7D
[*]使用沿三个轴的旋转描述复杂的空间旋转（三个Euler角）：
https://www.zhihu.com/equation?tex=R_%7Bxyz%7D%28%5Calpha%2C+%5Cbeta%2C+%5Cgamma%29%3DR_x%28%5Calpha%29R_y%28%5Cbeta%29R_z%28%5Cgamma%29
[*] Rodrigues旋转公式：描述沿轴旋转 https://www.zhihu.com/equation?tex=%5Calpha 角
https://www.zhihu.com/equation?tex=R%28n%2C%5Calpha%29%3D%5Ccos%5Calpha+I%2B%281-%5Ccos%5Calpha%29nn%5ET%2B%5Csin%5Calpha++%5Cbegin%7Bbmatrix%7D++0+%26+-n_z%26n_y+%5C%5C+n_z%260%26-n_x+%5C%5C+-n_y+%26+n_x+%260+%5Cend%7Bbmatrix%7D
MVP变换（模型变换->视图变换->投影变换）
[*]MVP变换：model、view、projection transform
[*]相机参数：
[*]位置 https://www.zhihu.com/equation?tex=%5Cvec%7Be%7D
[*]视线方向
[*]向上方向：表示相机自己的转角、镜头的顺时针/逆时针旋转
视图变换（View Transformation）
[*]将整个空间变换到以相机位置为原点， 轴方向为相机向上方向，轴方向为视线方向，轴方向为 https://www.zhihu.com/equation?tex=%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D 方向
[*]视图变换 https://www.zhihu.com/equation?tex=M_%7Bview%7D%3DR_%7Bview%7DT_%7Bview%7D
[*]其中，位移变换将相机移动到坐标原点：
https://www.zhihu.com/equation?tex=T_%7Bview%7D%3D%5Cbegin%7Bbmatrix%7D+1+%26+0+%26+0+%26+-x_e+%5C%5C+0+%26+1+%26+0+%26+-y_e+%5C%5C+0+%26+0+%26+1+%26+-z_e+%5C%5C+0+%26+0+%26+0+%26+1+%5Cend%7Bbmatrix%7D
[*]旋转变换将变换到轴，将 https://www.zhihu.com/equation?tex=%5Cvec%7Bg%7D%5Ctimes+%5Cvec%7Bt%7D 变换到轴，考虑将 https://www.zhihu.com/equation?tex=%281%2C0%2C0%2C0%29%5ET%2C%280%2C1%2C0%2C0%29%5ET%2C%280%2C0%2C1%2C0%29%5ET 变换到相机坐标，得到逆变换：
https://www.zhihu.com/equation?tex=R_%7Bview%7D%5E%7B-1%7D%3D%5Cbegin%7Bbmatrix%7D+x_%7B%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D%7D+%26+x_%7B%5Cvec%7Bt%7D%7D+%26+x_%7B-%5Cvec%7Bg%7D%7D+%260%5C%5C+y_%7B%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D%7D+%26+y_%7B%5Cvec%7Bt%7D%7D+%26+y_%7B-%5Cvec%7Bg%7D%7D+%260%5C%5C+z_%7B%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D%7D+%26+z_%7B%5Cvec%7Bt%7D%7D+%26+z_%7B-%5Cvec%7Bg%7D%7D+%260%5C%5C+0+%26+0+%26+0+%26+1+%5Cend%7Bbmatrix%7D
转置得到旋转变换：
https://www.zhihu.com/equation?tex=R_%7Bview%7D%3D%5Cbegin%7Bbmatrix%7D+x_%7B%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D%7D+%26y_%7B%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D%7D++%26z_%7B%5Cvec%7Bg%7D%5Ctimes%5Cvec%7Bt%7D%7D++%260%5C%5C++x_%7B%5Cvec%7Bt%7D%7D%26+y_%7B%5Cvec%7Bt%7D%7D+%26+++z_%7B%5Cvec%7Bt%7D%7D+%260%5C%5C+x_%7B-%5Cvec%7Bg%7D%7D+%26y_%7B-%5Cvec%7Bg%7D%7D%26+z_%7B-%5Cvec%7Bg%7D%7D+%260%5C%5C+0+%26+0+%26+0+%26+1+%5Cend%7Bbmatrix%7D
[*]其他物体跟着相机一起变换
投影变换（Projection Transformation）
[*]投影变换的目标是将空间中的物体投影到一个成像平面，如上左图所示，采用的方法如下：
[*]透视投影（Perspective Projection）：将左图所示多面体变换为长方体
[*]正交投影（Orthographic Projection）：将该长方体通过平移、尺度缩放变成以原点为中心立方体，再去掉z坐标，压到二维平面
透视投影（Perspective Projection）
[*]成像平面 https://www.zhihu.com/equation?tex=A%27B%27C%27D%27 到原点的距离为，最远平面 https://www.zhihu.com/equation?tex=ABCD 到原点的距离为 https://www.zhihu.com/equation?tex=f
[*]对于成像空间内任意一点，将其与原点 https://www.zhihu.com/equation?tex=O 相连，得到其在成像平面的投影点 https://www.zhihu.com/equation?tex=%28x%27%2Cy%27%2Cz%27%29
[*]采用相似三角形对投影点坐标进行分析：
[*]由此得到变换矩阵：
https://www.zhihu.com/equation?tex=%5Cbegin%7Bbmatrix%7D+n+%26+0+%26+0+%26+0+%5C%5C+0+%26+n+%26+0+%26+0%5C%5C+%3F+%26+%3F+%26%3F+%26+%3F+%5C%5C+0+%26+0+%26+1+%26+0++%5Cend%7Bbmatrix%7D++%5Cbegin%7Bbmatrix%7D+x+%5C%5C+y+%5C%5C+z+%5C%5C+1+%5Cend%7Bbmatrix%7D+%5Crightarrow+%5Cbegin%7Bbmatrix%7D+nx+%5C%5Cn+y+%5C%5C+%3F+%5C%5C+z+%5Cend%7Bbmatrix%7D+%5Crightarrow+%5Cbegin%7Bbmatrix%7D+nx%2Fz+%5C%5C+ny%2Fz+%5C%5C+%3F+%5C%5C+1+%5Cend%7Bbmatrix%7D+
上式最后一个步骤保证坐标第四维度为1
[*]考虑到经过变换后得到，考虑到经过变换后得到 ，代入确定透视投影矩阵：
https://www.zhihu.com/equation?tex=M_%7Bpersp%5Crightarrow+otrho%7D%5Cbegin%7Bbmatrix%7D+n+%26+0+%26+0+%26+0+%5C%5C+0+%26+n+%26+0+%26+0%5C%5C+0+%26+0+%26+n%2Bf%26+-nf+%5C%5C+0+%26+0+%26+1+%26+0++%5Cend%7Bbmatrix%7D+
正交投影（Orthographic Projection）
[*]将立方体进行平移，归一化：
[*]将一个 https://www.zhihu.com/equation?tex=%5Bl%2Cr%5D%5Ctimes%5Bb%2Ct%5D%5Ctimes%5Bn%2Cf%5D 的方块平移、尺度缩放为的方块
https://www.zhihu.com/equation?tex=M_%7Bortho%7D%3D+%5Cleft%5B+%5Cbegin%7Bmatrix%7D+%5Cfrac%7B2%7D%7Br-l%7D%260%260%260%5C%5C+0%26%5Cfrac%7B2%7D%7Bt-b%7D%260%260%5C%5C+0%260%26%5Cfrac%7B2%7D%7Bn-f%7D%260%5C%5C+0%260%260%261+%5Cend%7Bmatrix%7D+%5Cright%5D+%5Cleft%5B+%5Cbegin%7Bmatrix%7D+1%260%260%26-%5Cfrac%7Br%2Bl%7D%7B2%7D%5C%5C+0%261%260%26-%5Cfrac%7Bt%2Bb%7D%7B2%7D%5C%5C+0%260%261%26-%5Cfrac%7Bn%2Bf%7D%7B2%7D%5C%5C+0%260%260%261+%5Cend%7Bmatrix%7D+%5Cright%5D
[*]得到最终的投影变换矩阵：
https://www.zhihu.com/equation?tex=M_%7Bpersp%7D%3DM_%7Bortho%7DM_%7Bpersp%5Crightarrow+ortho%7D
[*]将得到的方块转换到屏幕坐标
https://www.zhihu.com/equation?tex=M_%7Bviewport%7D%3D+%5Cleft%5B+%5Cbegin%7Bmatrix%7D+%5Cfrac%7Bwidth%7D%7B2%7D%260%260%26%5Cfrac%7Bwidth%7D%7B2%7D%5C%5C+0%26%5Cfrac%7Bheight%7D%7B2%7D%260%26%5Cfrac%7Bhegiht%7D%7B2%7D%5C%5C+0%260%261%260%5C%5C+0%260%260%261+%5Cend%7Bmatrix%7D+%5Cright%5D
光栅化（Rasterization）
[*]将空间中的点、图像转换为二维屏幕上的点：转化为像素点
[*]依次判断像素点是否在三角形中：
for(int x=0; x<xmax; x++)
for(int y=0; y<ymax; y++)
image=inside(tri, x+0.5, y+0.5);
[*]应用叉乘判断
[*]可以只对bouding box里面的像素进行判断，进行提速
抗锯齿（Anti-aliasing）光栅化
[*]先滤波再采样
[*]具体实施时，考虑根据像素三角形的覆盖率，确定灰度值
[*]对像素进行再次划分，分为 https://www.zhihu.com/equation?tex=4%5Ctimes+4 ，分别判断每个点是否在三角形内，计算点在三角形内的占比（MSAA方法）
深度缓存（Z-Buffering）
[*]区分物体的远近、遮挡关系
[*]采用深度缓存的方式，存储当前像素点的最近深度，一旦遇到更近的点，则更新该深度缓存
[*]frame buffer：保存当前渲染图像的像素值
[*]depth buffer（z-buffer）：保存当前图像每个像素位置的深度值
着色模型（Shading）
Blinn-Phong Reflection Model
[*]考虑环境光照（Ambient）、漫反射（Diffuse）、高光（Specular）
[*]输入变量：面片法线 https://www.zhihu.com/equation?tex=%5Cvec%7Bn%7D 、观测方向 https://www.zhihu.com/equation?tex=%5Cvec%7Bv%7D 、光线方向 https://www.zhihu.com/equation?tex=%5Cvec%7Bl%7D 、平面参数（颜色）
[*]漫反射（Diffuse Reflection）
[*]根据光线与法线的夹角确定反射强度： https://www.zhihu.com/equation?tex=%5Ccos%5Ctheta%3D%5Cvec%7Bl%7D%5Ccdot+%5Cvec%7Bn%7D
[*]能量辐射：呈球形往外扩展，越往外，单位面积的能量越弱
[*]得到漫反射强度计算式：
https://www.zhihu.com/equation?tex=L_d%3Dk_d%28I%2Fr%5E2%29%5Cmax%280%2C%5Cvec%7Bn%7D%5Ccdot%5Cvec%7Bl%7D%29
其中， https://www.zhihu.com/equation?tex=k_d 表示像素点纹理/颜色（rgb）， https://www.zhihu.com/equation?tex=I 表示光源颜色（rgb）
2. 高光（Specular）
[*]镜面反射：观察方向与镜面反射方向足够接近时，可以看到高光，即法线方向与半程向量方向接近
[*]其中， https://www.zhihu.com/equation?tex=k_s 为高光颜色（rgb），通常为白色
[*]指数 https://www.zhihu.com/equation?tex=p 用于控制反射光强对夹角的敏感度
3. 环境光照（Ambient）
[*]所有点接收到的环境光相同
https://www.zhihu.com/equation?tex=L_a+%3D+k_aI_a
其中， https://www.zhihu.com/equation?tex=k_a 为环境光系数（rgb）， https://www.zhihu.com/equation?tex=I_a 为环境光强度（rgb）
着色频率（Shading Frequencies）
[*]考虑着色应用于哪些点？
[*]直接应用于平面
[*]先应用于顶点，再对顶点插值得到平面内每个像素点的着色
[*]对法线插值，得到平面内每个像素点的法线值，再根据着色模型和每个像素点的法线得到着色结果
平面着色（Flat Shading）
[*]着色频率：面
顶点着色（Gouraoud Shading）
[*]着色频率：顶点
[*]先对顶点着色，根据顶点颜色对平面上的像素值进行插值
[*]顶点法线的计算方法：对相邻面的法线进行加权平均：
https://www.zhihu.com/equation?tex=%5Cvec%7BN%7D_v%3D%5Cfrac%7B%5Csum_i+%5Cvec%7BN%7D_i%7D%7B%5CVert+%5Csum_i+%5Cvec%7BN%7D_i+%5CVert%7D
法线着色（Phong Shading）
[*]着色频率：像素
[*]先对法线进行插值，再根据着色模型着色
[*]像素点法线计算方法：Barycentric插值
纹理映射
每个3D顶点对应2D纹理图上的坐标点
[*]三角形内部点的纹理坐标采用重心坐标（Barycentric coordinate）插值：
https://www.zhihu.com/equation?tex=%28x%2Cy%29%3D%5Calpha+A%2B%5Cbeta+B%2B%5Cgamma+C%2C+~%5Calpha%2B%5Cbeta%2B%5Cgamma%3D1
https://www.zhihu.com/equation?tex=%5Calpha%3D%5Cfrac+%7B-%28x-x_B%29%28y_C-y_B%29%2B%28y-y_B%29%28x_C-x_B%29%7D+%7B-%28x_A-x_B%29%28y_C-y_B%29%2B%28y_A-y_B%29%28x_C-x_B%29%7D
https://www.zhihu.com/equation?tex=%5Cbeta%3D%5Cfrac+%7B-%28x-x_C%29%28y_A-y_C%29%2B%28y-y_C%29%28x_A-x_C%29%7D+%7B-%28x_B-x_C%29%28y_A-y_C%29%2B%28y_B-y_C%29%28x_A-x_C%29%7D
https://www.zhihu.com/equation?tex=%5Cgamma%3D1-%5Calpha-%5Cbeta
[*]纹理图过小时，需要处理非整数点坐标，采用Bilinear interpolation
[*]纹理图过大时，可以使用超采样方法，将像素扩展为方格，取方格内的均值（范围查询、Mipmap查询、各向异性查询
凹凸贴图（Bump Mapping）
[*]纹理可以用于定义点的相对高度，根据相对高度，改变每个点的切线方向，影响后续的着色过程，制造出凹凸不平的假象
[*]对于二维纹理图上的点，其原始法线方向为 https://www.zhihu.com/equation?tex=n%28p%29%3D%280%2C0%2C1%29
[*]先求两个方向的切线：
[*]https://www.zhihu.com/equation?tex=dp%2Fdu%3Dc1%2A%5Bh%28u%2B1%29-h%28u%29%5D
[*]https://www.zhihu.com/equation?tex=dp%2Fdv%3Dc2%2A%5Bh%28v%2B1%29-h%28v%29%5D
[*]得到扰动后的法线方向： https://www.zhihu.com/equation?tex=n%3D%28-dp%2Fdu%2C-dp%2Fdv%2C1%29
位移贴图（Displacement Mapping）
[*]根据纹理，对顶点位置做移动
相关代码
GitHub - kiyoxi2020/computer-graphics
[*]对应Assignment0~4
页:
[1]