在上一节中主要对第一节的代码做了封装，它们都是用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<Void>)方法，最后一个参数传的是偏移量，在前面章节一节都是传入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就到此为止了。
源码点这里，喜欢就关注吧，持续更新中。
