游戏图形基础入门

一、游戏图像处理的基础:现代GPU可编程管线

GPU(显卡)制约着游戏图像效果的呈现,同时游戏图像的需求也反向促进着显卡的发展。

开始的时候GPU不能编程,也叫固定管线,只能实现固定的图像效果。而现在的显卡发展为可编程管线,通常使用的语言被称为高级着色语言(Shading Language),这才是现在游戏画面效果可以自由开发的前提。当前所有的游戏引擎,都以GPU提供的标准接口为基础实现画面渲染,只不过每家在中间的实现上各有侧重,有些引擎会包装一层更易用的界面,提供常用的材质效果,简化图像渲染开发流程。

渲染管线基本概念及流程

1,模型基础信息
模型的基本单位:顶点。顶点储存着坐标信息,编号索引,以此来标示出线、面、体的形状信息;同时有uv信息,标识此顶点平铺在贴图上的坐标;法线信息,标识出当前顶点所在平切面的垂直方向,一般用于平滑度的处理、光照、反射等计算。

2,引擎中的摄像机
引擎中的一次渲染流程,是以摄像机为单位。场景中必须有一个主摄像机,为屏幕上显示基本内容。场景可以有多个摄像机,分别渲染不同的物体,最后进行分层叠加处理。如UI部分可由单独的摄像机渲染,最后叠加到最上方。

3,顶点着色器
顶点着色器:可编程管线中第一个可编程的地方,主要处理顶点的信息,也是能使模型渲染在屏幕上的基础。
GPU运算特点:可同时并行进行巨量的运算。所以顶点的处理是独立进行的,顶点着色编程时,顶点相互之间没有关联,只能使用顶点自身包含的信息,和传入的全局信息(比如光照信息)。
坐标转换:顶点所在模型坐标空间 -> 世界空间(顶点在世界中的位置) -> 观察空间(顶点相对于摄像机的位置) -> 裁剪空间 -> 屏幕空间(最终体现到屏幕上的像素点位置)
其中裁剪空间转换是体现立体透视效果的基础,较难理解,以下图为例:


相机的裁切区域

其中锥形区域是摄像机的可视区域,由6个面组成,只有包含在其中的内容才可在屏幕上显示(如前面的球太近超出了近裁切面的内容不会被渲染,透出了后面的背景,远端同理)。相机的可视角度(FOV)决定了锥形区域的斜度,某些引擎会用接近真实摄像机的焦距等信息来进行表示再进行换算,FOV越大,则可视范围越大,同样的屏幕尺寸下会显示更多远处的物体,类似于广角镜头的效果;反之则类似于长焦镜头的效果,远端裁切面变小,而远处的物体在屏幕中所占的比例增大。而裁剪空间的转换,可想象成把锥形六面体的区域拉伸成正六面体,近端放大,里面的物体根据位置等比例放大,从摄像机的前后端平面大小一致,映射在平面上,即体现出了近大远小的透视关系。而正交镜头不存在可视角度,则为正六面体,近端、远端平面同样大,屏幕上物体就不存在透视关系。

4,光栅化和差值处理
经过顶点处理,已经可以把模型的顶点信息,映射到屏幕的像素坐标上,但只有顶点还不能完全填充屏幕,每三个顶点可以确认一个面,三角面才是真正渲染到屏幕上的内容。
这里为GPU 自动完成,上面的裁剪空间到屏幕空间转换一般也在这个阶段自动处理。
三个顶点构成的三角面映射到屏幕上,内部填充像素即为光栅化,其中每个像素的坐标信息、UV、信息、法线信息,都根据其距离三个顶点的位置,通过三个顶点的信息进行差值计算得来。注意:因为有透视关系的存在,差值并不等比例于屏幕坐标距离,而是由裁剪空间中的其次坐标计算。

5,片段着色器
顶点着色器:可编程管线中第二个可编程的地方,在光栅化完成后,对每个像素进行处理。所有需要精细到像素的渲染内容,都会在这一步进行处理。如颜色贴图、法线贴图等,就是在这一步获取到当前像素的UV坐标,去对应贴图上找到对应的像素点颜色即可。比如光照处理,如果没有法线贴图,那么光照的处理在上面的订单着色器计算,光照信息存在顶点中即可,这里每个像素会得到光照的平滑差值;如果需要用到法线贴图,那么光照的处理则要在片段着色器进行计算,因为需要根据每个像素的法线进行计算光照。注意,这里同样是GPU在进行大量的并行计算,每个像素处理都是独立进行没有关联(除了各种缓存),所以有些视觉效果用到了其他颜色信息、或者要处理到物体外部的内容(如外发光),需要结合后处理(Post-process)实现。最后的返回处理结果即为屏幕上像素的实际颜色(不考虑后面半透明物体、后处理效果、其他摄像机内容的叠加等情况)。

