2、OpenGL ES - EGL 探索

OpenGL ES - EGL 探索

 

OPenGL ES（OPenGL for Embedded Systems）是以手持和嵌入式为目标的高级3D图形应用程序API。支持多个平台：iOS、Andriod、BlackBerry、bada、Linux、Windows。

 

OPenGL 和 OPenGL ES 的基本概念和历史

• OPenGL ES 1.x : 针对固定功能流水管线硬件
• OPenGL ES 2.x ：针对可编程流水管线硬件
• OPenGL ES 3.x : OPenGL ES 2.0的扩展

 

1、EGL

Embedded Graphics Library

OPenGL ES 命名需要渲染上下文和绘制表面才能完成图形图像的绘制

渲染上下文：存储相关OPenGL ES状态
绘制表面：是用于绘制图元的表面，他制定渲染所需要的缓存区类型，例如颜色缓存区，深度缓存区和模板缓存区
OPenGL ES API 并没有提供如何创建渲染上下文或者上下文如何连接到原生窗口系统EGL 是Khronos 渲染API（如OPenGL ES）和原生窗口系统之间的接口，唯一支持OPenGL ES 却不支持 EGL 的平台是iOS

 

1.1、EGL 的主要功能

1. 和本地窗口系统（native windowing system）通讯；
2. 查询可用的配置
3. 创建OPenGL ES可用的“绘图表面”（drawing surface）；
4. 同步不同类型的API之间的渲染，比如在OPenGL ES 和 OPenVG之间同步，或者在OPenGL 和本地窗口的绘图命令之间；
5. 管理“渲染资源”，比如纹理映射（rendering map）

1.2、向量数据类型

类型	描述
vec2，vec3，vec4	2分量、3分量、4分量浮点型向量
ivec2，ivec3，ivec4	2分量、3分量、4分量整型向量
uvec2，uvec3，uvec4	2分量、3分量、4分量无符号整型向量
bvec2，bvec3，bvec4	2分量、3分量、4分量bool型向量

 

1.3、矩阵数据类型

类型	描述
mat2，mat2x2	两行两列
mat3，mat3x3	三行三列
mat4，mat4x4	四行四列
mat2x3	三行两列
mat2x4	四行两列
mat3x2	两行三列
mat3x4	四行三列
mat4x2	两行四列
mat4x3	三行四列

 *  mat 列 x 行

 

1.3、变量存储限定符

限定符	描述
	只是普通的本地变量，外部不见，外部不可访问
const	一个编译常量，或者说是一个对函数来说为只读的参数
in/varying	从以前阶段传递过来的变量
in/varying centroid	一个从以前的阶段传递过来的变量，使用质心插值
out/attribute	传递到下一个处理阶段或者在一个函数中指定一个返回值
out/attribute centroid	传递到下一个处理阶段，质心插值
Uniform	一个从客户端代码传递过来的变量，在顶点之间不做改变

质心插值学术文献：https://www.ixueshu.com/document/f2f5be57efaaad68.html

 

GLSL 语言推荐阅读书籍
任意一本关于OPenGL ES/OPenGL 书都涉及到GLSL 语言的章节；
《OPenGL 超级宝典》
《OPenGL 编程指南》
《OPenGL ES 编程指南》
《OPenGL GLSL 语言》

 

2、OPenGL ES 错误处理

如果不正确使用OPenGL ES命令，应用程序就会产生一个错误编码，这个错误编码将被记录，可以用 glGetError 查询，在引用程序glGetError 查询第一个错误代码之前，不会记录其他错误代码，一旦查询到错误代码，当前错误代码便复位为GL_NO_ERROR。

GLenum glGetError(void)

错误代码	描述
GL_NO_ERROR	从上一次调用glGetError以来没有生产任何错误
GL_INVALID_EMUM	GLenum 参数超出范围，忽略生产错误命令
GL_INVALID_VALUE	数值型参数超出范围，忽略生产错误命名
GL_INVALID_OPERATION	特定命名在当前OPenGL ES状态无法执行
GL_OUT_OF_MEMORY	内存不足执行该命令，如果遇到这个错误。除非当前错误代码。否者OPenGL ES管线状态被认为未定义

 

