OpenGL ES (Swift) Dev 3

在上一节中主要对第一节的代码做了封装，它们都是用OpenGL来渲染和显示一个固定颜色的长方形，但实际开发中很少只会用到固定的单色，所以接下来要分享的是一个叫纹理的图形技术，先上图：

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

核心名词

• 纹理（texture）：纹理是一个用来保存图像的颜色元素值的OpenGL ES的缓存
• 渲染（Rendering）
• 着色器（Shaders）
• 像素（pixel）

offsetof的计算

在glVertexAttribPointer(indx: GLuint, _ size: GLint, _ type: GLenum, _ normalized: GLboolean, _ stride: GLsizei, _ ptr: UnsafePointer)方法，最后一个参数传的是偏移量，在前面章节一节都是传入0，因为之前vertices存储的只有单一的顶点数据，在接下来中会把纹理的位置数据也存储在一起，在使用纹理的位置数据时候就要传入偏移量了，在OC中我们可以通过ofsizeof的宏来计算，但swift中不提供ofsizeof了，所以只能通过自己来计算了，举个例子：

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

通过上面的例子我们我可以计算出偏移量 ptr = sizeof(type) * (array.count + 1)

核心代码

接着要说的就是纹理的HelloWorld了，通过一张图来渲染一个矩形：

前面我们都是以固定的颜色来渲染图形的，现在通过一张图片来设置渲染的颜色：

// 设置 纹理
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)!

在这里将图片的纹理数据传递给baseEffect，为下一步的绘制做准备。

接下来我们将在绑定缓存数据的时候，对纹理的数据进行绑定：

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
        )
        //绑定纹理数据
        self.vertextBuffer.prepareToDrawWithAttrib(
            AGLKVertexAttrib.AGLKVertexAttribTexCoord0.rawValue,
            numberOfCoordinates: 2,
            //设置偏移量
            attribOffset:sizeof(GLfloat) * 4,    //offset
            shouldEnable: true
        )
        self.vertextBuffer.drawArrayWithMode(
            GLenum(GL_TRIANGLE_FAN),
            startVertexIndex: 0,
            numberOfVertices:
            GLsizei(vertices.count)
        )  
    }

HelloWorld就到此为止了。
源码点这里，喜欢就关注吧，持续更新中。