OpenGL ES-04-案例02-GLKit绘制正方体

前言

上次的使用GLKit加载图片案例中，我们是在GLKViewController中编写的，这次直接在UIViewController中编写。其实是一样的，多加一句代理实现就行了。

一、效果图

效果图

二、分析流程

image.png

三、注意事项

  • 注意要实现代理及代理方法
  • 注意设置深度缓冲区范围，默认是(0, 1)，这里(1, 0)用于翻转 z 轴，使正方形朝屏幕外
  • 由于增加了光照，本案例增加了法线数据
  • 开启GLKBaseEffect的光照属性
  • drawInRect代理方法中开启深度测试
  • 计算旋转角度的时候一定要 %360，不然数值太大，到后面会旋转过快

四、代码

声明：

//这里数据的初始化方式是c语言中的结构体赋值
typedef struct {
    GLKVector3 positionCoord;//顶点坐标
    GLKVector2 textureCoord;//纹理坐标
    GLKVector3 normal;//法线
} YVertex;

@property (nonatomic,strong) GLKView *glkView;

@property (nonatomic,strong) GLKBaseEffect *effect;

@property (nonatomic,assign) YVertex *vertexArr;

@property (nonatomic,strong) CADisplayLink *disTimer;
 
@property (nonatomic,assign) NSInteger angle;

@property (nonatomic,assign) GLuint vertexBuffer;

方法：

-(void)SetUpConfig{
    
    //1、上下文
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    //2、设置当前上下文
    [EAGLContext setCurrentContext:context];
    
    //3、初始化GLKView
    self.glkView = [[GLKView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width) context:context];
    self.glkView.center = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
    self.glkView.backgroundColor = [UIColor clearColor];
    //4、设置GLKView的代理
    self.glkView.delegate = self;
    //5、设置深度缓冲区
    self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    //6、设置深度缓冲区范围
    //默认是(0, 1)，这里用于翻转 z 轴，使正方形朝屏幕外
    glDepthRangef(1, 0);
    //7
    [self.view addSubview:self.glkView];
}

