iOS GLKit 初探 (加载图片)

2020-08-04 本文已影响0人番茄炒西红柿啊

OpenGL ES是以手持和嵌⼊式为目标的高级3D图形应用程序编程接口(API), 支持的平台: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows.

GLKit则是苹果基于OpenGL ES封装为了简化基于OpenGL / OpenGL ES 的应用开发为目的一套框架苹果现已弃用OpenGL ES ,但iOS开发者可以继续使⽤

接下来实现一个简单的利用GLKit加载一张图片的案例

创建一个视图控制器继承于GLKViewController

#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
@interface ViewController : GLKViewController
{
  EAGLContext *context;
  GLKBaseEffect *cEffect;
}
@end

创建上下文,并关联上下文

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

// 创建上下文
    context = [[EAGLContext alloc] initWithAPI:(kEAGLRenderingAPIOpenGLES3)];
    if (nil == context) {
        NSLog(@"create context failed");
        return;
    }
    // 设置上下文
    [EAGLContext setCurrentContext:context];
    GLKView *view = (GLKView *)(self.view);
    view.context = context;

[[EAGLContext alloc] initWithAPI:(kEAGLRenderingAPIOpenGLES3)];后面的枚举指的是API版本
GLKView是GLKViewController的view. 当我们没有使用GLKViewController时,需要创建一个GLKView

配置缓冲区

    //3.配置视图创建的渲染缓存区.
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat16;
    //4.设置背景颜色
    glClearColor(1, 0, 0, 1.0);

颜色缓存区格式
GLKViewDrawableColorFormatRGBA8888	(默认)缓存区的每个像素的最小组成部分（RGBA）使用8个bit，（所以每个像素4个字节，4*8个bit）。
GLKViewDrawableColorFormatRGB565	如果你的APP允许更小范围的颜色，即可设置这个。会让你的APP消耗更小的资源（内存和处理时间）
GLKViewDrawableColorFormatSRGBA8888	比RGBA多了个S

深度缓存区格式
GLKViewDrawableDepthFormatNone	意味着没有深度缓冲区
GLKViewDrawableDepthFormat16 GLKViewDrawableColorFormatSRGBA8888	如果你要使用这个属性（一般用于3D游戏，你应该选择GLKViewDrawableDepthFormat16或GLKViewDrawableDepthFormat24。这里的差别是使GLKViewDrawableDepthFormat16将消耗更少的资源

开辟顶点缓存区 / 绑定缓冲区 / 加载顶点数据到缓存区

这里顶点数据和纹理数据都放在一维数组里vertexData, 每5个元素为一组, 前3个为顶点数据, 后2个为对应的纹理顶点坐标.

    // 顶点数据和纹理顶点坐标
    CGFloat width = [[UIScreen mainScreen] bounds].size.width;
    CGFloat height = [UIScreen mainScreen].bounds.size.height;
    CGFloat s = width / height;
    GLfloat vertexData[] = {
        0.5, -0.5 * s, 0.0f,    1.0f, 0.0f, //右下
        0.5, 0.5 * s,  0.0f,    1.0f, 1.0f, //右上
        -0.5, 0.5 * s, 0.0f,    0.0f, 1.0f, //左上
        
        0.5, -0.5 * s, 0.0f,    1.0f, 0.0f, //右下
        -0.5, 0.5 * s, 0.0f,    0.0f, 1.0f, //左上
        -0.5, -0.5 * s, 0.0f,   0.0f, 0.0f, //左下
    };
    // 开辟顶点缓存区
    GLuint bufferId;
    glGenBuffers(1, &bufferId);
    // 绑定顶点缓冲区
    glBindBuffer(GL_ARRAY_BUFFER, bufferId);
    // 将数据从内存中拷贝到顶点缓冲区中
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

打开读取通道

在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute)变量都是关闭的.意味着,顶点数据在着色器端(服务端)是不可用的. 即使你已经使用glBufferData方法,将顶点数据从内存拷贝到顶点缓存区中(GPU显存中).所以, 必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据.

    //顶点坐标数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    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);

glVertexAttribPointer
参数一	指定要修改的顶点属性的索引值如: GLKVertexAttribPosition
参数二	读取数据的数量
参数三	指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
参数四	指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
参数五	指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
参数六	指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0

读取纹理

    // 加载纹理
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"kunkun" ofType:@"jpg"];
    NSDictionary *dic = @{
        GLKTextureLoaderOriginBottomLeft : @(1)
    };
    GLKTextureInfo *info = [GLKTextureLoader textureWithContentsOfFile:filePath options:dic error:nil];
    cEffect = [[GLKBaseEffect alloc] init];
    cEffect.texture2d0.enabled = GL_TRUE;
    cEffect.texture2d0.name = info.name;

在GLKViewDelegate中开始绘制

//绘制视图的内容
/*
 GLKView对象使其OpenGL ES上下文成为当前上下文，并将其framebuffer绑定为OpenGL ES呈现命令的目标。然后，委托方法应该绘制视图的内容。
*/
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
    //1.
    glClear(GL_COLOR_BUFFER_BIT);
    
    //2.准备绘制
    [cEffect prepareToDraw];
    
    //3.开始绘制
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
}

效果图:

iOS GLKit 初探 (加载图片)

猜你喜欢

热点阅读