现代计算机图形学入门-L5-光栅化.1
光栅化—— Rasterization 1 (Triangles)
做完MVP变换后（Viewing Transformation，MVP），无论是正交投影还是透视投影，所有物体都在标准的立方体 中。下一步就是把它画在屏幕上，这一过程先进行视口变换。然后进行「光栅化——几何离散化」。
- 观测变换：Model/View + Projection + Viewport（视口变换）
1. 视口变换(Viewport Transformation)
「Canonical Cube to Screen」
frustum的定义
-
- Aspect ration 长宽比
-
- 垂直可视角度 verticle filed-of-view（fovY）
- 水平可视角度可由垂直可视角度与长宽比推断出来
- n、f 近平面与远平面到相机的距离
fovY、aspect转换到正交投影的l,r,b,t
- 水平方向可由t*aspect得到
什么是屏幕(screen)？
- 一个二维的数组，数组的每个元素是一个像素
- 数组的大小：分辨率
- 如果1920x1080指1080p
- 屏幕是一种典型的光栅成像设备
Raster
Raster == screen in Germen Raster其实就是“screen”在德语中对应的单词
- Rasterize === drawing onto the screen
像素（Pixel）
- 名字由来：picture element，我们将其缩写为pixel
- 现阶段，将像素理解为一个内部含有固定颜色的小方块，是最小的单位，像素内的颜色无差异。
- 不同像素可以表示不同的颜色，一个像素内的颜色用R、G、B来定义，取值范围为[0,255]，三者混合可以表示各各种各样的颜色。
屏幕空间（screen space）
屏幕空间就是以屏幕左下角为原点，建立一个二维坐标系
规定：
- 像素坐标——（x,y）,x、y为整数。如上图中的蓝色标记像素坐标为（2，2）
- x、y取值范围：(0,0)到（width-1,height-1）
- 像素（x,y）的中心在（x+0.5，y+0.5），如蓝色像素的中心为（2.5,1.5）
- 屏幕范围从（0，0）到（width，height）
视口变换（Viewport Transformation）
当进行一系列观测变换（视图变换->投影变换）后，得到了 的标准立方体，下一步需要将标准立方体变换到宽为width、长为height的屏幕空间中,这一过程称为「视口变换」
- 先忽略z，处理标准矩形。因此矩阵第三行第三列为1
- 缩放。将 ， （长宽都为2）变换到屏幕空间[width, height]，x、y分别缩放width/2、height/2
- 缩放结束后，标准矩形的中心在（0，0）.而屏幕空间的起点在左下角（0，0），因此x、y方向上分别还需要平移width/2、height/2
综上，得到视口变换矩阵： 
经过观测变换、视口变换后,得到的是二维平面形状-屏幕空间中的多边形,是连续的信息,下一步就是将其打散为离散的像素点,这一过程称为光栅化.
2. 光栅化——几何离散化
2.1 光栅显示设备
- 示波器
-
crt显示器（扫描的方式）
-
现代显示器，显示内容就是内存中的一块区域:
-
LCD(液晶显示器、通过光栅扭曲光)
-
LED(发光二极管)
-
OLED (电子墨水屏,刷新率低）
「如何在这些光栅设备上画东西?」
2.2 光栅化过程——几何离散化
2.2.1多边形拆成像素
因三角形具有以下优良性质,我们一般将图像拆分成三角形进行显示
- 三角形是最最基础的多边形。
- 任何多边形均可以拆解成多个三角形。
- 三角形的三个点连接在一起，其三点一定在一个平面上。(四边形可以是2个平面)
- 三角形的内外部定义清楚，可以通过向量的叉积判断点是否在三角形内部。
- 三角形可以通过顶点插值求出三角形内任意一点的属性。（后续课程求重心坐标的方法）
2.2.2 判断像素是否在三角形内_重要方法:采样(Sampling)
空间中的三角形经过观测变换(MVP)后和视口变换(Viewport Transformation)后,得到上图左边的连续三角形.
将三角形显示到屏幕上,就需要判断屏幕上的每一个像素点的颜色,进一步转化问题,就是要判断每一个像素点与三角形的位置关系,更确切来说是判断像素中心与三角形的位置关系.当像素点在三角形内时,则像素点使用该处的属性信息设置像素的颜色。
「采样」
采样其实就是把一个函数离散化的过程。一个连续的函数，在不同地方此处的函数值是多少。 
光栅化过程中采样的应用——用像素中心对屏幕空间进行采样。 
「采样步骤：」
-
- 定义采样函数
此处使用之前学习的叉乘可以通过叉乘判断结果是否为同一方向，得到点是否在三角形内。 
- 定义采样函数
-
- 对每一个像素中心计算采样函数
- 对每一个像素中心计算采样函数
-
- 结果
- 结果
对于在边界上的点，可自行定义，统一遵循定义。
采样加速方式：
-
- 只检测包围盒(aabb)内的像素检测。通过三角形三个顶点的 x,y 的坐标从最小值到最大值选出包围盒（Bounding Box），只对包围盒内的像素中心进行检测。
- 只检测包围盒(aabb)内的像素检测。通过三角形三个顶点的 x,y 的坐标从最小值到最大值选出包围盒（Bounding Box），只对包围盒内的像素中心进行检测。
-
- 只对每一行的最左或者最右的像素点进行检测
- 只对每一行的最左或者最右的像素点进行检测
存在的问题：走样与锯齿，下一节课程讨论。 
总结
三维空间中物体，经过MVP变换后，得到了的标准立方体(Canoniacal Cube)。再对标准立方体进行视口变换，然后进行光栅化处理，才可将标准立方体转化为二维图像显示在屏幕上。其中：
- 视口变换（Viewport Transformation） 将标准立方体经过缩放与平移，变换为（0，0）为原点，长宽为（width，height）的屏幕空间下的矩形。
- 光栅化处理
- 视口变换得到屏幕空间下的矩形，是一个连续的图形，还需要对屏幕中的像素点的中心进行采样，判断像素中心是否在三角形内，从而控制像素点的显示结果。
- 采样方法可以采用像素中心Q点三角形联系得到的向量（P0Q、P1Q、P2Q） ，与三角形P0P1P2形成的（P0P1、P1P2、P2P0）向量叉乘，判断z值是否同一方向来确定Q点是否在三角形内。 采样存在走样问题，在图形学上锯齿是其中的一种表现（其他如摩尔纹），这类问题后续介绍。
恰饭区
「投喂羽毛小鸡腿，吃饱了继续写。」 
「点点广告也是爱,攒攒明年植发钱。」
更多
现代计算机图形学入门-L4-变换.2
现代计算机图形学入门-L3-变换.1
现代计算机图形学入门-L2 ——线性代数
现代计算机图形学入门-L1
另辟蹊径的"一键打包"
Web/Native资源加密方案
Spine换装方案多平台解析
基于creator3.0的3D换装
CocosCreator3.4.2原生二次开发的正确姿势——手把手教你接SDK
在编辑器上声明自定义数据数组
包体优化指南
不规则3D地形行走
快速实现3d抛物线绘制
奇形怪状-不规则按钮实现
关于作者
我是羽毛，一名游戏研发工程师，一名野生摄影同学。我的公众号主要分享自己的一些游戏项目开发过程中的功能总结及日常开发笔记。也希望能通过平台的交流，与更多有想法的同学交流认识，共同成长。
欢迎大家在日常开发过程中，如果觉得有需要讨论解决、分享或者探讨的内容，在公众号后台或者文章留言处给我反馈，提供写作的方向，从另一个角度也尽量让写作内容更贴近大家的需求以及痛点，在此谢谢各位同学.
「另外羽毛也提供付费技术咨询的服务，有需求的同学可以公众号后台私信添加微信。」
今日技能你学废了吗？
更多精彩欢迎关注微信公众号“羽毛不会飞”
本文由 mdnice 多平台发布