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

利用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 函数指定图元连接方式进行绘制

在项目工程中添加一个空文件，并命名为 shaderv.vsh 。即顶点着色器文件。

注意： 文件中最好不要有注释 。

在项目工程中添加一个空文件，并命名为 shaderf.fsh 。即片元着色器文件。

文件中最好不要有注释

1、正弦波叠加为方波的GLSL实现；

1、傅里叶函数分解方波公式：

  f(y) = 4/PI * (sinx+ sin3x/3 + sin5x/5 + ...)

2、实际程序里面公式为：

  f(y) = sinx+ sin3x/3 + sin5x/5 + ...

3、键盘控制

  加入了正弦波合成方波的处理，使用箭头键移动正弦波，使用上下箭头进行振幅调整，使用+，-号来调整正弦波叠加的次数。

1、他山随悟博客 https://blog.csdn.net/t3swing/article/details/78471135

---