视频特效学习01-OpenGL初探

学习目标:

• 1. 图形API简介(了解)
• 2. OpenGL中专业名词解析(了解)
• 3. OpenGL坐标系解析(了解)
• 4. 图形\图片从文件渲染到屏幕过程解析(掌握)
• 5. 三角形渲染Demo(实践)
• 6. 正方形图形移动Demo(实践)
• 7. 绘制图形：三角形、正方形、圆、正弦函数(实践)

1.图形API简介

• OpenGL(Open Graphics Library): 是一种图形应用程序编程接口(Application Programming Interface，API)。它是一种可以对图形硬件设备特性进行访问的软件库，OpenGL被设计为一个现代化的、硬件无关的接口，因此我们可以在不考虑计算机操作系统或窗口系统的前提下，在多种不同的图形硬件系统上，完全通过软件的方式实现OpenGL的接口。其特点是跨编程语言、跨平台。

• OpenGL ES(OpenGL for Embedded Systems):是OpenGL的三维图形API的子集，针对手机、pad和游戏主机等嵌入式设备而设计的，去除了一些不必要和性能低的API接口。

• DirectX:是由微软公司创建的多媒体编程接口，是一种应用程序接口。只能使用在windows系统中，并不跨平台。按照性质分类，可以分为四大部分，显示部分、声音部分、输入部分和网络部分。

• Metal:是由苹果公司2014年推出的，提升了对3D图像渲染性能，苹果底层的渲染是由Metal来实现的。

使用场景：

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

本质：利⽤GPU芯⽚高效渲染图形图像。

2.OpenGL中专业名词解析

• 状态机：状态机是理论上的一种机器，描述了一个对象在其生命周期内所经历的各种状态，状态间的转变，发生转变的动因，条件及转变中所执行的活动。具有以下特点：有记忆功能，能记住当前的状态；可以接收输入，根据输入的内容和原先的状态修改自己当前的状态，并且可以有对应输出；当进入特殊状态(停机状态)的时候，不再接收输入，停止工作。

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

• OpenGL上下文(context):本身就是一个非常庞大的状态机(State Machine)，其状态通常被称为OpenGL上下文(Context)。

  • 1.它里面保存了一系列的变量用来描述OpenGL此刻需要如何运行，比如拍照时候要开启滤镜功能等。
  • 2.OpenGL使用C语言编写的，进而他的Api的封装也都是面向过程的，其函数本质上都是对OpenGL上下文状态机中的某个状态或者对象进行操作。
  • 3.应用程序中可以创建多个不同的上下文，他们分别在各自的线程中使用。上下文之间共享纹理，缓冲区等资源，采用这种方案更为高效，因为它避免了反复切换上下文，或者大量修改渲染状态所造成的较大的开销。

• 渲染：将图形\图像数据转换成3D空间的操作叫做渲染(Rendering)。

• 顶点数组(VertexArray)和顶点缓冲区(VertexBuffer)

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

• 管线：在OpenGL下渲染图形，就会经历一个个节点，就像流水线一样，可理解为渲染流水线。管线，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程的管理。图形渲染管线可以被划分为两个主要部分：第一部分把你的3D坐标转换为2D坐标，第二部分是把2D坐标转变为实际的有颜色的像素。管线可分为固定管线和可编程管线。

  • 固定管线：在早期的OpenGL版本，它封装了很多种着色器程序块，内置了一段包含光照、坐标转换、裁剪等诸多功能的固定shader程序，来帮助开发者完成图形的渲染。开发者只需要传入相应的参数，就能快速的完成图形的渲染。类似于ios开发会封装很多API，开发者只需要调用，不需要考虑底层的实现原理。
  • 可编程管线：但是由于OpenGL的场景非常丰富，固定管线无法完成每一个业务，这时将相关部分开放成可编程。
    举例：假设是一家制造肥皂的工厂，如果是固定管线生产，我们投入肥皂水(顶点数据等)通过管线生产出来的可能是比较固化的肥皂,方的、圆的等等。自由性差了许多。
    而如果是可编程管线造肥皂，那我们可以在肥皂水倒入磨具过程中，通过程序修改它的造型。比如修改成桃心等。

• 着色器(Shader)：由于需要使用可编程管线，而着色器就是这些可编程的程序片段，用来替代原始管线的特定渲染阶段。常见的着色器有顶点着色器(VertexShader)、片元着色器(FragmentShader)、几何着色器(GeometryShader)、曲⾯细分着色器(TessellationShader)。前两种是必须的，后面的是可选的。

  • 顶点着色器(VertexShader)：是OpenGL中用于计算顶点属性的程序。需要计算的顶点属性主要包括顶点坐标变换(旋转\平移\投影等)、顶点光照运算等。
  • 片元着色器：是OpenGL中用于计算片段(像素)颜色的程序。其特点是逐像素运算，也是并行的。可以用于复杂的混合算法。

