> 作为入门的小Demo，先带大家学习怎样在屏幕上渲染一张图片。
其实很简单：
先定义两个属性。
```
EAGLContext *context; //EAGLContent是苹果在ios平台下实现的opengles渲染层，用于渲染结果在目标surface上的更新。
GLKBaseEffect *mEffect;//着色器或者光照
```
在viewDidLoad中调用自定义方法。
```
- (void)viewDidLoad {
[super viewDidLoad];
//1.设置OpenGL ES 配置
[self setUpConfig];
//2.加载顶点数据
[self uploadVertexArray];
//3.加载纹理
[self uploadTexture];
}
```
# 1. 设置OpenGL ES 配置
由于OpenGL ES 没有提供窗口层，托管系统(iOS、安卓)必须提供函数来创建一个能够接受OpenGL ES命令的渲染上下文，以及写入任何绘制命令结果的缓冲区。
```
//新建OpenGL ES上下文
context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];//这里用的是opengles3.
if (!context) {
NSLog(@"创建上下文失败!");
return;
}
```
`EAGLContent`就是接受OpenGL ES命令的渲染上下文，是苹果在ios平台下实现的OpenGL ES渲染层，用于渲染结果在目标surface上的更新。
其中初始化参数API有以下几种：
- kEAGLRenderingAPIOpenGLES1 ->OpenGL ES 1.0，固定管线。
- kEAGLRenderingAPIOpenGLES2 ->OpenGL ES 2.0，非固定管线。
- kEAGLRenderingAPIOpenGLES3 ->OpenGL ES 3.0，也是非固定管线，比2.0多了一些API而已。
接下来将context绑定到view上，这里需要在storyBoard中把控制器的view改为GLKView，当然如果你要用storyBoard的话。
```
//创建一个OpenGL ES上下文并将其分配给从storyboard加载的视图
GLKView * view = (GLKView *)self.view;
view.context = context;
```
同时，配置视图创建所需要的渲染缓冲区，有四个缓冲区可以设置：
- 颜色缓冲区，它用以存储将在屏幕中显示的颜色。你可以使用GLKView的`drawableColorFormat`属性来设置缓冲区中的每个像素的颜色格式。
```
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
```
GLKViewDrawableColorFormatRGBA8888：即缓存区的每个像素的最小组成部分（RGBA）使用8个bit，所以每个像素4个字节，4*8个bit，默认格式。
GLKViewDrawableColorFormatRGB565：如果你的APP允许更小范围的颜色，即可设置这个。会让你的APP消耗更小的资源（内存和处理时间）。
- 深度缓冲区，保存深度值，OpenGL在深度测试时会把接近观察者的对象的所有像素存储到深度缓冲区，当开始绘制一个像素时，OpenGL首先检查深度缓冲区，看是否已经绘制了更接近观察者的什么东西，如果是则忽略它，不用绘制它了，否则把它增加到深度缓冲区和颜色缓冲区进行绘制处理。
通过`drawableDepthFormat`属性设置深度缓冲区。
```
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
```
GLKViewDrawableDepthFormatNone：完全没有深度缓冲区。
GLKViewDrawableDepthFormat16：用于一般简单的2D场景中，将消耗更少的资源，但是当对象非常接近彼此时，你可能存在渲染问题。
GLKViewDrawableDepthFormat24: 用于3D游戏。
- stencil(模板)缓冲区，它帮助你把绘制区域限定到屏幕的一个特定部分。它还用于像影子一类的事物，比如你可以使用stencil缓冲区确保影子投射到地板。
```
view.drawableStencilFormat = GLKViewDrawableStencilFormat8;
```
GLKViewDrawableStencilFormatNone：没有stencil缓冲区。
GLKViewDrawableStencilFormat8。
- 多重采样缓冲区，用于抗锯齿，它将一个像素分成更小的单元， 并在更细微的层面上多次调用fragment shader，之后它将返回的颜色合并，生成更光滑的几何边缘效果，但是该属性比较占用内存，耗时。
```
view.drawableMultisample = GLKViewDrawableMultisample4X;
```
GLKViewDrawableMultisampleNone：没有多重采样缓冲区。
GLKViewDrawableMultisample4X。
```
[EAGLContext setCurrentContext:context]; //设置当前缓冲区。
glEnable(GL_DEPTH_TEST); //开启深度测试，就是让离你近的物体可以遮挡离你远的物体。
glClearColor(0.1, 0.2, 0.3, 1); //设置surface的清除颜色，也就是渲染到屏幕上的背景色。
```
# 2. 加载顶点数据
```
//顶点数据，前三个是顶点坐标（x、y、z轴），后面两个是纹理坐标（x，y）
GLfloat vertexData[] = {
0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
0.5, 0.5, -0.0f, 1.0f, 1.0f, //右上
-0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
-0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
-0.5, -0.5, 0.0f, 0.0f, 0.0f, //左下
};
```
顶点坐标，OpenGLES的世界坐标系是[-1, 1]，故而点(0, 0)是在屏幕的正中间。
纹理坐标系的取值范围是[0, 1]，原点是在左下角。故而点(0, 0)在左下角，点(1, 1)在右上角。
开启顶点缓冲区:
```
//顶点缓存区
GLuint buffer;
//申请一个缓存区标识符
glGenBuffers(1, &buffer);
//glBindBuffer把标识符绑定到GL_ARRAY_BUFFER上
glBindBuffer(GL_ARRAY_BUFFER, buffer);
//glBufferData把顶点数据从CPU内存复制到GPU内存
glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
```
开启对应的顶点属性：
```
glEnableVertexAttribArray(GLKVertexAttribPosition);
```
默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是disable的，意味着哪怕数据已经上传到GPU，顶点着色器也不能读取到数据。由`glEnableVertexAttribArray`启用指定属性，才可在顶点着色器中访问顶点的属性数据。
设置合适的格式从buffer里面读取数据：
```
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
```
glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
是用来上传顶点数据到显卡的方法。
参数解释：
- indx: 指定要修改的顶点属性的索引值
- size : 指定每个顶点属性的组件数量。必须为1、2、3或者4。初始值为4。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a））
- type : 指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
- normalized : 指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
- stride : 指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
- ptr : 就是一个指针，指向的是需要上传到顶点数据指针，通常是数组名的偏移量，指向数组中第一个顶点属性的第一个组件，上面(GLfloat *)NULL + 0 指针，指向数组首地址。
开启纹理的顶点属性：
```
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
```
通过(GLfloat *)NULL + 3,指到纹理数据：
```
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat * )NULL + 3);
```
# 3. 加载纹理
```
-(void)uploadTexture
{
//获取纹理图片保存路径
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"sf" ofType:@"jpg"];
//GLKTextureLoaderOriginBottomLeft,纹理坐标是相反的
NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft,NULL];
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:NULL];
//着色器
mEffect = [[GLKBaseEffect alloc]init];
//第一个纹理属性
mEffect.texture2d0.enabled = GL_TRUE;
//纹理的名字
mEffect.texture2d0.name = textureInfo.name;
}
```
# 4. 在GLKViewDelegate的代理方法中启动着色器
```
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
glClearColor(0.3f, 0.6f, 1.0f, 1.0f);
//清除surface内容，恢复至初始状态
glClear(GL_DEPTH_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
//启动着色器
[mEffect prepareToDraw];
glDrawArrays(GL_TRIANGLES, 0, 6);
}
```
最后完成效果：
网友评论