GAMES101笔记：Lecture05-光栅化1

GAMES101笔记：Lecture05 光栅化1

Syllabus

• Finishing up Viewing
  • Viewport transformation
• Rasterization
  • Different raster displays
  • Rasterizing a triangle
• Occlusions and Visibility

透视投影

• 近平面的l, r, b, t是什么？

  • 希望清晰地表述出来

  • 有时采用：

    垂直视域(vertical field-of-view)(fovY)和宽高比(aspect ratio)

    （假设对称性，比如 $l = -r$ , $b = -t$ ）

    

• 如何将fovY和宽高比转换为l, r, b, t?

  

  $$\tan\frac{fovY}2 = \frac{t}{|n|}$$ $$aspect = \frac{r}t$$

视口变换

将正则正方体映射到屏幕上的过程

从正则正方体映射到屏幕

• 什么是屏幕？

  • 像素的数组
  • 数组的大小：分辨率(resolution)
  • 一个常见的光栅化设备

• Raster == screen in German

  • Rasterize == drawing onto the screen

    “光栅化”这个词来自德语

• Pixel(FYI, short for “picture element”)

  • For now: A pixel is a little square with uniform color
  • Color is a mixture of ( ${\color{red}red}$ , ${\color{green}green}$ , ${\color{blue}blue}$ )

• 定义屏幕空间

  

  • 像素坐标写作(x, y), 其中x和y都为整数
  • 像素的下标从(0, 0)到(width - 1， height - 1)
  • 像素(x, y)的中心在(x + 0.5, y + 0.5)
  • 屏幕覆盖(0, 0)到(width, height)

• 和z值无关

• xy平面的变换：$[-1, 1]^2$ 到 $[0, width]\times[0, height]$

• 视口变换矩阵：

  $$M_{viewport} = \begin{pmatrix} \frac{width}2 & 0 & 0 & \frac{width}2 \\ 0 & \frac{height}2 & 0 & \frac{height}2 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

光栅化

将三角形“打散”成像素

绘制工具

显示设备

示波器

显像管

CRT的光栅化显示

• 优化方法：

  隔行扫描，从而提高画面更新率

  也可以扩展到视频压缩领域

  • 缺点：

    会造成画面撕裂和鬼影现象

帧缓冲区：光栅化显示的内存

平板显示设备

LCD(Liquid Crystal Display) Pixel

利用光的偏振原理和液晶的电感透光性来控制像素的显示

LED显示设备

电子墨水显示设备

多边形网格

三角形网格

为什么选择三角形？

• 三角形是最基础的多边形
  • 可以将其他多边形拆分成三角形
• 特殊性质
  • 各顶点保证是在统一平面内
  • 边界清晰
  • 方便进行插值

寻找像素

一个简单的方法：采样

对函数进行采样

将函数在一点上进行求值就是采样

可以用采样来离散化一个函数

c++代码：

for (int x = 0; x < xmax; ++x)
	output[x] = f(x);

采样是图形学的中心概念

可以对时间（一维）、面积（二维）、方向（二维）、体积（三维）······进行采样

光栅化：二维采样

• 重点：

  确定像素的中心是否在三角形内

  

  定义二元函数：inside(tri, x, y)，其中x, y不一定是整数

  $$\text{inside}(t, x, y) = \begin{cases} 1\qquad\text{点(x, y)在三角形t内}\\ 0\qquad\text{其他情况} \end{cases}$$

  光栅化就是在一个二维指示函数中进行采样

  • c++代码：

    for (int x = 0; x < xmax; ++x)
    	for (int y = 0; y < ymax; ++y)
    		image[x][y] = inside(tri, x + 0.5, y + 0.5)

    采样位置：

    

• 确定点是否在三角形内

  

  • 方法：

    运用叉积

• 边界情况：

  

  采样点是被三角形1，三角形2覆盖，还是同时被两个三角形覆盖？

  • 解决方法：

    要么不做处理，要么自行定义一个统一标准来处理

优化方法

• 是否需要对所有像素进行采样？

  

  运用包围盒算法优化

• 三角形增量遍历

  

  不会考虑更多像素，适合用于渲染狭长三角形

真实世界的像素

不同设备RGB像素的几何分布并不一样，但在这节课中，我们假设像素是方形，而且能够显示所有颜色

其他显示方法中的像素

彩色打印（上图）使用减色法

抗锯齿技术的引入

• 如果将采样信号输出，我们会得到：

  

• 真实世界的显示设备会忽略部分原始信号

  

• 与连续三角形函数进行比较：

  

• 问题出在哪里？

  

  图像出现了锯齿！

  • 原因：

    采样频率低于信号频率

• 如何避免锯齿？

  

  使用反走样（抗锯齿）技术