什么是GLSL? 概念問(wèn)題這里直接轉(zhuǎn)載百度百科

OpenGL著色語(yǔ)言（OpenGL Shading Language）是用來(lái)在OpenGL中著色編程的語(yǔ)言锁蠕，也即開(kāi)發(fā)人員寫(xiě)的短小的自定義程序券勺，他們是在圖形卡的GPU （Graphic Processor Unit圖形處理單元）上執(zhí)行的谷朝，代替了固定的渲染管線的一部分偶芍，使渲染管線中不同層次具有可編程性鞠苟。比如：視圖轉(zhuǎn)換噩死、投影轉(zhuǎn)換等霎迫。GLSL（GL Shading Language）的著色器代碼分成2個(gè)部分：Vertex Shader（頂點(diǎn)著色器）和Fragment（片斷著色器）惶室，有時(shí)還會(huì)有Geometry Shader（幾何著色器）温自。負(fù)責(zé)運(yùn)行頂點(diǎn)著色的是頂點(diǎn)著色器。它可以得到當(dāng)前OpenGL 中的狀態(tài)皇钞，GLSL內(nèi)置變量進(jìn)行傳遞捣作。GLSL其使用C語(yǔ)言作為基礎(chǔ)高階著色語(yǔ)言，避免了使用匯編語(yǔ)言或硬件規(guī)格語(yǔ)言的復(fù)雜性鹅士。

總結(jié): 通過(guò)使用GLSL, 我們可以對(duì)頂點(diǎn)著色器和片元著色器進(jìn)行編程.

話(huà)不多說(shuō)直接上代碼, 代碼中有注釋.

一. 創(chuàng)建一個(gè)類(lèi)繼承于UIView, 作為我們繪制圖片的載體.

/*
 不采樣GLKBaseEffect券躁，使用編譯鏈接自定義的著色器（shader）。用簡(jiǎn)單的glsl語(yǔ)言來(lái)實(shí)現(xiàn)頂點(diǎn)掉盅、片元著色器也拜，并圖形進(jìn)行簡(jiǎn)單的變換。
 思路：
   1.創(chuàng)建圖層
   2.創(chuàng)建上下文
   3.清空緩存區(qū)
   4.設(shè)置RenderBuffer
   5.設(shè)置FrameBuffer
   6.開(kāi)始繪制
 
 */
#import <OpenGLES/ES2/gl.h>
#import "AMView.h"
@interface AMView()

//在iOS和tvOS上繪制OpenGL ES內(nèi)容的圖層趾痘，繼承與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

@implementation CCView

-(void)layoutSubviews
{
    //1.設(shè)置圖層
    [self setupLayer];
    
    //2.設(shè)置圖形上下文
    [self setupContext];
    
    //3.清空緩存區(qū)
    [self deleteRenderAndFrameBuffer];
    
    //4.設(shè)置RenderBuffer
    [self setupRenderBuffer];
    
    //5.設(shè)置FrameBuffer
    [self setupFrameBuffer];
    
    //6.開(kāi)始繪制
    [self renderLayer];
    
    
}

