计算机图形学入门·光栅化

作者:心动前端工程师 山楂

山楂最近入坑计算机图形学,在心动内部做了一次分享,分享内容主要基于闫令琪的课程。 下面是这次内部分享的笔记,请配此 slide 食用

计算机图形学在游戏、电影、设计、VR & AR、可视化、模拟、GUI、字体等领域得到广泛应用,包括光栅化(rasterization)、几何(curves & meshes)、光线追踪(ray tracing)、动画模拟(animation/simulation)等内容。 其中,光栅化可以说是计算机图形学中最为基础的概念。简单来说,光栅化是将三维场景映射成平面图形,再将图形分解成多边形,多边形打碎成像素,显示到屏幕上的过程。

光栅化涉及的数学知识主要是线性代数,包括向量(求和、点积、叉积)和矩阵(乘积、转置、单位矩阵)等。 光栅化涉及的大量变换都可以表达为向量和矩阵的运算。 缩放、切变、翻转、旋转这些线性变换可以用矩阵乘法表示,引入齐次坐标后,平移也同样可以像线性变换一样用矩阵乘法处理。 包含俯仰、偏航、滚转的三维复杂旋转,可以用罗德里格斯旋转方程描述。

缩放、旋转、平移等基本的变换操作发生在模型变换(modeling tranformation)阶段,类似拍照过程中的找景、模特就位。 模型变换之后是相机变换(view tranformation)阶段,在这一阶段我们确定相机和物体的相对位置,类似拍照过程中的找角度、放相机。 具体来说,我们通过相机的位置、看向的方向、往上的方向来表示相机,然后为了简化计算,将相机和物体一起移动,在保持两者相对位置不变的前提下将相机移动至坐标系原点。 下一阶段是投影变换(projection tranformation),类似拍照过程中的按快门。 投影主要分为正交投影和透视投影两种。 正交投影相对简单,光线平行,各点的相对位置不变,将场景平移缩放至 [-1, 1]^3 的标准立方体上,再去除 Z 值压到平面上。 这里,缩放至标准立方体是为了简化计算。 透视投影,近大远小,类似人眼观看物体的方式。 运用近平面通过挤压不会发生变化、远平面通过挤压 Z 值不会发生变化、中心点通过挤压也不会发生变化三点性质,可以实现透视投影。 这三个阶段组成了视图变换。 最后还有一个视口变换(viewport transformation),将之前缩放至标准大小的场景根据屏幕的长宽再进行一次变换,投射到屏幕上。

光栅化分解图形为多边形,其中运用最广泛的是三角形,因为三角形内部是平面,内外定义很清晰,内部任意一个点都可以插值渐变。 三角形输出到屏幕时,会遍历屏幕上的每个像素,通过向量的叉乘判断像素点是否在三角形内。 当然,实际计算时会使用包围盒简化计算,包围盒外的像素点就不用再进行向量叉乘运算了。 为了应对锯齿、摩尔纹等采样瑕疵,可以先模糊再采样。 虽然对每个像素进行卷积操作可以实现模糊,但计算量比较大,所以一般使用超采样,每个像素内部增加采样点再进行平均。

利用 Z 值可以处理遮挡的问题,维护一个 Z-Buffer 记录像素点的深度,如果三角形面上的像素点 Z 值小于 Z-Buffer 中的值,那就更新 Z-Buffer 中的值为当前 Z 值,同时更新该像素点的颜色为当前三角形面上的像素点的颜色。

再接下来要处理的是着色(shading)问题,因为物体的颜色会受光照影响,更复杂的是,不同的材质和光线的相互作用不同。 最基础的着色模型是Blinn-Phong反射模型,它从高光、漫反射、环境光三个维度去综合考虑着色。漫反射主要考虑材质的漫反射系数、光线强度、光源远近、入射方向和材质表面的夹角大小。 不同的着色频率会产生不同的显示效果,有逐平面法线(flat shading)、逐顶点法线(gouraud shading)、逐像素法线(phong shading)三种。 逐平面法线以三角形面为着色单位,计算很快,但效果较差。 将共享一个顶点的所有三角形面的法线向量相加求均值,可以得到顶点的法线向量,据此可以对每个顶点进行着色,然后直接插值计算三角形面内每个点的颜色,这就是 gouraud shading。 如果不直接插值计算三角形内每个点的颜色,而是直接光栅化后形成像素点,再据此对每一个点着色,就是 phong shading。

计算机图形中常常提到的渲染管线通常可分为顶点处理、三角形处理、光栅化、片元处理、帧缓冲处理,其实具体来说大致就是上面提到的这些内容。 顶点处理就是对所有顶点数据进行视图变换,三角形处理就是这些顶点组合成各三角形面(三角面剖分),然后是光栅化判断像素点是否在三角形内,再接下来是片元处理,对每个片元进行着色,最后则是整合所有信息输出至屏幕。 其中,片元处理除了之前提到的着色外,也可以进行纹理映射,用纹理贴图代替颜色。

最后推荐两个超棒的视频教程:

题图 Ashkan Forouzani

评论

Loading comments ...