OpenGL 11 - 索引繪圖 - GLSL與GLKit案例

一、索引繪圖

若要繪制下圖目標圖形，按普通處理方式則需要一個個進行N多個三角形的頂點處理。圖中所用到頂點重復性很高，其實只有7個不同的頂點 --> 索引繪圖 --> 將頂點按索引信息進行面的繪制 --> 索引數組：{1,2,3}{3,2,4}{4,2,7}{7,2,5}  {4,7,2}{2,7,6}

索引繪圖與圖元裝配中的三角形連接方式結合繪制所需圖形。

二、案例繪制一個三角錐金字塔 - GLSL

1、效果：

2、頂點數據：

上圖，三角錐金字塔所需頂點數據 和 索引信息

3、主要代碼

view 代碼：

//
//  MyGLSLView.m
//  GL_Demo_GLSL
//
//  Created by Domy on 2020/7/31.
//  Copyright © 2020 Domy. All rights reserved.
//


/*
 不采用 GLKBaseEffect，使用編譯鏈接自定義的着色器（shader）。用簡單的 glsl 語言來實現頂點、片元着色器，並圖形進行簡單的變換。
 思路:
 1.創建圖層
 2.創建上下文
 3.清空緩存區
 4.設置RenderBuffer
 5.設置FrameBuffer
 6.開始繪制
 */

#import "MyGLSLView.h"

#import <OpenGLES/ES2/gl.h>

#import "GLESMath.h"


@interface MyGLSLView () {
    
    float xDegree;
    float yDegree;
    float zDegree;
    BOOL bX;
    BOOL bY;
    BOOL bZ;
    NSTimer *myTimer;
}

@property (nonatomic, strong) CAEAGLLayer *myEGLLayer;// 圖層
@property (nonatomic, strong) EAGLContext *myContext;// 上下文

@property (nonatomic, assign) GLuint myColorFrameBuffer;//
@property (nonatomic, assign) GLuint myColorRenderBuffer;// 渲染緩沖區

@property (nonatomic, assign) GLuint myProgram;

@end


@implementation MyGLSLView

// 重寫系統 layer 方法
+(Class)layerClass {
    return [CAEAGLLayer class];
}

- (void)layoutSubviews {
    
    // 1. 創建設置圖層
    // 設置 layer
    self.myEGLLayer = (CAEAGLLayer *)self.layer;
    
    // 設置 scale
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    
    // 設置屬性
    /*
     kEAGLDrawablePropertyRetainedBacking：繪圖表面顯示后，是否保留其內容。
     kEAGLDrawablePropertyColorFormat：可繪制表面的內部顏色緩存區格式，這個key對應的值是一個NSString指定特定顏色緩存區對象。默認是kEAGLColorFormatRGBA8；
     
     kEAGLColorFormatRGBA8：32位RGBA的顏色，4*8=32位
     kEAGLColorFormatRGB565：16位RGB的顏色，
     kEAGLColorFormatSRGBA8：sRGB代表了標准的紅、綠、藍，即CRT顯示器、LCD顯示器、投影機、打印機以及其他設備中色彩再現所使用的三個基本色素，sRGB的色彩空間基於獨立的色彩坐標，可以使色彩在不同的設備使用傳輸中對應於同一個色彩坐標體系，而不受這些設備各自具有的不同色彩坐標的影響。
     */
//    self.myEGLLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking:@(NO),kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8};
    self.myEGLLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];

    
    // 2. 設置上下文
    self.myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    if (!self.myContext) {
        NSLog(@"create context failed!");
        return;
    }
    BOOL isSetSuccess = [EAGLContext setCurrentContext:self.myContext];
    if (!isSetSuccess) {
        return;
    }
    
    
    // 3. 清空緩沖區
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
    
    
    // 4. 設置渲染緩沖區 renderBuffer
    // 生成緩沖區 ID
    GLuint rb;
    glGenRenderbuffers(1, &rb);
    self.myColorRenderBuffer = rb;
    // 綁定緩沖區
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    // 綁到 context: contect 與 eagllayer綁定在一起
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEGLLayer];
    
    
    // 5. 設置幀緩沖區 FrameBuffer
    glGenBuffers(1, &_myColorFrameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    // 渲染緩沖區 與 幀緩沖區綁在一起
    /*
     target：
     attachment：將 renderBuffer 附着到frameBuffer的哪個附着點上
     renderbuffertarget
     renderbuffer
     */
    //    glFramebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, GLuint renderbuffer)
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    
    // 開始繪制
    [self renderLayer];
    
}

