前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OpenGL ES _ 入门练习_004

OpenGL ES _ 入门练习_004

作者头像
酷走天涯
发布2022-05-13 16:20:43
3150
发布2022-05-13 16:20:43
举报
文章被收录于专栏:每日一篇技术文章

[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

代码语言:javascript
复制
-(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];
}
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档