耐心看完，你将会了解OpenGL 工作的原理（入门级别😄）。

背景知识

图形渲染管线

• Vertex Shader (顶点着色器)
• Shape Assembly (图元装配)
• Geometry Shader (几何着色器)
• Rasterization Stage (光栅化)
• Fragment Shader （片段着色器）

1 ）顶点着色器(Vertex Shader)，它把一个单独的顶点作为输入。一个顶点是一个信息集合，包括空间中的位置、顶点的颜色、法线、纹理坐标等。

• 顶点位置变换
• 为每个顶点计算光照
• 纹理坐标的生成与变换

2 ）图元装配(Primitive Assembly)阶段将顶点着色器输出的所有顶点作为输入（如果是GL_POINTS，那么就是一个顶点），并所有的点装配成指定图元（三角形、四边形等）。

3）图元装配阶段的输出会传递给几何着色器(Geometry Shader)。几何着色器把图元形式的一系列顶点的集合作为输入，它可以通过产生新顶点构造出新的（或是其它的）图元来生成其他形状。

4）几何着色器的输出会被传入光栅化阶段(Rasterization Stage)，这里它会把图元映射为最终屏幕上相应的像素，生成供片段着色器(Fragment Shader)使用的片段(Fragment)。在片段着色器运行之前会执行裁切(Clipping)。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。

一个片段是OpenGL渲染一个像素所需的所有数据 :用来更新帧缓存
（frame buffer）中特定位置的一个像素。一个片断除了包含颜色，
还有法线和纹理坐标等属性，这些信息用来计算新的像素颜色值。

本阶段的输出包括：

• 帧缓存中片断的位置
• 在顶点变换阶段计算出的信息对每个片断的插值

5） 片段着色器(Fragment Shader)的主要目的是计算一个像素的最终颜色，这也是所有OpenGL高级效果产生的地方。通常，片段着色器包含3D场景的数据（比如光照、阴影、光的颜色等等），这些数据可以被用来计算最终像素的颜色。

此阶段的输入是经过插值的片断信息。在前一阶段已经通过插值计算了纹理坐标和一个颜色值，这个颜色在本阶段可以用来和纹理元素进行组合。此外，这一阶段还可以进行雾化处理。通常最后的输出是片断的颜色值以及深度信息。

6 ）在所有对应颜色值确定以后，最终的对象将会被传到最后一个阶段，我们叫做Alpha测试和混合(Blending)阶段。这个阶段检测片段的对应的深度（和模板(Stencil)）值（后面会讲），用它们来判断这个像素是其它物体的前面还是后面，决定是否应该丢弃。这个阶段也会检查alpha值（alpha值定义了一个物体的透明度）并对物体进行混合(Blend)。所以，即使在片段着色器中计算出来了一个像素输出的颜色，在渲染多个三角形的时候最后的像素颜色也可能完全不同。

注意混合只能在此阶段进行，因为片断纹理化和颜色化阶段不能访问帧缓存。帧缓存只能在此阶段访问。

编码基础

• glGenBuffers申请一个标识符

• glBindBuffer把标识符绑定到GL_ARRAY_BUFFER上

• glBufferData把顶点数据从cpu内存复制到gpu内存

• glEnableVertexAttribArray 是开启对应的顶点属性

• glVertexAttribPointer设置合适的格式从buffer里面读取数据

  • 第一个参数指定我们要配置的顶点属性。还记得我们在顶点着色器中使用layout(location = 0)定义了position顶点属性的位置值(Location)吗？它可以把顶点属性的位置值设置为0。因为我们希望把数据传递到这一个顶点属性中，所以这里我们传入0。

  • 第二个参数指定顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3。

  • 第三个参数指定数据的类型，这里是GL_FLOAT(GLSL中vec*都是由浮点数值组成的)。

  • 下个参数定义我们是否希望数据被标准化(Normalize)。如果我们设置为GL_TRUE，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE。

  • 第五个参数叫做步长(Stride)，它告诉我们在连续的顶点属性组之间的间隔。由于下个组位置数据在3个GLfloat之后，我们把步长设置为3 * sizeof(GLfloat)。要注意的是由于我们知道这个数组是紧密排列的（在两个顶点属性之间没有空隙）我们也可以设置为0来让OpenGL决定具体步长是多少（只有当数值是紧密排列时才可用）。一旦我们有更多的顶点属性，我们就必须更小心地定义每个顶点属性之间的间隔，我们在后面会看到更多的例子(译注: 这个参数的意思简单说就是从这个属性第二次出现的地方到整个数组0位置之间有多少字节)。

  • 最后一个参数的类型是GLvoid*，所以需要我们进行这个奇怪的强制类型转换。它表示位置数据在缓冲中起始位置的偏移量(Offset)。由于位置数据在数组的开头，所以这里是0。我们会在后面详细解释这个参数。

