OpenGL|OpenGL ES入门10-多实例渲染 OpenGLES入门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 = https://www.it610.com/article/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|OpenGL ES入门10-多实例渲染】OpenGL-Refpages