效果
image.png
GLKBaseEffect的属性方法
GLboolean _colorMaterialEnabled; //一个布尔值，指示在计算灯光与材质的交互时是否使用颜色顶点属性。
GLboolean _fogEnabled; //烟雾是否开启
// Modelview, projection, texture and derived matrices for transformation
GLKEffectPropertyTransform *_transform; // 模型视图、投影矩阵、纹理等仿射变换
// Lights
GLKLightingType _lightingType; //灯光类型
GLKEffectPropertyLight *_light0, *_light1, *_light2; //三种灯光
// Material for lighting
GLKEffectPropertyMaterial *_material; //灯光渲染的材质
// GL Texture Names
GLKEffectPropertyTexture *_texture2d0, *_texture2d1; //两个纹理
// Texture ordering array
NSArray *_textureOrder; //纹理渲染顺序
// Constant color (fixed color value to supplant the use of the "color" named vertex attrib array)
GLKVector4 _constantColor; //填充的颜色
// Fog
GLKEffectPropertyFog *_fog; // 烟雾效果
// Label for effect
NSString *_label; //命名
// Sync all effect changes for consistent state when drawing
- (void) prepareToDraw; //准备绘制
// GL_FALSE 我们的材质和颜色相互作用
@property (nonatomic, assign) GLboolean colorMaterialEnabled;
// GL_FALSE 光照模型
@property (nonatomic, assign) GLboolean lightModelTwoSided;
// GL_TRUE 不使用常量颜色
@property (nonatomic, assign) GLboolean useConstantColor;
// Identity Matrices 模型视图、投影矩阵、纹理等仿射变换
@property (nonatomic, readonly) GLKEffectPropertyTransform *transform;
// Disabled 三种灯光
@property (nonatomic, readonly) GLKEffectPropertyLight *light0, *light1, *light2;
// GLKLightingTypePerVertex 灯光类型
@property (nonatomic, assign) GLKLightingType lightingType;
// { 0.2, 0.2, 0.2, 1.0 } 灯光颜色
@property (nonatomic, assign) GLKVector4 lightModelAmbientColor;
// Default material state 灯光渲染的材质
@property (nonatomic, readonly) GLKEffectPropertyMaterial *material;
// Disabled 两个纹理
@property (nonatomic, readonly) GLKEffectPropertyTexture *texture2d0, *texture2d1;
// texture2d0, texture2d1 纹理渲染顺序
@property (nullable, nonatomic, copy) NSArray *textureOrder;
// { 1.0, 1.0, 1.0, 1.0 } 填充的颜色
@property (nonatomic, assign) GLKVector4 constantColor;
// Disabled
@property (nonatomic, readonly) GLKEffectPropertyFog *fog;
//命名
@property (nullable, nonatomic, copy) NSString *label;
使用OpenGL ES 加载图片 案例
#import
#import
@interface ViewController : GLKViewController
@end
viewController.m
#import "ViewController.h"
#import
#import
@interface ViewController ()
{
EAGLContext *context; //EAGLContent是苹果在ios平台下实现的opengles渲染层，用于渲染结果在目标surface上的更新。
GLKBaseEffect *mEffect;//着色器或者光照
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//1.设置OpenGL ES 配置
[self setUpConfig];
//2.加载顶点数据
[self uploadVertexArray];
//3.加载纹理
[self uploadTexture];
}
//3.加载纹理
- (void)uploadTexture {
//第一步，获取纹理图片路径
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"cTest" ofType:@"jpg"];
//GLKTextureLoaderOriginBottomLeft ,纹理坐标是相反的，所以调整为左下为[0，0]
NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, NULL];
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:NULL];
//着色器
mEffect = [[GLKBaseEffect alloc] init];
//第一个纹理属性
mEffect.texture2d0.enabled = GL_TRUE;
//纹理的名字
mEffect.texture2d0.name = textureInfo.name;
}
//2.加载顶点数据
- (void)uploadVertexArray {
//第一步：设置顶点数组
//OpenGLES的世界坐标系是[-1,1],故而点(0,0)是在屏幕的正中间。
//顶点数据，前3个是顶点坐标x，y，z后面2个是纹理坐标
//纹理坐标的取值范围是[0,1],原点是在左下角。故而点(0,0)在左下角，点(1,1)在右上角
//2个三角形构成
GLfloat vertextData[] = {
//顶点坐标。 纹理坐标
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, //左下
};
//开启顶点缓冲区
//顶点缓存区
GLuint buffer;
//申请一个缓存区标识符
glGenBuffers(1, &buffer);
//glBindBuffer 把标识符绑定到GL_ARRAY_BUFFER 上
glBindBuffer(GL_ARRAY_BUFFER, buffer);
//glBufferData 把顶点数据从cpu内容复制到gpu内存
glBufferData(GL_ARRAY_BUFFER, sizeof(vertextData), vertextData, GL_STATIC_DRAW);
//第三步：设置合适的格式从buffer里面读取数据
/*
默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着数据在着色器端是不可见的，哪怕数据已经上传到GPU，需要由glEnableVertexAttribArray启用指定属性，才可在顶点着色器中访问逐顶点的属性数据。glVertexAttribPointer或VBO只是建立CPU和GPU之间的逻辑连接，从而实现了CPU数据上传至GPU。但是，数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
*/
glEnableVertexAttribArray(GLKVertexAttribPosition);
//glVertexAttribPointer 使用来上传顶点数据到GPU的方法（设置合适的格式从buffer里面读取数据）
// index: 指定要修改的顶点属性的索引值
// size : 指定每个顶点属性的组件数量。必须为1、2、3或者4。初始值为4。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a））离下一个顶点的步长有多远
// 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 这个值受到VBO的影响,从什么位置开始，第0位
/*
VBO,顶点缓存对象
在不使用VBO的情况下：事情是这样的，ptr就是一个指针，指向的是需要上传到顶点数据指针。通常是数组名的偏移量。
在使用VBO的情况下：首先要glBindBuffer，以后ptr指向的就不是具体的数据了。因为数据已经缓存在缓冲区了。这里的ptr指向的是缓冲区数据的偏移量。这里的偏移量是整型，但是需要强制转换为const GLvoid *类型传入。注意的是，这里的偏移的意思是数据个数总宽度数值。
比如说：这里存放的数据前面有3个float类型数据，那么这里的偏移就是，3*sizeof(float).
最后解释一下，glVertexAttribPointer的工作原理：
首先，通过index得到着色器对应的变量openGL会把数据复制给着色器的变量。
以后，通过size和type知道当前数据什么类型，有几个。openGL会映射到float，vec2, vec3 等等。
由于每次上传的顶点数据不止一个，可能是一次4，5，6顶点数据。那么通过stride就是在数组中间隔多少byte字节拿到下个顶点此类型数据。
最后，通过ptr的指针在迭代中获得所有数据。
那么，最最后openGL如何知道ptr指向的数组有多长，读取几次呢。是的，openGL不知道。所以在调用绘制的时候，需要传入一个count数值，就是告诉openGL绘制的时候迭代几次glVertexAttribPointer调用。
*/
//(GLfloat *)NULL + 0 指针，指向数组首地址
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
//设置纹理
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
//(GLfloat *)NULL + 3,指向到纹理数据,相当于表示在数组当中，从第3位开始，参照数组来理解
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);
}
//1.设置OpenGL ES 配置
- (void)setUpConfig {
//context
/*
//EAGLContent是苹果在ios平台下实现的opengles渲染层，用于渲染结果在目标surface上的更新
kEAGLRenderingAPIOpenGLES1 ->OpenGL ES 1.0，固定管线
kEAGLRenderingAPIOpenGLES2 ->OpenGL ES 2.0
kEAGLRenderingAPIOpenGLES3 ->OpenGL ES 3.0
*/
//新建OpenGL ES 上下文
context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
if (!context) {
NSLog(@"Failed to create ES context");
return;
}
//创建一个OpenGL ES上下文并将其分配给从storyboard加载的视图
//注意：这里需要把stroyBoard记得添加为GLKView
GLKView *view = (GLKView *)self.view;
view.context = context;
//配置视图创建的渲染缓冲区
/*
OpenGL ES 有一个缓存区，它用以存储将在屏幕中显示的颜色。你可以使用其属性来设置缓冲区中的每个
像素的颜色格式。
默认：GLKViewDrawableColorFormatRGBA8888，即缓存区的每个像素的最小组成部分（RGBA）使用
8个bit，（所以每个像素4个字节，4*8个bit）。
GLKViewDrawableColorFormatRGB565,如果你的APP允许更小范围的颜色，即可设置这个。会让你的
APP消耗更小的资源（内存和处理时间）
*/
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
/*
OpenGL ES 另一个缓存区，深度缓冲区。帮助我们确保可以更接近观察者的对象显示在远一些的对象前面。
（离观察者近一些的对象会挡住在它后面的对象）
默认：OpenGL把接近观察者的对象的所有像素存储到深度缓冲区，当开始绘制一个像素时，它（OpenGL）
首先检查深度缓冲区，看是否已经绘制了更接近观察者的什么东西，如果是则忽略它（要绘制的像素，
就是说，在绘制一个像素之前，看看前面有没有挡着它的东西，如果有那就不用绘制了）。否则，
把它增加到深度缓冲区和颜色缓冲区。
缺省值是GLKViewDrawableDepthFormatNone，意味着完全没有深度缓冲区。
但是如果你要使用这个属性（一般用于3D游戏），你应该选择GLKViewDrawableDepthFormat16
或GLKViewDrawableDepthFormat24。这里的差别是使用GLKViewDrawableDepthFormat16
将消耗更少的资源，但是当对象非常接近彼此时，你可能存在渲染问题（）
*/
//深度缓存区
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
/*
你的OpenGL上下文的另一个可选的缓冲区是stencil（模板）缓冲区。它帮助你把绘制区
域限定到屏幕的一个特定部分。它还用于像影子一类的事物=比如你可以使用stencil缓冲
区确保影子投射到地板。缺省值是GLKViewDrawableStencilFormatNone，
意思是没有stencil缓冲区，但是你可以通过设置其值为GLKViewDrawableStencilFormat8
（唯一的其他选项）使能它
*/
// view.drawableStencilFormat = GLKViewDrawableStencilFormat8;
//启用多重采样
/*
这是你可以设置的最后一个可选缓冲区，对应的GLKView属性是multisampling。
如果你曾经尝试过使用OpenGL画线并关注过"锯齿壮线"，multisampling就可以帮助你处理
以前对于每个像素，都会调用一次fragment shader（片段着色器），
drawableMultisample基本上替代了这个工作，它将一个像素分成更小的单元，
并在更细微的层面上多次调用fragment shader。之后它将返回的颜色合并，
生成更光滑的几何边缘效果。
要小心此操作，因为它需要占用你的app的更多的处理时间和内存。
缺省值是GLKViewDrawableMultisampleNone，但是你可以通过设置其值GLKViewDrawableMultisample4X为来使能它
*/
//view.drawableMultisample = GLKViewDrawableMultisample4X;
[EAGLContext setCurrentContext:context];
//开启深度测试，就是让离你近的物体可以遮挡离你远的物体。
glEnable(GL_DEPTH_TEST);
//设置surface的清除颜色，也就是渲染到屏幕上的背景色。
glClearColor(0.1, 0.2, 0.3, 1);
}
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
//清除surface内容，恢复至初始状态
glClear(GL_DEPTH_BUFFER_BIT|GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
glClearColor(0.3f, 0.6f, 1.0f, 1.0f);
//启动着色器，准备绘制
[mEffect prepareToDraw];
//绘制
/**
参数一：绘制模式：三角形
参数二：从第几位开始绘制，0位
参数三：顶点数
*/
glDrawArrays(GL_TRIANGLES, 0, 6);
}
@end