• 限定符

• FrameBuffer & RenderBuffer

  
  

  • A renderbuffer object is a 2D image buffer allocated by the application. The renderbuffer can be used to allocate and store color, depth, or stencil values and can be used as a color, depth, or stencil attachment in a framebuffer object. A renderbuffer is similar to an off-screen window system provided drawable surface, such as a pbuffer. A renderbuffer, however, cannot be directly used as a GL texture.

  • A framebuffer object (often referred to as an FBO) is a collection of color, depth, and stencil buffer attachment points; state that describes properties such as the size and format of the color, depth, and stencil buffers attached to the FBO; and the names of the texture and renderbuffer objects attached to the FBO. Various 2D images can be attached to the color attachment point in the framebuffer object. These include a renderbuffer object that stores color values, a mip-level of a 2D texture or a cubemap face, or even a mip-level of a 2D slice in a 3D texture. Similarly, various 2D images contain- ing depth values can be attached to the depth attachment point of an FBO. These can include a renderbuffer, a mip-level of a 2D texture or a cubemap face that stores depth values. The only 2D image that can be attached to the stencil attachment point of an FBO is a renderbuffer object that stores stencil values.

Demo Code

Demo的流程如下：

• 创建顶点数据：vertices,里面包含位置，颜色和纹理坐标
• 把当前View的layerClass改为CAEAGLLayer类型，并初始化。
• 初始化EAGLContext。它管理着OpenGLES的渲染context，即所有绘制的状态，命令及资源信息，并控制GPU去执行渲染运算。
• 创建渲染缓冲，调用renderbufferStorage接口函数, 为之前生成的CAEAGLLayer对象分配空间，此空间也是RenderBuffer的存储空间。
• 创建帧缓冲，把RenderBuffer挂接到对应的帧缓冲，也就是FrameBuffer。
• 初始化Shader
• 创建顶点缓冲：vertexBuffer
• 渲染

渲染结果是先输出到Framebuffer中，然后通过调用context的presentRenderbuffer,将Framebuffer上的内容提交给之前的layer。

更多请查看这里

Vertex Shader

attribute vec4 Position;
attribute vec4 SourceColor;
varying vec4 DestinationColor;
attribute vec2 TexCoordIn;
varying vec2 TexCoordOut;

void main(void) {
    DestinationColor = SourceColor;
    gl_Position = Position;
    TexCoordOut = TexCoordIn;
}

Fragment Shader

varying lowp vec4 DestinationColor; 

varying lowp vec2 TexCoordOut;
uniform sampler2D Texture;

void main(void) {
     gl_FragColor = texture2D(Texture, TexCoordOut);
}

GLView

#import "GLView.h"
#include <OpenGLES/ES2/gl.h>
#include <OpenGLES/ES2/glext.h>

typedef struct {
    float Position[3];
    float Color[4];
    float TexCoord[2]; // New
} Vertex;


const Vertex Vertices[] = {
    {{1, -1, 0}, {1, 0, 0, 1}, {1, 0}},
    {{1, 1, 0}, {1, 0, 0, 1}, {1, 1}},
    {{-1, 1, 0}, {0, 1, 0, 1}, {0, 1}},
    {{-1, -1, 0}, {0, 1, 0, 1}, {0, 0}},
    {{1, -1, -1}, {1, 0, 0, 1}, {1, 0}},
    {{1, 1, -1}, {1, 0, 0, 1}, {1, 1}},
    {{-1, 1, -1}, {0, 1, 0, 1}, {0, 1}},
    {{-1, -1, -1}, {0, 1, 0, 1}, {0, 0}}
};

const GLubyte Indices[] = {
    0, 1, 2,
    2, 3, 0
};

@interface GLView ()
{
    GLuint _positionSlot;
    GLuint _colorSlot;
    GLuint _floorTexture;
    GLuint _texCoordSlot;
    GLuint _textureUniform;
}
@property (nonatomic,strong) CAEAGLLayer *eagLayer;
@property (nonatomic,strong) EAGLContext *context;
@property (nonatomic,assign) GLuint colorRenderBuffer;
@end

