OpenGL/OpenGL ES(一)基础知识

OpenGL

在开始 OpenGL ES 的学习之前,我们先来简单了解下它的由来。

计算机由 CPU、GPU、内存、总线等构成,全球有很多计算机制造商,导致市面上的计算机硬件架构各种各样,当然他们都有各自的优势,存在即合理。这些硬件会通过驱动运行并协作,使用驱动的人则是软件工程师,但总不能为不同硬件设置不同的驱动吧,所以为了统一,驱动都设置了标准接口,OpenGL 就是 GPU 驱动 的一套标准接口,OpenGL ES 为嵌入式设备 GPU 驱动(如手机)的标准接口,OpenGL ES 全称:OpenGL for Embedded Systems

OpenGL API 规模庞大且复杂,OpenGL ES 的目标是创建适合于受限设备的 API,为了实现这一目标,工作组从 OpenGL API 中删除了冗余,比如一个操作实现可以用多种方法,那么就留下最实用的方法,删除其他操作。

OpenGL 是可跨平台使用的 API,移动端使用 OpenGL ES 作为图形 API,苹果在 2014 年推出了 Metal 作为图形 API,但它们的一些专业名词、渲染过程等都是一样的。

图形API用处

可以简单的理解为实现了图形的底层渲染,比如

  • 1、游戏开发:游戏的场景、人物的渲染,这些都是由引擎去做的。
  • 2、音视频开发:视频解码后变成了二进制数据,利用OpenGL将这些数据渲染到屏幕。
  • 3、地图开发:地图引擎对地图数据的渲染
  • 4、动画开发:实现动画的绘制
  • 5、视频处理:视频滤镜开发

其实OpenGL、OpenGL ES、Metal的本质都是利用GPU芯片来实现高效的渲染图像,我们可以利用这些API操控GPU去完成我们想做的事。

OpenGL 专业名词解析

1、OpenGL上下文(context)
  • 在OpenGL每次执行指令前都需要创建一个上下文context,这个context是一个庞大的状态机,状态机保存了OpenGL中的各种状态,OpenGL执行指令的基础。
  • OpenGL的函数本质上是操作状态机的某个状态或对象,它是面向过程的,我们通过对OpenGL的指令进行封装来达到面向对象的效果。
  • OpenGL切换上下文需要很大的开销,有时不同的绘制模块需要完全独立的状态管理,所以一般会创建不同的上下文,在不同的线程上使用不同的上下文。上下文之间共享纹理、缓冲区等资源
2、状态机
  • OpenGL是基于状态机模式的,可以理解为一种理论上的机器,它有以下特点

    1、记忆功能:例如当前颜色是一个状态变量,若把当前颜色设置成白色或红色,之后绘制的物体将一直使用白色或红色,直到把当前颜色设置成别的颜色。

    2、接收输入:根据接收的内容和自己的状态,修改自己的状态,例如将当前颜色修改成黄色。

    3、当它进入某个特殊的状态时(如停机状态),它不再接收输入,停止工作,在程序退出前,OpenGL总会先停止工作。
3、渲染

将图形或图像数据转换成3D空间图像的操作叫做渲染。

4、顶点数组和顶点缓冲区

1、顶点数组:把一些顶点数据放在顶点数组中。顶点数据即图元,OpenGL中的图像都是由图元组成,有三种图元(点、线、三角形),每次绘制时,调用相应的绘制函数,从内存中取出顶点数据传入函数。
2、顶点缓冲区:为了性能,我们通常会先分配一块显存,把顶点数据预存储到显存中,这样GPU在渲染时直接从显存读取,速度要快很多。

5、管线

在OpenGL下渲染图形是按步骤执行的,这些步骤的顺序不能改变,我们把这个顺序称为渲染流程,流程称为管线。

6、固定管线/存储着色器

早期OpenGL封装了很多着色器程序块,这些程序块内部包含了光照、坐标变换、裁剪等功能,这些功能是由shader程序完成的,使得开发变得简单很多,但后期OpenGL使用的场景变多,固定管线或存储着色器无法满足复杂需求了,OpenGL便开放了两个模块可编程(这两个模块是渲染顺序中的其他两个步骤)。

7、着色器程序Shader

着色器是渲染3D图形的利器,由于固定管线自身提供的3D渲染功能有限,我们需要使用shader着色器来实现那些丰富且复杂的3D图形效果。

常见的着色器主要有

  • 顶点着色器(VertexShader)
  • 片元着色器(FragmentShader)/片段着色器/像素着色器(PixelShader)
  • 几何着色器(GeometryShader)
  • 曲面细分着色器(TesellationShader)

目前 OpenGL ES 3.0 只支持顶点着色器和片元着色器可编程。

OpenGL在处理着色器时,和其他编译器一样,需要经过编译、链接等步骤,如果我们要自定义着色器,就需要经过这些步骤,着色器程序同时包含了顶点着色器和片元着色器的运算逻辑。

OpenGL绘制过程如下:

  1. 顶点着色器对传入的数据进行运算
  2. 装配图元,将顶点数据转换为图元
  3. 光栅化,将图元转换成栅格化数据
  4. 将光栅化的数据传入片元着色器,片元着色器会一个个像素去计算,最终决定像素的颜色