- (void)renderLayer {
    
    glClearColor(0.7, 0.7, 0.7, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    
    /// 1. 設置視口
    CGFloat mainScale = [UIScreen mainScreen].scale;
    glViewport(self.frame.origin.x * mainScale, self.frame.origin.y * mainScale, self.frame.size.width * mainScale, self.frame.size.height * mainScale);
    
    /// 2. 讀取着色器代碼
    // 定義路徑
    NSString *verPath = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragPath = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
    
    /// 3. 加載着色器
    if (self.myProgram) {
        // delete
        glDeleteProgram(self.myProgram);
        self.myProgram = 0;
    }
    self.myProgram = [self loadShadersWithVertex:verPath Withfrag:fragPath];
    
    /// 4. 鏈接 program
    glLinkProgram(self.myProgram);
    // 獲取連接狀態
    GLint linkStatus;
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {// 鏈接出錯
        // 獲取錯誤信息 log
        GLchar message[512];
        glGetProgramInfoLog(self.myProgram, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    
    /// 5. 使用 program
    glUseProgram(self.myProgram);
    
    
    
    /// 6. 設置頂點、顏色RGB
    GLfloat attrArr[] = {
        
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, //左上0
        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, //右上1
        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, //左下2
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下3
        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, //頂點4
    };
    // 索引數組
    GLuint indices[] = {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };
    
    /// 7. copy 到頂點緩沖區
    GLuint buffer;
    glGenBuffers(1, &buffer);
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    // 頂點數據 copy 到緩沖區
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    /// 8. 打開通道
    // 8.1 頂點
    // 獲取通道 ID
    /*
     glGetAttribLocation(GLuint program, const GLchar *name)
     program:
     name: 給誰傳 --> .vsh 的 position
     */
    GLuint position = glGetAttribLocation(self.myProgram, "position");
    // 打開通道
    glEnableVertexAttribArray(position);
    // 讀數據
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, NULL);

    // 頂點顏色
     GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
     // 設置合適的方式從 buffer 里面讀取數據
     glEnableVertexAttribArray(positionColor);
     glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, (float *)NULL + 3);
    
    // 矩陣變換
    [self configMartix];
    
    
    /// 11.  繪制
//    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    glEnable(GL_CULL_FACE);
    glEnable(GL_DEPTH_TEST);

    
    // 使用索引繪圖
    /*
     void glDrawElements(GLenum mode,GLsizei count,GLenum type,const GLvoid * indices);
     參數列表：
     mode:要呈現的畫圖的模型
                GL_POINTS
                GL_LINES
                GL_LINE_LOOP
                GL_LINE_STRIP
                GL_TRIANGLES
                GL_TRIANGLE_STRIP
                GL_TRIANGLE_FAN
     count:繪圖個數
     type:類型
             GL_BYTE
             GL_UNSIGNED_BYTE
             GL_SHORT
             GL_UNSIGNED_SHORT
             GL_INT
             GL_UNSIGNED_INT
     indices：繪制索引數組

     */
    glDrawElements(GL_TRIANGLES, sizeof(indices) / sizeof(indices[0]), GL_UNSIGNED_INT, indices);
    
    
    
    // 12. 從渲染緩沖區顯示到屏幕
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

// 旋轉 - 矩陣變換
- (void)configMartix {
    
    // 1.找到myProgram中的projectionMatrix、modelViewMatrix 2個矩陣的地址。如果找到則返回地址，否則返回-1，表示沒有找到2個對象。
    GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
    GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
    
    float width = self.frame.size.width;
    float height = self.frame.size.height;
    
    // 2.創建4 * 4投影矩陣
    KSMatrix4 _projectionMatrix;
    //(1)獲取單元矩陣
    ksMatrixLoadIdentity(&_projectionMatrix);
    //(2)計算縱橫比例 = 長/寬
    float aspect = width / height; //長寬比
    //(3)獲取透視矩陣
    /*
     參數1：矩陣
     參數2：視角，度數為單位
     參數3：縱橫比
     參數4：近平面距離
     參數5：遠平面距離
284      */
    ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f); //透視變換，視角30°
    //(4)將投影矩陣傳遞到頂點着色器
    /*
     void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
     參數列表：
     location:指要更改的uniform變量的位置
     count:更改矩陣的個數
     transpose:是否要轉置矩陣，並將它作為uniform變量的值。必須為GL_FALSE
     value:執行count個元素的指針，用來更新指定uniform變量
     */
    glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, (GLfloat*)&_projectionMatrix.m[0][0]);
    

    // 3.創建一個4 * 4 矩陣，模型視圖矩陣
    KSMatrix4 _modelViewMatrix;
    //(1)獲取單元矩陣
    ksMatrixLoadIdentity(&_modelViewMatrix);
    //(2)平移，z軸平移-10
    ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
    //(3)創建一個4 * 4 矩陣，旋轉矩陣
    KSMatrix4 _rotationMatrix;
    //(4)初始化為單元矩陣
    ksMatrixLoadIdentity(&_rotationMatrix);
    //(5)旋轉
    ksRotate(&_rotationMatrix, xDegree, 1.0, 0.0, 0.0); //繞X軸
    ksRotate(&_rotationMatrix, yDegree, 0.0, 1.0, 0.0); //繞Y軸
    ksRotate(&_rotationMatrix, zDegree, 0.0, 0.0, 1.0); //繞Z軸
    //(6)把變換矩陣相乘.將_modelViewMatrix矩陣與_rotationMatrix矩陣相乘，結合到模型視圖
     ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
    //(7)將模型視圖矩陣傳遞到頂點着色器
    /*
     void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
     參數列表：
     location:指要更改的uniform變量的位置
     count:更改矩陣的個數
     transpose:是否要轉置矩陣，並將它作為uniform變量的值。必須為GL_FALSE
     value:執行count個元素的指針，用來更新指定uniform變量
     */
    glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, (GLfloat*)&_modelViewMatrix.m[0][0]);
}