@implementation GLView
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupLayer];
        [self setupContext];

        //先设置RenderBuffer,再设置FrameBuffer,顺序不能互换
        [self setupRenderBuffer];
        [self setupFrameBuffer];

        [self compileShaders];
        [self setupVBOs];
        
        _floorTexture = [self setupTexture:@"1.png"];
        [self render];
    }
    return self;
}

+ (Class)layerClass
{
    return [CAEAGLLayer class];
}

- (void)setupLayer
{
    self.eagLayer = (CAEAGLLayer *)self.layer;
    self.eagLayer.opaque = YES;
}

- (void)setupContext
{
    EAGLRenderingAPI renderApi = kEAGLRenderingAPIOpenGLES2;
    self.context = [[EAGLContext alloc] initWithAPI:renderApi];
    [EAGLContext setCurrentContext:_eaglContext]; 
}

//RenderBuffer用于存储渲染的内容,renderBuffer对象本身不能直接使用，
//不能挂载到GPU上而直接输出内容的，要使用frameBuffer。
- (void)setupRenderBuffer {

    //创建渲染缓冲
    glGenRenderbuffers(1, &_colorRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
    [_context renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.eagLayer];
}

- (void)setupFrameBuffer {
    GLuint framebuffer;
    //创建帧缓冲
    glGenFramebuffers(1, &framebuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

    //glFramebufferRenderbuffer将Renderbuffer挂接到相应的Framebuffer上.
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
                              GL_RENDERBUFFER, _colorRenderBuffer);
}
- (void)render {
    glClearColor(0, 104.0/255.0, 55.0/255.0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
   // 从buffer里面读取数据到对应的缓冲区
    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE,
                          sizeof(Vertex), 0);
    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE,
                          sizeof(Vertex), (GLvoid*) (sizeof(float) * 3));
    glVertexAttribPointer(_texCoordSlot, 2, GL_FLOAT, GL_FALSE,
                          sizeof(Vertex), (GLvoid*) (sizeof(float) * 7));
    
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, _floorTexture);
    
    
    //glUniform1i设置uniform采样器的位置值，或者说纹理单元。通过glUniform1i的设置，我们保证每个uniform采样器对应着正确的纹理单元
    glUniform1i(_textureUniform, 0);
    
    glDrawElements(GL_TRIANGLES, sizeof(Indices)/sizeof(Indices[0]),
                   GL_UNSIGNED_BYTE, 0);
    [_context presentRenderbuffer:GL_RENDERBUFFER];
}



- (GLuint)setupTexture:(NSString *)fileName {

    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }

    GLsizei width = (GLsizei)CGImageGetWidth(spriteImage);
    GLsizei height = (GLsizei)CGImageGetHeight(spriteImage);    
    GLubyte * spriteData = (GLubyte *) calloc(width*height*4, sizeof(GLubyte));
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
    CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
    CGContextRelease(spriteContext);
    
    GLuint texName;
    glGenTextures(1, &texName);
    glBindTexture(GL_TEXTURE_2D, texName);
    /*
     GL_NEAREST产生了颗粒状的图案，我们能够清晰看到组成纹理的像素，
      而GL_LINEAR能够产生更平滑的图案，很难看出单个的纹理像素。
      GL_LINEAR可以产生更真实的输出，但有些开发者更喜欢8-bit风格，
      所以他们会用GL_NEAREST选项。

      当进行放大(Magnify)和缩小(Minify)操作的时候可以设置纹理过滤的选项，
      比如你可以在纹理被缩小的时候使用邻近过滤，被放大时使用线性过滤。
      我们需要使用glTexParameter*函数为放大和缩小指定过滤方式。这段代码
      看起来会和纹理环绕方式的设置很相似：
     
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
     */
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    free(spriteData);
    return texName;    
}
- (void)compileShaders {
    
    GLuint vertexShader = [self compileShader:@"Vertex"
                                     withType:GL_VERTEX_SHADER];
    
    GLuint fragmentShader = [self compileShader:@"Fragment"
                                       withType:GL_FRAGMENT_SHADER];

    GLuint programHandle = glCreateProgram();
    glAttachShader(programHandle, vertexShader);
    glAttachShader(programHandle, fragmentShader);
    
    /*
     glCreateProgram函数创建一个程序，并返回新创建程序对象的ID引用。
    现在我们需要把之前编译的着色器附加到程序对象上，然后用
     glLinkProgram链接它们
     */
    glLinkProgram(programHandle);

    GLint linkSuccess;
    glGetProgramiv(programHandle, GL_LINK_STATUS, &linkSuccess);
    if (linkSuccess == GL_FALSE) {
        GLchar messages[256];
        glGetProgramInfoLog(programHandle, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"%@", messageString);
        exit(1);
    }
    
    /*
     得到的结果就是一个程序对象，我们可以调用glUseProgram函数，
     用刚创建的程序对象作为它的参数，以激活这个程序对象：
     在glUseProgram函数调用之后，每个着色器调用和渲染调用都会使用
      这个程序对象（也就是之前写的着色器)了。
     
     对了，在把着色器对象链接到程序对象以后，记得删除着色器对象，
      我们不再需要它们了：
     */

    glUseProgram(programHandle);
    _positionSlot = glGetAttribLocation(programHandle, "Position");
    _colorSlot = glGetAttribLocation(programHandle, "SourceColor");

    //开启对应的顶点属性
    glEnableVertexAttribArray(_positionSlot);
    glEnableVertexAttribArray(_colorSlot);
    
    
    _texCoordSlot = glGetAttribLocation(programHandle, "TexCoordIn");
    glEnableVertexAttribArray(_texCoordSlot);
    _textureUniform = glGetUniformLocation(programHandle, "Texture");
}

