OpenGL ES入门10-多实例渲染

前言

本文是关于OpenGL ES的系统性学习过程,记录了自己在学习OpenGL ES时的收获。
这篇文章的目标是用OpenGL ES实现多实例渲染,在2.0版本中苹果是以扩展的形式来提供相关支持的,在接下来也会讲到2.0版本中的相关API。
环境是Xcode8.1+OpenGL ES 3.0
目前代码已经放到github上面,OpenGL ES入门10-Instance技术

欢迎关注我的 OpenGL ES入门专题

概述

实例化(instancing)或者多实例渲染(instancd rendering)是一种连续执行多条相同渲染命令的方法。并且每个命令的所产生的渲染结果都会有轻微的差异。是一种非常有效的,实用少量api调用来渲染大量几何体的方法。OpenGL提供多种机制,允许着色器对不同渲染实例赋予不同的顶点属性。

实现效果

OpenGL ES入门10-多实例渲染_第1张图片
多实例渲染实例
渲染命令
  • 多实例渲染命令
    glDrawArraysInstanced函数是glDrawArrays()的多实例版本,参数完全等价,只是多了个instancecount,该参数用于设置渲染实例个数。
void glDrawArraysInstanced (GLenum mode, GLint first, GLsizei count, GLsizei instancecount)

参数 mode :绘制方式,例如:GL_POINTS、GL_LINES。
参数 first :从数组缓存中的哪一位开始绘制,一般为0。
参数 count :数组中顶点的数量。
参数 instancecount :该参数用于设置渲染实例个数。

glDrawElementsInstanced是glDrawElements()的多实例版本,同样只是多了个instancecount参数而已,同样是用于设置渲染实例个数。

void glDrawElementsInstanced (GLenum mode, GLsizei count, GLenum type, const GLvoid* indices, GLsizei instancecount)

参数 mode :指定绘制图元的类型。例如:GL_POINTS、GL_LINES。
参数 count :为绘制图元的数量乘上一个图元的顶点数。
参数 type :为索引值的类型,只能是下列值之一:GL_UNSIGNED_BYTE, GL_UNSIGNED_SHORT, GL_UNSIGNED_INT。
参数 indices :指向索引存贮位置的指针。
参数 instancecount :该参数用于设置渲染实例个数。

  • 多实例渲染顶点属性控制:
    多实例的顶点属性与正规的顶点属性是类似的。它们可以通过glGetAttribLocation查询,通过glVertexAttribPointer来设置。通过glEnableVertexAttribArray和glDisableVertexAttribArray进行启用和禁用。
void glVertexAttribDivisor (GLuint index, GLuint divisor) 

参数 index : 对应着色器中的索引。
参数 divisor :表示顶点属性的更新频率,每隔多少个实例将重新设置实例的该属性,例如设置为1,那么每个实例的属性都不一样,设置为2则每两个实例相同,3则每三个实例改变属性。

实现步骤
  • 创建着色器。在片元着色器中我们增加一个偏移量的属性(attribute vec3 offset),在每次绘制之后它的值会发生偏移。通过glVertexAttribDivisor来设置如何偏移。
precision mediump float;

uniform sampler2D image;

varying vec2 vTexcoord;

void main()
{
    gl_FragColor = texture2D(image, vTexcoord);
}
attribute vec3 position;
attribute vec3 offset; //偏移量
attribute vec2 texcoord;

varying vec2 vTexcoord;

void main()
{
    gl_Position = vec4(position+offset, 1.0);
    vTexcoord = texcoord;
}

  • 设置顶点属性。设置顶点属性方便我们进行纹理贴图。
- (void)setupVBO
{
    _vertCount = 6;
    
    GLfloat vertices[] = {
        -0.5f,  1.0f, 0.0f, 1.0f, 0.0f,   // 右上
        -0.5f,  0.5f, 0.0f, 1.0f, 1.0f,   // 右下
        -1.0f,  0.5f, 0.0f, 0.0f, 1.0f,  // 左下
        -1.0f,  0.5f, 0.0f, 0.0f, 1.0f,  // 左下
        -1.0f,  1.0f, 0.0f, 0.0f, 0.0f,  // 左上
        -0.5f,  1.0f, 0.0f, 1.0f, 0.0f,   // 右上
    };
    
    // 创建VBO
    _vbo = createVBO(GL_ARRAY_BUFFER, GL_STATIC_DRAW, sizeof(vertices), vertices);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program, "position"));
    glVertexAttribPointer(glGetAttribLocation(_program, "position"), 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program, "texcoord"));
    glVertexAttribPointer(glGetAttribLocation(_program, "texcoord"), 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL+sizeof(GL_FLOAT)*3);
}
  • 设置纹理。通过读取纹理图片,生成纹理缓存对象。
- (void)setupTexure
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"wood" ofType:@"jpg"];
    
    unsigned char *data;
    int size;
    int width;
    int height;
    
    // 加载纹理
    if (read_jpeg_file(path.UTF8String, &data, &size, &width, &height) < 0) {
        printf("%s\n", "decode fail");
    }
    
    // 创建纹理
    _texture = createTexture2D(GL_RGB, width, height, data);
    
    if (data) {
        free(data);
        data = NULL;
    }
}
  • 设置偏移量。偏移量和普通的顶点数据一样可以使用VBO来存储。我们希望每次绘制顶点数组都发生一定的偏移,总共发生三次偏移(gl_Position = vec4(position+offset, 1.0))。这样我们总共需要9个GLfloat的空间来存储偏移数据。
- (void)setupOffset
{
    GLfloat vertices[] = {
        0.1f, -0.1f, 0.0f,
        0.7f, -0.7f, 0.0f,
        1.3f, -1.3f, 0.0f,
    };
    
    // 创建VBO
    _offsetVBO = createVBO(GL_ARRAY_BUFFER, GL_STATIC_DRAW, sizeof(vertices), vertices);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program, "offset"));
    glVertexAttribPointer(glGetAttribLocation(_program, "offset"), 3, GL_FLOAT, GL_FALSE, 0, NULL);
}
  • 绘制。
- (void)render
{
    glClearColor(1.0, 1.0, 1.0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    glLineWidth(2.0);
    
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
    // 激活纹理
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, _texture);
    glUniform1i(glGetUniformLocation(_program, "image"), 0);
    
    // 每次绘制之后,对offset进行1个偏移
    glVertexAttribDivisor(glGetAttribLocation(_program, "offset"), 1);
    
    glDrawArraysInstanced(GL_TRIANGLES, 0, _vertCount, 3);
    
    //将指定 renderbuffer 呈现在屏幕上,在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个,在 renderbuffer 可以被呈现之前,必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
    [_context presentRenderbuffer:GL_RENDERBUFFER];
}

最后

由于上述API都是OpenGL ES 3.0的相关API,因此如果在OpenGL ES 2.0想实现相同的效果,我们可以用苹果的OpenGL ES 2.0的扩展API。OpenGL ES 2.0的扩展都在glext.h中,区别就是API加了EXT、APPLE、OES等后缀。比如多实例渲染OpenGL ES 2.0的扩展API为 glVertexAttribDivisorEXT、 glDrawArraysInstancedEXT、glDrawElementsInstancedEXT

参考链接

OpenGL-Refpages

你可能感兴趣的:(OpenGL ES入门10-多实例渲染)