开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

教程分享

关注:577

当前位置:游戏蛮牛 技术专区 教程分享

查看: 1005|回复: 7

[基础知识] 学习shader之前必须知道的东西之计算机图形学(一)渲染管线

[复制链接]  [移动端链接]
7日久生情
3558/5000
排名
2615
昨日变化
2

1393

主题

1398

帖子

3558

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
132510
好友
17
蛮牛币
26218
威望
0
注册时间
2015-12-24
在线时间
276 小时
最后登录
2017-2-21
发表于 2016-7-28 11:12:23 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
  引言

  shader到底是干什么用的?shader的工作原理是什么?

  其实当我们对这个问题还很懵懂的时候,就已经开始急不可耐的要四处搜寻有关shader的资料,恨不得立刻上手写一个出来。但看了一些资料甚至看了不少cg的语法之后,我们还是很迷茫,UNITY_MATRIX_MVP到底是个什么矩阵?它和v.vertex相乘出来的又是什么玩意?当这些问题困扰我们很久之后,我们才发现,原来我们是站在浮沙上筑高台,根基都没有打牢当然不可能盖得起高楼大厦了。

  那根基是什么呢?大牛曰,计算机图形学。

  shader中文名叫着色器,顾名思义,它的作用可以先简单理解为给屏幕上的物体画上颜色。而什么东西负责给屏幕上画颜色?当然是GPU,所以我们写shader的目的就是告诉GPU往屏幕哪里画、怎么画。说到这其实大家应该很明白了,如果我们连GPU的工作原理都不知道,何谈指挥它?

  说到计算机图形学,包括我在内很多同学都非常害怕它,因为里面包含了各种艰深的理论、变换,大量的公式什么的。其实我们大可不必一开始就吓倒自己,先从基本概念开始,慢慢来,总有一天我们也会成为大牛~!

  最后,这篇文章不算是原创,最多算是摘要+读后感,很多概念性文字都是我从书里搬过来后再加上自己的理解,算是和大家一起学习,有理解不当之处还请多多指教。

  废话不多说,让我们来进入第一章的学习,GPU的渲染管线。

  正文

  所谓GPU的渲染管线,听起来好像很高深的样子,其实我们可以把它理解为一个流程,就是我们告诉GPU一堆数据,最后得出来一副二维图像,而这些数据就包括了”视点、三维物体、光源、照明模型、纹理”等元素。

  在各种图形学的书中,渲染管线主要分为三个阶段:应用程序阶段、几何阶段、光栅阶段。

  1,应用程序阶段。

  这个阶段相对比较好理解,就比如我们在Unity里开发了一个游戏,其实很多底层的东西Unity都帮我们实现好了,例如碰撞检测、视锥剪裁等等,这个阶段主要是和CPU、内存打交道,在把该计算的都计算完以后,在这个阶段的末端,这些计算好的数据(顶点坐标、法向量、纹理坐标、纹理)就会通过数据总线传给图形硬件,作为我们进一步处理的源数据。

  2,几何阶段。

  主要负责顶点坐标变换、光照、裁剪、投影以及屏幕映射,改阶段基于GPU进行运算,在该阶段的末端得到了经过变换和投影之后的顶点坐标、颜色、以及纹理坐标。简而言之,几何阶段的主要工作就是“变换三维顶点坐标”和“光照计算”。

  问题随之而来,为什么要变换顶点坐标?我是这么理解的,比如你有一个三维游戏场景,场景中的每个模型都可以用一个向量来确定它的位置,但如何让计算机根据这些坐标把模型正确的、有层次的画在屏幕上?这就是我们需要变换三维顶点坐标的原因,最终目的就是让GPU可以将这些三维数据绘制到二维屏幕上。

  根据顶点坐标变换的先后顺序,主要有如下几个坐标空间:Object space,模型坐标空间;World space,世界坐标空间;Eye space,观察坐标空间;Clip and Project space,屏幕坐标空间。下图就是GPU的整个处理流程,深色区域就是顶点坐标空间的变换流程,大家了解一下即可,我们需要关注的是每个坐标空间的具体含义和坐标空间之间转换的方法。

