OpenGLES_实战04_教你绘制球体

学习是一件开心的额事情

本节学习目标

使用OpenGL绘制一个地球

上干货

  • 第一步 创建一个工程

让学习成为一种习惯

让学习成为一种习惯

  • 第二步 创建GLKViewController类型的控制器

让学习成为一种习惯

  • 第三步 添加OpenGL ES 2.0的头文件

让学习成为一种习惯

  • 第四步 配置我们的GLKViewController 控制器
GLKView *glkView = (GLKView*)self.view;
glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;// 设置深度缓冲区格式
// 创建管理上下文
glkView.context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
// 设置当前上下文
[EAGLContext setCurrentContext:glkView.context];
  • 第五步 创建一个负责渲染的类
@property(nonatomic,strong)GLKBaseEffect *baseEffect;
self.baseEffect = [[GLKBaseEffect alloc]init];
  • 第六步 生成球体的顶点坐标和纹理坐标和索引

下面是生成球体坐标C语言方法

#define ES_PI  (3.14159265f)

int generateSphere(int numSlices, float radius, float **vertices,
            float **texCoords, uint16_t **indices, int *numVertices_out) {
int i;
int j;
int numParallels = numSlices / 2;
int numVertices = (numParallels + 1) * (numSlices + 1);
int numIndices = numParallels * numSlices * 6;
float angleStep = (2.0f * ES_PI) / ((float) numSlices);
if (vertices != NULL)
    *vertices = malloc(sizeof(float) * 3 * numVertices);
if (texCoords != NULL)
    *texCoords = malloc(sizeof(float) * 2 * numVertices);
if (indices != NULL)
    *indices = malloc(sizeof(uint16_t) * numIndices);
for (int i = 0; i < numParallels + 1; i++) {
    for (int j = 0; j < numSlices + 1; j++) {
        int vertex = (i * (numSlices + 1) + j) * 3;
        if (vertices) {
            (*vertices)[vertex + 0] = radius * sinf(angleStep * (float)i) *
            sinf(angleStep * (float)j);
            (*vertices)[vertex + 1] = radius * cosf(angleStep * (float)i);
            (*vertices)[vertex + 2] = radius * sinf(angleStep * (float)i) *
            cosf(angleStep * (float)j);
        }
        if (texCoords) {
            int texIndex = (i * (numSlices + 1) + j) * 2;
            (*texCoords)[texIndex + 0] = (float)j / (float)numSlices;
            (*texCoords)[texIndex + 1] = 1.0f - ((float)i / (float)numParallels);
        }
    }
}
if (indices != NULL) {
    uint16_t *indexBuf = (*indices);
    for (i = 0; i < numParallels ; i++) {
        for (j = 0; j < numSlices; j++) {
            *indexBuf++ = i * (numSlices + 1) + j;
            *indexBuf++ = (i + 1) * (numSlices + 1) + j;
            *indexBuf++ = (i + 1) * (numSlices + 1) + (j + 1);
            
            *indexBuf++ = i * (numSlices + 1) + j;
            *indexBuf++ = (i + 1) * (numSlices + 1) + (j + 1);
            *indexBuf++ = i * (numSlices + 1) + (j + 1);
        }
    }
}
if (numVertices_out) {
    *numVertices_out = numVertices;
}
return numIndices;
}

接下来定义上面函数需要的参数

GLfloat   *_vertexData; // 顶点数据
GLfloat   *_texCoords;  // 纹理坐标
GLushort  *_indices;    // 顶点索引
 GLint    _numVetex;   // 顶点数量
GLuint  _texCoordsBuffer;// 纹理坐标内存标识
GLuint  _numIndices; // 顶点索引的数量

调用上面方法生成顶点坐标,纹理坐标,索引数组

 _numIndices = generateSphere(200, 1.0, &(_vertexData), &(_texCoords), &_indices, &_numVetex);
  • 第七步 将顶点坐标,纹理坐标,索引坐标加载到GPU 中去
-(void)loadVertexData{

// 加载顶点坐标数据
glGenBuffers(1, &_vertexBuffer); // 申请内存
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer); // 将命名的缓冲对象绑定到指定的类型上去
glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat)*_numVetex*3,_vertexData, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition);  // 绑定到位置上
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 3*sizeof(GLfloat), NULL);

// 加载顶点索引数据
GLuint _indexBuffer;
glGenBuffers(1, &_indexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, _numIndices*sizeof(GLushort), _indices, GL_STATIC_DRAW);



