OpenGLES(二)- GLKit: 纹理贴图OpenGLES(二)- GLKit: 纹理贴图

2021-08-09 11:17:47 浏览数 (1)

OpenGLES(二)- GLKit: 纹理贴图

运行结果

思维导图

准备工作

代码语言:javascript复制
//1.导入头文件
#import <GLKit/GLKit.h>
#import <OpenGLES/ES3/gl.h>
#import <OpenGLES/ES3/glext.h>

//2.将控制器(UIViewController)改为GLKViewController

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

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

配置上下文

代码语言:javascript复制
//创建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);

配置坐标

代码语言:javascript复制
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);

加载纹理数据

代码语言:javascript复制
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代理方法

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

0 人点赞