實(shí)現(xiàn)頂點(diǎn)著色器程序

• xcode中創(chuàng)建一個空的文件，命名為shaderv.vsh
• 實(shí)現(xiàn)如下代碼，敲代碼過程中沒有聯(lián)想提示

// 傳入的頂點(diǎn)位置向量
attribute vec4 position;
// 傳入的紋理向量,需要傳到片源著色器
attribute vec2 textCoordinate;
// 旋轉(zhuǎn)矩陣
uniform mat4 rotateMatrix;
// 傳到下一階段參數(shù),紋理
varying lowp vec2 varyTextCoord;

void main() {
    // 將紋理向量傳遞到片源著色器
    varyTextCoord = textCoordinate;
    
    //position 不可變參數(shù)
    vec4 vPos = position;
    // 頂點(diǎn)向量乘以旋轉(zhuǎn)矩陣,得到新的位置向量
    vPos = vPos * rotateMatrix;
    // 將變化后的位置傳給內(nèi)建變量
    gl_Position = vPos;
}

實(shí)現(xiàn)片元著色器程序

• Xcode中創(chuàng)建一個空的文件，命名為shaderf.fsh
• 實(shí)現(xiàn)如下代碼

// 頂點(diǎn)著色器傳遞過來的
varying lowp vec2 varyTextCoord;

uniform sampler2D colorMap;

void main() {
    // 將頂點(diǎn)著色器傳過來的紋理向量,生成2D紋理,并傳給內(nèi)建變量
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

創(chuàng)建控制器

• 創(chuàng)建控制器CCViewController
• 創(chuàng)建控制器的view,為CCView
• 在Main.storyboard中修改控制器和view的class為上面創(chuàng)建的

CCView中設(shè)置圖層

• 類中定義的屬性

#import <OpenGLES/ES2/gl.h>
#import "CCView.h"

@interface CCView()

//在iOS上繪制OpenGL ES內(nèi)容的圖層，繼承自CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
// 上下文
@property(nonatomic,strong)EAGLContext *myContext;
// renderBuffer
@property(nonatomic,assign)GLuint myColorRenderBuffer;
// frameBuffer
@property(nonatomic,assign)GLuint myColorFrameBuffer;
// 編譯好的著色器程序
@property(nonatomic,assign)GLuint myPrograme;

@end

• 在layoutSubviews中設(shè)置繪制OpenGL ES內(nèi)容的圖層

//1.設(shè)置圖層
-(void)setupLayer {
    // 重寫layerClass，將CCView返回的圖層從CALayer替換成CAEAGLLayer
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
    //設(shè)置放大倍數(shù)
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    
    //CALayer 默認(rèn)是透明的，必須將它設(shè)為不透明才能將其可見。
    self.myEagLayer.opaque = YES;
    
    //設(shè)置描述屬性，這里設(shè)置不維持渲染內(nèi)容以及顏色格式為RGBA8
    /*
     kEAGLDrawablePropertyRetainedBacking  是否保持呈現(xiàn)的內(nèi)容不變,設(shè)為true會對性能有影響
     
    kEAGLDrawablePropertyColorFormat
         顏色緩存區(qū)格式，默認(rèn)是kEAGLColorFormatRGBA8；
         kEAGLColorFormatRGBA8：32位RGBA的顏色，4*8=32位
         kEAGLColorFormatRGB565：16位RGB的顏色，
         kEAGLColorFormatSRGBA8：sRGB顏色
     */
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
  [NSNumber numberWithBool:false],kEAGLDrawablePropertyRetainedBacking,
  kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}

// CCView 的layer設(shè)置為CAEAGLLayer

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

設(shè)置上下文

//2.設(shè)置上下文
-(void)setupContext {
    //1.創(chuàng)建圖形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
    //2.判斷是否創(chuàng)建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    
    //3.設(shè)置圖形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    
    //4.將局部context，變成全局的
    self.myContext = context;
}

清空RenderBuffer和FrameBuffer

• RenderBuffer And FrameBuffer介紹
  其中frame buffer 相當(dāng)于render buffer的管理者

  
  
  image.png

image.png

• 使用前先清空

-(void)deleteRenderAndFrameBuffer {
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}

創(chuàng)建RenderBuffer和FrameBuffer

//4.設(shè)置RenderBuffer
-(void)setupRenderBuffer {
    //1.定義一個緩存區(qū)
    GLuint buffer;
    
    //2.申請一個緩存區(qū)標(biāo)志
    glGenRenderbuffers(1, &buffer);
    
    //3.
    self.myColorRenderBuffer = buffer;
    
    //4.將標(biāo)識符綁定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    //frame buffer僅僅是管理者，不需要分配空間；render buffer的存儲空間的分配，對于不同的render buffer，使用不同的API進(jìn)行分配，而只有分配空間的時候，render buffer句柄才確定其類型
    
    //myColorRenderBuffer渲染緩存區(qū)分配存儲空間
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];

}