//6.開(kāi)始繪制
-(void)renderLayer
{
    //設(shè)置清屏顏色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
    //1.設(shè)置視口大小
    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.讀取頂點(diǎn)著色程序慢哈、片元著色程序
    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;
    //獲取鏈接狀態(tài)
    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.設(shè)置頂點(diǎn)、紋理坐標(biāo)
    //前3個(gè)是頂點(diǎn)坐標(biāo)永票，后2個(gè)是紋理坐標(biāo)
    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.-----處理頂點(diǎn)數(shù)據(jù)--------
    //(1)頂點(diǎn)緩存區(qū)
    GLuint attrBuffer;
    //(2)申請(qǐng)一個(gè)緩存區(qū)標(biāo)識(shí)符
    glGenBuffers(1, &attrBuffer);
    //(3)將attrBuffer綁定到GL_ARRAY_BUFFER標(biāo)識(shí)符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //(4)把頂點(diǎn)數(shù)據(jù)從CPU內(nèi)存復(fù)制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    //8.將頂點(diǎn)數(shù)據(jù)通過(guò)myPrograme中的傳遞到頂點(diǎn)著色程序的position
    //1.glGetAttribLocation,用來(lái)獲取vertex attribute的入口的.
    //2.告訴OpenGL ES,通過(guò)glEnableVertexAttribArray卵贱，
    //3.最后數(shù)據(jù)是通過(guò)glVertexAttribPointer傳遞過(guò)去的。
    
    //(1)注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
    glEnableVertexAttribArray(position);
    
    //(3).設(shè)置讀取方式
    //參數(shù)1：index,頂點(diǎn)數(shù)據(jù)的索引
    //參數(shù)2：size,每個(gè)頂點(diǎn)屬性的組件數(shù)量侣集，1键俱，2，3世分，或者4.默認(rèn)初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個(gè)組件的類(lèi)型编振，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
    //參數(shù)4：normalized,固定點(diǎn)數(shù)據(jù)值是否應(yīng)該歸一化臭埋，或者直接轉(zhuǎn)換為固定值踪央。（GL_FALSE）
    //參數(shù)5：stride,連續(xù)頂點(diǎn)屬性之間的偏移量臀玄，默認(rèn)為0；
    //參數(shù)6：指定一個(gè)指針畅蹂，指向數(shù)組中的第一個(gè)頂點(diǎn)屬性的第一個(gè)組件健无。默認(rèn)為0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    //9.----處理紋理數(shù)據(jù)-------
    //(1).glGetAttribLocation,用來(lái)獲取vertex attribute的入口的.
    //注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
    glEnableVertexAttribArray(textCoor);
    
    //(3).設(shè)置讀取方式
    //參數(shù)1：index,頂點(diǎn)數(shù)據(jù)的索引
    //參數(shù)2：size,每個(gè)頂點(diǎn)屬性的組件數(shù)量，1液斜，2累贤，3，或者4.默認(rèn)初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個(gè)組件的類(lèi)型旗唁，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
    //參數(shù)4：normalized,固定點(diǎn)數(shù)據(jù)值是否應(yīng)該歸一化痹束，或者直接轉(zhuǎn)換為固定值检疫。（GL_FALSE）
    //參數(shù)5：stride,連續(xù)頂點(diǎn)屬性之間的偏移量，默認(rèn)為0祷嘶；
    //參數(shù)6：指定一個(gè)指針屎媳，指向數(shù)組中的第一個(gè)頂點(diǎn)屬性的第一個(gè)組件。默認(rèn)為0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //10.加載紋理
    [self setupTexture:@"kunkun"];
    
    //11. 設(shè)置紋理采樣器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.繪圖
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.從渲染緩存區(qū)顯示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
    
    
}



//從圖片中加載紋理
- (GLuint)setupTexture:(NSString *)fileName {
    
    //1论巍、將 UIImage 轉(zhuǎn)換為 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,指向要渲染的繪制圖像的內(nèi)存地址
     參數(shù)2：width,bitmap的寬度嘉汰，單位為像素
     參數(shù)3：height,bitmap的高度丹禀，單位為像素
     參數(shù)4：bitPerComponent,內(nèi)存中像素的每個(gè)組件的位數(shù)，比如32位RGBA鞋怀，就設(shè)置為8
     參數(shù)5：bytesPerRow,bitmap的沒(méi)一行的內(nèi)存所占的比特?cái)?shù)
     參數(shù)6：colorSpace,bitmap上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    //5双泪、在CGContextRef上--> 將圖片繪制出來(lái)
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐標(biāo)系與UIKit 不一樣密似。UIKit框架的原點(diǎn)在屏幕的左上角焙矛，Core Graphics框架的原點(diǎn)在屏幕的左下角。
     CGContextDrawImage 
     參數(shù)1：繪圖上下文
     參數(shù)2：rect坐標(biāo)
     參數(shù)3：繪制的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默認(rèn)方式繪制
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    //7残腌、畫(huà)圖完畢就釋放上下文
    CGContextRelease(spriteContext);
    
    //8村斟、綁定紋理到默認(rèn)的紋理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.設(shè)置紋理屬性
    /*
     參數(shù)1：紋理維度
     參數(shù)2：線性過(guò)濾、為s,t坐標(biāo)設(shè)置模式
     參數(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：加載的層次闺金，一般設(shè)置為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);   
    return 0;
}

//5.設(shè)置FrameBuffer
-(void)setupFrameBuffer
{
    //1.定義一個(gè)緩存區(qū)ID
    GLuint buffer;
    
    //2.申請(qǐng)一個(gè)緩存區(qū)標(biāo)志
    glGenRenderbuffers(1, &buffer);
    
    //3.
    self.myColorFrameBuffer = buffer;
    
    //4.
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    /*生成幀緩存區(qū)之后，則需要將renderbuffer跟framebuffer進(jìn)行綁定掖看，
     調(diào)用glFramebufferRenderbuffer函數(shù)進(jìn)行綁定到對(duì)應(yīng)的附著點(diǎn)上匣距，后面的繪制才能起作用
     */
    
    //5.將渲染緩存區(qū)myColorRenderBuffer 通過(guò)glFramebufferRenderbuffer函數(shù)綁定到 GL_COLOR_ATTACHMENT0上面哥。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
    
}