// 加載紋理
- (void)loadTexture {
    
    // 9.0 image 轉為 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:@"0001"].CGImage;
    // 圖片是否獲取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image ");
        return;
    }
    // 獲取圖片寬高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    // 獲取圖片字節數 寬*高*4（RGBA）
    GLubyte *spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    // 創建上下文
    /*
     data：指向要渲染的繪制圖像的內存地址
     width：bitmap 的寬度，單位為像素
     height：bitmap 的高度，單位為像素
     bitPerComponent：內存中像素的每個組件的位數，比如 32 位 RGBA，就設置為 8
     bytesPerRow：bitmap 的沒一行的內存所占的比特數
     colorSpace：bitmap 上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);

    // 在 CGContextRef 上 --> 將圖片繪制出來
    /*
     CGContextDrawImage 使用的 Core Graphics 框架，坐標系與 UIKit 不一樣。UIKit 框架的原點在屏幕的左上角，Core Graphics 框架的原點在屏幕的左下角。
     CGContextDrawImage(CGContextRef  _Nullable c, CGRect rect, CGImageRef  _Nullable image)
     c：繪圖上下文
     rect：rect坐標
     image：繪制的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
    CGContextDrawImage(spriteContext, rect, spriteImage);

    
    // 翻轉圖片 方案一
    // x、y 軸平移
    CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
    // y 平移
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    // Y 軸方向 Scale -1 翻轉
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    // 平移回原點位置處
    CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
    // 重繪
    CGContextDrawImage(spriteContext, rect, spriteImage);

    
    // 繪完 釋放上下文
    CGContextRelease(spriteContext);
    
    // 9.1. 綁定紋理到默認的紋理ID
    glBindTexture(GL_TEXTURE_2D, 0);
    
    // 9.2. 設置紋理屬性
    /*
     glTexParameteri(GLenum target, GLenum pname, GLint param)
     target：紋理維度
     pname：線性過濾； 為s,t坐標設置模式
     param：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);
        
    // 9.3 載入紋理
    /* 載入紋理 glTexImage2D
    參數1：紋理維度，GL_TEXTURE_2D
    參數2：mip貼圖層次
    參數3：紋理單元存儲的顏色成分（從讀取像素圖中獲得）
    參數4：加載紋理寬度
    參數5：加載紋理的高度
    參數6：為紋理貼圖指定一個邊界寬度 0
    參數7、8：像素數據的數據類型, GL_UNSIGNED_BYTE無符號整型
    參數9：指向紋理圖像數據的指針
    */
    float fw = width, fh = height;
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);

    // 9.4 釋放 sprite
    free(spriteData);
}