3、案例

目标

• 用EAGL 创建屏幕上的渲染表面
• 加载顶点/片元着色器
• 创建一个程序对象，并链接顶点/片元着色器，并链接程序对象
• 设置视口
• 清除颜色缓存区
• 渲染颜色缓存区
• 渲染简单图元
• 使颜色缓存区的内容在EAGL窗口表现呈现

 

着色器与程序

• 着色器与程序对象
• 创建和编译着色器
• 创建并链接程序
• 获取和设置统一变量
• 获取和设置属性
• 着色器编译器与程序二进制代码

需要创建2个基本对象才能用着色器进行渲染：着色器对象和程序对象
获取连接后着色器对象的一般过程包括6个步骤

1. 创建一个顶点着色器对象和一个片段着色器对象
2. 将源代码链接到每个着色器对象
3. 编译着色器对象
4. 创建一个程序对象
5. 将编译后的着色器对象连接到程序对象
6. 连接程序对象

 

3.1、创建与编译一个着色器

GLuint glCreateShader(GLenum type)

type   -创建着色器的类型，GL_VERTEX_SHADER（顶点） 或者 GLFRAGMENT_SHADER（片元）
返回值  -是指向新着色器对象的句柄，可以调用glDeleteShader 删除

 

void glDeleteShader(GLuint shader);

shader   -要删除的着色器对象句柄

 

void glShaderSource(GLuint shader, GLSizei count, const GLChar * const * string, const GLint *length);

shader    -指向着色器对象的句柄
count     -着色器源字符串的数量，着色器可以由多个源字符串组成，但是每个着色器只有一个main 函数
string     -指向保存数量的count 的着色器源字符串的数组指针
Length    - 指向保存每个着色器字符串大小且元素数量为count 的整数数组指针

 

viod glComplieShader(GLuint shader);

shader    - 需要编译的着色器对象句柄

 

void glGetShaderiv(GLuint shader, GLenum pname, GLint * params);

shader    -需要编译的着色器对象句柄
Pname    -获取的信息参数，可以为
GL_COMPILE_STATUS
GL_DELETE_STATUS
GL_INFO_LOG_LENGTH
GL_SHADER_SOURCE_LENGTH
GL_SHADER_TYPE
params    -指向查询结果的证书存储位置的指针

 

void glGetShaderInfolog(GLuint shader, GLSizei maxLength, GLSizei * length, GLChar * infoLog);

shader    -需要获取信息日志的着色器对象句柄
maxLength    -保存信息日志的缓存区大小
Length    - 写入的信息日志的长度（减去null 终止符）；如果不需要知道长度，这个参数可以为Null
infoLog    -指向保存信息日志的字符缓存区的指针

3.2、创建与连接程序

创建一个程序对象

GLuint glCreateProgram()

返回值：返回一个执行新程序对象的句柄

 

void glDeleteProgram(GLuint program)

program    :指向需要删除的程序对象句柄

 

3.3、着色器与程序连接 / 附着

void glAttachShader(GLuint program, GLuint shader);

program    ：指向程序对象的句柄
Shader    ：指向程序连接的着色器对象的句柄

 

3.4、断开连接

void glDetachShader(GLuint program);

Program    ：指向程序对象的句柄
Shader    ：指向程序断开连接的着色器对象句柄

3.5、创建与连接程序

glLinkProgram(GLuint program)

Program    ：指向程序对象句柄

连接程序之后，需要检查连接是否成功，你可以使用glGetProgramiv 检查连接状态：

void glGetProgramiv(Gluint program, GLenum pname, GLint * params);

grogram    :需要获取信息的程序对象句柄
Pname    ：获取信息的参数，可以是

