先看最终的效果
效果的含义： 使用自定义着色器，实现纹理的一些简单效果。（旋转，移动，放缩） 步骤： 1.设置OpenGL ES 3.0环境 2.Shader和链接程序（myProgram）关联 3.绑定顶点坐标，纹理坐标 4.设置顶点属性对象 5.加载纹理 6.渲染 下面就拆分上面的6个步骤，详细讲解。 几乎每行代码都会增加注释
1.OpenGL ES 3.0环境
在iOS需要先引用 <OpenGLES/ES2/gl.h> <GLKit/GLKit.h>
- 上屏 上屏部分需要使用GLKView，CAEAGLLayer 其中GLKView初始化：
- (GLKView *)glkView {
if (_glkView == nil) {
_glkView = [[GLKView alloc] init];
_glkView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width);
_glkView.backgroundColor = [UIColor clearColor];
}
return _glkView;
}其中CAEAGLLayer初始化：
代码语言：javascript复制- (CAEAGLLayer *)myEagLayer {
if (_myEagLayer == nil) {
_myEagLayer = (CAEAGLLayer *)self.glkView.layer;
//设置放大倍数
[self.glkView setContentScaleFactor:[[UIScreen mainScreen] scale]];
// CALayer 默认是透明的，必须将它设为不透明才能让其可见
_myEagLayer.opaque = YES;
// 设置描绘属性，在这里设置不维持渲染内容以及颜色格式为 RGBA8
_myEagLayer.drawableProperties =
[NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithBool:NO],
kEAGLDrawablePropertyRetainedBacking,
kEAGLColorFormatRGBA8,
kEAGLDrawablePropertyColorFormat, nil];
_myEagLayer.backgroundColor = [UIColor clearColor].CGColor;
}
return _myEagLayer;
}- Context 还需要参数传递的上下文EAGLContext 其中EAGLContext初始化：
- (EAGLContext *)myContext {
if (_myContext == nil) {
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
_myContext = [[EAGLContext alloc] initWithAPI:api];
if (!_myContext) {
NSLog(@"Failed to initialize OpenGLES 3.0 context");
exit(1);
}
// 设置为当前上下文
if (![EAGLContext setCurrentContext:_myContext]) {
NSLog(@"Failed to set current OpenGL context");
exit(1);
}
}
return _myContext;
}在Context初始化完成之后。还需要给颜色缓存区，帧缓存区分配存储空间
代码语言：javascript复制// 为 颜色缓冲区 分配存储空间
- (void)setupRenderBuffer {
//声明缓存区的句柄
GLuint buffer;
//返回1个渲染缓冲区对象名
glGenRenderbuffers(1, &buffer);
//绑定
self.myColorRenderBuffer = buffer;
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
// 为 颜色缓冲区 分配存储空间
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
- (void)setupFrameBuffer {
GLuint buffer;
glGenFramebuffers(1, &buffer);
self.myColorFrameBuffer = buffer;
// 设置为当前 framebuffer
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
// 将 _colorRenderBuffer 装配到 GL_COLOR_ATTACHMENT0 这个装配点上
glFramebufferRenderbuffer(GL_FRAMEBUFFER,
GL_COLOR_ATTACHMENT0,
GL_RENDERBUFFER,
self.myColorRenderBuffer);
}2.Shader和链接程序（myProgram）关联
可以理解为程序对象是一个容器对象，可以将着色器与之连接，并且链接一个最终的可执行程序。 一旦创建了程序对象，下一步就是将着色器与之连接。每个程序对象必须连接一个顶点着色器和一个片段着色器。
代码语言：javascript复制- (GLuint)loadShaders:(NSString *)vert frag:(NSString *)frag {
GLuint verShader, fragShader;
GLint program = glCreateProgram();
//编译
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
//链接
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
//释放不需要的shader
glDeleteShader(verShader);
glDeleteShader(fragShader);
//返回链接程序
return program;
}一般来说，连接阶段是生成在硬件上运行的最终硬件指令的时候，在链接程序之后，你必须检查链接是否成功。可以通过glGetProgramiv获取链接状态。 在成功状态之后才可以使用glUseProgram方法。只有在glUseProgram之后program才可以正常使用。
代码语言：javascript复制//链接
glLinkProgram(self.myProgram);
GLint linkSuccess;
glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
if (linkSuccess == GL_FALSE) { //连接错误
GLchar messages[256];
glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
NSString *messageString = [NSString stringWithUTF8String:messages];
NSLog(@"error%@", messageString);
return ;
}
else {
NSLog(@"link ok");
glUseProgram(self.myProgram); //成功便使用，避免由于未使用导致的的bug
}3.绑定顶点坐标，纹理坐标
代码语言：javascript复制//前三个是顶点坐标， 后面两个是纹理坐标
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,
};
GLuint attrBuffer;
glGenBuffers(1, &attrBuffer);
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);4.设置顶点属性对象
代码语言：javascript复制 // 设置顶点属性对象
{
// 从着色器中取 position 的句柄
GLuint position = glGetAttribLocation(self.myProgram, "position");
glVertexAttribPointer(
//参数的句柄
position,
//指定顶点属性大小(矩阵的列数)
3,
//指定数据类型
GL_FLOAT,
//是否希望数据被标准化（归一化）
GL_FALSE,
//
sizeof(GLfloat) * 5,
//缓冲区起始位置的偏移量
NULL);
glEnableVertexAttribArray(position);
}
GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoordinate");
glVertexAttribPointer(textCoor,
2,
GL_FLOAT,
GL_FALSE,
sizeof(GLfloat) * 5,
(float *)NULL 3);
glEnableVertexAttribArray(textCoor);5.加载纹理
代码语言：javascript复制- (GLuint)setupTexture:(NSString *)fileName {
// 1获取图片的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);
// rgba共4个byte
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
CGContextRef spriteContext =
CGBitmapContextCreate(spriteData,
width, //单位为像素
height, //单位为像素
8, //内存中像素的每个组件的位数
width * 4,//每一行在内存所占的比特数
CGImageGetColorSpace(spriteImage),
kCGImageAlphaPremultipliedLast);
// 3在CGContextRef上绘图
CGContextDrawImage(spriteContext,
CGRectMake(0, 0, width, height),
spriteImage);
CGContextRelease(spriteContext);
// 4绑定纹理到默认的纹理ID
glGenTextures(1, &_myTexture0);
glBindTexture(GL_TEXTURE_2D, self.myTexture0);
// 纹理放大时，使用线性过滤(GL_NEAREST使用邻近过滤)
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;
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
free(spriteData);
return 0;
}6.渲染
代码语言：javascript复制- (void)renderDdvance {
//获取视图放大倍数
CGFloat scale = [[UIScreen mainScreen] scale];
//设置视口大小
glViewport(self.glkView.frame.origin.x * scale,
self.glkView.frame.origin.y * scale,
self.glkView.frame.size.width * scale,
self.glkView.frame.size.height * scale);
//读取文件路径
NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"Shader" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"Shader" ofType:@"fsh"];
//加载shader
self.myProgram = [self loadShaders:vertFile frag:fragFile];
//链接
glLinkProgram(self.myProgram);
GLint linkSuccess;
glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
if (linkSuccess == GL_FALSE) { //连接错误
GLchar messages[256];
glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
NSString *messageString = [NSString stringWithUTF8String:messages];
NSLog(@"error%@", messageString);
return ;
}
else {
NSLog(@"link ok");
glUseProgram(self.myProgram); //成功便使用，避免由于未使用导致的的bug
}
//前三个是顶点坐标， 后面两个是纹理坐标
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,
};
GLuint attrBuffer;
glGenBuffers(1, &attrBuffer);
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
// 设置顶点属性对象
{
// 从着色器中取 position 的句柄
GLuint position = glGetAttribLocation(self.myProgram, "position");
glVertexAttribPointer(
//参数的句柄
position,
//指定顶点属性大小(矩阵的列数)
3,
//指定数据类型
GL_FLOAT,
//是否希望数据被标准化（归一化）
GL_FALSE,
//
sizeof(GLfloat) * 5,
//缓冲区起始位置的偏移量
NULL);
glEnableVertexAttribArray(position);
}
GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoordinate");
glVertexAttribPointer(textCoor,
2,
GL_FLOAT,
GL_FALSE,
sizeof(GLfloat) * 5,
(float *)NULL 3);
glEnableVertexAttribArray(textCoor);
//加载纹理
[self setupTexture:@"abc"];
}
- (void)render {
glClearColor(0, 0, 0, 0);
glClear(GL_COLOR_BUFFER_BIT);
//获取rotate矩阵 的句柄
GLuint rotate = glGetUniformLocation(self.myProgram, "rotateMatrix");
float radians = -_currentRotationAngle * 3.14159f / 180.0f;
float s = sin(radians);
float c = cos(radians);
NSLog(@"arc:%ld",(long)_currentRotationAngle);
//z轴旋转矩阵
GLfloat zRotation[16] = { //
c, -s, 0, 0, //
s, c, 0, 0, //
0, 0, 1.0, 0, //
0, 0, 0, 1.0 //
};
//设置旋转矩阵
glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
glDrawArrays(GL_TRIANGLES, 0, 6);
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
_currentRotationAngle ;
if (_currentRotationAngle >= 360) {
_currentRotationAngle = 0;
}
[self performSelector:@selector(render) withObject:nil afterDelay:1/60];
}总结
讲解了着色器的创建，编译，和链接的方法。着色器对象和程序对象组成了OpenGL ES 3.0中的基本对象。
