OpenGL ES — GLSL加載圖片紋理

函數介紹

• 建立着⾊器 GLuint glCreateShader(GLenum type) type — 建立着⾊器的類型,GL_VERTEX_SHADER或者GL_FRAGMENT_SHADER 返回值 — 是指向新着⾊器對象的句柄
• 刪除着⾊器對象句柄 void glDeleteShader(GLuint shader) shader — 要刪除的着⾊器對象句柄
• 將着色器源碼附加到着色器上 void glShaderSource(GLuint shader , GLSizei count ,const GLChar * const *string, const GLint *length) shader — 指向着⾊器對象的句柄 count — 着⾊器源字符串的數量,着⾊器能夠由多個源字符串組成,可是每一個着⾊器只有⼀個main函數 string — 指向保存數量的count 的着⾊器源字符串的數組指針 length — 指向保存每一個着⾊器字符串⼤⼩且元素數量爲count 的整數數組指針
• 編譯着色器源代碼 void glCompileShader(GLuint shader) shader — 須要編譯的着⾊器對象句柄 void glGetShaderiv(GLuint shader , GLenum pname , GLint *params ) shader — 須要編譯的着⾊器對象句柄 pname — 獲取的信息參數,能夠爲 GL_COMPILE_STATUS、GL_DELETE_STATUS、GL_INFO_LOG_LENGTH、GL_SHADER_SOURCE_LENGTH、GL_SHADER_TYPE params — 指向查詢結果的整數存儲位置的指針
• 獲取着⾊器的信息⽇志 void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog) shader — 須要獲取信息⽇志的着⾊器對象句柄 maxLength — 保存信息⽇志的緩存區⼤⼩ length — 寫⼊的信息⽇志的⻓長度(減去null 終⽌符)；若是不須要知道⻓長度。 這個參數能夠爲Null infoLog — 指向保存信息⽇志的字符緩存區的指針
• 建立程序對象 GLUint glCreateProgram( ) 返回值 返回⼀個執⾏新程序對象的句柄
• 刪除程序對象 void glDeleteProgram( GLuint program ) program 指向須要刪除的程序對象句柄
• 連接着色器對象 void glAttachShader( GLuint program , GLuint shader ) program 指向程序對象的句柄 shader 指向程序鏈接的着⾊器對象的句柄
• 斷開鏈接 void glDetachShader(GLuint program) program 指向程序對象的句柄 shader 指向程序斷開鏈接的着⾊器對象句柄
• 連接程序 glLinkProgram(GLuint program) program 指向程序對象句柄
• 檢查連接狀態 void glGetProgramiv (GLuint program,GLenum pname, GLint *params) program 須要獲取信息的程序對象句柄 params 指向查詢結果整數存儲位置的指針 pname 獲取信息的參數包括:

GL_ACTIVE_ATTRIBUTES
GL_ACTIVE_ATTRIBUTES_MAX_LENGTH
GL_ACTIVE_UNIFORM_BLOCK
GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH
GL_ACTIVE_UNIFROMS
GL_ACTIVE_UNIFORM_MAX_LENGTH
GL_ATTACHED_SHADERS
GL_DELETE_STATUS
GL_INFO_LOG_LENGTH
GL_LINK_STATUS
GL_PROGRAM_BINARY_RETRIEVABLE_HINT
GL_TRANSFORM_FEEDBACK_BUFFER_MODE
GL_TRANSFORM_FEEDBACK_VARYINGS
GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH
GL_VALIDATE_STATUS
複製代碼

• 從程序信息⽇志中獲取信息 void glGetPorgramInfoLog( GLuint program ,GLSizei maxLength, GLSizei *length , GLChar *infoLog ) program 指向須要獲取信息的程序對象句柄 maxLength 存儲信息⽇志的緩存區⼤⼩ ength 寫⼊的信息⽇志⻓長度(減去null 終⽌符)，若是不須要知道⻓長度,這個參數能夠爲Null infoLog 指向存儲信息⽇志的字符緩存區的指針
• 使用程序對象 void glUseProgram(GLuint program) program: 設置爲活動程序的程序對象句柄

