OpenGL ES:移动设备上的OpenGL

2020-10-20 本文已影响0人沙克阿拉卡

第六章 OpenGL ES:移动设备上的OpenGL

OpenGL ES是以手持和嵌入式设备为目标的高级3D图形应用程序编程接口( API)。已经成为当今智能手机中占据统治地位的图形API。其作用范围已经扩展到桌面。支持的平台包括iOS、Android、 BlackBerry、
Linux和Windows，它还是基于浏览器的3D图形Web标准WebGL的基础。
使用Android4.3以上版本的设备和使用iOS7的iPhone 5s以后的设备都已经支持OpenGL ES 3.0。OpenGL ES 3.0向后兼容OpenGL ES 2.0,也就是说，为OpenGL ES 2.0编写的应用程序在OpenGL ES 3.0中可以继续使用。

iOS使用OpenGL ES的封装框架GLKit

GLKit框架的设计目标是为了简化基于OpenGL或者OpenGL ES的应用开发。
它包括4个部分：

GLKView/GLKViewController：这些类抽取出大量的样板（boilerplate）代码，并完成了OpenGL ES 项目的基本配置。
GLKEffects：这些类实现了OpenGL ES公共（common）的shading行为，同时提供了让光和纹理（lighting and texturing）工作的简单方法。
GLMath：在iOS 5之前，每个游戏都需要它们自己的数学库，处理公共的向量和矩阵操作方法。现在有了GLMath，大多数的公共方法都可以从GLMath中获得。
GLKTextureLoader：这个类使得加载图像作为OpenGL使用的纹理更加简单。和写一个复杂的方法来处理大量不同的图像格式比，现在加载一个纹理只需要一个简单的方法调用。

框架使用：
       引入GLKit框架
       新建一个ViewController继承自GLKViewController
       把这个控制器设置为根视图
       导入相应头文件
       #import <OpenGLES/ES3/gl.h>
       #import <OpenGLES/ES3/glext.h>

初始化：

1.初始化上下文&设置当前上下文
       使用OpenGL做任何事前，你都需要先创建一个EAGLContext。
       iOS使用OpenGL进行绘制时需要一些信息，这些信息都由EAGLContext管理。这和你使用一个Core Graphics上下文差不多。
       当你创建一个上下文时，你需要定义要使用的API版本。

/*
 EAGLContext 是苹果iOS平台下实现OpenGLES 渲染层.
 kEAGLRenderingAPIOpenGLES1 = 1, 固定管线
 kEAGLRenderingAPIOpenGLES2 = 2,
 kEAGLRenderingAPIOpenGLES3 = 3,
*/
self.context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES3];

2.设置当前上下文

 [EAGLContext setCurrentContext:context];

3.获取GLKView & 设置context
创建了一个新的GLKView的实例，并使它和整个window一样大。
当你创建一个GLKView的时候，需要告诉它要使用的OpenGL 上下文，所以配置成刚刚创建的context。

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

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

       drawableColorFormat(颜色缓存区格式)：
       用一个缓冲区以存储将在屏幕中显示的颜色。可以使用其属性来设置缓冲区中的每个像素的颜色格式。
       GLKViewDrawableColorFormatRGBA8888：此值为默认值，缓存区的每个像素的最小组成部分（RGBA）使用8个bit，（所以每个像素4个字节，4*8个bit）。
       GLKViewDrawableColorFormatRGB565：如果你的APP允许更小范围的颜色，即可设置这个。会让你的APP消耗更小的资源（内存和处理时间）
       drawableDepthFormat(深度缓存区格式)：如果你要使用这个属性（一般用于3D游戏），你应该选择GLKViewDrawableDepthFormat16或GLKViewDrawableDepthFormat24。这里的差别是使用GLKViewDrawableDepthFormat16将消耗更少的资源。
        - GLKViewDrawableDepthFormatNone = 0：意味着完全没有深度缓冲区
        - GLKViewDrawableDepthFormat16
        - GLKViewDrawableDepthFormat24

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

设置背景颜色

定义用来清理屏幕的RGB颜色和alpha（透明度）值。这里我们设置红色。
glClearColor(1, 0, 0, 1.0);

顶点操作
1.准备数据