综上,着色器的作用就是操作GPU做计算的。

7.1、顶点着色器(vertexShader)

顶点着色器是处理顶点数据的旋转、平移、投影等操作的,每个顶点数据都会经过一次顶点着色器处理,这个处理的操作是并行的,在顶点着色器处理顶点数据过程中,无法访问其他顶点数据。

通俗点讲,顶点数据是基于自身坐标系,我们可以看懂的三维坐标系,但想渲染到屏幕上需要转换成二维的归一化坐标系,顶点着色器就是干这个的。

7.2、片元着色器(FragmentShader)

片元着色器是处理像素点颜色的计算和填充,一个图像有成千上万个像素点,每个像素点都会经过一次片元着色器的处理,这个操作也是并行的,显然CPU做不到这么庞大的计算(CPU更擅长判断、调度),这个过程是在GPU上执行的。

8、GLSL(OpenGL Shading Lauguage)

这个语言和C语言类似,GLSL的着色器代码分为顶点着色器和片元着色器2部分,它是在GPU上执行的,使得渲染管线不同层次具有了可编程性。

9、光栅化

图形在经过顶点着色器转化成归一化的二维坐标系,经过光栅化处理后,转换为片元,而片元对应帧缓冲区中的像素点,这个过程会分配一个颜色值和一个深度值到各个区域,光栅化的过程即将一个几何图元变成二维图形

10、纹理

纹理可以简单的理解为图片,一个png或jpg图片要渲染到屏幕上,需要先由CPU解码成纹理,才能交付给GPU渲染到屏幕。

11、混合(blender)

有时像素点没有完全剔除,或两个颜色叠加,会出现混合的情况,OpenGL有提供具有混合算法的函数,但混合算法有限,如果需要复杂的混合算法,可以通过片元着色器实现,但性能略差于OpenGL的混合算法函数。

12、矩阵
  • 变换矩阵:图像的旋转、平移、缩放等操作都需要使用矩阵变换。
  • 投影矩阵:将3D坐标转换成2D屏幕坐标。
13、渲染上屏/帧缓冲(SwapBuffer)

要了解渲染上屏和帧缓冲,我们首先要了解屏幕上的图像是怎么显示的。

显示器的刷新是逐行进行的,渲染完一行接着渲染第二行,在整屏渲染完后会发送一个垂直信号,如下图所示。

15982699006325.png

显示器通过视频控制器指向的帧缓冲区读取数据打印到屏幕,帧缓冲区一般有两个以上,视频控制器指向的是屏幕缓冲区,未指向的是离屏缓冲区
GPU经过顶点着色器······片元着色器渲染,将数据存入离屏缓冲区,等待下一次垂直信号时,交换两个帧缓冲区,然后 GPU 接着渲染下一帧画面,存入当前的离屏缓冲区

上面描述的就是渲染上屏和交换缓冲区的概念,请参照下图理解。

15982652303103.png
14、2D坐标系、3D坐标系

2D坐标系就是X轴、Y轴,3D坐标系就是多了一个Z轴。

15、视口

视口是在窗口中用来显示图形的一块区域,它可以和窗口等大,也可以比窗口小,只有绘制在视口区域的图形才能显示,一般都是让视口和窗口等大,视口通过glViewPort()函数去设置。

16、正投影、透视投影

正投影:像照镜子一样,物体在镜子上是等大的,不会因为远近而放大缩小。一般平面图形会用正投影。

透视投影:和眼睛看到的效果一样,比如近处的人比远处的山高,一般立体图形会用透视投影

15982641632149.jpg
17、坐标系

规范化坐标系区间是[-1,1]。

17.1 摄像机坐标系

指从某个角度看向物体,起点为原点,上下为y轴,左右为x轴,上后为z轴

17.2 世界坐标系

世界坐标系是系统的绝对坐标系,在没有建立起用户坐标系以前,每个物体的坐标点都可以根据世界坐标系的原点确定位置。

17.3 物体坐标系

每个物体都有自己的坐标系,是相对于自己而言的。

17.4 惯性坐标系

惯性坐标系和物体坐标系的原点重合,但惯性坐标系的轴平行于世界坐标系,惯性坐标系到世界坐标系只需要平移,到物体坐标系只需要旋转。

15982643567631.jpg
17.5 总结

物体坐标到屏幕坐标需要经过下列步骤

物体坐标(模型变换)-> 世界坐标(视变换)-> 摄像机坐标(投影变换)-> 裁剪坐标(透视除法)-> 规范化坐标(视口变换)-> 屏幕坐标

15982640146345.jpg

OpenGL中,只定义了裁剪坐标系、规范化坐标系和屏幕坐标系,其他的坐标系都是为方便用户设计而自定义的坐标系。

模型变换、视变换、投影变换可以根据用户需求自行处理,在顶点着色器中完成
透视除法、视口变换是OpenGL自动完成的,在顶点着色器处理后的阶段完成。

18、着色器渲染流程

图片从文件渲染到屏幕的过程

总结

以上就是学习 OpenGL 所要具备的基础知识,不必完全弄明白,后面跟着 Demo 遇到不明白的术语来这里看一下,慢慢就熟悉了。

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

推荐阅读更多精彩内容