OpenGL學習（十一）-- 用 GLSL 實現加載圖片

時間 2019-11-07

標籤 opengl 學習十一 glsl 實現加載圖片简体版

原文原文鏈接

個人 OpenGL 專題學習目錄，但願和你們一塊兒學習交流進步！api

OpenGL學習（一）-- 術語瞭解

OpenGL學習（二）-- Xcode 搭建 OpenGL 環境

OpenGL學習（三）-- OpenGL 基礎渲染

OpenGL學習（四）-- 正面&背面剔除和深度測試

OpenGL學習（五）-- 裁剪與混合

OpenGL學習（六）-- 基礎紋理

OpenGL學習（七）-- 基礎變化綜合練習實踐總結

OpenGL學習（八）-- OpenGL ES 初探（上）

OpenGL學習（九）-- OpenGL ES 初探（下）GLKit

OpenGL學習（十）-- 着色語言 GLSL 語法介紹

OpenGL學習（十一）-- 用 GLSL 實現加載圖片

OpenGL學習（十二）-- OpenGL ES 紋理翻轉的策略對比

1、前言

上次我寫了一篇 OpenGL學習（九）-- OpenGL ES 初探（下）GLKit，使用 GLKit 加載了一個立體圖形，可是咱們知道蘋果提供的 GLKit 的功能是有限的，因此此次咱們就不用 GLKit 的 GLKBaseEffect，而使用編譯連接自定義的着色器 （shader），用簡單的 GLSL 語言來實現頂點、片元着色器，並實現加載一張圖片。上一篇 OpenGL學習（十）-- 着色語言 GLSL 語法介紹 已經對 GLSL 的語法進行了介紹，有語法不懂的地方能夠去看看。數組

2、GLSL 加載圖片的完整流程

學習時，最好是先總結出思惟導圖，能夠幫助咱們理解並記憶流程步驟，下面是我畫的一張用 GLSL 加載圖片的完整的思惟導圖，裏面的如 setuplayer、setupContext 等函數是我根據步驟本身封裝出來的，具體可看文末的總體源碼。 xcode

下面着重把繪製的步驟拆分開來，繪製了繪製部分的思惟導圖：緩存

3、編寫GLSL文件

咱們寫的 GLSL 代碼對 xcode 來講就是一長串的字符串，因此後綴名用什麼都無所謂，當咱們閱讀 GPUImage 源碼、ijkplayer 源碼的時候，能夠發現它們的 shader 就是用普通的字符串來存儲的，這是沒有任何問題的，缺點只是不易於閱讀和書寫。bash

因此咱們通常會建立一個文件，後綴爲 「.vsh」 和 ".fsh"，「.vsh」 表明 verterx shader 頂點着色器，".fsh" 表明 fragment shader 片元着色器。經常使用後綴有：「.vsh」、".fsh" 和通用後綴 「glsl」。框架

若是着色器文件命名的是通用的後綴 「glsl」，那如何區分哪一個是頂點着色器哪一個是片元着色器？頂點着色器裏必定有對內建函數 gl_Position 的賦值，片元着色器內則有對內建函數 gl_FragColor 的賦值，能夠以此來判斷。函數

頂點着色器：post

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

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

片元着色器：學習

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

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

4、經常使用 API

下面介紹一些經常使用的 API。這些經常使用 API 咱們務必要掌握記住，由於咱們寫的 GLSL 代碼，並非由 xcode 幫咱們編譯的，而是由咱們開發者自行編譯、自行 link、自行生成 program 的。測試

一、建立與編譯一個着色器

（1）`glCreateShader` 建立着色器

GLuint glCreateShader(GLenum type);
複製代碼

參數 type： 建立着色器的類型，GL_VERTEX_SHADER 或者 GL_FRAGMENT_SHADER

返回值： 是指向新着⾊器對象的句柄，能夠調⽤。

（2）`glDeleteShader` 刪除着色器

void glDeleteShader(GLuint shader);
複製代碼

參數 shader： 要刪除的着⾊器對象句柄

（3）`glShaderSource` 將着色器源碼附加到着色器對象上

void glShaderSource (GLuint shader, GLsizei count, const GLchar* const *string, const GLint* length);
複製代碼

參數 1：shader 指向着⾊器對象的句柄。

參數 2：count 着⾊器源字符串的數量，着⾊器能夠由多個源字符串組成，可是每一個着⾊器只有一個 main 函數。

參數 3：strings 指向着色器源字符串的指針。

參數 length： 長度，具備每一個字符串長度的數組，或 NULL，這意味着字符串是 NULL 終止的。

（4）`glCompileShader` 編譯

void glCompileShader (GLuint shader) 
複製代碼

參數 shader： 須要編譯的着⾊器對象的句柄。

二、建立並連接程序（program）

在 OpenGL ES 中，每一個 program 對象有且僅有一個 Vertex Shader 對象和一個 Fragment Shader 對象鏈接到它。

（1）`glCreateProgram` 建立 program

GLuint glCreateProgram (void)
複製代碼

返回值： 返回⼀個執行新程序對象的句柄。

（2）`glDeleteProgram` 刪除 program

void glDeleteProgram(GLuint program)
複製代碼

參數 program： 指向要刪除的程序對象的句柄。

（3）`glAttachShader` 着色器與程序附着

