在上一節(jié)中主要對(duì)第一節(jié)的代碼做了封裝，它們都是用OpenGL來(lái)渲染和顯示一個(gè)固定顏色的長(zhǎng)方形，但實(shí)際開發(fā)中很少只會(huì)用到固定的單色，所以接下來(lái)要分享的是一個(gè)叫紋理的圖形技術(shù)，先上圖：

1B4359B5-4BFE-4EFB-9D93-505E78BE3843.png

核心名詞

• 紋理（texture）：紋理是一個(gè)用來(lái)保存圖像的顏色元素值的OpenGL ES的緩存
• 渲染（Rendering）
• 著色器（Shaders）
• 像素（pixel）

offsetof的計(jì)算

在glVertexAttribPointer(indx: GLuint, _ size: GLint, _ type: GLenum, _ normalized: GLboolean, _ stride: GLsizei, _ ptr: UnsafePointer<Void>)方法，最后一個(gè)參數(shù)傳的是偏移量，在前面章節(jié)一節(jié)都是傳入0，因?yàn)橹皏ertices存儲(chǔ)的只有單一的頂點(diǎn)數(shù)據(jù)，在接下來(lái)中會(huì)把紋理的位置數(shù)據(jù)也存儲(chǔ)在一起，在使用紋理的位置數(shù)據(jù)時(shí)候就要傳入偏移量了，在OC中我們可以通過(guò)ofsizeof的宏來(lái)計(jì)算，但swift中不提供ofsizeof了，所以只能通過(guò)自己來(lái)計(jì)算了，舉個(gè)例子：

var vertices = [
    SceneVertex(positionCoords: GLKVector3Make(-0.5, -0.5, 0.0),
                textureCoords:GLKVector2Make(0.0, 0.0)),
    SceneVertex(positionCoords: GLKVector3Make(0.5, -0.5, 0.0),
                textureCoords:GLKVector2Make(1.0, 0.0)),
    SceneVertex(positionCoords: GLKVector3Make(0.5, 0.5, 0.0),
                textureCoords:GLKVector2Make(1.0, 1.0)),
    SceneVertex(positionCoords: GLKVector3Make(-0.5, 0.5, 0.0),
                textureCoords:GLKVector2Make(0.0, 1.0))
]
//            GLfloat // <-- structure start
//            GLfloat // <-- position
//            GLfloat
//            GLfloat
//            GLfloat // <-- texture
//            GLfloat
//
//            ptr = sizeof(GLfloat) * 4

通過(guò)上面的例子我們我可以計(jì)算出偏移量 ptr = sizeof(type) * (array.count + 1)

核心代碼

接著要說(shuō)的就是紋理的HelloWorld了，通過(guò)一張圖來(lái)渲染一個(gè)矩形：

前面我們都是以固定的顏色來(lái)渲染圖形的，現(xiàn)在通過(guò)一張圖片來(lái)設(shè)置渲染的顏色：

// 設(shè)置 紋理
let imageRef = UIImage(named: "80.png")?.CGImage
var textureInfo: GLKTextureInfo!

do {
    textureInfo = try GLKTextureLoader.textureWithCGImage(imageRef!, options: nil)
} catch {

}

self.baseEffect.texture2d0.name = textureInfo.name;
self.baseEffect.texture2d0.target = GLKTextureTarget(rawValue: textureInfo.target)!

在這里將圖片的紋理數(shù)據(jù)傳遞給baseEffect，為下一步的繪制做準(zhǔn)備。

接下來(lái)我們將在綁定緩存數(shù)據(jù)的時(shí)候，對(duì)紋理的數(shù)據(jù)進(jìn)行綁定：

override func glkView(view: GLKView, drawInRect rect: CGRect) {
        baseEffect.prepareToDraw()
        getCurrentContext().clear(GLenum(GL_COLOR_BUFFER_BIT))
        self.vertextBuffer.prepareToDrawWithAttrib(
            AGLKVertexAttrib.AGLKVertexAttribPosition.rawValue,
            numberOfCoordinates: 3,
            attribOffset:0,
            shouldEnable: true
        )
        //綁定紋理數(shù)據(jù)
        self.vertextBuffer.prepareToDrawWithAttrib(
            AGLKVertexAttrib.AGLKVertexAttribTexCoord0.rawValue,
            numberOfCoordinates: 2,
            //設(shè)置偏移量
            attribOffset:sizeof(GLfloat) * 4,    //offset
            shouldEnable: true
        )
        self.vertextBuffer.drawArrayWithMode(
            GLenum(GL_TRIANGLE_FAN),
            startVertexIndex: 0,
            numberOfVertices:
            GLsizei(vertices.count)
        )  
    }

HelloWorld就到此為止了。
源碼點(diǎn)這里，喜歡就關(guān)注吧，持續(xù)更新中。