params : 指向查询结果整数存储位置的指针

    GL_ACTIVE_ATTRIBUTES
    GL_ACTIVE_ATTRIBUTES_MAX_LENGTH
    GL_ACTIVE_UNIFORM_BLOCK
    GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH
    GL_ACTIVE_UNIFROMS
    GL_ACTIVE_UNIFORM_MAX_LENGTH
    GL_ATTACHED_SHADERS
    GL_DELETE_STATUS
    GL_INFO_LOG_LENGTH
    GL_LINK_STATUS
    GL_PROGRAM_BINARY_RETRIEVABLE_HINT
    GL_TRANSFORM_FEEDBACK_BUFFER_MODE
    GL_TRANSFORM_FEEDBACK_VARYINGS
    GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH
    GL_VALIDATE_STATUS

/* Shaders */
#define GL_FRAGMENT_SHADER                               0x8B30
#define GL_VERTEX_SHADER                                 0x8B31
#define GL_MAX_VERTEX_ATTRIBS                            0x8869
#define GL_MAX_VERTEX_UNIFORM_VECTORS                    0x8DFB
#define GL_MAX_VARYING_VECTORS                           0x8DFC
#define GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS              0x8B4D
#define GL_MAX_VERTEX_TEXTURE_IMAGE_UNITS                0x8B4C
#define GL_MAX_TEXTURE_IMAGE_UNITS                       0x8872
#define GL_MAX_FRAGMENT_UNIFORM_VECTORS                  0x8DFD
#define GL_SHADER_TYPE                                   0x8B4F
#define GL_DELETE_STATUS                                 0x8B80
#define GL_LINK_STATUS                                   0x8B82
#define GL_VALIDATE_STATUS                               0x8B83
#define GL_ATTACHED_SHADERS                              0x8B85
#define GL_ACTIVE_UNIFORMS                               0x8B86
#define GL_ACTIVE_UNIFORM_MAX_LENGTH                     0x8B87
#define GL_ACTIVE_ATTRIBUTES                             0x8B89
#define GL_ACTIVE_ATTRIBUTE_MAX_LENGTH                   0x8B8A
#define GL_SHADING_LANGUAGE_VERSION                      0x8B8C
#define GL_CURRENT_PROGRAM                               0x8B8D

3.6、从程序信息日志中获取信息

 

void glGetPorgramInfoLog(GLuint program, GLSize maxLength, GLSize * length, GLChar * infoLog)

program    ：指向需要获取信息的程序对象句柄
maxLength    ：存储信息日志的缓存区大小
length    :写入的信息日志长度（减去null 终止符），如果不需要知道长度，这个参数可以为Null。
infoLog    ：指向存储信息日志的字符缓存区的指针

 

void glUseProgram(GLuint program)

program    ：设置为活动程序的程序对象句柄

由于xcode不支持编译顶点着色器起这样的文件，所以在xcode里面并没有对应的文件创建的入口。我们可以创建一个空的文件，然后将后缀修改了。
例如：顶点着色器 vsh   片元着色器 fsh
上面写的vsh / fsh 这个只是让开发者知道这个是顶点着色器 / 片元着色器，并不是系统该规定要这样写，可以是其他的
New File -> Empty

GLSL
不建议使用直接使用NSString，JS文件用NSString没有什么帮助，同时不容易理解代码和查找问题
不建议写中文注释  容易出BUG。错误提示信息，虽然有行数，但是如果有中文的话，标识出来的错误行数会不正确。例如28行错了，但是提示是31行。

 

4、demo

里面分成了3个demo

demo1 使用OpenGL ES GLSL纹理图片的加载

demo2 做一个图片组成的正方体并旋转

demo3用核心动画实现一个正方体并旋转

 

Demo地址 -> OpenGL_ESDemos -> 002--test

demo1、纹理图片加载出来的图片是反的，是因为对应顶点位置的问题。

这里需要注意的一点是，由于LJLView里面的内容是- (void)layoutSubviews 调用执行的，需要注意layoutSubviews的触发条件

addSubview，frame修改等会触发。