// 加載着色器
// 頂點着色器 和 片元着色器 的代碼傳進來(.vsh  .fsh)
-(GLuint)loadShadersWithVertex:(NSString *)vert Withfrag:(NSString *)frag {
    
    // 1.定義 着色器
    GLuint verShader, fragShader;
    
    // 2.創建程序 program
    GLint program = glCreateProgram();// 創建一個空的程序對象
    
    // 3.編譯着色器 --> 封裝一個方法 compileShaderWithShader:
    [self compileShaderWithShader:&verShader shaderType:GL_VERTEX_SHADER filePath:vert];
    [self compileShaderWithShader:&fragShader shaderType:GL_FRAGMENT_SHADER filePath:frag];
    
    // 4.attach shader, 將shader附着到 程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //5.已附着好的 shader 刪掉，避免不必要的內存占用
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;// 返回編譯好的程序
}
// 編譯着色器
/*
 shader: 着色器 ID
 type: 着色器類型
 path: 着色器代碼文件路徑
 */
- (void)compileShaderWithShader:(GLuint *)shader shaderType:(GLenum)type filePath:(NSString *)path {
    
    // 1.讀取文件路徑
    NSString *file = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    // NSString 轉 C 的 char
    const GLchar *source = (GLchar *)[file UTF8String];
    
    // 2.創建對應類型的shader
    *shader = glCreateShader(type);
    
    // 3.讀取着色器源碼 將其附着到着色器對象上面
    /* params:
     shader: 要編譯的着色器對象 *shader
     numOfStrings: 傳遞的源碼字符串數量 1個
     參數3：strings: 着色器程序的源碼（真正的着色器程序源碼）
     參數4：lenOfStrings: 長度，具有每個字符串長度的數組，或NULL，這意味着字符串是NULL終止的
     */
    //    glShaderSource(GLuint shader, GLsizei count, const GLchar *const *string, const GLint *length)
    glShaderSource(*shader, 1, &source,NULL);
    
    // 4. 編譯
    glCompileShader(*shader);
}

- (IBAction)rotClick:(UIButton *)sender {
    
    bX = bY = bZ = YES;
    
    myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}


// 旋轉
-(void)reDegree {
    
    //如果停止X軸旋轉，X = 0則度數就停留在暫停前的度數.
    //更新度數
    xDegree += bX * 5;
    yDegree += bY * 7;
    zDegree += bZ * 9;
    //重新渲染
    [self renderLayer];
    
}

@end

着色器代碼：

// 頂點着色器

attribute vec4 position;
attribute vec4 positionColor;

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;

void main() {

    varyColor = positionColor;
    
    vec4 vPos;
   
    //4*4 * 4*4 * 4*1
    vPos = projectionMatrix * modelViewMatrix * position;
   
    //ERROR
    //vPos = position * modelViewMatrix  * projectionMatrix ;
    gl_Position = vPos;
}

// 紋理着色器
varying lowp vec4 varyColor;
void main() {

    gl_FragColor = varyColor;
}

3.1、混合紋理

紋理加載代碼和之前Demo相同，不再贅述。

着色器代碼所需修改：

效果見下面效果動圖 

三、GLKit 索引繪圖繪制旋轉三角錐 - 顏色紋理混合

效果：

代碼：

#import "ViewController.h"

@interface ViewController () {
    
    dispatch_source_t timer;
}

@property (nonatomic, strong) EAGLContext *myContext;
@property (nonatomic, strong) GLKBaseEffect *myEffect;