• 光栅化(Rasterization)：光栅化就是把顶点数据转换为片元的过程。具有将图转化为一个个栅格的作用，其特点是每个元素对应帧缓冲区的一像素。本质是将几何图元变为二维图像的过程。改过程分为两部分工作。第一部分：决定窗口坐标中的哪些整型栅格区域被基本图元占用；第二部分：分配一个颜色值和深度值到各个区域。

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

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

3. OpenGL坐标系解析

• 变换矩阵：用于图形的平移、缩放、旋转等变换。
• 投影矩阵：用于3D坐标转换为二维屏幕坐标，线条也在二维坐标下进行绘制。
• 坐标系：OpenGL里每个顶点的z,y,z都应该在−1到1之间，超出这个范围的顶点将是不可见。顶点坐标在转换为屏幕坐标之前会变换多个坐标系统(Coordinate System)，之所以引入过渡坐标系是为了更加方便操作和运算。共有5中比较重要的坐标系系统：
  • 局部空间(Local Space)或者称为物体空间(Object Space)
  • 世界空间(Word Space)
  • 观察空间(View Space)或者称为视觉空间(Eye Space)
  • 裁剪空间(Clip Space)
  • 屏幕空间(Screen Space)

将顶点从一个坐标系转换到另一个坐标系需要用到几个变换矩阵，其中几个比较重要的是模型(Model)、观察(View)、投影(Projection)三个矩阵。物体顶点的起始坐标按序经过上述5个坐标系系统最终转换为屏幕坐标。顶点坐标转换的过程：物体顶点坐标-->局部坐标-->世界坐标-->观察坐标-->裁剪坐标-->屏幕坐标。在3D图形学中常用的坐标系：

• 世界坐标系：它是一个特殊的坐标系，它建立了描述其他坐标系所需要的参考系。也就是说，可以用世界坐标系去描述其他所有坐标系或者物体的位置。所以有很多人定义世界坐标系是“我们所关心的最大坐标系”，通过这个坐标系可以去"描述和刻画所有想刻画的实体"。世界坐标系始终是固定不变的。

• 物体坐标系：物体坐标系与特定的物体关联，每个物体都有他们独立的坐标系。不同物体之间的坐标系相互独立，可以相同，可以不同，没有任何联系。同时，物体坐标系与物体绑定，绑定的意思就是物体发生移动或者旋转，物体坐标系发生相同的平移或者旋转，物体坐标系和物体之间运动同步，相互绑定。
  举例说明一下物体坐标系：我们每个人都有自己的物体坐标系，当我们决定要往前走的时候，每个人实际前行的绝对方向都不一样，可能是向北，也可能向南，或者其他方向。这里前后左右是物体坐标系中的概念。当告诉张三往前走，就是张三同学沿着自己物体坐标系的前方运动。至于张三往前走是往东还是向北，这是张三的运动在世界坐标系下的描述。
  

  物体坐标系.png

• 摄像机坐标系：摄像机坐标系是和观察者密切相关的坐标系。摄像机坐标系和屏幕坐标系相似，差别在于摄像机坐标系处于3D空间中，而屏幕坐标系在2D平面。

  
  摄像机坐标系.png

• 惯性坐标系：惯性坐标系是为了简化世界坐标系到惯性坐标系的转化而产生的。惯性坐标系的原点与物体坐标系的原点重合，惯性坐标系的轴平行于世界坐标系的轴。引入了惯性坐标系之后，物体坐标系转换到惯性坐标系只需旋转，从惯性坐标系转换到世界坐标系只需平移。
  

  惯性坐标系的作用.png

• 模型变换：局部坐标系(模型坐标系)是为了方便构造模型而设立的坐标系，建立模型时我们无需关心最终对象显示在屏幕哪个位置。模型变换的主要目的是通过变换使得顶点属性定义或者3D建模软件构造的模型，能够按照需要，通过缩小、平移等操作放置到场景中合适的位置。通过模型变换后，物体放置在一个全局的世界坐标系中，世界坐标系是所有物体交互的一个公共坐标系。

• 视变换：视变换是为了方便观察场景中物体而设立的坐标系。

坐标转换过程

坐标变换.png

用户自定义变换和OpenGL变换

用户和OpenGL变换.png

• 图中左边的过程包括模型变换、视变换，投影变换，这些变换可以由用户根据需要自行指定，这些内容在顶点着色器中完成；
• 图中右边的两个步骤，包括透视除法、视口变换，是OpenGL自动执行的，在顶点着色器处理后的阶段完成。

4. 图形\图片从文件渲染到屏幕过程解析

OpenGL绘制过程：顶点着色器对顶点数据进行计算，再通过图元装配，将顶点转换成图元(点、线、三角形)，然后进行光栅化，把图元这种矢量图形，转化为栅格化数据，最后将栅格化数据传入片元着色器进行运算，片元着色器就会对栅格化中每个像素进行运算，并决定像素的颜色。顶点数据-->图元-->栅格化数据-->片元-->像素颜色。

图形渲染过程.png

• 初探OpenGL的Demo