2_3106_7d01f3c9ec55e5d.png

  2.1,从object space到world space

  object space有两层核心含义,第一,object space中的坐标值就是模型文件中的顶点值,这些值是在建立模型时得到的,例如一个.max文件,里面包含的数据就是object space的坐标。第二,object space的坐标与其他物体没有任何参照关系,这是object space和world space区分的关键。world space坐标的实际意义就有有一个坐标原点,物体跟坐标原点相比较才能知道自己的确切位置。例如在unity中,我们将一个模型导入到场景中以后,它的transform就是世界坐标。

  2.2,从world space到eye space

  所谓eye space,就是以摄像机为原点,由视线方向、视角和远近平面,共同组成的一个梯形体,如下图,称之为视锥(viewing frustum)。近平面,是梯形体较小的矩形面,也是靠近摄像机的平面,远平面就是梯形体较大的矩形,作为投影平面。在这个梯形体的内的数据是可见的,超出的部分会被视点去除,也叫视锥剪裁。

  例如在游戏中的漫游功能,屏幕的内容随摄像机的移动而变化,这是因为GPU将物体的顶点坐标从world space转换到了eye space。

2_3106_e928f6f60b7fba0.png

  2.3,从eye space到project and clip space

  eye space坐标转换到project and clip space坐标的过程其实就是一个投影、剪裁、映射的过程。因为在不规则的视锥体内剪裁是一件非常困难的事,所以前人们将剪裁安排到一个单位立方体中进行,这个立方体被称为规范立方体(CCV),CVV的近平面(对应视锥体的近平面)的x、y坐标对应屏幕像素坐标(左下角0、0),z代表画面像素深度。所以这个转换过程事实上由三步组成:

  (1),用透视变换矩阵把顶点从视锥体变换到CVV中;

  (2),在CVV内进行剪裁;

  (3),屏幕映射:将经过前两步得到的坐标映射到屏幕坐标系上。

  2.4,primitive assembly(图元装配)和triangle setup(三角形处理)

  到目前为止我们得到了一堆顶点的数据,这一步就是根据这些顶点的原始连接关系还原出网格结构。网格由顶点和索引组成,这个阶段就是根据索引将顶点链接到一起,组成线、面单元,然后进行剪裁,如果一个三角形超出屏幕以外,例如两个顶点在屏幕内,一个顶点在屏幕外,这时我们在屏幕上看到的就是一个四边形,然后把这个四边形切成两个小的三角形。

  现在我们得到了一堆在屏幕坐标上的三角形面片,这些面片是用于光栅化的。

  3,光栅化阶段。

  经过上面的步骤之后,我们得到了每个点的屏幕坐标值,和我们需要绘制的图元,但此时还有两个问题:

  (1)屏幕坐标是浮点数,但像素是用整数来表示的,如何确定屏幕坐标值所对应的像素?

  (2)如何根据已确定位置的点,在屏幕上画出线段或者三角形?

  对于问题1,绘制的位置只能接近两指定端点间的实际线段位置,例如,一条线段的位置是(10.48, 20.51),转换为像素位置就是(10,21)。

  问题2,涉及到具体的画线和填充算法,有兴趣的话可以研究。

  这个过程结束后,顶点和图元已经对应到像素,之后的流程就是如何处理像素,即给像素赋予颜色值。

  给像素赋予颜色的阶段称为Pixel Operation,是在更新帧缓存之前,执行最后一系列针对每个片段的操作,其目的是计算出每个像素的颜色值。在这个阶段,被遮挡的面通过一个被称为深度测试的过程消除。

  pixel operation包含下面这些流程:

  (1)消除遮挡面;

  (2)Texture operation,纹理操作,根据像素的纹理坐标,查询对应的纹理值;

  (3)Blending,通常称为alpha blending,根据目前已经画好的颜色,与正在计算的颜色的alpha值混合,形成新的颜色。

  (4)Filtering,将正在计算的颜色经过某种滤镜后输出。

  该阶段之后,像素的颜色值被写入帧缓存中。