/*
 设置顶点数组(顶点坐标,纹理坐标)
 纹理坐标系取值范围[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, //左下
};

2.绑定数据

//创建顶点缓存区标识符ID
GLuint bufferID;
//第一个参数：要生成的缓冲对象的数量
//第二个参数：要输入用来存储缓冲对象名称的数组
glGenBuffers(1, &bufferID);

//绑定顶点缓存区
//第一个参数：缓冲对象的类型
//第二个参数：要绑定的缓冲对象的名称
glBindBuffer(GL_ARRAY_BUFFER, bufferID);

//将顶点数组的数据copy到顶点缓存区中(GPU显存中)   
glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

3.打开读取通道

       GLKit目标就是简化, 里面有很多对OpenGLES的封装, 我们也可以不用进行shader的编辑, 不用在写glsl就能完成shader的绘制
GLKVertexAttribPosition就是position位置插槽,
GLKVertexAttribColor就是color位置插槽,
GLKVertexAttribTexCoord0就是texcoord0位置插槽,
       定glEnableVertexAttribArray：在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的。
意味着,顶点数据在着色器端(服务端)是不可用的。即使你已经使用glBufferData方法，将顶点数据从内存拷贝到顶点缓存区中(GPU显存中)。
所以, 必须由glEnableVertexAttribArray方法打开通道。指定访问属性，才能让顶点着色器能够访问到从CPU复制到GPU的数据。
       数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
       函数：glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
       上传顶点数据到显存的方法（设置合适的方式从buffer里面读取数据）
       参数：
       index：指定要修改的顶点属性的索引值
       size：每次读取数量。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个.）
       type：指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和GL_FLOAT，初始值为GL_FLOAT。
       normalized：指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
       stride：指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
       ptr：指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0

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

纹理设置

获取纹理图片路径

  NSString *filePath = [[NSBundle mainBundle]pathForResource:@"test" ofType:@"jpg"];

设置纹理参数
由于纹理坐标系是跟手机显示的Quartz 2D坐标系的y轴正好相反，纹理坐标系使用左下角为原点，往上为y轴的正值，往右是x轴的正值，所以需要设置一下GLKTextureLoaderOriginBottomLeft。

NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];

GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
//使用GLKit 提供GLKBaseEffect 完成着色器工作(顶点/片元)
cEffect = [[GLKBaseEffect alloc]init];
cEffect.texture2d0.enabled = GL_TRUE;
cEffect.texture2d0.name = textureInfo.name;

绘制

glClear(GL_COLOR_BUFFER_BIT);

//准备绘制
[cEffect prepareToDraw];

//开始绘制
glDrawArrays(GL_TRIANGLES, 0, 6);

GLKBaseEffect使用

GLKBaseEffect是一个辅助类，为你实现一些通用的着色器。
要使用GLKBaseEffect，你需要这样做：
• 创建一个GLKBaseEffect。通常当你创建OpenGL上下文的时候，你都会创建一个。对于不同的几何图形，你可以（或者说应该）重用相同的GLKBaseEffect，只是要重新设置其属性。在后台，GLKBaseEffect只会向它的着色器传播刚刚变化的属性。
• 设置GLKBaseEffect的属性。这里你可以配置光，转化，和其他GLKBaseEffect的着色器用来渲染几何图形的属性。
• 调用GLKBaseEffect的prepareToDraw方法。任何时候如果你改变了GLKBaseEffect的一个属性，你都要先调用prepareToDraw方法让着色器得到正确的配置。这也让GLKBaseEffect的着色器作为“当前”的着色器程序（就是让GLKBaseEffect的着色器起作用）。
• 使能预定义属性。通常当你使用自定义着色器时，他们会使用称为属性的参数，你要写代码获得它们的ID。对于GLKBaseEffect的内建着色器，这些属性已经用常量值预先定义好了，比如GLKVertexAttribPosition或者GLKVertexAttribColor。所以你要使能所有需要传给着色器的参数，并保证他们指向了数据。
• 绘制你的几何图形。一旦你东西要配置，你都可以使用普通的OpenGL绘图指令，比如glDrawArrays或者glDrawElements，它会使用你刚刚配置好的效果进行渲染！
GLKBaseEffect的好处是如果你使用它们，你根本就不需要去写任何的着色器！当然如果你喜欢，你还是可以像原来那样做，并且你可以使用GLKBaseEffect混合、匹配并渲染一些东西，还可以使用你自定义的着色器。

OpenGL ES:移动设备上的OpenGL

第六章 OpenGL ES:移动设备上的OpenGL

iOS使用OpenGL ES的封装框架GLKit

猜你喜欢

热点阅读