02总结--001--OpenGL 初识

[TOC]

前言
万事开头难，是因为我们开头的时候不知道从哪入手学习 OpenGL 这个庞大的体系。
站在巨人的肩膀上，才能看的更远，走得更快。这里推荐 CC老师的简书
书籍是人类进步的阶梯，在 OpenGL 的学习中，有两本堪比圣经的书籍
红宝书：《OpenGL 编程指南》，当前版本是第9版
蓝宝书：《OpenGL 超级宝典》，当前版本是第5版

一、学习阶段

1.1 OpenGL 阶段：

• 熟悉图形图像API中的专有名词
• 熟悉图形图像常用处理手段，比如深度测试等
• 熟悉图形渲染流程
• 熟悉API使用

1.2 OpenGL ES 阶段：

• 熟练掌握 GLSL 语法
• 熟悉 GLKit 框架
• OpenGL ES 渲染流程
• 能通过案例灵活运用API

1.3 Metal 阶段：

• 熟悉 Metal Shading language
• 熟悉 Metal Kit
• 熟悉 Metal 渲染流程
• 能通过案例灵活运用API

二、OpenGL 初识

2.1 图形API简介

• OpenGL (Open Graphics Library) 是一个跨编程语言、跨平台的编程图形程序接口，它将计算机的资源抽象称为一个个 OpenGL对象，对这些资源的操作抽象为一个个的 OpenGL指令
• OpenGL ES (OpenGL for Embedded Systems)是 OpenGL 三维图形 API 的子集，针对手机、PAD和游戏主机等嵌入式设备而设计，去除了许多不必要和性能较低的 API 接口。
• Metal：Apple为游戏开发者退出了新的平台技术 Metal，该技术能够为 3D 图像提高 10 被的渲染性能。Metal 是 Apple 为了解决 3D 渲染而退出的框架。
• DirectX 是由很多 API 组成的，DirectX 并不是一个淡出的图形 API，最重要的是 DirectX 是属于Windows上一个多媒体处理API，并不支持 Windows 以外的平台，所以不是跨平台框架。按照性质分类，可以分为四大部分：显示部分、声音部分、输入部分和网络部分。

2.2 图形API目的解决什么问题

简单来说，就是实现图形的底层渲染

• 比如在游戏开发中，对于游戏场景、游戏人物的渲染
• 比如在音视频开发中，对于视频解码后的数据渲染
• 比如在地图引擎，对于地图上的数据渲染
• 比如在动画中，实现动画的绘制
• 比如在视频处理中，对于视频加上滤镜效果

OpenGL/OpenGL ES/Metal 在任何项目中解决问题的本质：
就是利用 GPU芯片 来高效渲染图形图像。
图形API是iOS开发者唯一接近GPU的方式。

2.3 OpenGL 专业名词解释[重点]

以下这些专有名词会贯穿整个 OpenGL 的学习，所以要对每一个名词都要烂熟于心。

OpenGL 上下文 [context]

• 在应用程序调用任何 OpenGL 的指令之前，需要安排首先创建一个OpenGL的上下文。这个上下文是给非常庞大的状态机，保存了OpenGL的各种状态，这也是OpenGL指令执行的基础
• OpenGL的函数不管是哪个语言中，都是类似C语言一样的面向过程的函数，本质上都是对 OpenGL 上下文这个庞大的状态机中某个状态或者对象进行操作，当然你得先把这个对象设置为当前对象。因此，通过对 OpenGL 指令的封装，是可以将 OpenGL 的相关调用封装成一个面向对象的图形API的
• 由于 OpenGL 上下文是一个巨大的状态机，切换上下文往往会产生较大的开销，但是不同的绘制模块，可能需要使用完全独立的状态管理。因此，可以在应用程序中分别创建多个不同的上下文，在不同线程中使用不同的上下文，上下文之间共享纹理、缓冲区等资源。这样的方案，会比反复切换上下文，或者大量修改渲染方案，更加合理高效。

OpenGL 状态机

