NO.15 - OpenGL ES 使用GLSL加载图片

Posted 2023-03-11

参考技术A

利用GLSL自定义的着色去加载一张图片，效果图如下

整体流程图如下

流程中主要分为4个模块

项目的创建及自定义视图创建等，这里不作过多说明，主要说说着色器文件是如何创建的

自定义的着色器本质上其实是一个字符串，且在Xcode中编写时，是没有任何提示的，所以需要格外仔细！

顶点着色器

片与着色器

初始化主要分为4部分

setupLayer函数：创建图层
layer主要是用于显示OpenGL ES绘制内容的载体

setupContext函数：创建上下文
上下文主要是用于保存 OpenGL ES 中的状态，是一个状态机，不论是 GLKit 还是 GLSL ，都是需要 context 的，主要创建流程如下

deleteRenderAndFrameBuffer函数：清理缓存区
清理缓冲区的目的在于清除残留数据，防止残留数据对本次操作造成影响
需要清空两个缓存区： RenderBuffer和FrameBuffer

设置RenderBUffe & FrameBuffer
首先了解一下RenderBuffer和FrameBuffer

两者间的关系如下图：

setupRenderBuffer函数
主要是创建 RenderBufferID 并申请标识符，将标识符绑定至 GL_RENDERBUFFER ，并且将 layer 的相关存储绑定到 RenderBuffer 对象

setupFrameBuffer函数
主要是创建 FrameBuffer 的ID并申请标识符，将标识符绑定至 GL_FRAMEBUFFER ，然后将 RenderBuffer 通过 glFramebufferRenderbuffer 函数绑定到 FrameBuffer 中的 GL_COLOR_ATTACHMENT0 附着点上，通过 FrameBuffer 来管理 RenderBuffer ， RenderBuffer 存储相关数据到相应缓存区

绘制的整体流程图所示:

主要包含5部分

初始化
需要注意的是，需要将视口的大小设置为与屏幕大小一致

GLSL自定义着色器加载
自定义着色器的加载主要分为以下几步

读取自定义着色器
读取自定义着色器文件的前提是需要获得文件的路径，将其传入 loadShaders 函数进行加载

loadShaders函数 & compileShader函数

loadShaders 函数:分别将顶点着色器和片元着色器编译完成后，并返回着色器对应的 ID ，然后通过 glAttachShader 函数将顶点和片元的 shader 分别附着到 program 上，然后释放不再使用的 shader ，并赋值给全局的 program

链接program

使用program
通过 glUseProgram 函数来使用链接成功的 program

顶点数据设置及处理

通过数组存储顶点数据，并将顶点坐标和纹理坐标读取到自定义的顶点着色器中
分为以下三步

开辟顶点缓存区
开启顶点缓存区，这部分其实跟之前使用 GLKit 框架开启缓存区步骤是一致的，没什么变化，有以下四步

打开顶点/片元的通道
在 ios 中， attribute 通道默认是关闭的，需要手动开启，而数据有顶点坐标和纹理坐标两种，需要分别开启两次，这里的开启与 GLKit 框架中是有所区别的，

使用自定义着色器打开通道，一般有以下三步（相对于 GLKit 而言，只多了一个获取入口的步骤，后面两步是没有多大变化的）

加载纹理
这部分的内容主要是将 png/jpg 图片解压成位图，并通过自定义着色器读取纹理每个像素点的纹素，包含两部分
setupTexture函数
将 png/jpg 解压成位图，加载成纹理数据，其中纹理的解压缩使用的都是 CoreGraphic ，加载纹理的流程如下图

设置纹理采样器

主要是获取纹理中对应像素点的的颜色值，即纹素

绘制
开始绘制，存储到 RenderBuffer ,从 RenderBuffer 将图片显示到屏幕上

*调用 glDrawArrays 函数指定图元连接方式进行绘制