OpenGLES入門 5 -- 紋理貼圖

步驟

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è)為不透明才能讓其可見
_glLayer.opaque = YES;
// 設(shè)置描繪屬性，在這里設(shè)置不維持渲染內(nèi)容以及顏色格式為 RGBA8
_glLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
                                     [NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];

kEAGLColorFormatRGBA8:使用8位來保存RGBA的值;
kEAGLDrawablePropertyRetainedBacking:設(shè)置NO不保留之前繪制的圖像以用來重用;

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對象, 指定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

  • 頂點(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語言的博客，講的還是比較詳細(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é)。如果對繪制操作被
     渲染的內(nèi)存區(qū)域并無特別的要求，那么可以傳遞NULL給參數(shù)data。
     *  width:代表被渲染內(nèi)存區(qū)域的寬度。
     *  height:代表被渲染內(nèi)存區(qū)域的高度。
     *  bitsPerComponent:被渲染內(nèi)存區(qū)域中組件在屏幕每個(gè)像素點(diǎn)上需要使用的bits位，舉例來說，如果使用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)于把原來位于 (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é)級別。0是最基本的圖像級別，你表示第N級貼圖細(xì)化級別。
     *  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取值必須相同?？蛇x的值有
     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); // 與紋理單元的序號對應(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: 著色器腳本對應(yīng)變量ID
     *     size : 此類型數(shù)據(jù)的個(gè)數(shù)
     *     type : 此類型的sizeof值
     *     normalized : 是否對非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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第三章 管線一覽 本章我們會(huì)學(xué)到什么 OpenGL管線的每個(gè)階段做什么的 如果連接著色器和固定功能管線階段 如果創(chuàng)...
    葭五閱讀 6,503評論 2贊 18
  • 你好，三角形 圖形渲染管線(Pipeline) 3D坐標(biāo)轉(zhuǎn)為2D坐標(biāo)的處理過程是由OpenGL的圖形渲染管線(Pi...
    IceMJ閱讀 7,639評論 2贊 13
  • <轉(zhuǎn)>我也忘了轉(zhuǎn)自哪里,抱歉,感謝原作者 什么是Shader Shader（著色器）是一段能夠針對3D對象進(jìn)行操作...
    星易乾川閱讀 5,851評論 1贊 16
  • 一、頂點(diǎn)與片段著色器簡介 Vertex and FragmentShader:最強(qiáng)大的Shader類型，也是本系列...
    半閑書屋半閑人閱讀 9,955評論 6贊 10
  • “我們今天沒見過白天什么樣子”這是和室友一起去工廠打零工之后，她的一句話，想了想，是真的。 早上六點(diǎn)起床，收拾完畢...
    喝露水的鷹閱讀 365評論 0贊 0

友情鏈接更多精彩內(nèi)容