OpenGL基础——渲染管线

OpenGL ES

简介

OpenGL 是 GPU 驱动的一套标准接口,OpenGL ES 为嵌入式设备 GPU 驱动(如手机)的标准接口。2003年由包含Apple、Intel、AMD、Google、ARM、Qualcomm、Nvidia 等170 家企业组成的开源、非盈利的成员驱动型组织khronos 制定了OpenGL ES标准并维护。

OpenGL ES 是 OpenGL 的子集,专门为嵌入式设备设计。2003年OpenGL ES1.0支持固定管线,2007年2.0支持可编程管线。可编程管线的出现极大程度的增加开发人员的自由度,通过着色器的编写实现不同的业务需求和效果。

OpenGL ES相较于OpenGL做了许多删减,以下列举出部分不同点。

  1. 在OpenGL ES的世界里,没有四边形、多边形,无论多复杂的图形都是由点、线和三角形组成的;
  2. 没有glBegin/glEnd/glVertex,只能用glDrawArrays/glDraw;
  3. 没有double型数据类型,但加入了高性能的定点小数数据类型;
  4. 没有实时将非压缩图片数据转成压缩贴图(纹理)的功能,程序必须直接提供压缩好的贴图;
  5. 删除了很多功能:显示列表、求值器、索引色模式等等;
  6. glDrawArrays等函数中数据必须紧密排列,即间隔为 0;
  7. 各种数据的堆栈深度较低。

OpenGL使用场景

OpenGL广泛应用于各图像处理领域,包括音视频开发、动画开发(实现动画的绘制)、游戏开发(游戏的场景、人物的渲染)、地图开发、视频处理(视频滤镜开发)。

图片4.png

快速入门的学习步骤

  1. 了解OpenGL渲染管线流程,包括流程中的各个步骤;
  2. 尝试构建EGL或使用封装好的GLSurface进行代码编写;
  3. 学习使用VBO、VAO、EBO等优化程序;
  4. 进一步学习纹理相关知识,了解纹理映射和FBO;
  5. 坐标系统、矩阵变换;
  6. 案例实践。

渲染管线

什么是管线

在计算机图形学中,计算机图形管线(渲染管线 或简称 图形管线)是一个概念模型,它描述了图形系统将 3D场景渲染到2D屏幕所需执行的步骤。

下图给出的是OpenGL渲染管线流程。顶点数据通过顶点着色器的位置变换后进行图元装配和光栅化,通过片段着色器对纹理进行处理和逐片段的混合裁剪等操作,最后渲染到屏幕上。每个流程的步骤将在后续内容中进一步介绍。

管线流程图.png

顶点/片段着色器

  • 着色器(Shader)是用来实现图像渲染的,用来替代固定渲染管线的可编辑程序。

  • 顶点着色器(Vertex Shader)主要负责顶点的几何关系等的运算。

  • 片段着色器(Vertex Shader)主要负责片源颜色等的计算。

Opengl API.jpg

顶点着色器

顶点着色器代码.png
  • 顶点坐标

  • 纹理坐标
    纹理坐标就是纹理与图形的映射关系,图形中每个顶点都会关联一个纹理坐标,表示顶点需要从该位置读取纹理图像的数据。

  • 采样器

    在后续的纹理处理中会用到的特殊变量,比如在实现画笔时,可以将画笔粗细和画笔随机角度作为两个不同的采样器传入。

  • 统一变量

    顶点着色器中不变的数据,通常会传入旋转矩阵实现模型-视图-投影坐标的变换。

在编写着色器时需要关注以下几点:

  1. 纹理坐标的范围是 0 到 1 之间;
  2. 顶点坐标一般是用( x,y,z)描述,纹理坐标是用( s,t,r)描述;
  3. 常规情况下,纹理坐标默认左下角为(0,0),右上角为(1,1)。
顶点着色器示例图.png

通过上述提及的旋转矩阵,可以将顶点坐标与纹理坐标的映射进行更改,从而达到下图不同的显示效果。

顶点坐标和纹理坐标对应.png

更加详细的OpenGL ES着色器和程序内容可以查看该篇内容OpenGL ES 着色器与程序解析

图元装配

在经过顶点变换等操作后得到的顶点数据会经过图元进行装配,得到既定好的图形。

图元primitive,即图形元素,是可以编辑的最小图形单位。图元是图形软件用于操作和组织画面的最基本的素材。一幅画面由图元组成,图元是一组最简单的、最通用的几何图形或字符。