• 状态机是理论上的一种机器。这个非常难以理解。所以我们把状态机这么理解：状态机描述了一个对象在其生命周期内所经历的各种状态、状态间的转变、发生转变的动因、条件及转变中所执行的活动。或者说，状态机是一种行为，说明对象在其声明周期中响应事件所经历的状态序列以及对那些状态事件的响应。因此具有以下特点：

  • 有记忆功能，能记住当前状态；
  • 可以接受输入，根据输入的内容和自己的原先状态，修改自己当前状态，并且可以有对应输出；
  • 当进入特殊状态（停机状态）的时候，便不再接受输入，停止工作；

• 类推到 OpenGL 中来，可以这么理解：

  • OpenGL 可以记录自己的状态（如当前所使用的颜色、是否开起来混合功能等）；
  • OpenGL 可以接受输入（当调用 OpenGL函数的时候，实际上可以看成 OpenGL 在接受我们的输入），如我们调用 glColor3f，则 OpenGL 接收到这个输入后会修改自己的“当前颜色”这个状态；
  • OpenGL 可以进入停止状态，不在接受输入。在程序退出前，OpenGL总会先停止工作的；

渲染（Rendering）

• 将图形/图像数据转换成 3D 空间图像

顶点数组（VertexArray）和顶点缓冲区（VertexBuffer）

• 图元：画图一般是先画好图像的骨架，然后再往骨架里面填充颜色，这对于 OpenGL 也是一样的。顶点数据就是要画的图像的骨架，和现实中不同的是，OpenGL 中的图像都是由 图元 组成；
• 图元的种类：在 OpenGL ES 中，有3中类型的图元：点、线、三角形。
• 顶点数组：那这些顶点数据最终是存储在哪里呢？开发者可以选择设定函数指针，在调用绘制方法的时候，直接由内存传入顶点数据，也就是说这部分数据之前是在内存当中，被称为顶点数组。
• 顶点缓冲区：而性能更高的做法是：提前分配一块显存，将顶点数据预先传入到显存当中。这部分的显存，就被称为顶点缓冲区。
• 顶点：指的是我们在绘制一个图形时。它的顶点位置数据，而这个数据可以直接存储在数组中，或者将其缓存到 GPU 内存中。

管线

• 在 OpenGL 下渲染图形，就会有经历一个一个节点，而这样的操作可以理解为管线，可以想象为流水线，每个任务类似流水般执行；
• 任务之间有先后顺序，这个顺序是不能打破的，管线是一个抽象的概念；
• 显卡在处理数据的时候是按照一个固定的顺序来的，而且严格按照这个顺序，就像水从一根馆子的一端流到另一端，这个书序是不能打破的。

固定管线/存储着色器

• 在早期的 OpenGL 版本中，它封装了很多种着色器，程序块内置一端包含了光照、坐标转换、裁剪等等诸多功能的固定 shader 程序来完成，来帮助开发者完成图形的渲染。而开发者只需要传入相应的参数，就能快速完成图形的渲染。类似于 iOS 开发会封装很多 API，而我们只需要调用，就可以实现功能，不需要关注底层实现原理；
• 但是由于 OpenGL 的使用场景非常丰富，固定管线或者存储着色器无法完成每一个业务。这是相关部分开放出可编程。

着色器程序 Shader

• 就全面的将固定渲染管线架构变为了可编程渲染管线。因此，OpenGL 在实际调用绘制函数之前，还需要指定一个由 Shader 编译成的着色器程序；

• 常见的着色器有：

  • 顶点着色器（VertexShader）
  • 片段着色器（FragmentShader）/像素着色器（PixelShader）
  • 几何着色器（GeometryShader）
  • 曲面细分着色器（TessellationShader）
  • 片段着色器和像素着色器 是在 OpenGL 和 DX 中的不同叫法
  • 直到OpenGLES3.0，依然只支持顶点着色器和片段着色器这两个最基础的着色器

• OpenGL在处理shader时，和其他编译器一样。通过编译、链接等步骤，生成了着色器程序（GLProgram）；

• 着色器程序同时包含了顶点着色器和片段着色器的运算逻辑。