-(void)setupFrameBuffer {
    //1.定義一個緩存區(qū)
    GLuint buffer;
    
    //2.申請一個緩存區(qū)標(biāo)志
    glGenRenderbuffers(1, &buffer);
    
    //3.
    self.myColorFrameBuffer = buffer;
    
    //4.綁定
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    //生成空間之后，則需要將renderbuffer跟framebuffer進(jìn)行綁定，調(diào)用glFramebufferRenderbuffer函數(shù)進(jìn)行綁定，后面的繪制才能起作用
    //5.將_myColorRenderBuffer 通過glFramebufferRenderbuffer函數(shù)綁定到GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}

加載著色器程序

//加載shader
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
    //定義2個零時著色器對象
    GLuint verShader, fragShader;
    //創(chuàng)建program
    GLint program = glCreateProgram();
    
    //編譯頂點(diǎn)著色程序、片元著色器程序
    //參數(shù)1：編譯完存儲的底層地址
    //參數(shù)2：編譯的類型，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];
    
    //創(chuàng)建最終的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //釋放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}

//編譯shader
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
    
    //讀取文件路徑字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar* source = (GLchar *)[content UTF8String];
    
    //創(chuàng)建一個shader（根據(jù)type類型）
    *shader = glCreateShader(type);
    
    //將頂點(diǎn)著色器源碼附加到著色器對象上。
    //參數(shù)1：shader,要編譯的著色器對象 *shader
    //參數(shù)2：numOfStrings,傳遞的源碼字符串?dāng)?shù)量 1個
    //參數(shù)3：strings,著色器程序的源碼（真正的著色器程序源碼）
    //參數(shù)4：lenOfStrings,長度，具有每個字符串長度的數(shù)組，或NULL，這意味著字符串是NULL終止的
    glShaderSource(*shader, 1, &source,NULL);
    
    //把著色器源代碼編譯成目標(biāo)代碼
    glCompileShader(*shader);    
}

開始繪制