// 加载纹理坐标
glGenBuffers(1, &_texCoordsBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _texCoordsBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat)*_numVetex*2, _texCoords, GL_DYNAMIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 2*sizeof(GLfloat), NULL);

}
  • 第八步 将我们的地图照片使用刚才创建的渲染类GLKBaseEffect 加载到内存中去

让学习成为一种习惯

GLKTextureInfo *textureInfo =
[GLKTextureLoader textureWithCGImage:[UIImage imageNamed:@"earth-diffuse.jpg"].CGImage options:nil error:nil];
self.baseEffect.texture2d0.target = textureInfo.target;
self.baseEffect.texture2d0.name = textureInfo.name;
  • 第九步 在绘制之前,我们要设置一下 世界坐标和绘制球体的自身坐标
 // 设置世界坐标和视角
float aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0f), aspect, 0.1f, 100.0f);
self.baseEffect.transform.projectionMatrix = projectionMatrix;

// 设置模型坐标
GLKMatrix4 modelViewMatrix = GLKMatrix4MakeTranslation(0.0f, -1.0f, -6.5f);
self.baseEffect.transform.modelviewMatrix =  modelViewMatrix;
  • 第十一步 我们设置个沿着Y轴旋转的效果
// update方法系统会自动调动  
-(void)update{
 self.baseEffect.transform.modelviewMatrix = GLKMatrix4Rotate(self.baseEffect.transform.modelviewMatrix, 0.1, 0, 1, 0);
}
  • 第十二步 开始绘制
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{

// 清除颜色缓冲区
glClearColor(1.0, 0, 1.0, 1);
glClear(GL_COLOR_BUFFER_BIT);

// 绘制之前必须调用这个方法
[self.baseEffect prepareToDraw];
static int i =1;
if (i < _numIndices-2000){
    i = i+1000;
}else{
    i = _numIndices;
}

// 以画单独三角形的方式 开始绘制
glDrawElements(GL_TRIANGLES, i,GL_UNSIGNED_SHORT, NULL);
}

代码!

运行一下:

让学习成为一种习惯

总结

写这篇文章主要给初学者一个绘制球体的思路,苹果给我们封装的类,帮助我们简化了不少代码,如果纯OpenGL 做这样一个练习代码量还是挺多的。

代码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏潇涧技术专栏

When Math meets Android Animation (3)

当数学遇上动画:讲述ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(3)

922
来自专栏行者常至

006.python科学计算库matplotlib(上)

版权声明:本文为博主原创文章,允许转载,请标明出处。 https://blog.csdn.net/qwdafedv/article/deta...

711
来自专栏落影的专栏

iOS开发-OpenGL ES入门教程1

前言 这里是一篇新手教程,环境是Xcode7+OpenGL ES 2.0,目标写一个OpenGL ES的hello world。 OpenGL ES系列教程在...

3309
来自专栏hbbliyong

使用WPF教你一步一步实现连连看(三)

这次首先对以前的结构进行了调整: 第一步:把MyButton按钮的属性独立成一个类,放在一个单独的MyButton.cs中,把图片的初始化也放到里面。 调整代...

3527
来自专栏计算机视觉与深度学习基础

Leetcode 130 Surrounded Regions

Given a 2D board containing 'X' and 'O' (the letter O), capture all regions su...

1965
来自专栏逍遥剑客的游戏开发

Nebula3绘制2D纹理

1606
来自专栏GIS讲堂

说说地图中的聚类

虽然Openlayers4会有自带的聚类效果,但是有些时候是不能满足我们的业务场景的,本文结合一些业务场景,讲讲地图中的聚类展示。

1313
来自专栏ascii0x03的安全笔记

【C】用C语言提取bmp图片像素,并进行K-means聚类分析——容易遇到的问题

关于bmp图片的格式,网上有很多文章,具体可以参考百度百科,也有例子程序。这里只提要注意的问题。 (1)结构体定义问题:首先按照百度百科介绍的定义了结构体,但是...

6546
来自专栏图形学与OpenGL

机械版CG 实验4 裁剪

了解二维图形裁剪的原理(点的裁剪、直线的裁剪、多边形的裁剪),利用VC+OpenGL实现直线的裁剪算法。

1771
来自专栏数值分析与有限元编程

可视化 | 一个三角形常应变单元后处理例子

昨天提到了应力云图,其实质是用不同的颜色填充等值线。有了结点的应力值,单元内任意一点的应力值是通过插值实现的。下面来看一个悬臂梁的综合后处理。 如图所示,一个悬...

2787

扫码关注云+社区

领取腾讯云代金券