• 在OpenGL进行绘制的时候，首先由顶点着色器对传入的顶点数据进行运算。再通过图元装配，将顶点转换为图元。然后进行光栅化，将图元这种矢量图形，转换为栅格化数据。最后，将栅格化数据传入片段着色器中进行运算。

• 片段着色器会对数据中的每一个像素进行运算，并决定像素的颜色。

顶点着色器（VertexShader）

• 一般用来处理图形每个顶顶啊变换（旋转、平移、投影等）
• 顶点着色器是 OpenGL 中用于计算顶点属性的程序，也就是说每个顶点数据都会执行一次顶点着色器，当然这是并行的，并且顶点着色器运算过程中无法访问其他顶点的数据
• 一般来说，典型的需要计算的顶点属性主要包括：顶点坐标变换、逐顶点关照运算等。顶点坐标由自身坐标系转换到归一化坐标系的运算，就是在这里发生的。

片段着色器程序（FragmentShader）

• 一般用来处理图形中每个像素点颜色计算和填充；
• 片段着色器是 OpenGL 中用于计算片段（像素）颜色的程序。
• 片段着色器是逐像素运算的程序，也就是说每个像素都会执行一次片段着色器，当前也是并行的

GLSL（OpenGL Shading Language）

• OpenGL 着色语言（OpenGL Shading Language）是用来在 OpenGL 中着色变成的语言，也即开发人员写的短小的自定义程序，他们是在图形卡的GPU（Graphic Processor Unit 图形处理单元）上执行的，代替了固定的渲染管线的一部分，使渲染管线中不同层次具有可编程性。比如：视图转换、投影转换等
• GLSL（GL Shading Language）的着色器代码分为2个部分：Vertex Shader（顶点着色器）和 Fragment Shader（片段着色器）

光栅化（Resterization）

• 是把顶点数据转换为片元的过程，具有将图转化为一个个栅格组成的图像的作用，特点是每个元素对应帧缓冲区中的一像素；

• 光栅化就是把顶点数据转换为片元的过程。片元的每一个元素对应与帧缓冲区中的一个像素；

• 光栅化其实是一种将集合图元变为二维图像的过程。该过程包含了两部分工作：

  • 第一部分工作：决定窗口坐标中的哪些正星栅格区域被基本图元占用；
  • 第二部分工作：分配一个颜色值和一个深度值到各个区域。光栅化过程产生的是片元

• 把物体的数学描述以及与物体相关的颜色信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色，这个过程称为光栅化，这是故意而将模拟信号转化为离散信号的过程

纹理

• 纹理可以理解为图片。大家在渲染图片时需要在其编码填充图片，为了使得场景更加逼真，而这里使用的图片，就是常数偶读纹理，但是在 OpenGL中，我们更加习惯叫纹理，而不是图片。

混合（Blending）

• 在测试阶段之后，如果像素依然没有被提出，那么像素的颜色将会和帧缓冲区中颜色附着上的颜色进行混合
• 混合的算法可以通过 OpenGL 的函数进行指定。但是 OpenGL 提供的混合算法是优先的，如果需要更加复杂的混合算法，一般可以通过像素着色器进行实现，当然性能会比原生的混合算法差一些。

变换矩阵（Transformation）

• 例如图形想发生平移、缩放、旋转变换，就需要使用变换矩阵

投影矩阵（Projection）

• 用于将3D坐标转换为二维屏幕坐标，实际线条也将在第二位坐标下进行绘制

渲染上屏/交换缓存区（SwapBuffer）

