OpenGLES绘制立体多边形加纹理

2018-02-08 19:06:17来源:https://www.jianshu.com/p/dfe81644000d作者:_清墨人点击

分享

前面写了OpenGLES的入门篇,一些朋友觉得还不错,找到我问了一些知识,这次我有针对性的写下这篇文章,也为我OpenGLES进阶篇做个开始。

我已认证微信,感兴趣朋友可进我个人主页,点击微信小图标加我微信。

代码已传GitHub: https://github.com/qingmomo/OpenGLES

效果如下:

1.png

最终结果.png

由于是进阶篇,对基础的介绍就不会那么多了:

绘制立体多边形

绘制多边形我们是需要多边形的顶点数据的,这些数据我从网上下载了一个obj文件,从中取出了3个多边形的顶点数据,并给它加上了颜色数据。

但这些多边形的索引数据,obj里的并不是很清楚(可能是我不会用),我使用了自己开发项目的代码来构造。关于构造代码,由于公司利益,这里不会给出,直接会使用构造后的结果。

好了,闲话少讲,步入正题:

新建一个自定义的NewOpenGLView继承自UIView,为了能使用openGLES,我们得做一些基础的配置:

//重写initWithFrame方法便于方法调用-(instancetype)initWithFrame:(CGRect)frame{    if (self==[super initWithFrame:frame]) {                [self setupLayerAndContext];        [self setupBuffers];        [self setupProgram];        [self render];            }    return self;}
+(Class)layerClass{    //OpenGL内容只会在此类layer上描绘    return [CAEAGLLayer class];}- (void)setupLayerAndContext{    _eaglLayer = (CAEAGLLayer*) self.layer;        // CALayer 默认是透明的,必须将它设为不透明才能让其可见,性能最好    _eaglLayer.opaque = YES;        // 设置描绘属性,在这里设置不维持渲染内容以及颜色格式为 RGBA8    _eaglLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:                                     [NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];        // 指定 OpenGLES 渲染API的版本,在这里我们使用OpenGLES 3.0,由于3.0兼容2.0并且功能更强,为何不用更好的呢,不过注意:3.0支持的手机最低为5s,系统最低为iOS7    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;    _context = [[EAGLContext alloc] initWithAPI:api];    if (!_context) {        NSLog(@"Failed to initialize OpenGLES 3.0 context");    }        // 设置为当前上下文    [EAGLContext setCurrentContext:_context];}-(void)setupBuffers{//    1.depth    glGenRenderbuffers(1, &_depthBuffer);    glBindRenderbuffer(GL_RENDERBUFFER, _depthBuffer);    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, self.frame.size.width, self.frame.size.height);    //    2.color    glGenRenderbuffers(1, &_colorBuffer); //生成和绑定render buffer的API函数    glBindRenderbuffer(GL_RENDERBUFFER, _colorBuffer);    //为其分配空间    [_context renderbufferStorage:GL_RENDERBUFFER fromDrawable:_eaglLayer];    //    3.frame    glGenFramebuffers(1, &_frameBuffer);   //生成和绑定frame buffer的API函数    glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer);    //将renderbuffer跟framebuffer进行绑定    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _colorBuffer);    //将depthBuffer跟frame buffer进行绑    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, _depthBuffer);}

上面所涉及的变量都在类声明的扩展中定义,以下是全部变量定义:

@interface NewOpenGLView (){    CAEAGLLayer *_eaglLayer;    EAGLContext *_context;    GLuint _depthBuffer;    GLuint _colorBuffer;    GLuint _frameBuffer;        GLuint _programHandle; //着色器程序    GLuint _positionSlot; //顶点槽位    GLuint _colorSlot;   //颜色槽位    GLuint _projectionSlot;  //投影矩阵槽位    GLuint _modelViewSlot;   //模型矩阵槽位    GLKMatrix4 _projectionMatrix; //投影矩阵    GLKMatrix4 _modelViewMatrix;  //模型(其实是观察)矩阵        //纹理    GLuint _textureProgram;    GLuint _texPositionSlot; //顶点槽位    GLuint _texCoordSlot;   //纹理坐标槽位    GLuint _ourTextureSlot; //纹理采样对象槽位    GLuint _texProjectionSlot;  //投影矩阵槽位    GLuint _texModelViewSlot;   //模型矩阵槽位    GLKMatrix4 _texProjectionMatrix; //投影矩阵    GLKMatrix4 _texModelViewMatrix;  //模型(其实是观察)矩阵        //3个纹理对象    GLuint _textureID1;  //纹理对象    GLuint _textureID2;  //纹理对象    GLuint _textureID3;  //纹理对象}@end

Demo中还使用了入门篇中详细介绍过的2个工具类:

GLESUtils类 :配置着色器程序

TextureManager类 :配置纹理图片

接下来我们介绍如何配置着色器程序:

在入门篇里,我们要么只绘制图形,要么只绘制纹理,没有把它们结合起来绘制过,而这里我们需要把他们结合起来绘制。这个时候,glsl语言的写法就有区别了,可以把它们写在同一个文件里,也可以分别写出来,这里我是分别写出了图形所对应的VertexShader.glsl、FragmentShader.glsl和纹理所对应的TextureVertex.glsl、TextureFragment.glsl。

先来介绍绘制图形的glsl语言(Vertex和Fragment):

uniform mat4 projection;uniform mat4 modelView;attribute vec4 vPosition;attribute vec4 vSourceColor;varying vec4 vDestinationColor;void main(void){    gl_Position = projection * modelView * vPosition;    vDestinationColor = vSourceColor;}
precision medium float;varying vec4 vDestinationColor;void main(){    gl_FragColor = vDestinationColor;}

关于shader语言这里就不多赘述了。

然后我们配置图形着色器程序:

-(void)setupProgram{    //1.多边体program    NSString *vertexShaderPath   = [[NSBundle mainBundle] pathForResource:@"VertexShader"                                          ofType:@"glsl"];    NSString *fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"FragmentShader"                                                                    ofType:@"glsl"];    _programHandle = [GLESUtils loadProgram:vertexShaderPath withFragmentShaderFilepath:fragmentShaderPath];        //获取槽位    _positionSlot   = glGetAttribLocation(_programHandle, "vPosition");    _colorSlot      = glGetAttribLocation(_programHandle, "vSourceColor");    _projectionSlot = glGetUniformLocation(_programHandle, "projection");    _modelViewSlot  = glGetUniformLocation(_programHandle, "modelView");        glEnableVertexAttribArray(_positionSlot);    glEnableVertexAttribArray(_colorSlot);}

着色器程序配置好,我们还需设置着色器里的投影矩阵和观察矩阵(这里是观察矩阵,根据功能理解为模型矩阵其实也没差):

-(void)setupProjectionMatrixAndModelViewMatrix{    //1.多边体    float aspect = self.frame.size.width/self.frame.size.height;    _projectionMatrix = GLKMatrix4MakePerspective(45.0*M_PI/180.0, aspect, 0.1, 100);    glUniformMatrix4fv(_projectionSlot, 1, GL_FALSE, _projectionMatrix.m);        _modelViewMatrix = GLKMatrix4MakeTranslation(0, 0, -5); //平移    _modelViewMatrix = GLKMatrix4RotateX(_modelViewMatrix, 0.6);  //旋转X轴,0.6是弧度值    glUniformMatrix4fv(_modelViewSlot, 1, GL_FALSE, _modelViewMatrix.m);}

做完这些,我们就可以开始绘制了:

-(void)render{        //设置清屏颜色,默认是黑色,如果你的运行结果是黑色,问题就可能在这儿    glClearColor(0.3, 0.5, 0.8, 1.0);    /*     glClear指定清除的buffer     共可设置三个选项GL_COLOR_BUFFER_BIT,GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT     也可组合如:glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);     */        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);    // Setup viewport    glViewport(0, 0, self.frame.size.width, self.frame.size.height);    [_context presentRenderbuffer:_colorBuffer];}

做到这里,我们运行Demo,得到的结果应该是这样的:

1.png

初始结果.png

下面我们开始构造立体多边形的数据(x,y,z,r,g,b,a)并绘制出来(Demo使用最基本的数据格式,如需优化,请自行构造buffer、VAO):

-(void)drawFirstCube{    //顶点数据    GLfloat ver[] = {        -0.508680,0.260000,-0.725382,0.345678,0.678943,0.812332,0.900000,        0.306216,0.260000,-0.725382,0.345678,0.678943,0.812332,0.900000,        0.306216,0.260000,-0.244226,0.345678,0.678943,0.812332,0.900000,        -0.508680,0.260000,-0.244226,0.345678,0.678943,0.812332,0.900000,        -0.508680,0.010000,-0.725382,0.345678,0.678943,0.812332,0.900000,        0.306216,0.010000,-0.725382,0.345678,0.678943,0.812332,0.900000,        0.306216,0.010000,-0.244226,0.345678,0.678943,0.812332,0.900000,        -0.508680,0.010000,-0.244226,0.345678,0.678943,0.812332,0.900000,    };        //顶面和底面索引    GLubyte ind_top[] = {        3,0,1,1,2,3,    };        GLubyte ind_bot[] = {//+4是因为数据是顶面底面一起的,顶面数据4个,底面4个        3+4,0+4,1+4,1+4,2+4,3+4,    };        //侧面索引    GLubyte side[] = {        0,4,1,5,2,6,3,7,0,4,    };        //    绘制    //    顶面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLES, sizeof(ind_top)/sizeof(GLubyte), GL_UNSIGNED_BYTE, ind_top);        //    底面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLES, sizeof(ind_bot)/sizeof(GLubyte), GL_UNSIGNED_BYTE, ind_bot);        //    侧面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLE_STRIP, sizeof(side)/sizeof(GLubyte), GL_UNSIGNED_BYTE, side);        //需要画的线  顶面和底面线    GLfloat line[] = {        -0.508680,0.260000,-0.725382,0.965789,0.677845,0.812332,1.0,        0.306216,0.260000,-0.725382,0.965789,0.677845,0.812332,1.0,        0.306216,0.260000,-0.244226,0.965789,0.677845,0.812332,1.0,        -0.508680,0.260000,-0.244226,0.965789,0.677845,0.812332,1.0,        -0.508680,0.010000,-0.725382,0.965789,0.677845,0.812332,1.0,        0.306216,0.010000,-0.725382,0.965789,0.677845,0.812332,1.0,        0.306216,0.010000,-0.244226,0.965789,0.677845,0.812332,1.0,        -0.508680,0.010000,-0.244226,0.965789,0.677845,0.812332,1.0,    };        GLubyte line_top[] = {        0,1,2,3,    };        GLubyte line_bot[] = { //+4是因为数据是顶面底面一起的,顶面数据4个,底面4个        0+4,1+4,2+4,3+4,    };        glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line+3);    glDrawElements(GL_LINE_LOOP, sizeof(line_top)/sizeof(GLubyte), GL_UNSIGNED_BYTE, line_top);        glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line+3);    glDrawElements(GL_LINE_LOOP, sizeof(line_bot)/sizeof(GLubyte), GL_UNSIGNED_BYTE, line_bot);}

数据不算太复杂,太复杂了我也没想法去处理构造它,在顶点数据中,我们集合了顶面顶点数据和底面顶点数据,然后分别构造出它顶面和底面需要绘制的三角形索引,最后还有它需要绘制的侧面的所有三角形索引。

绘制的时候根据顶面、底面、侧面使用合适的glDraw方法绘制,为什么后面还会绘制顶面和底面的线呢,这是因为如果不绘制线的话,绘出来结果会不够理想,让人区分不出来这是立方体。

1.png

不画线.png

1.png

画线.png

然后我们以同样的方式分别绘制第二、第三个多边体:

-(void)drawSecondCube{    //顶点数据    GLfloat ver[] = {        -0.304217,0.260000,0.814439,0.345678,0.678943,0.465789,0.900000,        -0.304217,0.260000,0.344297,0.345678,0.678943,0.465789,0.900000,        0.429602,0.260000,0.344297,0.345678,0.678943,0.465789,0.900000,        0.426395,0.260000,0.718223,0.345678,0.678943,0.465789,0.900000,        0.169820,0.260000,0.718223,0.345678,0.678943,0.465789,0.900000,        0.169820,0.260000,0.814439,0.345678,0.678943,0.465789,0.900000,        -0.304217,0.010000,0.814439,0.345678,0.678943,0.465789,0.900000,        -0.304217,0.010000,0.344297,0.345678,0.678943,0.465789,0.900000,        0.429602,0.010000,0.344297,0.345678,0.678943,0.465789,0.900000,        0.426395,0.010000,0.718223,0.345678,0.678943,0.465789,0.900000,        0.169820,0.010000,0.718223,0.345678,0.678943,0.465789,0.900000,        0.169820,0.010000,0.814439,0.345678,0.678943,0.465789,0.900000,    };        //顶面和底面索引    GLubyte ind_top[] = {        5,0,1,1,2,3,4,5,1,1,3,4,    };        GLubyte ind_bot[] = {        5+6,0+6,1+6,1+6,2+6,3+6,4+6,5+6,1+6,1+6,3+6,4+6,    };        //侧面索引    GLubyte side[] = {        0,6,1,7,2,8,3,9,4,10,5,11,0,6,    };        //    绘制    //    顶面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLES, sizeof(ind_top)/sizeof(GLubyte), GL_UNSIGNED_BYTE, ind_top);        //    底面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLES, sizeof(ind_bot)/sizeof(GLubyte), GL_UNSIGNED_BYTE, ind_bot);        //    侧面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLE_STRIP, sizeof(side)/sizeof(GLubyte), GL_UNSIGNED_BYTE, side);        //需要画的线    GLfloat line[] = {        -0.304217,0.260000,0.814439,0.965789,0.678943,0.465789,1.000000,        -0.304217,0.260000,0.344297,0.965789,0.678943,0.465789,1.000000,        0.429602,0.260000,0.344297,0.965789,0.678943,0.465789,1.000000,        0.426395,0.260000,0.718223,0.965789,0.678943,0.465789,1.000000,        0.169820,0.260000,0.718223,0.965789,0.678943,0.465789,1.000000,        0.169820,0.260000,0.814439,0.965789,0.678943,0.465789,1.000000,        -0.304217,0.010000,0.814439,0.965789,0.678943,0.465789,1.000000,        -0.304217,0.010000,0.344297,0.965789,0.678943,0.465789,1.000000,        0.429602,0.010000,0.344297,0.965789,0.678943,0.465789,1.000000,        0.426395,0.010000,0.718223,0.965789,0.678943,0.465789,1.000000,        0.169820,0.010000,0.718223,0.965789,0.678943,0.465789,1.000000,        0.169820,0.010000,0.814439,0.965789,0.678943,0.465789,1.000000,    };        GLubyte line_top[] = {        0,1,2,3,4,5,    };        GLubyte line_bot[] = {        0+6,1+6,2+6,3+6,4+6,5+6,    };        glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line+3);    glDrawElements(GL_LINE_LOOP, sizeof(line_top)/sizeof(GLubyte), GL_UNSIGNED_BYTE, line_top);        glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line+3);    glDrawElements(GL_LINE_LOOP, sizeof(line_bot)/sizeof(GLubyte), GL_UNSIGNED_BYTE, line_bot);}-(void)drawThirdCube{    //顶点数据    GLfloat ver[] = {        0.306216,0.260000,-0.725382,0.778943,0.378943,0.465789,0.900000,        0.429602,0.260000,-0.725382,0.778943,0.378943,0.465789,0.900000,        0.602136,0.260000,-0.725382,0.778943,0.378943,0.465789,0.900000,        0.602136,0.260000,-0.816786,0.778943,0.378943,0.465789,0.900000,        0.987652,0.260000,-0.816786,0.778943,0.378943,0.465789,0.900000,        0.987652,0.260000,-0.430321,0.778943,0.378943,0.465789,0.900000,        0.901058,0.260000,-0.430321,0.778943,0.378943,0.465789,0.900000,        0.901058,0.260000,-0.319931,0.778943,0.378943,0.465789,0.900000,        0.622946,0.260000,-0.319931,0.778943,0.378943,0.465789,0.900000,        0.306216,0.260000,-0.319931,0.778943,0.378943,0.465789,0.900000,        0.306216,0.010000,-0.725382,0.778943,0.378943,0.465789,0.900000,        0.429602,0.010000,-0.725382,0.778943,0.378943,0.465789,0.900000,        0.602136,0.010000,-0.725382,0.778943,0.378943,0.465789,0.900000,        0.602136,0.010000,-0.816786,0.778943,0.378943,0.465789,0.900000,        0.987652,0.010000,-0.816786,0.778943,0.378943,0.465789,0.900000,        0.987652,0.010000,-0.430321,0.778943,0.378943,0.465789,0.900000,        0.901058,0.010000,-0.430321,0.778943,0.378943,0.465789,0.900000,        0.901058,0.010000,-0.319931,0.778943,0.378943,0.465789,0.900000,        0.622946,0.010000,-0.319931,0.778943,0.378943,0.465789,0.900000,        0.306216,0.010000,-0.319931,0.778943,0.378943,0.465789,0.900000,    };        //顶面和底面索引    GLubyte ind_top[] = {        9,0,1,2,3,4,4,5,6,6,7,8,8,9,1,2,4,6,6,8,1,1,2,6,    };        GLubyte ind_bot[] = {        9+10,0+10,1+10,2+10,3+10,4+10,4+10,5+10,6+10,6+10,7+10,8+10,8+10,9+10,1+10,2+10,4+10,6+10,6+10,8+10,1+10,1+10,2+10,6+10,    };        //侧面索引    GLubyte side[] = {        0,10,1,11,2,12,3,13,4,14,5,15,6,16,7,17,8,18,9,19,0,10,    };        //    绘制    //    顶面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLES, sizeof(ind_top)/sizeof(GLubyte), GL_UNSIGNED_BYTE, ind_top);        //    底面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLES, sizeof(ind_bot)/sizeof(GLubyte), GL_UNSIGNED_BYTE, ind_bot);        //    侧面    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), ver+3);    glDrawElements(GL_TRIANGLE_STRIP, sizeof(side)/sizeof(GLubyte), GL_UNSIGNED_BYTE, side);        //需要画的线    GLfloat line[] = {        0.306216,0.260000,-0.725382,0.345678,0.678943,0.465789,1.000000,        0.429602,0.260000,-0.725382,0.345678,0.678943,0.465789,1.000000,        0.602136,0.260000,-0.725382,0.345678,0.678943,0.465789,1.000000,        0.602136,0.260000,-0.816786,0.345678,0.678943,0.465789,1.000000,        0.987652,0.260000,-0.816786,0.345678,0.678943,0.465789,1.000000,        0.987652,0.260000,-0.430321,0.345678,0.678943,0.465789,1.000000,        0.901058,0.260000,-0.430321,0.345678,0.678943,0.465789,1.000000,        0.901058,0.260000,-0.319931,0.345678,0.678943,0.465789,1.000000,        0.622946,0.260000,-0.319931,0.345678,0.678943,0.465789,1.000000,        0.306216,0.260000,-0.319931,0.345678,0.678943,0.465789,1.000000,        0.306216,0.010000,-0.725382,0.345678,0.678943,0.465789,1.000000,        0.429602,0.010000,-0.725382,0.345678,0.678943,0.465789,1.000000,        0.602136,0.010000,-0.725382,0.345678,0.678943,0.465789,1.000000,        0.602136,0.010000,-0.816786,0.345678,0.678943,0.465789,1.000000,        0.987652,0.010000,-0.816786,0.345678,0.678943,0.465789,1.000000,        0.987652,0.010000,-0.430321,0.345678,0.678943,0.465789,1.000000,        0.901058,0.010000,-0.430321,0.345678,0.678943,0.465789,1.000000,        0.901058,0.010000,-0.319931,0.345678,0.678943,0.465789,1.000000,        0.622946,0.010000,-0.319931,0.345678,0.678943,0.465789,1.000000,        0.306216,0.010000,-0.319931,0.345678,0.678943,0.465789,1.000000,    };        GLubyte line_top[] = {        0,1,2,3,4,5,6,7,8,9,    };        GLubyte line_bot[] = {        0+10,1+10,2+10,3+10,4+10,5+10,6+10,7+10,8+10,9+10,    };        glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line+3);    glDrawElements(GL_LINE_LOOP, sizeof(line_top)/sizeof(GLubyte), GL_UNSIGNED_BYTE, line_top);        glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line);    glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), line+3);    glDrawElements(GL_LINE_LOOP, sizeof(line_bot)/sizeof(GLubyte), GL_UNSIGNED_BYTE, line_bot);}

我们在render方法里调用方法绘制这三个多边体,这时render该是这样的:

-(void)render{        //设置清屏颜色,默认是黑色,如果你的运行结果是黑色,问题就可能在这儿    glClearColor(0.3, 0.5, 0.8, 1.0);    /*     glClear指定清除的buffer     共可设置三个选项GL_COLOR_BUFFER_BIT,GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT     也可组合如:glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);     */        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);    // Setup viewport    glViewport(0, 0, self.frame.size.width, self.frame.size.height);        //开启深度测试    glEnable(GL_DEPTH_TEST);    //绘制3个多边体    glUseProgram(_programHandle);    [self setupProjectionMatrixAndModelViewMatrix];    [self drawFirstCube];    [self drawSecondCube];    [self drawThirdCube];    [_context presentRenderbuffer:_colorBuffer];}

我们在绘制多边体前先开启了深度测试,然后使用多边体着色器程序,再配置多边体的投影和观察矩阵,注意每次使用program后需要重新配置矩阵。

做完这些,运行结果如下:

1.png

三个多边体.png

绘制纹理

然后...我们再把纹理绘制上去,要绘纹理,我们得设置纹理的着色器语言(Vertex和Fragment):

attribute vec4 Position;attribute vec2 TexCoordIn;varying vec2 TexCoordOut;uniform mat4 Projection;uniform mat4 ModelView;void main(){    gl_Position = Projection * ModelView * Position;    TexCoordOut = vec2(TexCoordIn.x, TexCoordIn.y);}
uniform sampler2D ourTexture;varying mediump vec2 TexCoordOut;void main(){    gl_FragColor = texture2D(ourTexture, TexCoordOut);}

然后代码配置着色器程序,整个setupProgram方法变为:

-(void)setupProgram{    //1.多边体program    NSString *vertexShaderPath   = [[NSBundle mainBundle] pathForResource:@"VertexShader"                                          ofType:@"gals"];    NSString *fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"FragmentShader"                                                                    ofType:@"gals"];    _programHandle = [GLESUtils loadProgram:vertexShaderPath withFragmentShaderFilepath:fragmentShaderPath];        //获取槽位    _positionSlot   = glGetAttribLocation(_programHandle, "vPosition");    _colorSlot      = glGetAttribLocation(_programHandle, "vSourceColor");    _projectionSlot = glGetUniformLocation(_programHandle, "projection");    _modelViewSlot  = glGetUniformLocation(_programHandle, "modelView");        glEnableVertexAttribArray(_positionSlot);    glEnableVertexAttribArray(_colorSlot);        //    ------------------------------------------------------------------------        //2.纹理program    NSString *texVertexPath   = [[NSBundle mainBundle] pathForResource:@"TextureVertex"                                                                 ofType:@"glsl"];    NSString *texFragmentPath = [[NSBundle mainBundle] pathForResource:@"TextureFragment"                                                                   ofType:@"glsl"];    _textureProgram = [GLESUtils loadProgram:texVertexPath withFragmentShaderFilepath:texFragmentPath];        //获取槽位    _texPositionSlot = glGetAttribLocation(_textureProgram, "Position");    _texCoordSlot    = glGetAttribLocation(_textureProgram, "TexCoordIn");    glEnableVertexAttribArray(_texPositionSlot);    glEnableVertexAttribArray(_texCoordSlot);        _ourTextureSlot    = glGetUniformLocation(_textureProgram, "ourTexture");    _texProjectionSlot = glGetUniformLocation(_textureProgram, "Projection");    _texModelViewSlot  = glGetUniformLocation(_textureProgram, "ModelView");        //获取纹理对象    _textureID1 = [TextureManager getTextureImage:[UIImage imageNamed:@"猫头鹰"]];    _textureID2 = [TextureManager getTextureImage:[UIImage imageNamed:@"乌龟"]];    _textureID3 = [TextureManager getTextureImage:[UIImage imageNamed:@"变色龙"]];}

接着新建一个方法来配置纹理的投影和观察矩阵:

-(void)setupTextureProjectionMatrixAndModelViewMatrix{    //2.纹理    float aspect = self.frame.size.width/self.frame.size.height;    _texProjectionMatrix = GLKMatrix4MakePerspective(45.0*M_PI/180.0, aspect, 0.1, 100);    glUniformMatrix4fv(_texProjectionSlot, 1, GL_FALSE, _texProjectionMatrix.m);        _texModelViewMatrix = GLKMatrix4MakeTranslation(0, 0, -5); //平移    _texModelViewMatrix = GLKMatrix4RotateX(_texModelViewMatrix, 1.4);  //旋转X轴    glUniformMatrix4fv(_texModelViewSlot, 1, GL_FALSE, _texModelViewMatrix.m);}

再接下来,我们就需要构造纹理数据并绘制出来了,对于纹理顶点的坐标数据,由于不知道多边体的中心点在何处,我就自己构造了:

//    第一个    GLfloat vertices1[] = {        //   x    y    z        -0.9,  0.3, -0.9,  //左下        -0.6,  0.3, -0.9,  //右下        -0.9,  0.3, -0.6,  //左上        -0.6,  0.3, -0.6,  //右上    };        //    第二个    GLfloat vertices2[] = {        //   x    y    z        -0.5,  0.3, -0.5,  //左下        -0.2,  0.3, -0.5,  //右下        -0.5,  0.3, -0.2,  //左上        -0.2,  0.3, -0.2,  //右上    };        //    第三个    GLfloat vertices3[] = {    //   x    y    z        -0.9,  0.3, -0.1,  //左下        -0.6,  0.3, -0.1,  //右下        -0.9,  0.3, 0.2,  //左上        -0.6,  0.3, 0.2,  //右上    };

而对于纹理的纹理坐标数据,都是:

//纹理4个顶点对应纹理坐标,三个都是一样的    GLfloat textureCoord[] = {        0, 0,        1, 0,        0, 1,        1, 1,    };

整个方法里构造加上绘制,代码如下:

//绘制纹理-(void)drawTextrue{//    构造3个纹理的顶点坐标    //四个顶点(分别表示xyz轴)    //    第一个    GLfloat vertices1[] = {        //   x    y    z        -0.9,  0.3, -0.9,  //左下        -0.6,  0.3, -0.9,  //右下        -0.9,  0.3, -0.6,  //左上        -0.6,  0.3, -0.6,  //右上    };        //    第二个    GLfloat vertices2[] = {        //   x    y    z        -0.5,  0.3, -0.5,  //左下        -0.2,  0.3, -0.5,  //右下        -0.5,  0.3, -0.2,  //左上        -0.2,  0.3, -0.2,  //右上    };        //    第三个    GLfloat vertices3[] = {    //   x    y    z        -0.9,  0.3, -0.1,  //左下        -0.6,  0.3, -0.1,  //右下        -0.9,  0.3, 0.2,  //左上        -0.6,  0.3, 0.2,  //右上    };        //纹理4个顶点对应纹理坐标,三个都是一样的    GLfloat textureCoord[] = {        0, 0,        1, 0,        0, 1,        1, 1,    };    //绘制    glVertexAttribPointer(_texPositionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices1);    glVertexAttribPointer(_texCoordSlot, 2, GL_FLOAT, GL_FALSE, 0, textureCoord);    //使用纹理单元    glActiveTexture(GL_TEXTURE0);    glBindTexture(GL_TEXTURE_2D, _textureID1);    glUniform1i(_ourTextureSlot, 0);    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);        glVertexAttribPointer(_texPositionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices2);    glVertexAttribPointer(_texCoordSlot, 2, GL_FLOAT, GL_FALSE, 0, textureCoord);    //使用纹理单元    glActiveTexture(GL_TEXTURE0);    glBindTexture(GL_TEXTURE_2D, _textureID2);    glUniform1i(_ourTextureSlot, 0);    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);        glVertexAttribPointer(_texPositionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices3);    glVertexAttribPointer(_texCoordSlot, 2, GL_FLOAT, GL_FALSE, 0, textureCoord);    //使用纹理单元    glActiveTexture(GL_TEXTURE0);    glBindTexture(GL_TEXTURE_2D, _textureID3);    glUniform1i(_ourTextureSlot, 0);    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);    }

然后我们在render方法里调用纹理绘制的方法:

//绘制纹理    glUseProgram(_textureProgram);    [self setupTextureProjectionMatrixAndModelViewMatrix];    [self drawTextrue];

得到最终的绘制结果:

1.png

最终结果.png

从上面的图片我们能看出来,效果是不够好的,比如边、线锯齿,多边体和纹理模糊,也没有进行矩阵变换重绘等问题,这些涉及到公司产品的竞争,我目前不会分享出来,还请自行寻找解决方案。

最后,给出整个个Demo的目录结构吧

1.png

整个Demo目录结构.png

作者:_清墨

链接:https://www.jianshu.com/p/dfe81644000d

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台