前言
本文是关于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
