OpenGL ES 實戰(zhàn)三-使用GLSL加載圖片

有小伙伴說加載圖片不是在第一篇就講了嗎?
這里使用的是另外一種方式:GLSL,了解這個有助于之后添加濾鏡,用封裝好的GLKBaseEffect是無法添加濾鏡的.

OpenGL-ES-GLSL-LoadImage

基本思路

apple不允許OpenGL直接渲染在屏幕上,這里我們可以利用CAEAGLLayer來展示渲染的數(shù)據(jù).那么CAEAGLLayer是怎么拿到渲染數(shù)據(jù)的呢?

//將可繪制對象CAEAGLLayer的存儲綁定到GL_RENDERBUFFER對象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];

好了,接下來介紹具體的步驟:

一.創(chuàng)建一個CAEAGLLayer
//這里直接強制轉換還不夠,需要重寫layerClass，將返回的圖層從CALayer替換成CAEAGLLayer
self.myEagLayer = (CAEAGLLayer *)self.layer;

+(Class)layerClass
{
    return [CAEAGLLayer class];
}
二.設置上下文,指定使用的OpenGL ES版本
//1.指定OpenGL ES 渲染API版本，我們使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    //2.創(chuàng)建圖形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    //3.判斷是否創(chuàng)建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    //4.設置圖形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
三.清除之前緩沖區(qū)中的數(shù)據(jù)
//myColorRenderBuffer為渲染緩沖區(qū)標識
glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    //myColorFrameBuffer為幀緩沖區(qū)標識
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
四.設置緩沖區(qū)

  • buffer分為frame buffer 和 render buffer2個大類。
    其中frame buffer 相當于render buffer的管理者。
    render buffer則又可分為3類。colorBuffer、depthBuffer、stencilBuffer。
    除了使用窗口系統(tǒng)固有的frame buffer外，可以創(chuàng)建frame buffer object(FBO)，用于off-screen rendering。frame buffer object類似一種特殊的buffer object。

  • OpenGL在圖元光柵化之后，得到的是fragment，fragment不是最后的像素數(shù)據(jù)，但和像素對應；fragment需要經過一系列的處理，blend，texture，lighting...，才會得到最后的像素。用來緩存fragment數(shù)據(jù)的緩沖區(qū)，就是frame buffer。

設置渲染緩沖區(qū)
//1.定義一個緩沖區(qū)ID
    GLuint buffer;
    
    //2.創(chuàng)建一個緩沖區(qū)
    glGenRenderbuffers(1, &buffer);
    self.myColorRenderBuffer = buffer;
    
    //3.將buffer綁定到GL_RENDERBUFFER, 綁定渲染緩沖區(qū)對象時，先前的綁定會自動中斷。
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    //4.將可繪制對象self.myEagLayer的存儲綁定到GL_RENDERBUFFER對象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
設置幀緩沖區(qū)
//1.定義一個緩存區(qū)ID
    GLuint buffer;
    
    //2.創(chuàng)建一個緩沖區(qū)
    glGenFramebuffers(1, &buffer);
    self.myColorFrameBuffer = buffer;
    
    //3.將buffer綁定到GL_FRAMEBUFFER, 綁定渲染緩沖區(qū)對象時，先前的綁定會自動中斷。
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    /*生成幀緩存區(qū)之后，則需要將renderbuffer跟framebuffer進行綁定，
     調用glFramebufferRenderbuffer函數(shù)進行綁定到對應的附著點上，后面的繪制才能起作用
     */
    
    //4.將渲染緩存區(qū)myColorRenderBuffer 通過glFramebufferRenderbuffer函數(shù)綁定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
五.渲染數(shù)據(jù)
清除屏幕
//設置清屏顏色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
設置視口大小
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);
編譯,鏈接頂點著色器程序與片元著色器程序

代碼太長就不貼了

設置頂點數(shù)據(jù),并把數(shù)據(jù)拷貝到GPU中
//前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,
    };

//(1)頂點緩存區(qū)
    GLuint attrBuffer;
    //(2)申請一個緩存區(qū)標識符
    glGenBuffers(1, &attrBuffer);
    //(3)將attrBuffer綁定到GL_ARRAY_BUFFER標識符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //(4)把頂點數(shù)據(jù)從CPU內存復制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
把頂點數(shù)據(jù)傳給著色器
//(1)注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
//(2).默認是關閉attribute的,需要我們手動開啟
    glEnableVertexAttribArray(position);
//(3).設置讀取方式
    //參數(shù)1：index,頂點數(shù)據(jù)的索引
    //參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認初始值為GL_FLOAT
    //參數(shù)4：normalized,固定點數(shù)據(jù)值是否應該歸一化，或者直接轉換為固定值。（GL_FALSE）
    //參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認為0；
    //參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認為0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
設置紋理數(shù)據(jù)
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
glEnableVertexAttribArray(textCoor);
//.設置讀取方式
    //參數(shù)1：index,頂點數(shù)據(jù)的索引
    //參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認初始值為GL_FLOAT
    //參數(shù)4：normalized,固定點數(shù)據(jù)值是否應該歸一化，或者直接轉換為固定值。（GL_FALSE）
    //參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認為0；
    //參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認為0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
從圖片中獲取紋理并繪制
//1、將 UIImage 轉換為 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判斷圖片是否獲取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    //2、讀取圖片的大小，寬和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.獲取圖片字節(jié)數(shù) 寬*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.創(chuàng)建上下文
    /*
     參數(shù)1：data,指向要渲染的繪制圖像的內存地址
     參數(shù)2：width,bitmap的寬度，單位為像素
     參數(shù)3：height,bitmap的高度，單位為像素
     參數(shù)4：bitPerComponent,內存中像素的每個組件的位數(shù)，比如32位RGBA，就設置為8
     參數(shù)5：bytesPerRow,bitmap的沒一行的內存所占的比特數(shù)
     參數(shù)6：colorSpace,bitmap上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
    
    //5、在CGContextRef上--> 將圖片繪制出來
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐標系與UIKit 不一樣。UIKit框架的原點在屏幕的左上角，Core Graphics框架的原點在屏幕的左下角。
     CGContextDrawImage
     參數(shù)1：繪圖上下文
     參數(shù)2：rect坐標
     參數(shù)3：繪制的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
    
    //6.使用默認方式繪制
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    //7、畫圖完畢就釋放上下文
    CGContextRelease(spriteContext);
    
    //8、綁定紋理到默認的紋理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.設置紋理屬性
    /*
     參數(shù)1：紋理維度
     參數(shù)2：線性過濾、為s,t坐標設置模式
     參數(shù)3：wrapMode,環(huán)繞模式
     */
    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數(shù)據(jù)
    /*
     參數(shù)1：紋理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     參數(shù)2：加載的層次，一般設置為0
     參數(shù)3：紋理的顏色值GL_RGBA
     參數(shù)4：寬
     參數(shù)5：高
     參數(shù)6：border，邊界寬度
     參數(shù)7：format
     參數(shù)8：type
     參數(shù)9：紋理數(shù)據(jù)
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.釋放spriteData
    free(spriteData);
設置紋理采樣器
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
繪制到屏幕上
//繪圖,這里只是繪制到緩沖區(qū)上
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //從渲染緩存區(qū)顯示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
頂點著色器代碼
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);
    
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容