GLSL 加載圖片的完整流程

完整代碼

• LLView.h

#import "LLView.h"
#import <OpenGLES/ES3/gl.h>

@interface LLView()
//在iOS和tvOS上繪製OpenGL ES內容的圖層，繼承於CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@property (nonatomic,strong) CAEAGLLayer *myEagLayer;
@property (nonatomic,strong) EAGLContext *myContext;

@property (nonatomic,assign) GLuint myColorRederBuffer;
@property (nonatomic,assign) GLuint myColorFrameBuffer;
@property (nonatomic,assign) GLuint myPrograme;

@end
複製代碼

• LLView.m
• 初始化

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self loadSubViews];
    }
    return self;
}
//自定義方法
- (void)loadSubViews {
    //1.設置圖層
    [self setupLayer];
    //2.設置圖形上下文
    [self setupContext];
    //3.清空緩存區
    [self clearRenderAndFrameBuffer];
    //4.設置RenderBuffer
    [self setupRenderBuffer];
    //5.設置FrameBuffer
    [self setupFrameBuffer];
    //6.開始繪製
    [self renderLayer];   
}
複製代碼

• 設置圖層

- (void)setupLayer {
    //1.建立特殊圖層
    /*
     重寫layerClass，將CCView返回的圖層從CALayer替換成CAEAGLLayer
     */
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
    //2.設置scale
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    
    //3.設置描述屬性，這裏設置不維持渲染內容以及顏色格式爲RGBA8
    /*
     kEAGLDrawablePropertyRetainedBacking  表示繪圖表面顯示後，是否保留其內容。
     kEAGLDrawablePropertyColorFormat
     可繪製表面的內部顏色緩存區格式，這個key對應的值是一個NSString指定特定顏色緩存區對象。默認是kEAGLColorFormatRGBA8；
     
     kEAGLColorFormatRGBA8：32位RGBA的顏色，4*8=32位
     kEAGLColorFormatRGB565：16位RGB的顏色，
     kEAGLColorFormatSRGBA8：sRGB表明了標準的紅、綠、藍，即CRT顯示器、LCD顯示器、投影機、打印機以及其餘設備中色彩再現所使用的三個基本色素。
                             sRGB的色彩空間基於獨立的色彩座標，可使色彩在不一樣的設備使用傳輸中對應於同一個色彩座標體系，而不受這些設備各自具備的不一樣色彩座標的影響。
     */
    NSDictionary *properyies = [[NSDictionary alloc]initWithObjectsAndKeys:@NO,kEAGLDrawablePropertyRetainedBacking,kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];
    self.myEagLayer.drawableProperties = properyies;
}
複製代碼

• 重寫layerClass

//重寫layerClass
+ (Class)layerClass {
    return [CAEAGLLayer class];
}
複製代碼

• 設置上下文

- (void)setupContext {
    //1.建立圖形上下文 ,指定OpenGL ES 渲染API版本，咱們使用3.0
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES3];
    //2.判斷是否建立成功
    if (!context) {
        NSLog(@"Create context failed");
        return;
    }
    //3.設置圖形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
    }
    //4.將局部context，變成全局的
    self.myContext = context;   
}
複製代碼

• 清空緩衝區

//3.清空緩存區
- (void)clearRenderAndFrameBuffer {
    /*
     buffer分爲frame buffer 和 render buffer2個大類。
     其中frame buffer 至關於render buffer的管理者。
     frame buffer object即稱FBO。
     render buffer則又可分爲3類。colorBuffer、depthBuffer、stencilBuffer。
    */
    glDeleteBuffers(1, &_myColorRederBuffer);
    self.myColorRederBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}
複製代碼

• 設置RenderBuffer

