步骤
1、初始化上下文;
2、设置缓冲区
3、设置着色器
4、创建图片纹理
5、确定顶点坐标，激活纹理，渲染绘制
1、初始化
_eaglContext =[[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:_eaglContext];
_glLayer = (CAEAGLLayer*) self.layer;
// CALayer 默认是透明的，必须将它设为不透明才能让其可见
_glLayer.opaque = YES;
// 设置描绘属性，在这里设置不维持渲染内容以及颜色格式为 RGBA8
_glLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];
kEAGLColorFormatRGBA8:使用8位来保存RGBA的值;
kEAGLDrawablePropertyRetainedBacking:设置NO不保留之前绘制的图像以用来重用;
2、绑定渲染缓冲及帧缓冲区
glGenRenderbuffers(1, &_colorRenderBuffer);
glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
[_eaglContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:_glLayer];
glGenFramebuffers(1,&_frameBuffer);
glBindFramebuffer(GL_FRAMEBUFFER,_frameBuffer);
glFramebufferRenderbuffer(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _frameBuffer);
渲染缓存:存储绘制结果的缓冲区
帧缓存:接收渲染结果的缓冲区，为GPU指定存储渲染结果的区域。
3、设置着色器
//shader
GLuint vertext =[self compileWithShaderName:@"Vertex" shaderType:GL_VERTEX_SHADER];
GLuint fragment =[self compileWithShaderName:@"Fragment" shaderType:GL_FRAGMENT_SHADER];
_glProgram =glCreateProgram();
glAttachShader(_glProgram, vertext);
glAttachShader(_glProgram, fragment);
//操作产生最后的可执行程序，它包含最后可以在硬件上执行的硬件指令。
glLinkProgram(_glProgram);
GLint linkSuccess = GL_TRUE;
glGetProgramiv(_glProgram, GL_LINK_STATUS,&linkSuccess);
if (linkSuccess ==GL_FALSE) {
GLchar glMessage[256];
glGetProgramInfoLog(_glProgram, sizeof(glMessage), 0, &glMessage[0]);
NSString *messageString = [NSString stringWithUTF8String:glMessage];
NSLog(@"program error %@", messageString);
exit(1);
}
//绑定着色器参数
glUseProgram(_glProgram);
_glPosition = glGetAttribLocation(_glProgram,"Position");
-(GLuint)compileWithShaderName:(NSString*)name shaderType:(GLenum)shaderType
{
//获取着色器文件
NSString *shaderPath =[[NSBundle mainBundle]pathForResource:name ofType:@"glsl"];
NSError *error;
NSString *strShader =[NSString stringWithContentsOfFile:shaderPath encoding:NSUTF8StringEncoding error:&error];
NSLog(@"strShader %@",strShader);
if (!strShader) {
NSLog(@"shader error %@",error.localizedDescription);
exit(1);
}
// 2 创建一个代表shader的OpenGL对象, 指定vertex或fragment shader
GLuint shaderHandler = glCreateShader(shaderType);
// 3 获取shader的source
const char* shaderString = [strShader UTF8String];
int shaderStringLength = (int)[strShader length];
glShaderSource(shaderHandler, 1, &shaderString, &shaderStringLength);
// 4 编译shader
glCompileShader(shaderHandler);
// 5 查询shader对象的信息
GLint compileSuccess;
glGetShaderiv(shaderHandler, GL_COMPILE_STATUS, &compileSuccess);
if (compileSuccess == GL_FALSE) {
GLchar messages[256];
glGetShaderInfoLog(shaderHandler, sizeof(messages), 0, &messages[0]);
NSString *messageString = [NSString stringWithUTF8String:messages];
NSLog(@"%@", messageString);
exit(1);
}
return shaderHandler;
}
着色器: 分为Vertex Shader 和Fragment Shader
-
顶点着色器(Vertex Shader):用于确定图形形状
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsFrag;
void main(void)
{
gl_Position = Position;
TextureCoordsFrag = TextureCoords;
}
-
片段着色器(Fragment Shader):用于确定图像绘制渲染的颜色
precision mediump float;
uniform sampler2D Texture;
varying vec2 TextureCoordsFrag;
void main(void)
{
vec4 mask = texture2D(Texture, TextureCoordsFrag);
gl_FragColor = vec4(mask.rgb, 1.0);
}
这里推荐一个介绍GLSL语言的博客，讲的还是比较详细的
4、创建图片纹理
/**
* 创建图片纹理
*/
-(void)initImageTexture
{
//获取图片
NSString *imgPath =[[NSBundle mainBundle]pathForResource:@"3D" ofType:@"png"];
NSData *data =[[NSData alloc]initWithContentsOfFile:imgPath];
UIImage *image =[UIImage imageWithData:data];
_textureID =[self createTextureWithImage:image];
}
-(GLuint)createTextureWithImage:(UIImage*)image
{
//获取图片基本参数
CGImageRef imageRef =[image CGImage];
GLuint width = (GLuint)CGImageGetWidth(imageRef);
GLuint height = (GLuint)CGImageGetHeight(imageRef);
CGRect rect = CGRectMake(0,0,width,height);
//绘制
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
void *imageData = malloc(width*height*4);
/**
* CGBitmapContextCreate(void * __nullable data,size_t width, size_t height, size_t
* bitsPerComponent, size_t bytesPerRow,CGColorSpaceRef cg_nullable space, uint32_t
* bitmapInfo)
* data:指向绘图操作被渲染的内存区域，这个内存区域大小应该为（bytesPerRow*height）个字节。如果对绘制操作被
渲染的内存区域并无特别的要求，那么可以传递NULL给参数data。
* width:代表被渲染内存区域的宽度。
* height:代表被渲染内存区域的高度。
* bitsPerComponent:被渲染内存区域中组件在屏幕每个像素点上需要使用的bits位，举例来说，如果使用32-bit像素和
RGB颜色格式，那么RGBA颜色格式中每个组件在屏幕每个像素点上需要使用的bits位就为32/4=8。
* bytesPerRow:代表被渲染内存区域中每行所使用的bytes位数。
* colorspace:用于被渲染内存区域的“位图上下文”。
* bitmapInfo:指定被渲染内存区域的“视图”是否包含一个alpha（透视）通道以及每个像素相应的位置，除此之外还
可以指定组件式是浮点值还是整数值。
*/
CGContextRef contextRef = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
/**
* void CGContextTranslateCTM ( CGContextRef c, CGFloat tx, CGFloat ty )：平移坐标系统。
* 该方法相当于把原来位于 (0, 0) 位置的坐标原点平移到 (tx, ty) 点。在平移后的坐标系统上绘制图形时，所有坐标点的 X 坐标都相当于增加了 tx，所有点的 Y 坐标都相当于增加了 ty。
*/
CGContextTranslateCTM(contextRef, 0, height);
/**
* void CGContextScaleCTM ( CGContextRef c, CGFloat sx, CGFloat sy )：缩放坐标系统。
* 该方法控制坐标系统水平方向上缩放 sx，垂直方向上缩放 sy。在缩放后的坐标系统上绘制图形时，所有点的 X 坐标都相当于乘以 sx 因子，所有点的 Y 坐标都相当于乘以 sy 因子。
*/
CGContextScaleCTM(contextRef, 1.0f, -1.0f);
CGColorSpaceRelease(colorSpace);
CGContextClearRect(contextRef, rect);
CGContextDrawImage(contextRef, rect, imageRef);
//生成纹理
glEnable(GL_TEXTURE_2D);
GLuint textureID;
glGenTextures(1,&textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
//纹理设置
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
/**
* void glTexImage2D(GLenum target,GLint level,GLint internalformat,GLsizei width,GLsizei
height,GLint border,GLenum format,GLenum type,const GLvoid * pixels);
* target 指定目标纹理，这个值必须是GL_TEXTURE_2D。
* level 执行细节级别。0是最基本的图像级别，你表示第N级贴图细化级别。
* internalformat 指定纹理中的颜色组件，这个取值和后面的format取值必须相同。可选的值有
GL_ALPHA,GL_RGB,GL_RGBA,GL_LUMINANCE,GL_LUMINANCE_ALPHA 等几种。
* width 指定纹理图像的宽度，必须是2的n次方。纹理图片至少要支持64个材质元素的宽度
* height 指定纹理图像的高度，必须是2的m次方。纹理图片至少要支持64个材质元素的高度
* border 指定边框的宽度。必须为0。
* format 像素数据的颜色格式，必须和internalformatt取值必须相同。可选的值有
GL_ALPHA,GL_RGB,GL_RGBA,GL_LUMINANCE,GL_LUMINANCE_ALPHA 等几种。
* type 指定像素数据的数据类型。可以使用的值有
GL_UNSIGNED_BYTE,
GL_UNSIGNED_SHORT_5_6_5,
GL_UNSIGNED_SHORT_4_4_4_4,
GL_UNSIGNED_SHORT_5_5_5_1
* pixels 指定内存中指向图像数据的指针
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
//绑定纹理位置
glBindTexture(GL_TEXTURE_2D, 0);
//释放内存
CGContextRelease(contextRef);
free(imageData);
return textureID;
}
5、确定顶点坐标，激活纹理，渲染绘制
//清屏
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
//设置绘制区域
glViewport(self.frame.size.width/2-50,self.frame.size.height/2-50,100,100);
//激活
glActiveTexture(GL_TEXTURE5); // 指定纹理单元GL_TEXTURE5
glBindTexture(GL_TEXTURE_2D, _textureID); // 绑定，即可从_textureID中取出图像数据。
glUniform1i(_texture, 5); // 与纹理单元的序号对应
//render
[self renderVertices];
// 使用完之后解绑GL_TEXTURE_2D
glBindTexture(GL_TEXTURE_2D, 0);
[_eaglContext presentRenderbuffer:GL_RENDERBUFFER];
-(void)renderVertices
{
GLfloat texCoords[] = {
0, 0,//左下
1, 0,//右下
0, 1,//左上
1, 1,//右上
};
/**
*void glVertexAttribPointer(GLuint index,GLint size,GLenum type,GLboolean normalized,GLsizei
* stride,const void *ptr)
* index: 着色器脚本对应变量ID
* size : 此类型数据的个数
* type : 此类型的sizeof值
* normalized : 是否对非float类型数据转化到float时候进行归一化处理
* stride : 此类型数据在数组中的重复间隔宽度，byte类型计数
* ptr : 数据指针， 这个值受到VBO的影响
*/
glVertexAttribPointer(_textureCoords, 2, GL_FLOAT, GL_FALSE, 0, texCoords);
glEnableVertexAttribArray(_textureCoords);
GLfloat vertices[] = {
-1, -1, 0, //左下
1, -1, 0, //右下
-1, 1, 0, //左上
1, 1, 0 //右上
};
glVertexAttribPointer(_glPosition, 3, GL_FLOAT, GL_FALSE, 0, vertices);
glEnableVertexAttribArray(_glPosition);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}
效果如下:
效果图.png
