OpenGLES（二）- GLKit: 纹理贴图

OpenGLES（二）- GLKit: 纹理贴图

运行结果

思维导图

准备工作

//1.导入头文件
#import <GLKit/GLKit.h>
#import <OpenGLES/ES3/gl.h>
#import <OpenGLES/ES3/glext.h>

//2.将控制器（UIViewController）改为GLKViewController

//3.创建私有属性
EAGLContext *content;
GLKBaseEffect *bEffect;

以下配置上下文、配置坐标、加载纹理数据都是在-viewDidLoad中调用

配置上下文

//创建EAGL上下文，并设置使用GLES3标准
content = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    
if (!content){
    NSLog(@"create eagl failed");
    return;
}

//创建GLKView
GLKView *view = (GLKView *)self.view;
view.context = content;
//将content设置为当前EAGLContext
[EAGLContext setCurrentContext:content];

//设置GLKView的缓存区参数
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;

glClearColor(0.3, 0.2, 0.7, 1);

配置坐标

GLfloat versArr[] = {
        -0.6, -0.5, 0.0f,    0.0f, 0.0f, //左下
        0.6, -0.5, 0.0f,    1.0, 0.0,   //右下
        0.6, 0.5, 0.0f,    1.0, 1.0,   //右上
        
        0.6, 0.5, 0.0f,    1.0, 1.0,   //右上
        -0.6, 0.5, 0.0f,    0.0, 1.0,   //左上
        -0.6, -0.5, 0.0f,    0.0f, 0.0f, //左下
    };
    
//创建顶点缓冲区
//创建顶点缓存区标识符ID
GLuint bufferId;
glGenBuffers(1, &bufferId);

//绑定缓冲区为顶点缓存区
glBindBuffer(GL_ARRAY_BUFFER, bufferId);

//将顶点数组copy进顶点缓存区
glBufferData(GL_ARRAY_BUFFER, sizeof(versArr), versArr, GL_STATIC_DRAW);
    
    //允许顶点着色器访问顶点缓存区的Position数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    //将顶点数据读入顶点着色器
    /*
        将顶点缓存区的数据上传到顶点着色器
        index： 指定修改的顶点缓存区属性索引值
        size： 每次读取的数量（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个（x,y）.）
        type: 指定数组中每个组件的数据类型。
        normalized： 指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
        stride:步长，第一个点的X值距离下一个点的X值的数组下标偏移量
        ptr：指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0
     */
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0 );
    
    //允许顶点着色器访问顶点缓存区的纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);

加载纹理数据

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"cat" ofType:@"jpg"];

/*
    GLKTextureLoaderOriginBottomLeft:
    纹理坐标原点是左下角,但是图片显示原点应该是左上角.
    此键指定是否应垂直翻转图像数据以匹配OpenGL的坐标系。
    如果为否，则不翻转图像数据。如果是，则在加载图像数据之前将其翻转。

    GLKTextureLoaderGenerateMipmaps:
    是否开启mipmap
 */
NSDictionary *option = [NSDictionary dictionaryWithObject:@(1) forKey:GLKTextureLoaderOriginBottomLeft];

//读取纹理文件
GLKTextureInfo *info = [GLKTextureLoader textureWithContentsOfFile:filePath options:option error:nil];

//创建固定效果器（着色器）
bEffect = [[GLKBaseEffect alloc] init];
//将纹理绑定到效果器上
bEffect.texture2d0.enabled = GL_TRUE;
bEffect.texture2d0.name = info.name;

GLKViewDelegate代理方法

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    //效果器（固定着色器）准备绘制
    [bEffect prepareToDraw];
    
    glDrawArrays(GL_TRIANGLES, 0, 6);
}