//4.設置RenderBuffer
- (void)setupRenderBuffer {
    //1.定義一個緩存區ID
    GLuint buffer;
    //2.申請一個緩存區標誌
    glGenRenderbuffers(1, &buffer);
    //3.賦值給全局
    self.myColorRederBuffer = buffer;
    //4.將標識符綁定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRederBuffer);
    //5.將可繪製對象drawable object's CAEAGLLayer的存儲綁定到OpenGL ES renderBuffer對象 [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer]; } 複製代碼

• 設置FrameBuffer

//5.設置FrameBuffer
- (void)setupFrameBuffer {
    //1.定義一個緩存區ID
    GLuint buffer;
    //2.申請一個緩存區標誌
    glGenFramebuffers(1, &buffer);
    //3.賦值給全局
    self.myColorFrameBuffer = buffer;
    //4.將標識符綁定到GL_RENDERBUFFER
    glBindFramebuffer(GL_FRAMEBUFFER, buffer);
    //5.將渲染緩存區myColorRenderBuffer 經過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER,   self.myColorRederBuffer);
}
複製代碼

• 開始繪製

-(void)renderLayer
{
    //設置清屏顏色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
    //1.設置視口大小
    CGFloat scale = [[UIScreen mainScreen]scale];
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
    
    //2.讀取頂點着色程序、片元着色程序
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
    
    NSLog(@"vertFile:%@",vertFile);
    NSLog(@"fragFile:%@",fragFile);
    
    //3.加載shader
    self.myPrograme = [self loadShaders:vertFile Withfrag:fragFile];
    
    //4.連接
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    //獲取連接狀態
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    
    NSLog(@"Program Link Success!");
    //5.使用program
    glUseProgram(self.myPrograme);
    
    //6.設置頂點、紋理座標
    //前3個是頂點座標，後2個是紋理座標
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,//0,1
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,//1,0
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,//1,1
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,//0,0
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,//1,0
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,//0,1
    };
    
    
    //7.-----處理頂點數據--------
    //(1)頂點緩存區
    GLuint attrBuffer;
    //(2)申請一個緩存區標識符
    glGenBuffers(1, &attrBuffer);
    //(3)將attrBuffer綁定到GL_ARRAY_BUFFER標識符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //(4)把頂點數據從CPU內存複製到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    //8.將頂點數據經過myPrograme中的傳遞到頂點着色程序的position
    //1.glGetAttribLocation,用來獲取vertex attribute的入口的.
    //2.告訴OpenGL ES,經過glEnableVertexAttribArray，
    //3.最後數據是經過glVertexAttribPointer傳遞過去的。
    
    //(1)注意：第二參數字符串必須和shaderv.vsh中的輸入變量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //(2).設置合適的格式從buffer裏面讀取數據
    glEnableVertexAttribArray(position);
    
    //(3).設置讀取方式
    //參數1：index,頂點數據的索引
    //參數2：size,每一個頂點屬性的組件數量，1，2，3，或者4.默認初始值是4.
    //參數3：type,數據中的每一個組件的類型，經常使用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認初始值爲GL_FLOAT
    //參數4：normalized,固定點數據值是否應該歸一化，或者直接轉換爲固定值。（GL_FALSE）
    //參數5：stride,連續頂點屬性之間的偏移量，默認爲0；
    //參數6：指定一個指針，指向數組中的第一個頂點屬性的第一個組件。默認爲0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    //9.----處理紋理數據-------
    //(1).glGetAttribLocation,用來獲取vertex attribute的入口的.
    //注意：第二參數字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //(2).設置合適的格式從buffer裏面讀取數據
    glEnableVertexAttribArray(textCoor);
    
    //(3).設置讀取方式
    //參數1：index,頂點數據的索引
    //參數2：size,每一個頂點屬性的組件數量，1，2，3，或者4.默認初始值是4.
    //參數3：type,數據中的每一個組件的類型，經常使用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認初始值爲GL_FLOAT
    //參數4：normalized,固定點數據值是否應該歸一化，或者直接轉換爲固定值。（GL_FALSE）
    //參數5：stride,連續頂點屬性之間的偏移量，默認爲0；
    //參數6：指定一個指針，指向數組中的第一個頂點屬性的第一個組件。默認爲0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //10.加載紋理
    [self setupTexture:@"xxx"];
    
    //11. 設置紋理採樣器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.繪圖
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.從渲染緩存區顯示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

複製代碼

• 加載紋理

- (GLuint)setupTexture:(NSString *)fileName {
    
    //一、將 UIImage 轉換爲 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判斷圖片是否獲取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    //二、讀取圖片的大小，寬和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.獲取圖片字節數 寬*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.建立上下文
    /*
     參數1：data,指向要渲染的繪製圖像的內存地址
     參數2：width,bitmap的寬度，單位爲像素
     參數3：height,bitmap的高度，單位爲像素
     參數4：bitPerComponent,內存中像素的每一個組件的位數，好比32位RGBA，就設置爲8
     參數5：bytesPerRow,bitmap的沒一行的內存所佔的比特數
     參數6：colorSpace,bitmap上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    //五、在CGContextRef上--> 將圖片繪製出來
    /*
     CGContextDrawImage 使用的是Core Graphics框架，座標系與UIKit 不同。UIKit框架的原點在屏幕的左上角，Core Graphics框架的原點在屏幕的左下角。
     CGContextDrawImage 
     參數1：繪圖上下文
     參數2：rect座標
     參數3：繪製的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默認方式繪製
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    //七、畫圖完畢就釋放上下文
    CGContextRelease(spriteContext);
    
    //八、綁定紋理到默認的紋理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.設置紋理屬性
    /*
     參數1：紋理維度
     參數2：線性過濾、爲s,t座標設置模式
     參數3：wrapMode,環繞模式
     */
    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;
    
    //10.載入紋理2D數據
    /*
     參數1：紋理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     參數2：加載的層次，通常設置爲0
     參數3：紋理的顏色值GL_RGBA
     參數4：寬
     參數5：高
     參數6：border，邊界寬度
     參數7：format
     參數8：type
     參數9：紋理數據
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.釋放spriteData
    free(spriteData);   
    return 0;
}

複製代碼

• 加載 shader

- (GLuint)loadShaders:(NSString *)vert withfrag:(NSString *)frag {
    //1.定義2個k臨時着色器對象
    GLuint verShader, fragShader;
    //建立program
    GLuint program = glCreateProgram();
    
    //2.編譯頂點着色程序、片元着色器程序
    //參數1：編譯完存儲的底層地址
    //參數2：編譯的類型，GL_VERTEX_SHADER（頂點）、GL_FRAGMENT_SHADER(片元)
    //參數3：文件路徑
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.把shader加載到program
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.釋放shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}
複製代碼

• 編譯shader

- (void)compileShader:(GLuint *)shader type:(GLenum )type file:(NSString *)file {
    //1.讀取文件路徑字符串
    NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar *source = [content UTF8String];
    
   //2.建立一個shader（根據type類型）
    *shader = glCreateShader(type);
    
    //3.將着色器源碼附加到着色器對象上。
    //參數1：shader,要編譯的着色器對象 *shader
    //參數2：numOfStrings,傳遞的源碼字符串數量 1個
    //參數3：strings,着色器程序的源碼（真正的着色器程序源碼）
    //參數4：lenOfStrings,長度，具備每一個字符串長度的數組，或NULL，這意味着字符串是NULL終止的
    glShaderSource(*shader, 1, &source, NULL);
    
    //4.編譯shader
    glCompileShader(*shader);
}
複製代碼

• vertexShader 代碼

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = position;
}
複製代碼

• fragShader 代碼

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
複製代碼

加載紋理的代碼到此結束，此時咱們運行會發現咱們加載的紋理是顛倒的。下篇介紹加載紋理顛倒的解決方案。