前沿

通過學習GLKit庫，自己動手實現(xiàn)一個小功能，供自己復(fù)習

res.gif

前期準備導(dǎo)入頭文件和修改類繼承

#import <GLKit/GLKit.h>
#import <OpenGLES/ES3/glext.h>
#import <OpenGLES/ES3/gl.h>

ViewController集成UIViewController ,現(xiàn)在繼承GLKit的類GLKViewController，在Main.storyboard文件中修改view的父類為GLKView;

image.png

代碼實現(xiàn)

主要分為5大步驟，
1.設(shè)置基本配置（setUpConfig）
2.設(shè)置頂點數(shù)據(jù)（setUpVertexData）
3.設(shè)置紋理信息(setUpVertexData)
4.繪制圖形(GLKView 代理）

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect 

5.實現(xiàn)動態(tài)旋轉(zhuǎn)(GLKViewController代理方法)

- (void)glkViewControllerUpdate:(GLKViewController *)controller 

設(shè)置基本配置

//初始化上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI: kEAGLRenderingAPIOpenGLES3];
//設(shè)置當前上下文
    [EAGLContext setCurrentContext:context];
//類型轉(zhuǎn)化
    GLKView *view = (GLKView *)self.view;
    view.context = context;
//設(shè)置顏色存儲格式，RGBA各8位
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
//設(shè)置顏色深度緩存區(qū)存儲格式，每個像素16位
     view.drawableDepthFormat = GLKViewDrawableDepthFormat16;
//設(shè)置背景顏色
    glClearColor(0.5, 0.3, 0.3, 1);

/*
EAGLContext 是蘋果iOS平臺下實現(xiàn)OpenGLES 渲染層.
kEAGLRenderingAPIOpenGLES1 = 1, 固定管線
kEAGLRenderingAPIOpenGLES2 = 2,
kEAGLRenderingAPIOpenGLES3 = 3,
*/

設(shè)置頂點坐標

//vertextData只拿去一個面，前三個坐標是物體坐標(x,y,z)，后面坐標是紋理坐標（s,t）
 GLfloat vertextData[] = {
        //正前方
        -0.5,  -0.5,  0.5,    0,     0.0,
        0.5,   -0.5,  0.5,   1.0,    0.0,
        0.5,    0.5,  0.5,   1.0,   1.,
        
        0.5,     0.5, 0.5,   1.0,    1.,
        -0.5,    0.5, 0.5,   0.0,     1.0,
        -0.5,-0.5,0.5,  0.0,  0.0,
}
//開啟深度測試 因為圖形有相互折疊的情況
   glEnable(GL_DEPTH_TEST);
//創(chuàng)建頂點緩存區(qū)標識符ID
    glGenBuffers(1, &bufferID);
//綁定頂點緩存區(qū)
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
//將頂點數(shù)組的數(shù)據(jù)copy到頂點緩存區(qū)中(cpu copy到GPU顯存中)
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertextData), vertextData, GL_STATIC_DRAW);
    //3.打開讀取通道.
    /*
     (1)在iOS中, 默認情況下，出于性能考慮，所有頂點著色器的屬性（Attribute）變量都是關(guān)閉的.
     意味著,頂點數(shù)據(jù)在著色器端(服務(wù)端)是不可用的. 即使你已經(jīng)使用glBufferData方法,將頂點數(shù)據(jù)從內(nèi)存拷貝到頂點緩存區(qū)中(GPU顯存中).
     所以, 必須由glEnableVertexAttribArray 方法打開通道.指定訪問屬性.才能讓頂點著色器能夠訪問到從CPU復(fù)制到GPU的數(shù)據(jù).
     注意: 數(shù)據(jù)在GPU端是否可見，即，著色器能否讀取到數(shù)據(jù)，由是否啟用了對應(yīng)的屬性決定，這就是glEnableVertexAttribArray的功能，允許頂點著色器讀取GPU（服務(wù)器端）數(shù)據(jù)。
   
    (2)方法簡介
    glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
   
    功能: 上傳頂點數(shù)據(jù)到顯存的方法（設(shè)置合適的方式從buffer里面讀取數(shù)據(jù)）
    參數(shù)列表:
        index,指定要修改的頂點屬性的索引值,例如
        size, 每次讀取數(shù)量。（如position是由3個（x,y,z）組成，而顏色是4個（r,g,b,a）,紋理則是2個.）
        type,指定數(shù)組中每個組件的數(shù)據(jù)類型?？捎玫姆柍Ａ坑蠫L_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值為GL_FLOAT。
        normalized,指定當被訪問時，固定點數(shù)據(jù)值是否應(yīng)該被歸一化（GL_TRUE）或者直接轉(zhuǎn)換為固定點值（GL_FALSE）
        stride,指定連續(xù)頂點屬性之間的偏移量。如果為0，那么頂點屬性會被理解為：它們是緊密排列在一起的。初始值為0
        ptr指定一個指針，指向數(shù)組中第一個頂點屬性的第一個組件。初始值為0
     */
//頂點坐標數(shù)據(jù)
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(float)*5, (GLfloat*)NULL+0);
//紋理坐標數(shù)據(jù)
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(float)*5, (GLfloat*)NULL+3);

//設(shè)置紋理信息

 NSString *filePath = [[NSBundle mainBundle] pathForResource:@"huhu" ofType:@"jpg"];
////2.設(shè)置紋理參數(shù)
//GLKTextureLoaderOriginBottomLeft
    //紋理坐標原點是左下角,但是圖片顯示原點應(yīng)該是左上角. 
    GLKTextureInfo *textInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:@{GLKTextureLoaderOriginBottomLeft:@(1)} error:nil];
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.enabled = YES;
    self.baseEffect.texture2d0.name = textInfo.name;
    self.baseEffect.texture2d0.target = textInfo.target;

繪制圖形

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
//清理顏色緩沖區(qū)和深度緩存區(qū)因為我們要做深度測試
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    
    [self.baseEffect prepareToDraw];
//36是頂點個數(shù)
    glDrawArrays(GL_TRIANGLES, 0, 36);
}

實現(xiàn)動態(tài)旋轉(zhuǎn)

- (void)glkViewControllerUpdate:(GLKViewController *)controller {
    static float angle = 0;
    angle +=0.1;
    GLKMatrix4 modelViewMatrix = GLKMatrix4Rotate(GLKMatrix4Identity, angle, 1, 1,0 );
    self.baseEffect.transform.modelviewMatrix = modelViewMatrix;
}

我們應(yīng)該設(shè)置代理，并遵守代理

@property (nullable, nonatomic, assign) IBOutlet id <GLKViewControllerDelegate> delegate;

在GLKView中我們并沒有設(shè)置GLKViewDelegate，為什么他會調(diào)用呢，這里GLKViewController已經(jīng)幫我們設(shè)置過了

image.png

demo

補充，

GLKViewController實現(xiàn)原理大致是，內(nèi)部管理一個CADisplayLink對象，CADisplayLink去掉用下面兩個方法

- (void)update
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect

當實現(xiàn)GLKViewControllerDelegate代理是會調(diào)用

- (void)glkViewControllerUpdate:(GLKViewController *)controller;