OpenGL ES _ 入门练习_004

[OpenGL ES _ 入门_01](http://www.jianshu.com/p/f66906b27819)

[OpenGL ES _ 入门_02](http://www.jianshu.com/p/dc49c946438e)

[OpenGL ES _ 入门_03](http://www.jianshu.com/p/00b5be729e4b)

[OpenGL ES _ 入门_04](http://www.jianshu.com/p/516b0b8be9d8)

[OpenGL ES _ 入门_05](http://www.jianshu.com/p/08c51c298d47)

[OpenGL ES _ 入门练习_01](http://www.jianshu.com/p/eebaf64e3e0a)

[OpenGL ES _ 入门练习_02](http://www.jianshu.com/p/6155d60dab20)

[OpenGL ES _ 入门练习_03](http://www.jianshu.com/p/36d9dac03345)

[OpenGL ES _ 入门练习_04](http://www.jianshu.com/p/1ca30e9387dd)

[OpenGL ES _ 入门练习_05](http://www.jianshu.com/p/ac9375962f34)

[OpenGL ES _ 入门练习_06](http://www.jianshu.com/p/c63dc219f7a0)

[OpenGL ES _ 着色器 _ 介绍](http://www.jianshu.com/p/309d489bc344)

[OpenGL ES _ 着色器 _ 程序](http://www.jianshu.com/p/ed0c617bcd67)

[OpenGL ES _ 着色器 _ 语法](http://www.jianshu.com/p/c5b89b294995)

[OpenGL ES_着色器_纹理图像](http://www.jianshu.com/p/8c0ad4e3e40f)

[OpenGL ES_着色器_预处理](http://www.jianshu.com/p/5e9837b0b219)

[OpenGL ES_着色器_顶点着色器详解](http://www.jianshu.com/p/9d7dca6b70c7)

[OpenGL ES_着色器_片断着色器详解](http://www.jianshu.com/p/55461927c419 )

[OpenGL ES_着色器_实战01](http://www.jianshu.com/p/18d6b37363c8)

[OpenGL ES_着色器_实战02](http://www.jianshu.com/p/45d959c8f1db)

[OpenGL ES_着色器_实战03](http://www.jianshu.com/p/0f740901da59)



这篇入门文章OpenGLES_绘制三角形中,使用的较为底层的代码,今天使用苹果为我们封装好的类,来实现一个较为好玩的东西-标题!


展示图



*学习目标 

绘制一个运动的立方体


* 实现思路

* 实现步骤:

* 第一步 .创建一个继承 GLKViewController(为我们封装了好多代码)的对象

* 第二步 .创建一个EAGLContext 对象负责管理gpu的内存和指令

* 第三步 .创建一个GLKBaseEffect 对象,负责管理渲染工作

* 第四步 .创建立方体的顶点坐标和法线

* 第五步 .绘图

* 第六步 .让立方体运动起来

* 第七步 .在视图消失的时候,做一些清理工作


代码详解

// MARK: - 第一步: 创建一个EAGLContext

-(void)createEAGContext{

self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

if (!self.context) {

NSLog(@"手机不支持opengl es2");

}

[EAGLContext setCurrentContext:self.context]; // 设置为当前上下文

}

// MARK: - 配置view

-(void) configure{

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

view.context = self.context;

view.drawableDepthFormat = GLKViewDrawableDepthFormat24;

}

// MARK: - 第二步: 创建GLKBaseEffect 对象

-(void)createBaseEffect{

self.effect = [[GLKBaseEffect alloc] init];

self.effect.light0.enabled = GL_TRUE;

self.effect.light0.diffuseColor = GLKVector4Make(0.5f, 0.1f, 0.4f, 1.0f);

}

// MARK: - 第三步:

- (void)addVertexAndNormal{

glEnable(GL_DEPTH_TEST); // 开启深度测试 让被挡住的像素隐藏

// 讲顶点数据和法线数据加载到GUP 中去

glGenBuffers(1, &_vertexBuffer);

glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);

glBufferData(GL_ARRAY_BUFFER, sizeof(gCubeVertexData), gCubeVertexData, GL_STATIC_DRAW);

// 开启绘制命令 GLKVertexAttribPosition(位置)

glEnableVertexAttribArray(GLKVertexAttribPosition);

glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 24, 0);

// 开启绘制命令 GLKVertexAttribPosition(法线)

glEnableVertexAttribArray(GLKVertexAttribNormal);

glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, 24, BUFFER_OFFSET(12));

}

// MARK: - 第四步: 清屏

- (void)clearScreen{

glClearColor(0.65f, 0.65f, 0.65f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

}

// MARK: - 第五步: 绘制

- (void)draw{

[self.effect prepareToDraw];

glDrawArrays(GL_TRIANGLES, 0, 36);

}

// MARK: - 第六步: 改变运动轨迹

- (void)changeMoveTrack{

// 获取一个屏幕比例值

float aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);

//  GLKMatrix4MakePerspective(float fovyRadians, float aspect, float nearZ, float farZ)

/*

* 透视转换

*/

GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0f), aspect, 0.1f, 100.0f);

self.effect.transform.projectionMatrix = projectionMatrix;

GLKMatrix4 baseModelViewMatrix = GLKMatrix4MakeTranslation(0.0f, 0.0f, -10.0f);

baseModelViewMatrix = GLKMatrix4Rotate(baseModelViewMatrix, _rotation, 0.0f, 1.0f, 0.0f);

// 计算自身的坐标和旋转状态

GLKMatrix4 modelViewMatrix = GLKMatrix4MakeTranslation(0.0f, 0.0f, -1.5f);

modelViewMatrix = GLKMatrix4Rotate(modelViewMatrix, _rotation, 1.0f, 1.0f, 1.0f);

modelViewMatrix = GLKMatrix4Multiply(baseModelViewMatrix, modelViewMatrix);

self.effect.transform.modelviewMatrix = modelViewMatrix;

_rotation += self.timeSinceLastUpdate * 0.5f;

}

// MARK: - 第七步: 清除工作

- (void)tearDownGL

{

[EAGLContext setCurrentContext:self.context];

glDeleteBuffers(1, &_vertexBuffer);

self.effect = nil;

}

以上几个步骤讲解完毕,最重要的代码来了!

- (void)viewDidLoad

{

[super viewDidLoad];

[self createEAGContext];// 1. 创建管理上下文

[self configure]; // 2.配置

[self createBaseEffect]; // 3.创建渲染管理

[self addVertexAndNormal]; // 4.添加顶点坐标和法线坐标

}

#pragma mark - GLKView and GLKViewController delegate methods

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

{

[self clearScreen]; // 5.清理屏幕

[self draw]; //.6 绘制

}

- (void)update

{

[self changeMoveTrack]; // 7.移动

}

- (void)dealloc

{

[self tearDownGL]; // 8.清理工作

if ([EAGLContext currentContext] == self.context) {

[EAGLContext setCurrentContext:nil];

}

}

如有问题,请加群:578734141


代码地址: https://github.com/XJALYN/OpenGL_draw_cube_001





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容