//4.設(shè)置RenderBuffer
-(void)setupRenderBuffer
{
    //1.定義一個(gè)緩存區(qū)ID
    GLuint buffer;
    
    //2.申請(qǐng)一個(gè)緩存區(qū)標(biāo)志
    glGenRenderbuffers(1, &buffer);
    
    //3.
    self.myColorRenderBuffer = buffer;
    
    //4.將標(biāo)識(shí)符綁定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    //5.將可繪制對(duì)象drawable object's  CAEAGLLayer的存儲(chǔ)綁定到OpenGL ES renderBuffer對(duì)象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
    
    
}

//3.清空緩存區(qū)
-(void)deleteRenderAndFrameBuffer
{
    /*
     buffer分為frame buffer 和 render buffer2個(gè)大類(lèi)。
     其中frame buffer 相當(dāng)于render buffer的管理者毅待。
     frame buffer object即稱(chēng)FBO尚卫。
     render buffer則又可分為3類(lèi)。colorBuffer尸红、depthBuffer吱涉、stencilBuffer。
     */
    
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
    
}


//2.設(shè)置上下文
-(void)setupContext
{
    //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.設(shè)置圖形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    //5.將局部context怎爵，變成全局的
    self.myContext = context;
    
}

//1.設(shè)置圖層
-(void)setupLayer
{
    //1.創(chuàng)建特殊圖層
    /*
     重寫(xiě)layerClass，將CCView返回的圖層從CALayer替換成CAEAGLLayer
     */
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
    //2.設(shè)置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];


    //3.設(shè)置描述屬性盅蝗，這里設(shè)置不維持渲染內(nèi)容以及顏色格式為RGBA8
    /*
     kEAGLDrawablePropertyRetainedBacking  表示繪圖表面顯示后鳖链，是否保留其內(nèi)容。
     kEAGLDrawablePropertyColorFormat
         可繪制表面的內(nèi)部顏色緩存區(qū)格式墩莫，這個(gè)key對(duì)應(yīng)的值是一個(gè)NSString指定特定顏色緩存區(qū)對(duì)象芙委。默認(rèn)是kEAGLColorFormatRGBA8；
     
         kEAGLColorFormatRGBA8：32位RGBA的顏色狂秦，4*8=32位
         kEAGLColorFormatRGB565：16位RGB的顏色灌侣，
         kEAGLColorFormatSRGBA8：sRGB代表了標(biāo)準(zhǔn)的紅、綠裂问、藍(lán)侧啼，即CRT顯示器、LCD顯示器堪簿、投影機(jī)慨菱、打印機(jī)以及其他設(shè)備中色彩再現(xiàn)所使用的三個(gè)基本色素。sRGB的色彩空間基于獨(dú)立的色彩坐標(biāo)戴甩，可以使色彩在不同的設(shè)備使用傳輸中對(duì)應(yīng)于同一個(gè)色彩坐標(biāo)體系符喝，而不受這些設(shè)備各自具有的不同色彩坐標(biāo)的影響。


     */
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
  
}

+(Class)layerClass
{
    return [CAEAGLLayer class];
}


#pragma mark --shader
//加載shader
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag
{
    //1.定義2個(gè)零時(shí)著色器對(duì)象
    GLuint verShader, fragShader;
    //創(chuàng)建program
    GLint program = glCreateProgram();
    
    //2.編譯頂點(diǎn)著色程序甜孤、片元著色器程序
    //參數(shù)1：編譯完存儲(chǔ)的底層地址
    //參數(shù)2：編譯的類(lèi)型协饲，GL_VERTEX_SHADER（頂點(diǎn)）、GL_FRAGMENT_SHADER(片元)
    //參數(shù)3：文件路徑
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.創(chuàng)建最終的程序
    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 = (GLchar *)[content UTF8String];
    
    //2.創(chuàng)建一個(gè)shader（根據(jù)type類(lèi)型）
    *shader = glCreateShader(type);
    
    //3.將著色器源碼附加到著色器對(duì)象上缴川。
    //參數(shù)1：shader,要編譯的著色器對(duì)象 *shader
    //參數(shù)2：numOfStrings,傳遞的源碼字符串?dāng)?shù)量 1個(gè)
    //參數(shù)3：strings,著色器程序的源碼（真正的著色器程序源碼）
    //參數(shù)4：lenOfStrings,長(zhǎng)度茉稠，具有每個(gè)字符串長(zhǎng)度的數(shù)組，或NULL把夸，這意味著字符串是NULL終止的
    glShaderSource(*shader, 1, &source,NULL);
    
    //4.把著色器源代碼編譯成目標(biāo)代碼
    glCompileShader(*shader);
    
    
}
@end

使用empty, 創(chuàng)建頂點(diǎn)著色器和片元著色器

//頂點(diǎn)著色器
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    //varyTextCoord = textCoordinate;
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}

//片元著色器
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
    
}

跑起來(lái)會(huì)發(fā)現(xiàn)圖片是倒的, 因?yàn)榧y理坐標(biāo)左下角為(0,0), 所以我們需要對(duì)圖片進(jìn)行翻轉(zhuǎn).