// 旋轉的度數
@property(nonatomic, assign) float XDegree;
@property(nonatomic, assign) float YDegree;
@property(nonatomic, assign) float ZDegree;

@property(nonatomic, assign) int count;// 頂點個數

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 新建圖層
    [self creatContext];
    
    // 渲染圖層
    [self render];
}

- (void)render {
    
    // 頂點數據
//    // 3頂點 3顏色
//    GLfloat attrArr[] = {
//        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, //左上
//        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, //右上
//        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, //左下
//
//        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下
//        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, //頂點
//    };
    
    // 3頂點 3顏色 2紋理
    GLfloat attrArr[] = {
            -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f,       0.0f, 1.0f,//左上
            0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f,       1.0f, 1.0f,//右上
            -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f,       0.0f, 0.0f,//左下
    
            0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f,       1.0f, 0.0f,//右下
            0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f,       0.5f, 0.5f,//頂點
        };
    
    // 繪圖索引數組
    GLuint indexes[] = {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };
    self.count = sizeof(indexes) / sizeof(GLuint);//sizeof(indexes[0]);
    
    // 頂點數據copy到緩沖區
    GLuint attBuffer;
    glGenBuffers(1, &attBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, attBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
    
    // 索引數據copy到緩沖區
    GLuint indexesBuffer;
    glGenBuffers(1, &indexesBuffer);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexesBuffer);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indexes), indexes, GL_STATIC_DRAW);
    
    // 傳遞使用頂點數據
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, NULL);
    
    // 使用傳遞y顏色數據
    glEnableVertexAttribArray(GLKVertexAttribColor);
    glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (GLfloat *)NULL + 3);

    // 紋理
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 6);
    
    // 紋理圖片的讀取
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"cat" ofType:@"jpg"];
    NSDictionary *option = @{GLKTextureLoaderOriginBottomLeft:@(YES)};
    GLKTextureInfo *info = [GLKTextureLoader textureWithContentsOfFile:filePath options:option error:nil];
    
    // 繪制
    self.myEffect = [[GLKBaseEffect alloc] init];
    // 紋理
    self.myEffect.texture2d0.enabled = YES;
    self.myEffect.texture2d0.name = info.name;
    
    // 投影矩陣
    float aspect = fabs(self.view.frame.size.width/self.view.frame.size.height);
    GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 100.f);
    // 投影矩陣 scale
    projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0, 1.0, 1.0);
    self.myEffect.transform.projectionMatrix = projectionMatrix;
    
    // 模型視圖矩陣
    GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
    self.myEffect.transform.modelviewMatrix = modelViewMatrix;
    
    
    // GCD 定時器  - 旋轉
    double seconds = 0.1;
    timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
    dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, seconds * NSEC_PER_SEC, 0.0);
    dispatch_source_set_event_handler(timer, ^{
       
        self.XDegree += 0.1f;
        self.YDegree += 0.1f;
        self.ZDegree += 0.1f;
        
    });
    dispatch_resume(timer);
}

- (void)creatContext {
    
    self.myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

    // view
    GLKView *kitView = (GLKView *)self.view;
    kitView.context = self.myContext;
    kitView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    kitView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    
    // 設置當前上下文
    [EAGLContext setCurrentContext:self.myContext];
    
    // 開啟深度測試
    glEnable(GL_DEPTH_TEST);
}

#pragma mark - GLKView delegate - 繪制 -
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    
    glClearColor(0.0, 0.3, 0.3, 1);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    [self.myEffect prepareToDraw];
    glDrawElements(GL_TRIANGLES, self.count, GL_UNSIGNED_INT, 0);
    
}
// update - 旋轉
- (void)update {
    
    GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -3.0);
    modelViewMatrix = GLKMatrix4RotateX(modelViewMatrix, self.XDegree);
    modelViewMatrix = GLKMatrix4RotateY(modelViewMatrix, self.YDegree);
    modelViewMatrix = GLKMatrix4RotateZ(modelViewMatrix, self.ZDegree);

    self.myEffect.transform.modelviewMatrix = modelViewMatrix;

}

- (IBAction)rotClick:(UIButton *)sender {
    
}


@end