教程
OpenGL ES入门教程1-Tutorial01-GLKit
OpenGL ES入门教程2-Tutorial02-shader入门
OpenGL ES入门教程3-Tutorial03-三维变换
这次我们用GLKit，更简单的实现图形变换、纹理贴图、着色、深度测试(代码在这)。
OpenGL ES系列教程在这里。
OpenGL ES系列教程的代码地址 - 你的star和fork是我的源动力，你的意见能让我走得更远。
效果展示
核心思路
使用GLKit来进行图形变换、纹理贴图加载、深度测试，用GLKBaseEffect来管理纹理贴图和进行着色。
具体细节
1、顶点属性
typedef NS_ENUM(GLint, GLKVertexAttrib)
{
GLKVertexAttribPosition,
GLKVertexAttribNormal,
GLKVertexAttribColor,
GLKVertexAttribTexCoord0,
GLKVertexAttribTexCoord1
} NS_ENUM_AVAILABLE(10_8, 5_0);
GLKEffects用到的顶点属性已经定义好，使用时直接用枚举量赋值。如下图，直接对顶点的位置、颜色、纹理坐标进行赋值。
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL);
//顶点颜色
glEnableVertexAttribArray(GLKVertexAttribColor);
glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, 4 * 8, (GLfloat *)NULL + 3);
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 4 * 8, (GLfloat *)NULL + 6);
2、纹理
在自定义shader中使用纹理，需要用CoreGraphics把图像转换成bitmapdata，再申请纹理内存，把图像数据传进去，最后还要释放bitmapdata。
在GLKit中，仅仅需要如下三行代码，就可以完成纹理的加载。
//纹理
NSString* filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"png"];
NSDictionary* options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];
GLKTextureInfo* textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
GLKTextureLoaderOriginBottomLeft 参数是避免纹理上下颠倒，原因是纹理坐标系和世界坐标系的原点不同。
最后创建着色器，启用纹理，把刚刚创建的textureInfo的name赋值给着色器。
//着色器
self.mEffect = [[GLKBaseEffect alloc] init];
self.mEffect.texture2d0.enabled = GL_TRUE;
self.mEffect.texture2d0.name = textureInfo.name;
3、图形变换
在OpenGL ES里面，图形变换的表现形式就是矩阵操作，GLKit也提供了很多矩阵操作函数。
//初始的投影
CGSize size = self.view.bounds.size;
float aspect = fabs(size.width / size.height);
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 10.f);
projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0f, 1.0f, 1.0f);
self.mEffect.transform.projectionMatrix = projectionMatrix;
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
self.mEffect.transform.modelviewMatrix = modelViewMatrix;
GLKMatrix4MakePerspective是透视投影变换
GLKMatrix4Translate是平移变换
/**
* 场景数据变化
*/
- (void)update {
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
modelViewMatrix = GLKMatrix4RotateX(modelViewMatrix, self.mDegreeX);
modelViewMatrix = GLKMatrix4RotateY(modelViewMatrix, self.mDegreeY);
modelViewMatrix = GLKMatrix4RotateZ(modelViewMatrix, self.mDegreeZ);
self.mEffect.transform.modelviewMatrix = modelViewMatrix;
}
在场景变换函数里面，GLKMatrix4RotateY是绕Y轴旋转，其他的分分别是绕X、Z轴旋转。
4、深度测试
在前面的教程介绍过，开启深度测试需要分配深度测试的缓冲区，并挂载到相应的帧缓冲区。
在GLKit代码中，深度测试的开启十分简单。
在新建上下文时调用glEnable(GL_DEPTH_TEST);开启深度测试。
//新建OpenGL ES 上下文
self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
GLKView* view = (GLKView *)self.view;
view.context = self.mContext;
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
[EAGLContext setCurrentContext:self.mContext];
glEnable(GL_DEPTH_TEST);
在渲染场景时，glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glClear参数加入GL_DEPTH_BUFFER_BIT即可。
/**
* 渲染场景代码
*/
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
[self.mEffect prepareToDraw];
glDrawElements(GL_TRIANGLES, self.mCount, GL_UNSIGNED_INT, 0);
}
总结
OpenGL ES的入门已经差不多，后面还有很多很多知识，需要时再学习即可。
总结这几篇教程花了一个星期左右。
学习过程中有几部分最难受：
- 第一部分是OpenGL ES的顶点属性、纹理贴图，对顶点到图形的过程不理解，对OpenGL ES的数据缓存机制不了解，无知容易使人知难而退；
- 第二部分是shader和glsl，glsl无法调试、编译信息不会查看、语法不懂等等，一个1.0 + 1都会报错，自己却莫名其妙，只能通过二分注释代码来定位问题，特别让人泄气；
- 第三部分是OpenGL ES的三维图形变换和光照等，这部分更多的是数学知识和物理知识，代码一般都很简单；这部分比前面的都难，但是因为知道哪里缺失，虽然不懂，但是不慌，只是有点难受。
最后的感想，计算机图形学和线性代数毕竟是基础，自己多花点时间学习，培养为核心竞争力非常不错。