-(void)SetUpVertexData{
    
    /*
    解释一下:
    这里我们不复用顶点，使用每 3 个点画一个三角形的方式，需要 12 个三角形，则需要 36 个顶点
    以下的数据用来绘制以（0，0，0）为中心，边长为 1 的立方体
    */
    
    //1、开辟顶点数据空间(数据结构SenceVertex 大小 * 顶点个数)
    self.vertexArr = malloc(sizeof(YVertex) * 36);
    
    //2、设置顶点数据
    //顶点坐标 + 纹理坐标 + 法线
    
    // 前面
    self.vertexArr[0] = (YVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
    self.vertexArr[1] = (YVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
    self.vertexArr[2] = (YVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
    self.vertexArr[3] = (YVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
    self.vertexArr[4] = (YVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
    self.vertexArr[5] = (YVertex){{0.5, -0.5, 0.5}, {1, 0}, {0, 0, 1}};
    
    // 上面
    self.vertexArr[6] = (YVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 1, 0}};
    self.vertexArr[7] = (YVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
    self.vertexArr[8] = (YVertex){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
    self.vertexArr[9] = (YVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
    self.vertexArr[10] = (YVertex){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
    self.vertexArr[11] = (YVertex){{-0.5, 0.5, -0.5}, {0, 0}, {0, 1, 0}};
    
    // 下面
    self.vertexArr[12] = (YVertex){{0.5, -0.5, 0.5}, {1, 1}, {0, -1, 0}};
    self.vertexArr[13] = (YVertex){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
    self.vertexArr[14] = (YVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
    self.vertexArr[15] = (YVertex){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
    self.vertexArr[16] = (YVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
    self.vertexArr[17] = (YVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, -1, 0}};
    
    // 左面
    self.vertexArr[18] = (YVertex){{-0.5, 0.5, 0.5}, {1, 1}, {-1, 0, 0}};
    self.vertexArr[19] = (YVertex){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
    self.vertexArr[20] = (YVertex){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
    self.vertexArr[21] = (YVertex){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
    self.vertexArr[22] = (YVertex){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
    self.vertexArr[23] = (YVertex){{-0.5, -0.5, -0.5}, {0, 0}, {-1, 0, 0}};
    
    // 右面
    self.vertexArr[24] = (YVertex){{0.5, 0.5, 0.5}, {1, 1}, {1, 0, 0}};
    self.vertexArr[25] = (YVertex){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
    self.vertexArr[26] = (YVertex){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
    self.vertexArr[27] = (YVertex){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
    self.vertexArr[28] = (YVertex){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
    self.vertexArr[29] = (YVertex){{0.5, -0.5, -0.5}, {0, 0}, {1, 0, 0}};
    
    // 后面
    self.vertexArr[30] = (YVertex){{-0.5, 0.5, -0.5}, {0, 1}, {0, 0, -1}};
    self.vertexArr[31] = (YVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
    self.vertexArr[32] = (YVertex){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
    self.vertexArr[33] = (YVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
    self.vertexArr[34] = (YVertex){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
    self.vertexArr[35] = (YVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, 0, -1}};
    
    
    
    //3、开辟顶点缓冲区
    glGenBuffers(1, &_vertexBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(YVertex) * 36, self.vertexArr, GL_STATIC_DRAW);
    
    //4、开启读取通道
    //sizeof(YVertex) 步长就是一个结构体
    //offsetof(YVertex, positionCoord) 偏移到从结构体中positionCoord的位置开始读取
    //顶点数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(YVertex), NULL + offsetof(YVertex, positionCoord));
    
    //纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(YVertex), NULL + offsetof(YVertex, textureCoord));
    
    
    //法线数据
    glEnableVertexAttribArray(GLKVertexAttribNormal);
    glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(YVertex), NULL + offsetof(YVertex, normal));
    
    
}

-(void)SetUpTexture{
    
    //1、获取纹理图片
    //相比上个案例换一种写法
    NSString *filePath = [[[NSBundle mainBundle]resourcePath]stringByAppendingPathComponent:@"mark.jpeg"];
    UIImage *image = [UIImage imageWithContentsOfFile:filePath];
    
    //2、设置纹理参数
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft : @(YES)};
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:image.CGImage options:options error:nil];
    
    //3、使用baseEffect进行着色
    self.effect = [[GLKBaseEffect alloc]init];
    self.effect.texture2d0.name = textureInfo.name;
    self.effect.texture2d0.target = textureInfo.target;
    
    //4、开启光照效果
    self.effect.light0.enabled = YES;
    //6、漫反射颜色
    self.effect.light0.diffuseColor = GLKVector4Make(1, 1, 1, 1);
    //7、设置光源位置
    self.effect.light0.position = GLKVector4Make(-0.5, -0.5, 5, 1);
}

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

    //1、清楚颜色&深度 缓冲区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    //2、开启深度测试
    glEnable(GL_DEPTH_TEST);
    //3、准备绘制
    [self.effect prepareToDraw];
    //4、开始绘制
    glDrawArrays(GL_TRIANGLES, 0, 36);
}
-(void) addCADisplayLink{
    
    self.angle = 0;
    self.disTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(timerUpDate)];
    [self.disTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

-(void)timerUpDate{
    
    //1、计算旋转角度 （每次匀速+5度，但是不能超过360度，否则转的太快）
    self.angle = (self.angle + 5) % 360;
    
    //2、修改effect的矩阵
    self.effect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.5, 0.7, 0.3);
    
    //3、重新渲染
    [self.glkView display];
    
}
-(void)dealloc{
    
    if ([EAGLContext currentContext] == self.glkView.context) {
        [EAGLContext setCurrentContext:nil];
    }

    if (_vertexBuffer) {
        glDeleteBuffers(1, &_vertexBuffer);
        _vertexBuffer = 0;
    }
    
    if (_vertexArr) {
        free(_vertexArr);
        _vertexArr = nil;
    }
    
    [self.disTimer invalidate];
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,265评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,078评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,852评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,408评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,445评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,772评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,921评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,688评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,130评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,276评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,882评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2赞 348