OpenGL ES GLKit/GLKView/GLKViewController加载图片

Opengl ES初使用

一、环境搭建

1、用Xcode创建一个单控制器工程；
2、将一张图片拖到工程内，后续使用；
3、将ViewController的view类型修改为”GLKView”,ViewController.h文件内容

#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>

@interface ViewController : GLKViewController

@end

4、修改ViewController.m文件

#import "ViewController.h"
#import <OpenGLES/ES3/gl.h>
#import <OpenGLES/ES3/glext.h>

@interface ViewController ()<GLKViewDelegate>
{
    EAGLContext *context;
    GLKBaseEffect *mEffect;//着色器或者光照
}
@end

二、编码实现用OpenGL ES加载图片函数块

1、OpneGL ES 配置

//1、设置opengl es 配置
- (void)setupConfig {
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
    EAGLContext *ctx = [[EAGLContext alloc]initWithAPI:api];
    if (!ctx) {
        NSLog(@"EAGLContext init error!");
        return;
    }
    [EAGLContext setCurrentContext:ctx];

    GLKView *gView = (GLKView *)self.view;
    gView.context = ctx;
    gView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    gView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    //开启深度测试
    glEnable(GL_DEPTH_TEST);
    //清除背景色
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
}

2、加载顶点数据

//2、加载顶点数据
- (void)uploadVertexArray {
    //OpenGL ES
    //顶点数据（x,y,z） 纹理（x,y）
    //剧中半屏显示
    GLfloat vertexData[] = {
        0.5f,-0.5f,0.0f,      1.0f,0.0f,
        0.5f,0.5f,0.0f,       1.0f,1.0f,
        -0.5f,0.5f,0.0f,      0.0f,1.0f,

        0.5f,-0.5f,0.0f,      1.0f,0.0f,
        -0.5f,0.5f,0.0f,      0.0f,1.0f,
        -0.5f,-0.5f,0.0f,     0.0f,0.0f,
    };
    /*
    //---全屏显示
    GLfloat vertexData[] = {
        1.0f,-1.0f,0.0f,      1.0f,0.0f,
        1.0f,1.0f,0.0f,       1.0f,1.0f,
        -1.0f,1.0f,0.0f,      0.0f,1.0f,

        1.0f,-1.0f,0.0f,      1.0f,0.0f,
        -1.0f,1.0f,0.0f,      0.0f,1.0f,
        -1.0f,-1.0f,0.0f,     0.0f,0.0f,
    };
     */

    //开启顶点缓存区
    GLuint buffer;
    //产生buffer标记
    glGenBuffers(1, &buffer);
    //绑定buffer
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    //加载数据
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

    //GLSL gl_position
    glEnableVertexAttribArray(GLKVertexAttribPosition);

    //读取顶点数据到顶点着色器中（GLKit）
    /* 数据参数定义（纹理同理）：
        1、读取顶点数据
        2、读取数据个数（每个顶点数据几个数据）
        3、顶点数据类型
        4、是否规格化 no
        5、每次读取的偏移量
        6、指针起点
     */
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (GLfloat *)NULL);
    //读取纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);

    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (GLfloat *)NULL + 3);
}

3、加载纹理

//3、加载纹理
- (void)uploadTexture {
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"c" ofType:@"png"];

    //纹理是反的
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@1,GLKTextureLoaderOriginBottomLeft, nil];

    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

#pragma mark
#pragma mark - delegate
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    glClearColor(0.3, 0.3, 0.6, 1.0f);
    //清除surface内容，恢复至初始状态
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    //启动着色器
    [mEffect prepareToDraw];
    /*
     1、着色模式
     2、开始位置
     3、数目
     */
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

三、ViewController.m 实现部分

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //1、设置opengl es 配置
    [self setupConfig];

    //2、加载顶点数据
    [self uploadVertexArray];

    //3、加载纹理
    [self uploadTexture];

    // Do any additional setup after loading the view, typically from a nib.
}

//1、设置opengl es 配置
- (void)setupConfig {
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
    EAGLContext *ctx = [[EAGLContext alloc]initWithAPI:api];
    if (!ctx) {
        NSLog(@"EAGLContext init error!");
        return;
    }
    [EAGLContext setCurrentContext:ctx];

    GLKView *gView = (GLKView *)self.view;
    gView.context = ctx;
    gView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    gView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    //开启深度测试
    glEnable(GL_DEPTH_TEST);
    //清除背景色
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
}

//2、加载顶点数据
- (void)uploadVertexArray {
    //OpenGL ES
    //顶点数据（x,y,z） 纹理（x,y）
    //剧中半屏显示
    GLfloat vertexData[] = {
        0.5f,-0.5f,0.0f,      1.0f,0.0f,
        0.5f,0.5f,0.0f,       1.0f,1.0f,
        -0.5f,0.5f,0.0f,      0.0f,1.0f,

        0.5f,-0.5f,0.0f,      1.0f,0.0f,
        -0.5f,0.5f,0.0f,      0.0f,1.0f,
        -0.5f,-0.5f,0.0f,     0.0f,0.0f,
    };
    /*
    //---全屏显示
    GLfloat vertexData[] = {
        1.0f,-1.0f,0.0f,      1.0f,0.0f,
        1.0f,1.0f,0.0f,       1.0f,1.0f,
        -1.0f,1.0f,0.0f,      0.0f,1.0f,

        1.0f,-1.0f,0.0f,      1.0f,0.0f,
        -1.0f,1.0f,0.0f,      0.0f,1.0f,
        -1.0f,-1.0f,0.0f,     0.0f,0.0f,
    };
     */

    //开启顶点缓存区
    GLuint buffer;
    //产生buffer标记
    glGenBuffers(1, &buffer);
    //绑定buffer
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    //加载数据
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

    //GLSL gl_position
    glEnableVertexAttribArray(GLKVertexAttribPosition);

    //读取顶点数据到顶点着色器中（GLKit）
    /* 数据参数定义（纹理同理）：
        1、读取顶点数据
        2、读取数据个数（每个顶点数据几个数据）
        3、顶点数据类型
        4、是否规格化 no
        5、每次读取的偏移量
        6、指针起点
     */
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (GLfloat *)NULL);
    //读取纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);

    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (GLfloat *)NULL + 3);
}
//3、加载纹理
- (void)uploadTexture {
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"c" ofType:@"png"];

    //纹理是反的
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@1,GLKTextureLoaderOriginBottomLeft, nil];

    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:NULL];
    mEffect = [[GLKBaseEffect alloc]init];
    mEffect.texture2d0.enabled = GL_TRUE;
    mEffect.texture2d0.name = textureInfo.name;
}

#pragma mark
#pragma mark - delegate
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    glClearColor(0.3, 0.3, 0.6, 1.0f);
    //清除surface内容，恢复至初始状态
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    //启动着色器
    [mEffect prepareToDraw];
    /*
     1、着色模式
     2、开始位置
     3、数目
     */
    glDrawArrays(GL_TRIANGLES, 0, 6);
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

四、运行看效果

iChenfy

发布了172 篇原创文章 · 获赞 35 · 访问量 39万+

他的留言板关注

OpenGL ES GLKit/GLKView/GLKViewController加载图片

一、环境搭建

二、编码实现用OpenGL ES加载图片函数块

三、ViewController.m 实现部分

四、运行看效果

猜你喜欢