-(void)testDemo1
{
//    这样写的话新版不调用view的layoutSubviews
//    self.myView = (LJLView *)self.view;
    
//
    self.myView = [[LJLView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:self.myView];
}

/*
 不采样GLKBaseEffect，使用编译连接自定义的着色器（shader）。用简单的glsl语言来实现顶点、片元着色器，并图形进行简单的变换。
 思路“
 1、创建图层
 2、创建上下文
 3、清空缓存区
 4、设置RenderBuffer
 5、设置FrameBuffer
 6、开始绘制
 */

#import "LJLView.h"
#import 

@interface LJLView ()

//在iOS和tvOS 上绘制OPenGL ES内容的图层，继承与CALayer
@property (nonatomic, strong) CAEAGLLayer * myEagLayer;
@property (nonatomic, strong) EAGLContext * myContext;

@property (nonatomic, assign) GLuint myColorRenderBuffer;
@property (nonatomic, assign) GLuint myColorFrameBuffer;
@property (nonatomic, assign) GLuint myPrograme;


@end

@implementation LJLView

- (void)layoutSubviews
{
//    1、设置图层
    [self setupLayer];
    
//    2、设置上下文
    [self setupContext];
    
//    3、清空缓存区
    [self deleteRenderAndFrameBuffer];
    
//    4、设置RenderBuffer
    [self setupRenderBuffer];
 
//    5、设置FrameBuffer
    [self setupFrameBuffer];
    
//    6、开始绘制
    [self renderLayer];
}

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

1、设置图层，需要重写  +(Class)layerClass，要不然这里self 是UIView self.layer 是CALayer，我们这里需要CAEAGLLayer，所以需要重写，转换一下

//1、设置图层
-(void)setupLayer
{
//    1、创建特殊图层
//    重写layerClass，将CCView 返回的图层从CALayer 替换成CAEAGLLayer
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
//    2、设置scale
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    
//    3、设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA 8
//    kEAGLDrawablePropertyRetainedBacking 表示绘图表面显示后，是否保留其内容。
//    kEAGLDrawablePropertyColorFormat 可绘制表面的内部颜色缓存区格式，这个key 对应的值是一个NSString 指定特定颜色缓存区对象。默认是kEAGLColorFormatRGBA 8;
//    kEAGLColorFormatRGBA8: 32为RGBA的颜色 4*8 =32位
//    kEAGLColorFormatRGB565: 16位的RGB的颜色
//    kEAGLColorFormatSRGBA8: sRGB代表了标准的红、绿、蓝。即CRT显示器、LCD显示器，投影机，打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一色彩坐标系，而不受这些设备各自具有的不同色彩坐标的影响。
    
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking,kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];
}

2、设置上下文

//2、设置上下文
-(void)setupContext
{
//    1、指定OpenGL ES 渲染API 版本，我们使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    
//    2、创建图形山下文
    EAGLContext * context = [[EAGLContext alloc] initWithAPI:api];
//    3、判断是否创建成功
    if (!context) {
        NSLog(@"Create Context failed!");
        return;
    }
//    4.设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
//    5、将局部context 变成全局的
    self.myContext = context;
}

3、清空缓冲区

//3、清空缓存区
-(void)deleteRenderAndFrameBuffer
{
//    buffer 分为 frame buffer 和 render buffer 2个大类
//    其中frame buffer 相当于render buffer 的管理者。
//    frame buffer object 即称FBO
//    render buffer 则又可以分为3类。colorBuffer、depthBuffer、stencilBuffer
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}

4、设置渲染缓冲区

1. 定义一个缓冲区
2. 通过上面的定义申请一个缓冲区
3. 赋值给全局变量
4. 将标识符绑定到渲染缓冲区
5. 将可绘制对象 layer的存储绑定到OpenGL ES RenderBuffer 对象

//4、设置RenderBuffer
-(void)setupRenderBuffer
{
//    1、定义一个缓存区ID
    GLuint buffer;
    
//    2、申请一个缓存区标志
    glGenRenderbuffers(1, &buffer);
    
//    3
    self.myColorRenderBuffer = buffer;
    
//    4、将标识符绑定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
//    5、将可绘制对象drawable object‘s CAEAGLLayer的存储绑定到OPenGL ES RenderBuffer 对象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
    
}

