步驟
1玲销、初始化上下文;
2输拇、設(shè)置緩沖區(qū)
3、設(shè)置著色器
4贤斜、創(chuàng)建圖片紋理
5策吠、確定頂點(diǎn)坐標(biāo)，激活紋理瘩绒，渲染繪制
1猴抹、初始化
_eaglContext =[[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:_eaglContext];
_glLayer = (CAEAGLLayer*) self.layer;
// CALayer 默認(rèn)是透明的，必須將它設(shè)為不透明才能讓其可見(jiàn)
_glLayer.opaque = YES;
// 設(shè)置描繪屬性锁荔，在這里設(shè)置不維持渲染內(nèi)容以及顏色格式為 RGBA8
_glLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];
kEAGLColorFormatRGBA8:使用8位來(lái)保存RGBA的值;
kEAGLDrawablePropertyRetainedBacking:設(shè)置NO不保留之前繪制的圖像以用來(lái)重用;
2蟀给、綁定渲染緩沖及幀緩沖區(qū)
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);
渲染緩存:存儲(chǔ)繪制結(jié)果的緩沖區(qū)
幀緩存:接收渲染結(jié)果的緩沖區(qū)，為GPU指定存儲(chǔ)渲染結(jié)果的區(qū)域阳堕。
3跋理、設(shè)置著色器
//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);
//操作產(chǎn)生最后的可執(zhí)行程序，它包含最后可以在硬件上執(zhí)行的硬件指令恬总。
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);
}
//綁定著色器參數(shù)
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 創(chuàng)建一個(gè)代表shader的OpenGL對(duì)象, 指定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對(duì)象的信息
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
-
頂點(diǎn)著色器(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);
}
這里推薦一個(gè)介紹GLSL語(yǔ)言的博客前普，講的還是比較詳細(xì)的
4、創(chuàng)建圖片紋理
/**
* 創(chuàng)建圖片紋理
*/
-(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
{
//獲取圖片基本參數(shù)
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:指向繪圖操作被渲染的內(nèi)存區(qū)域壹堰，這個(gè)內(nèi)存區(qū)域大小應(yīng)該為（bytesPerRow*height）個(gè)字節(jié)拭卿。如果對(duì)繪制操作被
渲染的內(nèi)存區(qū)域并無(wú)特別的要求，那么可以傳遞NULL給參數(shù)data缀旁。
* width:代表被渲染內(nèi)存區(qū)域的寬度记劈。
* height:代表被渲染內(nèi)存區(qū)域的高度。
* bitsPerComponent:被渲染內(nèi)存區(qū)域中組件在屏幕每個(gè)像素點(diǎn)上需要使用的bits位并巍，舉例來(lái)說(shuō)目木，如果使用32-bit像素和
RGB顏色格式，那么RGBA顏色格式中每個(gè)組件在屏幕每個(gè)像素點(diǎn)上需要使用的bits位就為32/4=8。
* bytesPerRow:代表被渲染內(nèi)存區(qū)域中每行所使用的bytes位數(shù)刽射。
* colorspace:用于被渲染內(nèi)存區(qū)域的“位圖上下文”军拟。
* bitmapInfo:指定被渲染內(nèi)存區(qū)域的“視圖”是否包含一個(gè)alpha（透視）通道以及每個(gè)像素相應(yīng)的位置，除此之外還
可以指定組件式是浮點(diǎn)值還是整數(shù)值誓禁。
*/
CGContextRef contextRef = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
/**
* void CGContextTranslateCTM ( CGContextRef c, CGFloat tx, CGFloat ty )：平移坐標(biāo)系統(tǒng)懈息。
* 該方法相當(dāng)于把原來(lái)位于 (0, 0) 位置的坐標(biāo)原點(diǎn)平移到 (tx, ty) 點(diǎn)。在平移后的坐標(biāo)系統(tǒng)上繪制圖形時(shí)摹恰，所有坐標(biāo)點(diǎn)的 X 坐標(biāo)都相當(dāng)于增加了 tx辫继，所有點(diǎn)的 Y 坐標(biāo)都相當(dāng)于增加了 ty。
*/
CGContextTranslateCTM(contextRef, 0, height);
/**
* void CGContextScaleCTM ( CGContextRef c, CGFloat sx, CGFloat sy )：縮放坐標(biāo)系統(tǒng)俗慈。
* 該方法控制坐標(biāo)系統(tǒng)水平方向上縮放 sx姑宽，垂直方向上縮放 sy。在縮放后的坐標(biāo)系統(tǒng)上繪制圖形時(shí)闺阱，所有點(diǎn)的 X 坐標(biāo)都相當(dāng)于乘以 sx 因子炮车，所有點(diǎn)的 Y 坐標(biāo)都相當(dāng)于乘以 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);
//紋理設(shè)置
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 指定目標(biāo)紋理酣溃，這個(gè)值必須是GL_TEXTURE_2D瘦穆。
* level 執(zhí)行細(xì)節(jié)級(jí)別。0是最基本的圖像級(jí)別赊豌，你表示第N級(jí)貼圖細(xì)化級(jí)別扛或。
* internalformat 指定紋理中的顏色組件，這個(gè)取值和后面的format取值必須相同亿絮「婧埃可選的值有
GL_ALPHA,GL_RGB,GL_RGBA,GL_LUMINANCE,GL_LUMINANCE_ALPHA 等幾種。
* width 指定紋理圖像的寬度派昧，必須是2的n次方。紋理圖片至少要支持64個(gè)材質(zhì)元素的寬度
* height 指定紋理圖像的高度拢切，必須是2的m次方蒂萎。紋理圖片至少要支持64個(gè)材質(zhì)元素的高度
* border 指定邊框的寬度。必須為0淮椰。
* format 像素?cái)?shù)據(jù)的顏色格式五慈，必須和internalformatt取值必須相同≈魉耄可選的值有
GL_ALPHA,GL_RGB,GL_RGBA,GL_LUMINANCE,GL_LUMINANCE_ALPHA 等幾種泻拦。
* type 指定像素?cái)?shù)據(jù)的數(shù)據(jù)類型『雒剑可以使用的值有
GL_UNSIGNED_BYTE,
GL_UNSIGNED_SHORT_5_6_5,
GL_UNSIGNED_SHORT_4_4_4_4,
GL_UNSIGNED_SHORT_5_5_5_1
* pixels 指定內(nèi)存中指向圖像數(shù)據(jù)的指針
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
//綁定紋理位置
glBindTexture(GL_TEXTURE_2D, 0);
//釋放內(nèi)存
CGContextRelease(contextRef);
free(imageData);
return textureID;
}
5争拐、確定頂點(diǎn)坐標(biāo)，激活紋理晦雨，渲染繪制
//清屏
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
//設(shè)置繪制區(qū)域
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中取出圖像數(shù)據(jù)隘冲。
glUniform1i(_texture, 5); // 與紋理單元的序號(hào)對(duì)應(yīng)
//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: 著色器腳本對(duì)應(yīng)變量ID
* size : 此類型數(shù)據(jù)的個(gè)數(shù)
* type : 此類型的sizeof值
* normalized : 是否對(duì)非float類型數(shù)據(jù)轉(zhuǎn)化到float時(shí)候進(jìn)行歸一化處理
* stride : 此類型數(shù)據(jù)在數(shù)組中的重復(fù)間隔寬度，byte類型計(jì)數(shù)
* ptr : 數(shù)據(jù)指針绑雄， 這個(gè)值受到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