• 渲染缓冲区一般映射的是系统的资源，比如窗口。如果将图像直接渲染到串口对应的渲染缓冲区，则可以将图像显示到屏幕上；
• 但是，值的注意的是，如果每个窗口只有一个缓冲区，那么在绘制过程中屏幕进行了刷新，窗口可能显示出不完整的图像；
• 为了解决这个问题，常规的 OpenGL 程序至少都会有两个缓冲区。显示在屏幕上的称为屏幕缓冲区，没有显示的称为离屏缓冲区。在一个缓冲区渲染完成之后，通过屏幕缓冲区和离屏缓冲区交换，实现图像在屏幕上的显示；
• 由于显示器的刷新一般是逐行进行的，因此为了防止交换缓冲区的时候屏幕上下区域的图像分属于两个不同的帧，因此交换一般会等待显示器刷新完成的信号，在显示器两次刷新的间隔中进行交换，这个信号被称为垂直同步信号，这个技术被称为垂直同步；
• 使用了双缓冲区和垂直同步技术之后，由于总是要等待缓冲区交换之后再进行下一帧的渲染，是的帧率无法完全达到硬件允许的最高水平。为了解决这个问题，引入了三缓冲区技术，在等待垂直同步时，来回交换渲染两个离屏的缓冲区，而垂直同步发生时，屏幕缓冲区和最近渲染完成的离屏缓冲区交换，实现充分利用硬件性能的目的。

2.4 OpenGL下坐标系解析

这个有点抽象，需要多花点时间理解下

物体、世界、照相机空间 -> 右手系
规范空间 -> 左手系

2.5 图片/图形从文件渲染到屏幕过程解析

探讨iOS 中图片的解压缩到渲染过程

2.6 OpenGL 案例

上面看了这么多的理论知识，到这里终于可以开始从代码层面来认识 OpenGL 了。

案例01：固定管线下使用 OpenGL 渲染三角形

案例02：固定管线下使用 OpenGL 渲染正方形、并移动

案例03：固定管线下使用 OpenGL 绘制图形

• 三角函数

void draw() {

    glClear(GL_COLOR_BUFFER_BIT);
    
    const GLfloat factor = 0.1f;
    GLfloat x;
    
    /// 绘制坐标轴
    glBegin(GL_LINES);
    glColor3f(1.0f, 1.0f, 1.0f);
    // x 轴
    glVertex2f(-1.0f, 0.0f);
    glVertex2f(1.0f, 0.0f);
    // y 轴
    glVertex2f(0.0f, -1.0f);
    glVertex2f(0.0f, 1.0f);
    glEnd();
    
    /// 绘制曲线 : 正弦
    glBegin(GL_LINE_STRIP);
    glColor3f(1.0f, 0.0f, 0.0f);
    for (x=-1.0f/factor; x<1.0f/factor; x+=0.01f) {
        glVertex2f(x*factor, sin(x)*factor);
    }
    glEnd();
    
    /// 绘制曲线 : 余弦
    glBegin(GL_LINE_STRIP);
    glColor3f(0.0f, 1.0f, 0.0f);
    for (x=-1.0f/factor; x<1.0f/factor; x+=0.01f) {
        glVertex2f(x*factor, cos(x)*factor);
    }
    glEnd();
    
    /// 绘制曲线 : 正切
    glBegin(GL_LINE_STRIP);
    glColor3f(0.0f, 0.0f, 1.0f);
    for (x=-1.0f/factor; x<1.0f/factor; x+=0.01f) {
        glVertex2f(x*factor, tan(x)*factor);
    }
    glEnd();
    
    glFlush();
}

三角函数

三、总结

3.1 带着问题学习

OpenGL 本身就是一门比较晦涩的语言，如果我们在学习过程中没有任何的想法，完全是去读别人的思想，很难取得进展的。
只有自己最清楚自己不理解的地方，将这些地方提出来，在学习的过程中去寻找答案，你一定能收获到很多你自己意向不到的知识。

笔者这里在初始 OpenGL 的过程中存在以下一些问题：

• GPU渲染过程是咋样的？

  • 上下文切换
  • 垂直信号量
  • 当前屏幕和离屏的区别
  • 三屏渲染

• 显存是啥？

  • 显存存的是啥玩意，有啥作用
  • 显存在渲染中扮演啥角色

• CPU和GPU怎么通信

• 为啥要有GPU

  • GUP处理大量的渲染计算

3.2 获取其他资料

OpenGL 的API 相对于 iOS开发者来说，显得有一点晦涩难懂，体现在接口调用的方式、参数的设置、面向过程等，都会给我们带来极大的困惑，所以笔者这里找到了一本 OpenGL 的API手册，有中文注释，可查询方法，相对于直接看英文注释来说更加容易理解。

OpenGL4.5中文手册