OpenGL ES案例04_1-GLSL使用索引绘图

本案例的主要目的是理解GLSL中如何使用索引绘图。最终效果如下：


GLSL使用索引绘图效果图

什么是索引绘图

一个图形有许多顶点，如本案例最终效果中的金字塔，一共有5个面6个三角形组成。由这6个三角形根据图元装配绘制金字塔效果。在绘制过程中，共使用了18个顶点，因为图元装配方式使得有些顶点是进行了复用，而实际肉眼可见顶点个数只有5个。如下图所示。


image.png

索引绘制技巧就是将图形中肉眼可见的顶点，通过索引的方式表示顶点之间的连接。
在上图中，各三角形的顶点构成方式如下：

  • 左面的三角形由顶点{0，2，4}构成。
  • 右面的三角形由顶点{1，4，3}构成。
  • 前面的三角形由顶点{2，3，4}构成。
  • 后面的三角形由顶点{0，4，1}构成。
  • 底部由两个三角形组成，两个三角形分别是由顶点{0，3，2}和顶点{0，1，3}构成。

使用GLSL索引绘图的思路如下：


GLSL索引绘图的思路

准备工作

  1. 新建一个iOS工程，并将新工程中的view的继承关系，修改成继承于自定义View。
  2. 在图形进行旋转时需要用到矩阵相乘的操作，本案例中引入一个数学库，完成矩阵相乘等操作。

自定义着色器文件

自定义着色器文件的内容如下：


自定义着色器

顶点着色器

  • 由于本案例中点击按钮将实现旋转，这将涉及矩阵变换，因此需要在顶点着色器中定义两个uniform变量：1，投影矩阵；2，模型视图矩阵。
  • 在计算顶点最终坐标时，需要将投影矩阵模型视图矩阵源顶点坐标，再将最终结果值赋值给内建变量gl_Position。
  • 注意：在顶点数据与矩阵相乘时，需要注意相乘的顺序。因为在OpenGL ES中是以列向量为主，position是列向量，即41矩阵。而投影矩阵、模型视图矩阵都是44矩阵，因此需要按投影矩阵模型视图矩阵position的顺序。
attribute vec4 position;
attribute vec4 positionColor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
varying lowp vec4 varyColor;
void main(){
    varyColor = positionColor;
    gl_Position = projectionMatrix * modelViewMatrix * position;
}

片元着色器

  • 本案例中不涉及纹理操作，因此只需要在片元着色器中将顶点颜色直接赋值给内建变量gl_FragColor即可。
  • 如果顶点颜色少于顶点个数，则会对缺少颜色的顶点进行颜色插值，产生一个类似颜色渐变的效果。
  • 如果不想引入插值，则需要指定整个面的颜色而不是顶点颜色。
varying lowp vec4 varyColor;
void main(){
    gl_FragColor = varyColor;
}

重写layoutSubviews函数

在layoutSubviews函数中，主要完成以下工作：


image.png
  1. 设置绘制图层
    创建绘制内容的载体。
-(void)setupLayer{
    self.myEagLayer = (CAEAGLLayer*)self.layer;
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    self.myEagLayer.opaque = YES;
    self.myEagLayer.drawableProperties = @{
        kEAGLDrawablePropertyRetainedBacking:@false,
        kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8
    };
}

+ (Class)layerClass{
    return [CAEAGLLayer class];
}
  1. 设置上下文
    用于记录绘制过程中的一些状态信息。
-(void)setupContext{
    self.myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    [EAGLContext setCurrentContext:self.myContext];
}
  1. 清空缓冲区
    避免之前缓冲区的数据对本次绘制造成影响。
-(void)deletBuffer{
    glDeleteRenderbuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteFramebuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}
  1. 设置顶点缓冲区
    设置一下用于存储顶点数据或颜色数据等的缓冲区。
