第五节 三角形的光栅化

通过长宽比和fov确定透视投影的视锥

首先我们思考下如果想定义一个透视投影需要那些数据。
上一节我们知道如果想要定义一个正交投影需要 远近(n,f) 左右(l,r) 上下 (t,b)6个数据。当我们换到透视投影之后远近不变,那剩余的四个数据如何表示呢?
我们从上图看出,假设我们在看一个近平面,那么他又一个宽度和高度,通过他我们可以获得一个宽高比,这个是可以确定的。其次我们还需要定义的一个单位就是他的视角 相当于图上两条红线之间的夹角。通过这两个数值我们可以获得任意一个距离一定距离平面他的数值。


如何把上面的两个转换成 l,r,b,t

如果我们从侧面来看,可以看到一个这样的额三角形,我们可以三角函数来得出各个对应的值。(每一个平面的l,r,b,t),具体如上图。


image.png

在我们经过之前讲的MVP变换之后需要做什么呢?我们需要把经过变换之后的画到屏幕上

那么什么是屏幕呢?我们给他的定义是一个像素组成的数组,数组的size是他的分辨率决定的(1280*720 -> 720p)一种光栅化的过程,是一个典型的光栅成像设备。
光栅就是德语中屏幕的意思,光栅化就是把东西华仔屏幕上的过程。
像素:在这里我们把它简单的认为是一个个简单的方块,每个方块内都是完全相同的颜色(这是错误的,这里只是这里简单理解。)


image.png

这里梳理下我们对于屏幕的定义:如下图,我们认为屏幕的左下角是屏幕的原点,向右是X向上是y(这里只是约定俗称,无实际的意义。)像素的坐标我们都是用 (x,y)两个整数来表示,所有的像素为(0,0) - > (width-1,height-1)。对于每个像素的中心坐标在 (x+0.5,y+0.5) 。则整个屏幕覆盖的范围为 (0,0) 到 (width,heigth)

image.png

在这里我们需要把MVP之后的空间映射到对应的屏幕空间中,相当于把 (-1,-1,-1)->(1,1,1)的空间转换到对应刚刚的屏幕空间中。这里我们发现两个空间一个是2维一个是3维,暂时我们先不考虑他的z值,先把x y映射到对应位置。这里就很简单了。


image.png

对于三角形片元,他又一下的优势:
1 他是最基础的多边形不可能再被分割。
2三个点必然只在一个平面上,不可能把一个三角形分割在两个不同平面上
3很好区分内外(没有凹凸多边形的问题)
4任何多边形都可以拆成任意个三角形


image.png

然后我们来只盯着三角形看。例如下面是某个多边形中的某个三角形面片再经过上面的多个矩阵变换后星辰如下
image.png

那么那么对于没完全覆盖的像素,怎么确定他是否属于这个三角形呢?下面我们来解决这个问题

这里介绍一种最简单的方法:采样
简单的来说就是我们给出一个函数 f(x)求出各个值在各个点的结果来判断,也就是说采样就是把一个函数离散化的过程。这里我们采用的是利用像素中心对屏幕空间进行采样,我们也可以对时间、空间、朝向等等进行采样。


image.png

这里回到我们之前的三角形上看
我们这里用一种比较简单的方法,通过判断像素的中心是否在三角形内来确定他是否覆盖了这个像素


对Inside进行采样

那么我们如何进行这个采样呢?
我们可以便利屏幕中的每一个像素,对每个点进行采样判断来判断这个像素是否被三角形覆盖了。
image.png

判断是否在三角形内方法:叉乘


image.png

如果有一个点碰巧在三角形边界上如何计算呢?我们一般对于这种情况要么不做处理,要么做特殊处理 这门课上我们不做处理,这个只要标准统一即可。(opebnGL和DX的定义是如果点落在三角形的上边或者左边则在内部,下边和右边不 算)

边界情况处理

对于我们刚才光栅化的处理,我们便利了整个屏幕,其实没必要进行这么多计算。我们只需要计算一部分区域的像素即可,可以算出他的一个包围盒,只遍历包围盒内的像素即可。区域:取三个点x的最小最大和y的最小最大,只遍历这一部分即可。俗称 AABB包围盒


对于

其实我们还有一种更快的方法:我们可以便利每一行的最左和最右像素,这样可以节省更多的时间


image.png

我们会发现最后得出的三角形和之前的三角形差距很大,其中出现和很多的锯齿。其根本原因使我们的采样率是不够高的,让我们采样完的图形出现了走样。
image.png

例如下面这个图
image.png

我们下节课的主要任务就是反走样或者说 抗锯齿的解决。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容