回复

使用道具 举报

4四处流浪
465/500
排名
3511
昨日变化
1

2

主题

62

帖子

465

积分

Rank: 4

UID
105883
好友
0
蛮牛币
821
威望
0
注册时间
2015-6-5
在线时间
131 小时
最后登录
2017-2-16
发表于 2016-10-15 23:19:11 | 显示全部楼层
看完了, 赞!

回复

使用道具 举报

排名
15350
昨日变化
18

0

主题

17

帖子

72

积分

Rank: 2Rank: 2

UID
76980
好友
0
蛮牛币
100
威望
0
注册时间
2015-3-4
在线时间
33 小时
最后登录
2017-1-19
发表于 2016-11-21 11:16:59 | 显示全部楼层
初学shader的过来看看,顺带顶一下,希望自己也能成为会写shader的大神啊!

回复 支持 反对

使用道具 举报

3偶尔光临
215/300
排名
7435
昨日变化
80

0

主题

74

帖子

215

积分

Rank: 3Rank: 3Rank: 3

UID
179635
好友
0
蛮牛币
355
威望
0
注册时间
2016-10-31
在线时间
41 小时
最后登录
2017-2-21
发表于 2016-12-8 10:18:07 | 显示全部楼层
黑の猫 发表于 2016-11-21 11:16
初学shader的过来看看,顺带顶一下,希望自己也能成为会写shader的大神啊!


    推荐帖子
    如何用shader模拟细胞自动机【含源码及教程视频】
    发工资了你会买PSVR吗?
    【2016年9月训练营】做一个类守望先锋的游
    时光煮雨 Unity3d 序列目标点的移动② 总结篇
    【知识摘录】Unity3d 虚拟摇杆实现

回复 支持 反对

使用道具 举报

排名
15350
昨日变化
18

0

主题

17

帖子

72

积分

Rank: 2Rank: 2

UID
76980
好友
0
蛮牛币
100
威望
0
注册时间
2015-3-4
在线时间
33 小时
最后登录
2017-1-19
发表于 2016-12-29 09:27:45 | 显示全部楼层
零点盛夏 发表于 2016-12-8 10:18
推荐帖子
    如何用shader模拟细胞自动机【含源码及教程视频】
    发工资了你会买PSVR吗?

非常感谢~~
[发帖际遇]: 一个袋子砸在了 黑の猫 头上,黑の猫 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

5熟悉之中
828/1000
排名
2905
昨日变化
16

4

主题

86

帖子

828

积分

Rank: 5Rank: 5

UID
76685
好友
0
蛮牛币
3750
威望
0
注册时间
2015-3-3
在线时间
406 小时
最后登录
2017-2-21
QQ
发表于 2017-1-3 14:29:44 | 显示全部楼层
图形学的教材 可以给推荐几本吗 先谢过

回复 支持 反对

使用道具 举报

排名
43461
昨日变化
172

0

主题

9

帖子

13

积分

Rank: 1

UID
203848
好友
0
蛮牛币
14
威望
0
注册时间
2017-1-21
在线时间
2 小时
最后登录
2017-2-5
发表于 2017-1-21 21:28:23 | 显示全部楼层
受教了!谢谢!

回复

使用道具 举报

3偶尔光临
154/300
排名
12105
昨日变化
283

0

主题

93

帖子

154

积分

Rank: 3Rank: 3Rank: 3

UID
204852
好友
0
蛮牛币
178
威望
0
注册时间
2017-2-3
在线时间
23 小时
最后登录
2017-2-21
发表于 2017-2-4 17:52:15 | 显示全部楼层
这网站资源不错,感谢楼主大大....

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表