美文网首页
第五节 三角形的光栅化

第五节 三角形的光栅化

作者: Charon_ted | 来源:发表于2021-09-26 22:22 被阅读0次
    通过长宽比和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

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

    相关文章

      网友评论

          本文标题:第五节 三角形的光栅化

          本文链接:https://www.haomeiwen.com/subject/jlwjiltx.html