一、前言
上次我写了一篇《OpenGL ES初探（下）—— GLKit》，使用 GLKit 加载了一个立体图形，但是我们知道苹果提供的 GLKit 的功能是有限的，所以这次我们就不用 GLKit 的 GLKBaseEffect，而使用编译链接自定义的着色器（shader），用简单的 GLSL 语言来实现顶点、片元着色器，并实现加载一张图片。
上一篇《OpenGL 着色语言 GLSL 语法介绍》已经对 GLSL 的语法进行了介绍，有语法不懂的地方可以去看看。
二、GLSL 加载图片的完整流程
学习时，最好是先总结出思维导图，可以帮助我们理解并记忆流程步骤，下面是我画的一张用 GLSL 加载图片的完整的思维导图，里面的如 setuplayer、setupContext 等函数是我根据步骤自己封装出来的，具体可看文末的整体源码。
GLSL加载图片总流程.jpeg
下面着重把绘制的步骤拆分开来，绘制了绘制部分的思维导图：
GLSL加载图片流程.png
三、编写GLSL文件
我们写的 GLSL 代码对 xcode 来说就是一长串的字符串，所以后缀名用什么都无所谓，当我们阅读 GPUImage 源码、ijkplayer 源码的时候，可以发现它们的 shader 就是用普通的字符串来存储的，这是没有任何问题的，缺点只是不易于阅读和书写。
所以我们一般会创建一个文件，后缀为“.vsh” 和 ".fsh"，“.vsh” 代表 verterx shader 顶点着色器，".fsh" 代表 fragment shader 片元着色器。
常用后缀有：“.vsh”、".fsh" 和通用后缀 “glsl”。
shader文件.png
如果着色器文件命名的是通用的后缀 “glsl”，那如何区分哪个是顶点着色器哪个是片元着色器？
顶点着色器里一定有对内建函数gl_Position的赋值，片元着色器内则有对内建函数gl_FragColor的赋值，可以以此来判断。
顶点着色器：
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main() {
varyTextCoord = textCoordinate;
gl_Position = position;
}
片元着色器：
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main() {
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
四、常用 API
下面介绍一些常用的 API。这些常用 API 我们务必要掌握记住，因为我们写的 GLSL 代码，并不是由 xcode 帮我们编译的，而是由我们开发者自行编译、自行 link、自行生成 program 的。
1、创建与编译一个着色器
（1）glCreateShader 创建着色器
GLuint glCreateShader(GLenum type);
- 参数 type：创建着色器的类型，
GL_VERTEX_SHADER或者GL_FRAGMENT_SHADER- 返回值：是指向新着⾊器对象的句柄，可以调⽤。
（2）glDeleteShader 删除着色器
void glDeleteShader(GLuint shader);
- 参数 shader：要删除的着⾊器对象句柄
（3）glShaderSource 将着色器源码附加到着色器对象上
void glShaderSource (GLuint shader, GLsizei count, const GLchar* const *string, const GLint* length);
- 参数1：shader 指向着⾊器对象的句柄。
- 参数2：count 着⾊器源字符串的数量，着⾊器可以由多个源字符串组成，但是每个着⾊器只有一个 main 函数。
- 参数3：strings 指向着色器源字符串的指针。
- 参数 length：长度，具有每个字符串长度的数组，或NULL，这意味着字符串是 NULL 终止的。
（4）glCompileShader 编译
void glCompileShader (GLuint shader)
- 参数 shader：需要编译的着⾊器对象的句柄。
2、创建并链接程序（program）
在 OpenGL ES 中，每个 program 对象有且仅有一个 Vertex Shader 对象和一个 Fragment Shader 对象连接到它。
（1）glCreateProgram 创建 program
GLuint glCreateProgram (void)
- 返回值：返回⼀个执行新程序对象的句柄。
（2）glDeleteProgram 删除 program
void glDeleteProgram(GLuint program)
- 参数 program：指向要删除的程序对象的句柄。
（3）glAttachShader 着色器与程序附着
void glAttachShader (GLuint program, GLuint shader)
- 参数1：program 指向程序对象的句柄。
- 参数2：shader 指向程序附着的着色器对象的句柄。
（4）glDetachShader 断开附着
void glDetachShader(GLuint program, GLuint shader)
- 参数1：program 指向程序对象的句柄。
- 参数2：shader 指向程序断开附着的着色器对象的句柄。
（5）glLinkProgram 链接程序
void glLinkProgram(GLuint program);
- 参数：program 指向程序对象的句柄。
（6）glGetProgramiv 判断是否链接成功
void glGetProgramiv (GLuint program, GLenum pname, GLint* params);
- 参数1：program 需要获取信息的程序对象的句柄。
- 参数2：pname 获取信息的参数，可以是：
GL_ACTIVE_ATTRIBUTES
GL_ACTIVE_ATTRIBUTES_MAX_LENGTH
GL_ACTIVE_UNIFORM_BLOCK
GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH
GL_ACTIVE_UNIFROMS
GL_ACTIVE_UNIFORM_MAX_LENGTH
GL_ATTACHED_SHADERS GL_DELETE_STATUS
GL_INFO_LOG_LENGTH
GL_LINK_STATUS
GL_PROGRAM_BINARY_RETRIEVABLE_HINT
GL_TRANSFORM_FEEDBACK_BUFFER_MODE
GL_TRANSFORM_FEEDBACK_VARYINGS
GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH
GL_VALIDATE_STATUS- 参数3：params 指向查询结果整数存储位置的指针。
（7）glUseProgram 使用 program
void glUseProgram (GLuint program);
- 参数：program 设为为活动程序的程序对象的句柄。
3、顶点着色器与片元着色器实现编译、绑定、连接。
（1）glGetAttribLocation 将顶点数据通过 myPrograme 传递到顶点着色程序的 position （传递attribute类型）
int glGetAttribLocation (GLuint program, const GLchar* name)
- 参数1：program 指定用哪个程序对象的句柄来传递数据。
- 参数2：name 顶点变量的名字，此字符串必须和 shaderv.vsh 中的输入变量：position 保持一致。
（2）glGetUniformLocation 将纹理采样器数据通过 myPrograme 传递到片元着色程序的 colorMap （传递uniform类型）
int glGetUniformLocation (GLuint program, const GLchar* name)
- 参数1：program 指定用哪个程序对象的句柄来传递数据。
- 参数2：name 纹理采样器变量的名字，此字符串必须和 shaderf.vsh 中的变量：colorMap 保持一致。
五、源码展示
顶点着色器 shaderv.vsh 和片元着色器 shaderf.fsh 的源码在文章开始已经给出，这里就不再重复。
1、头文件与属性声明
#import <OpenGLES/ES2/gl.h>
#import "WPView.h"
@interface WPView()
//在iOS和tvOS上绘制OpenGL ES内容的图层，继承与CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@property(nonatomic,strong)EAGLContext *myContext;
@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;
@property(nonatomic,assign)GLuint myPrograme;
@end
2、入口layoutSubviews 函数
- (void)layoutSubviews {
//1.设置图层
[self setupLayer];
//2.设置图形上下文
[self setupContext];
//3.清空缓存区
[self deleteRenderAndFrameBuffer];
//4.设置RenderBuffer
[self setupRenderBuffer];
//5.设置FrameBuffer
[self setupFrameBuffer];
//6.开始绘制
[self renderLayer];
}
// 重写layerClass，将CCView返回的图层从CALayer替换成CAEAGLLayer
+ (Class)layerClass {
return [CAEAGLLayer class];
}
3、设置图层 setupLayer 函数
// 1.设置图层
- (void)setupLayer {
//1.创建特殊图层
self.myEagLayer = (CAEAGLLayer *)self.layer;
//2.设置scale
[self setContentScaleFactor:[[UIScreen mainScreen]scale]];
//3.设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}
4、设置上下文 setupContext 函数
// 2.设置上下文
- (void)setupContext {
// 1.指定OpenGL ES 渲染API版本，我们使用2.0
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
// 2.创建图形上下文
EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
// 3.判断是否创建成功
if (!context) {
NSLog(@"Create context failed!");
return;
}
// 4.设置图形上下文
if (![EAGLContext setCurrentContext:context]) {
NSLog(@"setCurrentContext failed!");
return;
}
//5.将局部context，变成全局的
self.myContext = context;
}
5、清空缓存区 deleteRenderAndFrameBuffer 函数
// 3.清空缓存区
- (void)deleteRenderAndFrameBuffer {
/*
buffer分为frame buffer 和 render buffer2个大类。
其中frame buffer 相当于render buffer的管理者。
frame buffer object即称FBO。
render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
*/
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
6、设置 RenderBuffer setupRenderBuffer 函数
// 4.设置RenderBuffer
- (void)setupRenderBuffer {
//1.定义一个缓存区ID
GLuint buffer;
//2.申请一个缓存区标志
glGenRenderbuffers(1, &buffer);
//3.
self.myColorRenderBuffer = buffer;
//4.将标识符绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
//5.将可绘制对象drawable object's CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
7、设置 FrameBuffer setupFrameBuffer 函数
// 5.设置FrameBuffer
- (void)setupFrameBuffer {
//1.定义一个缓存区ID
GLuint buffer;
//2.申请一个缓存区标志
glGenBuffers(1, &buffer);
//3.
self.myColorFrameBuffer = buffer;
//4.
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
/*生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，
调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用
*/
//5.将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
8、开始绘制 renderLayer 函数
// 6.开始绘制
- (void)renderLayer {
glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
// 1.设置视口大小
CGFloat scale = [[UIScreen mainScreen]scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
// 2.读取顶点着色程序、片元着色程序
NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
//3.加载shader
self.myPrograme = [self loadShaders:vertFile Withfrag:fragFile];
//4.链接
glLinkProgram(self.myPrograme);
GLint linkStatus;
// 获取链接状态
glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
if (linkStatus == GL_FALSE) {
GLchar message[512];
glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
NSString *messageString = [NSString stringWithUTF8String:message];
NSLog(@"Program Link Error:%@",messageString);
return;
}
NSLog(@"Program Link Success!");
// 5.使用program
glUseProgram(self.myPrograme);
//6.设置顶点、纹理坐标
//前3个是顶点坐标，后2个是纹理坐标
GLfloat attrArr[] = {
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
-0.5f, -0.5f, -1.0f, 0.0f, 0.0f,
0.5f, 0.5f, -1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
};
//7.-----处理顶点数据--------
//(1)顶点缓存区
GLuint attrBuffer;
//(2)申请一个缓存区标识符
glGenBuffers(1, &attrBuffer);
//(3)将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
//(4)把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//8.将顶点数据通过myPrograme中的传递到顶点着色程序的position
//1.glGetAttribLocation,用来获取vertex attribute的入口的.
//2.告诉OpenGL ES,通过glEnableVertexAttribArray，
//3.最后数据是通过glVertexAttribPointer传递过去的。
//(1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
GLuint position = glGetAttribLocation(self.myPrograme, "position");
//(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(position);
//(3).设置读取方式
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
//9.----处理纹理数据-------
//(1).glGetAttribLocation,用来获取vertex attribute的入口的.
//注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
//(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(textCoor);
//(3).设置读取方式
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
//10.加载纹理
[self setupTexture:@"夏目"];
//11. 设置纹理采样器 sampler2D
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
//12.绘图
glDrawArrays(GL_TRIANGLES, 0, 6);
//13.从渲染缓存区显示到屏幕上
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
8.1、加载shader loadShaders 函数
// 加载shader
- (GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
//1.定义2个零时着色器对象
GLuint verShader, fragShader;
//创建program
GLint program = glCreateProgram();
//2.编译顶点着色程序、片元着色器程序
//参数1：编译完存储的底层地址
//参数2：编译的类型，GL_VERTEX_SHADER（顶点）、GL_FRAGMENT_SHADER(片元)
//参数3：文件路径
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
//3.创建最终的program程序，把shader附着上去
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
//4.释放不需要的shader
glDeleteShader(verShader);
glDeleteShader(fragShader);
return program;
}
8.2、从图片中加载纹理 setupTexture 函数
// 从图片中加载纹理
- (GLuint)setupTexture:(NSString *)fileName {
//1、将 UIImage 转换为 CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//判断图片是否获取成功
if (!spriteImage) {
NSLog(@"Failed to load image %@", fileName);
exit(1);
}
//2、读取图片的大小，宽和高
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
//3.获取图片字节数 宽*高*4（RGBA）
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
//4.创建上下文
/*
参数1：data,指向要渲染的绘制图像的内存地址
参数2：width,bitmap的宽度，单位为像素
参数3：height,bitmap的高度，单位为像素
参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
参数5：bytesPerRow,bitmap的没一行的内存所占的比特数，4代表rgba
参数6：colorSpace,bitmap上使用的颜色空间
参数7：kCGImageAlphaPremultipliedLast：RGBA
*/
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
//5、在CGContextRef上--> 将图片绘制出来
/*
CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
CGContextDrawImage
参数1：绘图上下文
参数2：rect坐标
参数3：绘制的图片
*/
CGRect rect = CGRectMake(0, 0, width, height);
//6.使用默认方式绘制
CGContextDrawImage(spriteContext, rect, spriteImage);
//7、画图完毕就释放上下文
CGContextRelease(spriteContext);
// 以上1-7步骤，就是在进行图片解压缩，在yyImage或SD中也可以看到
//8、绑定纹理到默认的纹理ID（
glBindTexture(GL_TEXTURE_2D, 0);
//9.设置纹理属性
/*
参数1：纹理维度
参数2：线性过滤、为s,t坐标设置模式
参数3：wrapMode,环绕模式
*/
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
float fw = width, fh = height;
//10.载入纹理2D数据
/*
参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
参数2：加载的层次，一般设置为0
参数3：纹理的颜色值GL_RGBA
参数4：宽
参数5：高
参数6：border，边界宽度
参数7：format
参数8：type
参数9：纹理数据
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
//11.释放spriteData
free(spriteData);
return 0;
}
效果图：
效果图.png
效果图成功显示出来了，但是却是倒置的，这种问题怎么解决呢？下一篇文章《OpenGL ES 纹理翻转的策略对比》我们一起聊聊几种解决办法，再比较一些他们的优劣吧！
转载请备注原文出处，不得用于商业传播——凡几多
网友评论