光照

不考虑最新的光线追踪,主流有两种渲染模式:前向渲染(Forward rendering)和延迟渲染(Deferred rendering),各有利弊。

1,前向渲染(Forward rendering)
最基础的渲染模式,只能处理较少的光源,性能较高,移动平台主流模式。
把物体根据离摄像机的距离由近到远排序依次渲染,在进行片段着色时不透明物体会记录z-buffer,后面的物体再进行渲染时被遮挡的像素可跳过。最后进行半透明物体的渲染进行颜色叠加。
但没有被遮挡的物体,几乎所有的顶点都会同时进行光照计算,所以场景内可见的顶点数量和光照数量(引擎会自动限制为之考虑距离最近的几个光源)是影响渲染性能的主要因素。
所以适合较少光源、较少顶点的场景,如大部分手机游戏。

2,延迟渲染(Deferred rendering)
延迟渲染为了避免前向渲染的缺点,在其基础上进行优化:
第一步,在顶点或片段着色器计算时先不进行光照计算,只处理基础的位置信息,并转换到屏幕空间,储存为G-Buffer。
第二部,当处理完所有物体信息,完成G-Buffer后,再根据G-Buffer中的信息进行光照计算。注意此时G-Buffer中的基础单位为屏幕空间中像素,这样需要计算光照的数量只为当前屏幕分辨率像素数量x光照数量,场景中可容纳更多的顶点和光照,而不会严重影响性能。
但其有一定的限制:比如需要更大的缓存空间和GPU的支持(G-Buffer),半透明物体需要进行额外的单独处理等。
延迟渲染模式下除了有顶点和光照的效果提升外,还因为其增加了G-Buffer,可以根据其储存的信息增加另外的画面优化效果,如屏幕空间反射(SSR)、环境光遮蔽(AO),这两者对于画面的整体质感提升有非常大的影响。

二、后期处理(Post-process)

主要应用有扩散光(Bloom)、模糊、描边的某些算法、去锯齿的某些算法等。
后期处理是在GPU渲染完一帧后,以一幅整体图像进行处理,可以想象成PS里的滤镜,可进行整体颜色风格的转换,而且还可以结合Z-Buffer或G-Buffer中的场景信息达成更多的效果,如AO,镜头景深效果等。

前面说过,GPU编程管线是以GPU并行计算的特点为基础,只能单独处理当前独立的信息,而涉及到整体画面效果的调整,就需要用到后期处理来实现。而后期处理的大部分运算会在CPU而非GPU上,所以大量使用也会对帧率有较大影响。
了解上面的基本知识,是为了能在调整游戏画面和风格时,知道从哪个方向着手才能达到自己想要的效果,还可以有能力在画面效果与性能上进行平衡取舍和优化。

三、画面效果呈现思路事例

1,卡通渲染思路:调高贴图饱和度;减少光照比例,使用贴图自发光颜色;光照暗部处理为非线性,而以阈值为界进行硬处理;光照暗部颜色增加互补色;增加描边;简化阴影等。

2,Low Poly风格思路:贴图使用中性偏高的饱和度;减少光照影响比例,使用自发光颜色;使用非常浅的软阴影;重点一定要使用AO效果并调优;灵活使用扩散光等。

3,写实风格:最简单的途径是使用引擎提供的PBR材质(Physically-Based Rendering 基于真实物理的渲染),配合材质编辑器。PBR材质本质也遵循上述的基本渲染流程,只不过暴露出的参数以真实世界的材质效果为基础,如基础颜色或贴图(漫反射颜色)、金属性或贴图(镜面反射率),粗糙度或贴图(表面平滑度),其中参数都可以用一个数值或一个贴图来表示,数值为物体整体参数设置,而贴图可以表示物体不同位置拥有不同的数值(黑0,白1,灰过度)。美术可以根据实际的生活经验调整数值来制作自己想要的材质,而不用考虑其内部的算法实现。

四、总结

游戏最终的画面效果,是从模型、贴图、灯光布局开始,结合材质(bpr或自定义shader或材质编辑器),和后期处理,三者相辅相成,最终共同作用的结果。其中对画面影响最大,可操作性最强的部分是材质部分,即GPU可编程管线的部分。无论BPR材质,还是UE中的材质编辑器,都基于上述的渲染流程,只不是过从具体的shader编程变成了更加易用的可视化界面。

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

推荐阅读更多精彩内容