OpenGL ES 案例：加载一张正方形图片

2020-07-27  本文已影响0人  远方竹叶

在 iOS 开发中，实现这个效果，OC 代码只需要两步

  1. 创建 UIImageView；
  2. 加载图片。

那么在 OpenGL ES 时，我们要怎么样实现呢？首先，来看下整个流程图

准备工作

创建一个 iOS 空工程，在 ViewController.h 类中倒入 #import <GLKit/GLKit.h> 头文件，并将 ViewController 的父类改为 GLKViewController，控制器的 View 的父类改为 GLKView：

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

@interface ViewController : GLKViewController
@end

setUpConfig

初始化上下文&设置当前上下文

在一个项目中可以有多个上下文，但是当前只能有一个

/*
 EAGLContext 是苹果iOS平台下实现OpenGLES 渲染层.
 kEAGLRenderingAPIOpenGLES1 = 1, 固定管线
 kEAGLRenderingAPIOpenGLES2 = 2,
 kEAGLRenderingAPIOpenGLES3 = 3,
 */
context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES3];
//判断context是否创建成功
if (!context) {
    NSLog(@"Create ES context Failed");
}
//设置当前上下文
[EAGLContext setCurrentContext:context];

获取 GLKView &设置 context

GLKView *view =(GLKView *) self.view;
view.context = context;

配置视图创建的渲染缓存区

颜色缓存区格式

OpenGL ES 有一个缓存区，它用以存储将在屏幕中显示的颜色。你可以使用其属性来设置缓冲区中的每个像素的颜色格式。

深度缓存区格式

GLKViewDrawableDepthFormatNone = 0,意味着完全没有深度缓冲区
GLKViewDrawableDepthFormat16,
GLKViewDrawableDepthFormat24,

view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
view.drawableDepthFormat = GLKViewDrawableDepthFormat16;

设置背景颜色

glClearColor(1, 0, 0, 1.0);

setUpVertexData

设置顶点数组（顶点坐标&纹理坐标）

纹理坐标系取值范围[0,1]；原点是左下角(0,0)；故而(0,0)是纹理图像的左下角，点(1,1)是右上角

GLfloat vertexData[] = {
        
        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
        0.5, 0.5,  0.0f,    1.0f, 1.0f, //右上
        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上
        
        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上
        -0.5, -0.5, 0.0f,   0.0f, 0.0f, //左下
    };

开辟顶点缓存区

开发者可以选择设定函数指针，在调用绘制方法的时候，直接由内存传入顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组。

性能更高的做法是，提前分配一块显存，将顶点数据预先传入到显存当中。这部分的显存，就被称为顶点缓冲区。

创建顶点缓存区标识符ID
GLuint bufferID;
glGenBuffers(1, &bufferID);
绑定顶点缓存区（明确作用）
glBindBuffer(GL_ARRAY_BUFFER, bufferID);
将顶点数组的数据 copy 到顶点缓存区（GPU 显存中）
//参数1：目标
//参数2：坐标数据的大小
//参数3：坐标数据
//参数4：用途
glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

打开读取通道

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

数据在 GPU 端是否可见，即着色器能否读取到数据，由是否启用了对应的属性决定，这就是 glEnableVertexAttribArray 的功能，允许顶点着色器读取 GPU（服务器端）数据。

(2)上传顶点数据到显存的方法

/**
     参数1：传递顶点坐标的类型有五种类型：position[顶点]、normal[法线]、color[颜色]、texCoord0[纹理一]、texCoord1[纹理二]，这里用的是顶点类型
     参数2：每次读取数量（如 position 是由3个（x,y,z）组成，而颜色是4个（r,g,b,a），纹理则是2个）
     参数3：指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT
     参数4：指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
     参数5：步长，取完一次数据需要跨越多少步长去读取下一个数据，如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
     参数6：指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0
     */
glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)

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

setUpTexture

1. 获取纹理图片路径

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"timg" ofType:@"png"];

2. 设置纹理参数

纹理坐标原点是左下角，但是图片显示原点应该是左上角

NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];

3. 使用苹果 GLKit 提供的 GLKBaseEffect 完成着色器工作

cEffect = [[GLKBaseEffect alloc]init];
cEffect.texture2d0.enabled = GL_TRUE;
cEffect.texture2d0.name = textureInfo.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);
}

这就结束了吗？我们来运行看下效果：

为什么图片会是长方形？这里需要设置透视投影矩阵方式。又由于平截头体可视范围的问题，我们需要将顶点向后移2.0单位。

CGFloat aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);
GLKMatrix4 projectMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 1.0f, 200.0f);
effect.transform.projectionMatrix = projectMatrix;
    
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0, 0, -2.0);
effect.transform.modelviewMatrix = modelViewMatrix;

完整代码见Github-OpenGL_ES

上一篇下一篇

猜你喜欢

热点阅读