欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS OpenGL ES入门案例

程序员文章站 2022-09-16 20:24:05
OpenGL ES 是OpenGL针对嵌入式系统设置的标准图形库。它是OpenGL的简化版。但是基本的渲染管线没有大的变化。虽然iOS13开始不再支持OpenGL ES,已转向metal,但是OpenGL ES 仍然可以在iOS中仍可以使用,且其它嵌入式设备仍支持OpenGL ES。同时学习Open GL ES能更好的学习metal。渲染管线顶点缓存区 —>顶点着色器 —> 细分控制器 —> 细分中着色器 —> 图元转配 —>光栅化 —> 片元着色器其中顶点...

OpenGL ES 是OpenGL针对嵌入式系统设置的标准图形库。它是OpenGL的简化版。但是基本的渲染管线没有大的变化。

虽然iOS13开始不再支持OpenGL ES,已转向metal,但是OpenGL ES 仍然可以在iOS中使用,且其它嵌入式设备仍支持OpenGL ES。同时学习Open GL ES能更好的学习metal。

渲染管线

顶点缓存区 —>顶点着色器 —> 细分控制器 —> 细分中着色器 —> 图元转配 —>光栅化 —> 片元着色器

其中顶点着色器、片元着色器是可以供开发者使用的,而iOS也提供了默认实现好的着色器。
由于OpenGL ES只是一个渲染库,所以还需要其他功能库配合使用。

  • GLKView 提供绘制场所(View)
  • GLKViewController(扩展于标准的UIKit 设计模式. ⽤于绘制视图内容的管理与呈现.)

本节主要已加载图片案例为主。

准备工作

  1. xcode创建一个iOS 项目
  2. 在main.storyboard 中将viewcontroller 中的view变为GLKView
  3. 使viewcontroller继承GLKViewController
#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
@interface ViewController : GLKViewController
{
    EAGLContext *context;
    // 简单的光源和着色系统(固定着色器)
    GLKBaseEffect *effect; //
}

@end

初始化设置


//1.初始化设置
-(void)setupConfig{
    //1.初始化openGLEs上下文
    context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];

    //2.
    if (!context) {
        NSLog(@"失败");
        return;
    }
    
    //3.设置当前上下文,可以有多个上下文,但是只能有一个当前上下文
    [EAGLContext setCurrentContext:context];
    
    //4. 接管view
    GLKView *view = (GLKView *)self.view;
    view.context = context;
    
    //4.1颜色缓冲区格式
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    //4.2 深度缓冲区渲染格式, GLKViewDrawableDepthFormat16 和 GLKViewDrawableDepthFormat24两中,值越大z-fighting的概率就越小,但现代设备很少出现z-fighting
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    
    //5. 背景色
    glClearColor(0, 0, 1, 1);
}

EAGLContext:管理OpenGL ES渲染上下文—状态信息,命令和资源。

设置顶点数据

顶点是空间坐标系中的一个点(x,y,z)。空间中每个点之间的连接方式,可以称为图元装配。而OpenGL ES 支持三种图元,即点、线、三角形。一条线需要两个顶点,三角形需要3个顶点,长方形则需要2两个三角形即6个顶点。

//2.设置顶点数据
-(void) setupVertexData {
    
    //1.顶点数组,在内存中
    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, // 左上
    };
    
    //2.顶点缓冲区 -> GPU显存
    GLuint bufferID;
    glGenBuffers(1, &bufferID);
    
    //3.绑定顶点缓冲区
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    
    //4.顶点从内存中复制到顶点缓冲区
    
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    
    //顶点着色器在服务端的属性是关闭的,所以需要手动开启
    
    //4. 打开顶点数据的通道
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    //5. 读取顶点数据  顶点缓冲区 -> 顶点着色器
    // size
    glVertexAttribPointer(GLKVertexAttribPosition,//打开的是哪个属性,现在是顶点
                          3, // 每次读取vertexData 3个数据
                          GL_FLOAT,
                          false,
                          sizeof(GL_FLOAT) * 5 //步长,间隔多少去从一位数组中取顶点数据
                        , (GLfloat *)NULL + 0);// 从哪个位置取
    
    //6.打开纹理数据通道
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, //打开纹理属性
                          2,        //每次从vertexData 2个数据
                          GL_FLOAT,
                          false, sizeof(GL_FLOAT) * 5 , //步长
                          (GLfloat *)NULL + 3);
}

  1. vertexData 顶点数组,左侧为顶点坐标,右侧为纹理坐标。加载纹理(图片)需要纹理坐标与openGLES中的坐标进行一一映射。就如同手机贴膜一样,手机是在OpenGLES坐标系中,手机膜在纹理坐标系中,需要做好映射关系。(OpenGL ES 屏幕中间是原点,纹理坐标左下交是原点)
  2. 顶点初始化后是在内存中,根据渲染管线,顶点会从顶点缓冲区复制顶点到顶点着色器。
  3. 绑定顶点缓冲区
  4. glBufferData 将顶点会从顶点缓冲区复制顶点到顶点着色器。

参数
target:指定目标缓冲区对象。GL_ARRAY_BUFFER、GL_ELEMENT_ARRAY_BUFFER。
size:指定缓冲区对象的新数据存储的大小(以字节为单位)。
data:指定将复制到数据存储区以进行初始化的数据的指针,如果不复制数据,则指定NULL。
usage指定数据存储的预期使用模式。 GL_STREAM_DRAW,GL_STATIC_DRAW或GL_DYNAMIC_DRAW。

  1. 在iOS中, 默认情况下,出于性能考虑,所有顶点着色器的属性(Attribute)变量都是关闭的.意味着,顶点数据在着色器端(服务端)是不可用的。必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据。
  2. 由于我们加载图片需要用到顶点坐标GLKVertexAttribPosition和纹理坐标GLKVertexAttribTexCoord0,所以需要打开这个两个属性。

加载纹理

纹理可以理解为图片,OpenGL读取图片会对图片进行解压获取图片中的RGBA数据存储到帧缓存冲去中

-(void)setUpTexture{
    
    //1.获取图片路径
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"jpg"];
    //2.设置纹理的参数
    //翻转坐标系,  纹理坐标原点:左下角,图片的原点:坐上
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft:@(1)};
    
    //3.加载图片
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    //4.  baseEffect 固定着色器,(顶点和片元着色器)
    effect = [[GLKBaseEffect alloc] init];
    effect.texture2d0.enabled = GL_TRUE;
    //把纹理交给固定着色器,
    effect.texture2d0.name = textureInfo.name;
}
  1. 获取图片路径
  2. 设置参数,在ios中我们都知道坐标原点在左上角,而纹理坐标是在坐下角,需要反转下
  3. 加载纹理,获取纹理信息
  4. GLKBaseEffect 是iOS提供的固定着色器,只需要将加载的纹理数据交给固定着色器。

渲染

-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{

    glClear(GL_COLOR_BUFFER_BIT );
    
    //准备绘制
    [effect prepareToDraw];
    //开始绘制
   glDrawArrays(GL_TRIANGLES, //图元类型
                 0, //从第几个顶点开始
                 6); //顶点数量
}

glkView:drawInRect是GLKViewController的代理方法,必须要实现的。该代理方法会不断地循环调用。
iOS OpenGL ES入门案例

本文地址:https://blog.csdn.net/a1034386099/article/details/107594371

相关标签: OpenGL ES