5、设置frameBuffer

//5、设置FrameBuffer
-(void)setupFrameBuffer
{
//1、定义一个缓存区
    GLuint buffer;
    
//    2、申请一个缓存区标志
//    glGenRenderbuffers(1, &buffer)；
//    glGenFramebuffers(1, &buffer);
    glGenBuffers(1, &buffer);
    
//    3、
    self.myColorFrameBuffer = buffer;
    
//    4/
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
//    生成帧缓冲区之后，则需要将renderBuffer 跟FrameBuffer进行绑定
//    调用GLFrameBufferRenderBuffer 函数进行绑定到对应的附着点上，后面的绘制才能起作用
    
//    将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer 函数绑定到GL_COLOR_ATTACHMENT0上
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}

6、开始绘制

1. 清除屏幕颜色
2. 清除屏幕
3. 设置视口大小
4. 读取顶点着色器程序、片元着色器程序
5. 加载着色器
6. 链接
7. 获取链接状态
8. .....

 

注意加载纹理，这个testImage2是图片名称，如果这个地方填错了（填成一个不存在的图片名）会奔溃的。demo中使用了两种图片导入，一种直接拖入，一种是放到Assets 中。都可以直接通过图片文件名进行访问到图片资源。
 [self setupTexture:@"testImage2"];

 

//    （1）注意：第二个参数紫都城必须和shaderv.vsh 中输入的变量：position 保存一致。
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
   
//    注意：第二个参数字符串必须和shaderv.vsh 中的输入量textCoordinate 保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");

这个两个地方的参数名要与我们的着色器程序中的参数名一致，否者是不会显示的。建议复制粘贴过来

//6.开始绘制
-(void)renderLayer
{
//    清除屏幕颜色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
//    清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
//1、设置视口大小
    CGFloat scale = [[UIScreen mainScreen] scale];
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
    
//  2、读取顶点着色程序、片元着色程序
    NSString * vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
    NSString * fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
    
    NSLog(@"\nvertFile:%@\nfragFile:%@",vertFile,fragFile);
    
//    3、加载shader
    self.myPrograme = [self loadShaders:vertFile WithFrag:fragFile];
    
//    4、链接
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    
//    获取链接状态
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);

    if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString * messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    
    NSLog(@"Program Link Success!");
//    5、使用program
    glUseProgram(self.myPrograme);
    
//    6、设置顶点、纹理坐标
//    前面3个是顶点坐标，后面2个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    
//    7、处理顶点数据
//    （1）、顶点缓存区
    GLuint attrBuffer;
//    (2)、申请一个缓存区标识符
    glGenBuffers(1, &attrBuffer);
//    (3)、将attrBuffer 绑定到GL_ARRAY_BUFFER 标识符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
//    (4)、把顶点数据从CPU内存复制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
//    8、将顶点数据通过myPrograme 中的传递到顶点着色器程序的Position
//    8.1、glGetAttribLocation，用来获取vertex attrbute 的入口的
//    8.2、告诉OPenGL ES，通过glEnableVertexAttribArray，
//    8.3、最后数据是通过glVertexAttribPointer 传递过去的
    
//    （1）注意：第二个参数紫都城必须和shaderv.vsh 中输入的变量：position 保存一致。
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
//    (2).设置合适的格式从buffer 里面读取数据
    glEnableVertexAttribArray(position);
    
//    (3)、设置读取方式
//     参数1：index，顶点数据的索引
//    参数2：size，每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
//    参数3：type，数据中的每个组件的类型，常用的有GL_FLOAT， GL_BYTE，GL_SHORT。默认初始值为GL_FLOAT
//    参数4：normalized，固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）、
//    参数5：sreide，连接顶点属性之间的偏移量，默认为0；
//    参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件，默认为0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
//    9、处理纹理数据
//    （1）。glGetAttribLocation，用来获取certex attribute 的入口的。
//    注意：第二个参数字符串必须和shaderv.vsh 中的输入量textCoordinate 保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
//    (2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoor);
    
