OpenGL ES 3.0 使用着色器（OC）
原创
先看最终的效果
效果的含义：
使用自定义着色器，实现纹理的一些简单效果。（旋转，移动，放缩）
步骤：
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，CAEAGLLaye
其中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初始化：
- (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初始化完成之后。还需要给颜色缓存区，帧缓存区分配存储空间
// 为 颜色缓冲区 分配存储空间
- (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;
// 设置为当前 framebuffe
glBindFramebuffer(GL\_FRAMEBUFFER, self.myColorFrameBuffer);
// 将 \_colorRenderBuffer 装配到 GL\_COLOR\_ATTACHMENT0 这个装配点上
glFramebufferRenderbuffer(GL\_FRAMEBUFFER,
GL\_COLOR\_ATTACHMENT0,
GL\_RENDERBUFFER,
self.myColorRenderBuffer);
}2.Shader和链接程序（myProgram）关联
可以理解为程序对象是一个容器对象，可以将着色器与之连接，并且链接一个最终的可执行程序。
一旦创建了程序对象，下一步就是将着色器与之连接。每个程序对象必须连接一个顶点着色器和一个片段着色器。
- (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);
//释放不需要的shade
glDeleteShader(verShader);
glDeleteShader(fragShader);
//返回链接程序
return program;
}一般来说，连接阶段是生成在硬件上运行的最终硬件指令的时候，在链接程序之后，你必须检查链接是否成功。可以通过glGetProgramiv获取链接状态。
在成功状态之后才可以使用glUseProgram方法。只有在glUseProgram之后program才可以正常使用。
//链接
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.绑定顶点坐标，纹理坐标
//前三个是顶点坐标， 后面两个是纹理坐标
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.设置顶点属性对象
// 设置顶点属性对象
{
// 从着色器中取 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.加载纹理
- (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.渲染
- (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"];
//加载shade
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中的基本对象。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