-(void)setupRenderBuffer{
    glGenRenderbuffers(1, &_myColorRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
  1. 设置帧缓冲区
    设置管理顶点缓冲区的帧缓冲区。
-(void)setupFrameBuffer{
    glGenFramebuffers(1, &_myColorFrameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
  1. 根据着色器文件创建program
    6.1 读取着色器文件；
    6.2 创建顶点着色器和片元着色器；
    6.3 分别着色器文件将内容加载到顶点着器和片元着色器中；
    6.4 编译着色器；
    6.5 创建program；
    6.6 将着色器链附着到program上；
    6.7 删除已经附着过的着色器；
    以上是一个编译着色器文件并附着至program中的流程，在OpenGL ES案例03 - 使用GLSL完成纹理图片加载中也有描述过该流程，详细的代码可参见本案例的Demo。
-(void)setupProgram{
    NSString* vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
    NSString* fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
    
    self.myProgram = [self loadShader:vertFile frag:fragFile];
    glLinkProgram(self.myProgram);
    glUseProgram(self.myProgram);
}
  1. 设置顶点数据
    这部分主要是将顶点数据从CPU传递给GPU，并打开顶点属性通道。
-(void)setupVertexData{
    //(1)顶点数组 前3顶点值（x,y,z），后3位颜色值(RGB)
    GLfloat attrArr[] = {
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, //左上0
        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, //右上1
        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, //左下2
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下3
        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, //顶点4
    };
    
    GLuint bufferID;
    glGenBuffers(1, &bufferID);
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    GLuint position = glGetAttribLocation(self.myProgram, "position");
    glEnableVertexAttribArray(position);
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, 6*sizeof(GLfloat), NULL);
    
    GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
    glEnableVertexAttribArray(positionColor);
    glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, 6*sizeof(GLfloat), (GLfloat*)NULL+3);
}
  1. 设置投影矩阵
    本案例中绘制的是一个立体图形，为了更逼近真实效果，需要设置一个投影矩阵。
    8.1 创建一个4*4的矩阵；
    8.2 通过ksMatrixLoadIdentity函数，将投影矩阵初始化为一个单元矩阵；
    8.3 通过ksPerspective函数，设置透视投影；
    8.4 通过glUniformMatrix4fv函数，将投影矩阵传递给顶点着色器；
-(void)setupProjectionData{
    GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
    KSMatrix4 _projectionMatrix;
    ksMatrixLoadIdentity(&_projectionMatrix);
    float aspect = self.frame.size.width/self.frame.size.height;
    
    ksPerspective(&_projectionMatrix, 30, aspect, 5.0, 20.0);
    ksTranslate(&_projectionMatrix, 0, 0, -10.0);
    glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, &_projectionMatrix.m[0][0]);
}
  1. 设置模型视图矩阵
    初始化一个模型视图矩阵，后续可将旋转、平移等操作与该矩阵进行相乘。
    9.1 定义一个4*4的模型视图矩阵；
    9.2 通过ksMatrixLoadIdentity函数，将模型视图矩阵初始化为一个单元矩阵；
    9.3 通过glUniformMatrix4fv函数，将模型视图矩阵传递给顶点着色器；
- (void)setupModelViewData{
    GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
        
    KSMatrix4 _modelViewMatrix;
    ksMatrixLoadIdentity(&_modelViewMatrix);
    glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, &_modelViewMatrix.m[0][0]);
}
  1. 开始绘制
    至此，基本的操作已经完成了，之前的案例中使用的默认绘图方式，这里通过使用glDrawElements函数来完成索引绘图。
-(void)render{
    glClearColor(0, 0.0, 0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    GLfloat scale = [[UIScreen mainScreen] scale];
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
    glEnable(GL_CULL_FACE);
    
    //(2).索引数组
    GLuint indices[] = {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };
    
    /*
    GLenum mode：绘图的模型
        GL_POINTS
        GL_LINES
        GL_LINE_LOOP
        GL_LINE_STRIP
        GL_TRIANGLES
        GL_TRIANGLE_STRIP
        GL_TRIANGLE_FAN
    GLsizei count：绘图所需要索引的个数
    GLenum type：索引数组中数据类型
    const GLvoid* indices：索引数组
    */
    glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_INT, indices);
    
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

至此，已经完成了整个图形的绘制。接下来就是完成点击按钮后可以执行旋转的效果了。

实现按钮点击后图形旋转效果

为了让图形能沿着x、y、z轴旋转，我们定义三个按钮，分别命名为x、y、z，当点击不同按钮时，沿着不同的轴进行旋转，点击一次为启动旋转，再次点击为停止旋转。
重点：此部分的重点为如何发生旋转。

  1. 定义一个4*4的模型视图矩阵；
  2. 通过ksMatrixLoadIdentity函数将模型视图矩阵初始化为一个单元矩阵；
  3. 定义一个4*4的旋转矩阵；
  4. 通过ksMatrixLoadIdentity函数，将定义的旋转矩阵也初始化为一个单元矩阵；
  5. 通过ksRotate函数，实现沿某个轴发生旋转；
  6. 通过ksMatrixMultiply函数，将旋转矩阵与模型视图矩阵相乘，并将结果放入模型视图矩阵中；
  7. 通过glUniformMatrix4fv函数将最终模型视图矩阵传递给顶点着色器；
  8. 重新绘制；
-(void)reDegree{
    xDegree += bX*5;
    yDegree += bY*5;
    zDegree += bZ*5;
    
    GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
    
    KSMatrix4 _modelViewMatrix;
    ksMatrixLoadIdentity(&_modelViewMatrix);
    
    KSMatrix4 _rotationMatrix;
    ksMatrixLoadIdentity(&_rotationMatrix);
    ksRotate(&_rotationMatrix, xDegree, 1, 0, 0);
    ksRotate(&_rotationMatrix, yDegree, 0, 1, 0);
    ksRotate(&_rotationMatrix, zDegree, 0, 0, 1);
    
    ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
    glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, &_modelViewMatrix.m[0][0]);
    
    [self render];
}

完整代码见：GLSL三角形变换Demo地址

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