//(3).设置读取方式
//参数1：index,顶点数据的索引
//参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
//参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
//参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
//参数5：stride,连续顶点属性之间的偏移量，默认为0；
//参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
//    10、加载纹理
    [self setupTexture:@"testImage2"];
    
//    11、设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, @"coloMap"), 0);
    
//    12、绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
//    13、从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
    
}

//从图片中加载纹理
-(GLuint)setupTexture:(NSString *)fileName
{
//    1、将UIImage 转换为CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
//    判断图片是否获取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
//    2、读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
//    3、获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *)calloc(width * height *4, sizeof(GLubyte));
    
//    4。创建上下文
//    参数1：data,指向要渲染的绘制图像的内存地址
//    参数2：width，bitmap 的宽度，单位为像素
//    参数3：height，bitmap 的高度，单位为像素
//    参数4：bitPerComponent 内存中像素的每个组件的位数，比如32位RGBA，就设置为8
//    参数5：bytesPerRow，bitmap的每一行的内存所占的比特数
//    参数6：colorApace, bitmap上使用的颜色空间 KCGImageAlphaPremultipliedLast：RGBA
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
//    5、在CGContexRef上 --> 将图片绘制出来
//    CGContextDrawImage 使用的是Core Graphics 框架，坐标系与UIKit 不一样。UIKit 框架的原点在屏幕的左上角，Core Graphics（['ɡræfiks]）框架的原点在屏幕的左下角。
//    CGContextDrawImage
//    参数1:绘图上下文
//    参数2：rect坐标
//    参数3：绘制的图片
    CGRect rect = CGRectMake(0, 0, width, height);
    
//    6、使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
//    7、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
//    8、绑定纹理到默认的纹理ID
    glBindTexture(GL_TEXTURE_2D, 0);
    
//    9、设置纹理属性
//    参数1：纹理维度
//    参数2：线性过滤、为s,t坐标设置模式
//    参数3：wrapMode，环绕模式
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    
    float fw = width, fh = height;
    
//    10、载入纹理2D数据
//    参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
//    参数2：加载的层次，一般设置为0;
//    参数3：纹理的颜色值GL_RGBA
//    参数4：宽
//    参数5：高
//    参数6：border，边界宽度
//    参数7：format
//    参数8：type
//    参数9：纹理数据
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
//    11、释放spriteData
    free(spriteData);
    return 0;
}

#pragma mark - shader
//加载shader
-(GLuint)loadShaders:(NSString *)vert WithFrag:(NSString *)frag
{
//    1、定义2个临时着色器对象
    GLuint verShader, fragShader;
//    创建program(程序)
    GLint program = glCreateProgram();
    
//    2、编译顶点着色器程序、片元着色器程序
//    参数1：编译完存储的底层地址
//    参数2：编译的类型，GL_VERTEX_SHADER(顶点)、GL_FRAGMENT_SHADER（片元）
//    参数3：文件路径
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER  file:frag];
    
//    3、创建最终的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
//    4、释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}


//编译 shader
-(void)compileShader:(GLint *)shader type:(GLenum)type file:(NSString *)file
{
//    1、读取文件路径字符串
    NSString * conten = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar * source = (GLchar *)[conten UTF8String];
    
//    2、创建一个shader（根据type类型）
    * shader = glCreateShader(type);
    
//    3、将着色器源码附加到着色器对象上
//    参数1：shader，要编译的着色器对象 *shader
//    参数2：numOfString, 传递的源码字符串数量 1个
//    参数3：strings,着色器程序的源码（真正的着色器程序源码）
//    参数4:lenOfString, 长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
    glShaderSource(*shader, 1, &source, NULL);
    
//    4、把着色器源代码编译成目标代码
    glCompileShader(*shader);
    
}


@end

 

demo2 纹理加载图片组成一个立方体，并旋转

代码参阅demo

 

demo3 核心动画立方体旋转

代码参阅demo