//6.開始繪制
-(void)renderLayer {
   
    //設(shè)置清屏顏色
    glClearColor(0.0f, 1.0f, 0.0f, 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個是頂點(diǎn)坐標(biāo)，后2個是紋理坐標(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,
    };
    
    /*
     1.解決渲染圖片倒置問題：
     GLfloat attrArr[] =
     {
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, //右下
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     -0.5f, -0.5f, 0.0f,       0.0f, 1.0f, // 左下
     0.5f, 0.5f, 0.0f,         1.0f, 0.0f, // 右上
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, // 右下
     };
     */
    
    //-----處理頂點(diǎn)數(shù)據(jù)--------
    //頂點(diǎn)緩存區(qū)
    GLuint attrBuffer;
    //申請一個緩存區(qū)標(biāo)識符
    glGenBuffers(1, &attrBuffer);
    //將attrBuffer綁定到GL_ARRAY_BUFFER標(biāo)識符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //把頂點(diǎn)數(shù)據(jù)從CPU內(nèi)存復(fù)制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    //將頂點(diǎn)數(shù)據(jù)通過myPrograme中的傳遞到頂點(diǎn)著色程序的position
    //1.glGetAttribLocation,用來獲取vertex attribute的入口的.2.告訴OpenGL ES,通過glEnableVertexAttribArray，3.最后數(shù)據(jù)是通過glVertexAttribPointer傳遞過去的。
    //注意：第二參數(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,每個頂點(diǎn)屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有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：指定一個指針，指向數(shù)組中的第一個頂點(diǎn)屬性的第一個組件。默認(rèn)為0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    //----處理紋理數(shù)據(jù)-------
    //1.glGetAttribLocation,用來獲取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,每個頂點(diǎn)屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有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：指定一個指針，指向數(shù)組中的第一個頂點(diǎn)屬性的第一個組件。默認(rèn)為0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    
    //加載紋理
    [self setupTexture:@"timg-3"];
    
    //注意，想要獲取shader里面的變量，這里記得要在glLinkProgram后面，后面，后面！
    /*
     一個一致變量在一個圖元的繪制過程中是不會改變的，所以其值不能在glBegin/glEnd中設(shè)置。一致變量適合描述在一個圖元中、一幀中甚至一個場景中都不變的值。一致變量在頂點(diǎn)shader和片斷shader中都是只讀的。首先你需要獲得變量在內(nèi)存中的位置，這個信息只有在連接程序之后才可獲得
     */
    //rotate等于shaderv.vsh中的uniform屬性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
    //獲取渲染的弧度
    float radians = 10 * 3.14159f / 180.0f;
    //求得弧度對于的sin\cos值
    float s = sin(radians);
    float c = cos(radians);
    
    //z軸旋轉(zhuǎn)矩陣 參考3D數(shù)學(xué)第二節(jié)課的圍繞z軸渲染矩陣公式
    //為什么和公司不一樣？因?yàn)樵?D課程中用的是橫向量，在OpenGL ES用的是列向量
    GLfloat zRotation[16] = {
        c, -s, 0, 0,
        s, c, 0, 0,
        0, 0, 1.0, 0,
        0.0, 0, 0, 1.0
    };
    
    //設(shè)置旋轉(zhuǎn)矩陣
    glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
    
    
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

設(shè)置紋理

//設(shè)置紋理
- (GLuint)setupTexture:(NSString *)fileName {
    //1、獲取圖片的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)存中像素的每個組件的位數(shù)，比如32位RGBA，就設(shè)置為8
     參數(shù)5：bytesPerRow,bitmap的沒一行的內(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上繪圖
    /*
     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);
    //使用默認(rèn)方式繪制，發(fā)現(xiàn)圖片是倒的。
    CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
    /*
     解決圖片倒置的方法(2):
     CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
     CGContextTranslateCTM(spriteContext, 0, rect.size.height);
     CGContextScaleCTM(spriteContext, 1.0, -1.0);
     CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
     CGContextDrawImage(spriteContext, rect, spriteImage);
     */
   
    //6、畫圖完畢就釋放上下文
    CGContextRelease(spriteContext);
    
    //5、綁定紋理到默認(rèn)的紋理ID（這里只有一張圖片，故而相當(dāng)于默認(rèn)于片元著色器里面的colorMap，如果有多張圖不可以這么做）
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //設(shè)置紋理屬性
    /*
     參數(shù)1：紋理維度
     參數(shù)2：線性過濾、為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;
    //載入紋理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);
    
    //綁定紋理
    /*
     參數(shù)1：紋理維度
     參數(shù)2：紋理ID,因?yàn)橹挥幸粋€紋理，給0就可以了。
     */
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //釋放spriteData
    free(spriteData);
    
    return 0;
}

在layoutSubviews調(diào)用上面的方法

-(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.開始繪制
    [self renderLayer];
}

運(yùn)行后的效果如下

image.png

（本文為學(xué)習(xí)筆記，相關(guān)資料來自CC老師）