图元装配.png
图元装配方式.png
  1. GL_POINTS:把每一个顶点作为一个点进行处理,顶点n即定义了点n,共绘制n个点。
  2. GL_LINES:把每一个顶点作为一个独立的线段,顶点2n-1和2n之间共定义了n个线段,总共绘制N/2条线段。如果N为奇数,则忽略最后一个顶点。
  3. GL_LINE_STRIP:绘制从第一个顶点到最后一个顶点依次相连的一组线段,第n和n+1个顶点定义了线段n,总共绘制N-1条线段。
  4. GL_LINE_LOOP:绘制从定义第一个顶点到最后一个顶点依次相连的一组线段,然后最后一个顶点与第一个顶点相连。第n和n+1个顶点定义了线段n,然后最后一个线段是由顶点N和1之间定义,总共绘制N条线段。
图元装配方式2.png
  1. 把每三个顶点作为一个独立的三角形。顶点3n-2,3n-1和3n定义了第n个三角形,总共绘制N/3个三角形。
  2. 绘制一组相连的三角形。对于奇数点n,顶点n,n+1和n+2定义了第n个三角形;对于偶数n,顶点n+1,n和n+2定义了第n个三角形,总共绘制N-2个三角形。
  3. 绘制一组相连的三角形。三角形是由第一个顶点及其后给定的顶点所确定。顶点1,n+1和n+2定义了第n个三角形。总共绘制N-2个三角形。

光栅化

数据经过图元装配后得到许多个图形集合,每个图形会经过光栅化得到一点点的像素。

光栅化.png
  • 形状图元:确定图元包含哪些由整数坐标确定的“小方块”(和屏幕像素对应,现在还不能叫片段,光栅化完成后才能叫片段)
  • 光栅化:确定这些小方块的Depth值和Color值(从图片顶点的Depth和Color插值得到),这些颜色后来可能被其他如纹理操作修改。

片段着色器

片段着色器会将顶点着色器中生成的插值数据进行输入,顶点着色器的输出通过图元装配后传递给片段着色器作为输入变量。详细内容同样在OpenGL ES 着色器与程序解析已详细介绍。

片段着色器.png
片段着色器代码.png

逐片段处理

逐片段处理中会可以对帧缓冲区中已有数据进行进一步处理,包括混合、裁剪等操作。

逐片段处理.png
  • 像素归属测试
    用来确定帧缓冲区中位置(x,y)的像素是不是归当前上下文所有。例如,如果一个显示帧缓冲区窗口被另一个窗口所遮蔽,则窗口系统可以确定被遮蔽的像素不属于此opengl的上下文,从而不显示这些像素
  • 混合
    将新生成的片段颜色值与保存在帧缓冲区的颜色值组合起来,产生新的RGBA。详细的混合使用和计算内容在另一篇OpenGL混合使用、算法和计算已详细介绍。
  • 剪裁测试
    如果该片段位于剪裁区域外,则被抛弃(如:对某颜色进行裁剪,得到特定图案)
  • 抖动
    颜色边缘的过渡柔和
  • 模板和深度测试
    若片段着色器返回的深度小于缓冲区中的深度,则舍弃
  • 透明度测试
    透明度测试

案例

通过上述介绍的流程,我们以下图为例简单概述下,具体使用场景可以是我们在触控屏的画板应用上进行绘画,类似与Procreate软件。

案例1.png
案例2.jpg
案例3.jpg
案例4.png

我们在画板上绘制一个房屋或一架飞机,绘制的线条可以看成是一个个点拼凑而成的。这些点就是顶点数据。顶点数据输入到顶点着色器中,通过变换矩阵正确转换成屏幕上的坐标,保证我们绘制的内容和呈现的内容不会出现偏差。有了顶点数据可以进行图元装配,得到多个飞机示例图右上角的三角形图元,通过光栅化和片段着色器处理进行纹理贴图等操作,最后显示在屏幕上。

总结

本部分内容的介绍能够帮助我们了解从基础数据到最终屏幕显示的整个渲染过程。高度自定义的部分包括着色器和逐片段的处理能够让开发者做许多原数据的后处理,比如图片视频滤镜、游戏场景渲染等。该部分内容也为后续的EGL构建、GLSL语言学习、纹理处理和实际案例编写打下基础。

附录

OpenGL ES 着色器与程序解析

OpenGL ES 混合使用、算法和计算

OpenGL ES 2D纹理载入和处理

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

推荐阅读更多精彩内容