- (GLuint)compileShader:(NSString*)shaderName withType:(GLenum)shaderType {
    
    NSString* shaderPath = [[NSBundle mainBundle] pathForResource:shaderName
                                                           ofType:@"glsl"];
    NSError* error;
    NSString* shaderString = [NSString stringWithContentsOfFile:shaderPath
                                                       encoding:NSUTF8StringEncoding error:&error];
    if (!shaderString) {
        NSLog(@"Error loading shader: %@", error.localizedDescription);
        exit(1);
    }

    GLuint shaderHandle = glCreateShader(shaderType);
    const char * shaderStringUTF8 = [shaderString UTF8String];
    int shaderStringLength = (int)[shaderString length];
    
    /*
     glShaderSource函数把要编译的着色器对象作为第一个参数。第二参数
    指定了传递的源码字符串数量，这里只有一个。第三个参数是顶点着色器
    真正的源码，第四个参数我们先设置为NULL。
     */
    glShaderSource(shaderHandle, 1, &shaderStringUTF8, &shaderStringLength);
    glCompileShader(shaderHandle);
    
    GLint compileSuccess;
    glGetShaderiv(shaderHandle, GL_COMPILE_STATUS, &compileSuccess);
    if (compileSuccess == GL_FALSE) {
        GLchar messages[256];
        glGetShaderInfoLog(shaderHandle, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"%@", messageString);
        exit(1);
    }
    return shaderHandle;   
}


- (void)setupVBOs {
    
    GLuint vertexBuffer;
    //vertexBuffer :顶点缓冲对象(Vertex Buffer Objects, VBO,
      它会在GPU内存（通常被称为显存）中储存大量顶点
    glGenBuffers(1, &vertexBuffer);

    //使用glBindBuffer函数把新创建的缓冲绑定到GL_ARRAY_BUFFER目标上，
      从这一刻起，我们使用的任何（在GL_ARRAY_BUFFER目标上的）缓冲调用
      都会用来配置当前绑定的缓冲(VBO
    glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);

    //把顶点数据从cpu内存复制到gpu内存
    glBufferData(GL_ARRAY_BUFFER, sizeof(Vertices), Vertices, GL_STATIC_DRAW);
    
    GLuint indexBuffer;
    //创建索引缓冲对象
    glGenBuffers(1, &indexBuffer);

    //VBO类似，我们先绑定EBO然后用glBufferData把索引复制到缓冲里。
    同样，和VBO类似，我们会把这些函数调用放在绑定和解绑函数调用之间，
    只不过这次我们把缓冲的类型定义为GL_ELEMENT_ARRAY_BUFFER。
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(Indices), Indices, GL_STATIC_DRAW);
    
}

@end

参考资料 :
OpenGL Frame Buffer Object
OpenGL Vertex Buffer Object （VBO)
OpenGL Rendering Pipeline
图形流水线
GLSL基础
你好，三角形
FrameBuffer & RenderBuffer relationship
很直观的说明了FrameBuffer 和 RenderBuffer 的关系