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提供多种机制，允许着色器对不同渲染实例赋予不同的顶点属性。

实现效果

多实例渲染实例

渲染命令

• 多实例渲染命令
  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