void glAttachShader (GLuint program, GLuint shader)
複製代碼

參數 1：program 指向程序對象的句柄。

參數 2：shader 指向程序附着的着色器對象的句柄。

（4）`glDetachShader` 斷開附着

void glDetachShader(GLuint program, GLuint shader)
複製代碼

參數 1：program 指向程序對象的句柄。

參數 2：shader 指向程序斷開附着的着色器對象的句柄。

（5）`glLinkProgram` 連接程序

void glLinkProgram(GLuint program);
複製代碼

參數：program 指向程序對象的句柄。

（6）`glGetProgramiv` 判斷是否連接成功

void glGetProgramiv (GLuint program, GLenum pname, GLint* params);
複製代碼

參數 1：program 須要獲取信息的程序對象的句柄。

參數 2：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

參數3：params 指向查詢結果整數存儲位置的指針。

（7）`glUseProgram` 使用 program

void glUseProgram (GLuint program);
複製代碼

參數：program 設爲爲活動程序的程序對象的句柄。

三、頂點着色器與片元着色器實現編譯、綁定、鏈接。

（1）`glGetAttribLocation` 將頂點數據經過 myPrograme 傳遞到頂點着色程序的 position （傳遞`attribute`類型）

int glGetAttribLocation (GLuint program, const GLchar* name)
複製代碼

參數 1：program 指定用哪一個程序對象的句柄來傳遞數據。

參數 2：name 頂點變量的名字，此字符串必須和 shaderv.vsh 中的輸入變量：position 保持一致。

（2）`glGetUniformLocation` 將紋理採樣器數據經過 myPrograme 傳遞到片元着色程序的 colorMap （傳遞`uniform`類型）

int glGetUniformLocation (GLuint program, const GLchar* name)
複製代碼

參數 1：program 指定用哪一個程序對象的句柄來傳遞數據。

參數 2：name 紋理採樣器變量的名字，此字符串必須和 shaderf.vsh 中的變量：colorMap 保持一致。

5、源碼展現

頂點着色器 shaderv.vsh 和片元着色器 shaderf.fsh 的源碼在文章開始已經給出，這裏就再也不重複。

一、頭文件與屬性聲明

#import <OpenGLES/ES2/gl.h>
#import "WPView.h"
@interface WPView()

//在iOS和tvOS上繪製OpenGL ES內容的圖層，繼承與CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@property(nonatomic,strong)EAGLContext *myContext;
@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;
@property(nonatomic,assign)GLuint myPrograme;
@end
複製代碼

二、入口`layoutSubviews` 函數

- (void)layoutSubviews {
    //1.設置圖層
    [self setupLayer];
    //2.設置圖形上下文
    [self setupContext];
    //3.清空緩存區
    [self deleteRenderAndFrameBuffer];
    //4.設置RenderBuffer
    [self setupRenderBuffer];
    //5.設置FrameBuffer
    [self setupFrameBuffer];
    //6.開始繪製
    [self renderLayer];
}
// 重寫layerClass，將CCView返回的圖層從CALayer替換成CAEAGLLayer
+ (Class)layerClass {
    return [CAEAGLLayer class];
}
複製代碼

三、設置圖層 `setupLayer` 函數

// 1.設置圖層
- (void)setupLayer {
    //1.建立特殊圖層
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    //2.設置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    //3.設置描述屬性，這裏設置不維持渲染內容以及顏色格式爲RGBA8
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}
複製代碼

四、設置上下文 `setupContext` 函數

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

五、清空緩存區 `deleteRenderAndFrameBuffer` 函數

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

六、設置 RenderBuffer `setupRenderBuffer` 函數

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

七、設置 FrameBuffer `setupFrameBuffer` 函數

// 5.設置FrameBuffer
- (void)setupFrameBuffer {
    //1.定義一個緩存區ID
    GLuint buffer;
    //2.申請一個緩存區標誌
    glGenBuffers(1, &buffer);
    //3.
    self.myColorFrameBuffer = buffer;
    //4.
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    /*生成幀緩存區以後，則須要將renderbuffer跟framebuffer進行綁定，
     調用glFramebufferRenderbuffer函數進行綁定到對應的附着點上，後面的繪製才能起做用
     */
    //5.將渲染緩存區myColorRenderBuffer 經過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
複製代碼

八、開始繪製 `renderLayer` 函數

// 6.開始繪製
- (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"];

    //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.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,
    };
    //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).設置讀取方式
    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).設置讀取方式
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //10.加載紋理
    [self setupTexture:@"夏目"];
    
    //11. 設置紋理採樣器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.繪圖
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.從渲染緩存區顯示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
複製代碼

8.一、加載shader `loadShaders` 函數

// 加載shader
- (GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
    //1.定義2個零時着色器對象
    GLuint verShader, fragShader;
    //建立program
    GLint 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.建立最終的program程序，把shader附着上去
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.釋放不須要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}
複製代碼

8.二、從圖片中加載紋理 `setupTexture` 函數

// 從圖片中加載紋理
- (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的沒一行的內存所佔的比特數，4表明rgba
     參數6：colorSpace,bitmap上使用的顏色空間
     參數7：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);
    
    // 以上1-7步驟，就是在進行圖片解壓縮，在yyImage或SD中也能夠看到
    
    //八、綁定紋理到默認的紋理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;
}
複製代碼