OpenGL + OpenGL ES +Metal 系列文章匯總
本文案例代碼有OC及Swift版本，詳情見(jiàn)文末鏈接，講解以O(shè)C版本為主

本案例是在OpenGL ES 案例06：GLKit使用索引繪圖案例的基礎(chǔ)上新增紋理與顏色的混合填充功能

相比GLSL案例的紋理顏色填充，GLKit中就相對(duì)比較簡(jiǎn)單很多，因?yàn)榇蟛糠执aapple都已經(jīng)封裝好了，我們只需要使用即可

整體案例的效果如下

08-效果圖.gif

整個(gè)案例也是OpenGL ES 案例06：GLKit使用索引繪圖與OpenGL ES 入門：GLKit加載圖片案例綜合的一個(gè)例子

在原有代碼的基礎(chǔ)上，需要修改的整體圖示如下

修改的整體圖示

主要也是在render渲染圖形函數(shù)中新增紋理數(shù)據(jù)及操作

• 頂點(diǎn)數(shù)據(jù)中增加紋理坐標(biāo)

//1.頂點(diǎn)數(shù)據(jù)
       //前3個(gè)元素，是頂點(diǎn)數(shù)據(jù)；中間3個(gè)元素，是頂點(diǎn)顏色值，最后2個(gè)是紋理坐標(biāo)
    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,//頂點(diǎn)
    };

• 使用紋理數(shù)據(jù)，即將紋理坐標(biāo)傳入頂點(diǎn)著色器
  注：需要修改頂點(diǎn)、顏色讀取時(shí)的總長(zhǎng)度，否則繪制會(huì)有問(wèn)題

//    ------使用紋理數(shù)據(jù)
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (GLfloat*)NULL+6);

• 獲取紋理圖片 & 加載紋理

//    ------獲取紋理路路徑
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"mouse" ofType:@"jpg"];
    NSDictionary *option = [NSDictionary dictionaryWithObjectsAndKeys:@"1", GLKTextureLoaderOriginBottomLeft, nil];
    GLKTextureInfo *info = [GLKTextureLoader textureWithContentsOfFile:filePath options:option error:nil];

• 在effect中設(shè)置紋理相關(guān)信息

    //------著色器
    self.mEffect = [[GLKBaseEffect alloc] init];
    self.mEffect.texture2d0.enabled = GL_TRUE;
    self.mEffect.texture2d0.name = info.name;

完整的代碼見(jiàn)github - 11_02_GLKit_三角形變換+紋理與顏色混合OC、11_02_GLKit三角形變換+紋理與顏色混合_Swift