重新自学学习openGL 之性能优化实例化

假设我们需要绘制很多模型的场景，而大部分的模型包含的是同一组顶点数据，只不过进行的是不同的世界空间变换。想象一个充满草的场景：每根草都是一个包含几个三角形的小模型。你可能会需要绘制很多根草，最终在每帧中你可能会需要渲染上千或者上万根草。因为每一根草仅仅是由几个三角形构成，渲染几乎是瞬间完成的，但上千个渲染函数调用却会极大地影响性能。

如果我们需要渲染大量物体时，代码看起来会像这样：

for(unsigned int i = 0; i < amount_of_models_to_draw; I++)
{
    DoSomePreparations(); // 绑定VAO，绑定纹理，设置uniform等
    glDrawArrays(GL_TRIANGLES, 0, amount_of_vertices);
}

如果像这样绘制模型的大量实例(Instance)，你很快就会因为绘制调用过多而达到性能瓶颈。与绘制顶点本身相比，使用glDrawArrays或glDrawElements函数告诉GPU去绘制你的顶点数据会消耗更多的性能，因为OpenGL在绘制顶点数据之前需要做很多准备工作（比如告诉GPU该从哪个缓冲读取数据，从哪寻找顶点属性，而且这些都是在相对缓慢的CPU到GPU总线(CPU to GPU Bus)上进行的）。所以，即便渲染顶点非常快，命令GPU去渲染却未必。

如果我们能够将数据一次性发送给GPU，然后使用一个绘制函数让OpenGL利用这些数据绘制多个物体，就会更方便了。这就是实例化(Instancing)。

实例化这项技术能够让我们使用一个渲染调用来绘制多个物体，来节省每次绘制物体时CPU -> GPU的通信，它只需要一次即可。如果想使用实例化渲染，我们只需要将glDrawArrays和glDrawElements的渲染调用分别改为glDrawArraysInstanced和glDrawElementsInstanced就可以了。而对于 ios openglES2.0 需要使用glDrawElementsInstancedEXT 和glDrawArraysInstancedEXT .(对openglES2.0 该功能属于扩展功能)。这些渲染函数的实例化版本需要一个额外的参数，叫做实例数量(Instance Count)，它能够设置我们需要渲染的实例个数。这样我们只需要将必须的数据发送到GPU一次，然后使用一次函数调用告诉GPU它应该如何绘制这些实例。GPU将会直接渲染这些实例，而不用不断地与CPU进行通信。

个函数本身并没有什么用。渲染同一个物体一千次对我们并没有什么用处，每个物体都是完全相同的，而且还在同一个位置。我们只能看见一个物体！处于这个原因，GLSL在顶点着色器中嵌入了另一个内建变量，gl_InstanceID。而对于opengles 2.0 该变量是gl_InstanceIDEXT

使用gl_InstanceIDEXT 需要在shader 的头上添加 #extension GL_EXT_draw_instanced : enable

在使用实例化渲染调用时，gl_InstanceID会从0开始，在每个实例被渲染时递增1。比如说，我们正在渲染第43个实例，那么顶点着色器中它的gl_InstanceID将会是42。因为每个实例都有唯一的ID，我们可以建立一个数组，将ID与位置值对应起来，将每个实例放置在世界的不同位置。

测试demo

绘制5*5 的正方体在屏幕上 ,如下图

正常遍历

#import "DefaultViewController.h"
#import "DefaultBindObject.h"
static float DF_quadVertices[] = {
    // 位置          // 颜色
    -0.05f,  0.05f,  1.0f, 0.0f, 0.0f,
    0.05f, -0.05f,  0.0f, 1.0f, 0.0f,
    -0.05f, -0.05f,  0.0f, 0.0f, 1.0f,
    
    -0.05f,  0.05f,  1.0f, 0.0f, 0.0f,
    0.05f, -0.05f,  0.0f, 1.0f, 0.0f,
    0.05f,  0.05f,  0.0f, 1.0f, 1.0f
};

@interface DefaultViewController ()
@property (nonatomic ,strong) Vertex * vertex ;
@end

@implementation DefaultViewController
static GLKVector2 offsets[25];

-(void)initSubObject{
    [self _setUniformOffsets];
    self.bindObject = [DefaultBindObject new];
}


-(void)loadVertex{
    self.vertex= [Vertex new];
    int vertexNum =6;
    [self.vertex allocVertexNum:vertexNum andEachVertexNum:5];
    for (int i=0; i<vertexNum; i++) {
        float onevertex[5];
        for (int j=0; j<5; j++) {
            onevertex[j]=DF_quadVertices[i*5+j];
        }
        [self.vertex setVertex:onevertex index:i];
    }
    [self.vertex bindBufferWithUsage:GL_STATIC_DRAW];
    [self.vertex enableVertexInVertexAttrib:DF_aPos numberOfCoordinates:2 attribOffset:0];
    [self.vertex enableVertexInVertexAttrib:DF_aColor numberOfCoordinates:3 attribOffset:sizeof(float)*2];

}



-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    
    for (int i=0; i<25; i++) {
         GLKVector2 translation=offsets[i];
        glUniform2fv(self.bindObject->uniforms[DF_uniform_Offset], 1, translation.v);
        [self.vertex drawVertexWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:6];
    }
    
 
}

-(void)_setUniformOffsets{
    int index = 0;
    float offset = 0.2f;
    for(int y = -5; y < 5; y += 2)
    {
        for(int x = -5; x < 5; x += 2)
        {
            GLKVector2 translation;
            translation.x = (float)x / 5.0 + offset;
            translation.y = (float)y / 5.0 + offset;
            offsets[index++] = translation;
        }
    }
}

@end

shader

precision mediump float;

attribute vec2 beginPostion; ///开始位置
attribute vec3 color;

uniform vec2 u_offset;

varying  vec3 vary_color;

void main(){
//    int id = gl_InstanceIDEXT;
//    vec2 offset=offsets[id];
    vec2 temp =u_offset + beginPostion;
    gl_Position =vec4(temp,0.0,1.0);
    vary_color  = color;

}

precision mediump float;
varying  vec3 vary_color;

void main()
{
    gl_FragColor = vec4(vary_color,1.0);
}

实例化demo

为了体验一下实例化绘制，我们将会在标准化设备坐标系中使用一个渲染调用，绘制25个2D四边形。我们会索引一个包含25个偏移向量的uniform数组，将偏移值加到每个实例化的四边形上。
绘制结果也是上图

#import "InstanceIDViewController.h"
#import "InstanceIDBindObject.h"
static float IST_quadVertices[] = {
    // 位置          // 颜色
    -0.05f,  0.05f,  1.0f, 0.0f, 0.0f,
    0.05f, -0.05f,  0.0f, 1.0f, 0.0f,
    -0.05f, -0.05f,  0.0f, 0.0f, 1.0f,
    
    -0.05f,  0.05f,  1.0f, 0.0f, 0.0f,
    0.05f, -0.05f,  0.0f, 1.0f, 0.0f,
    0.05f,  0.05f,  0.0f, 1.0f, 1.0f
};

@interface InstanceIDViewController ()
@property (nonatomic ,strong) Vertex * vertex ;
@end

@implementation InstanceIDViewController
static GLKVector2 IST_offsets[25];

-(void)initSubObject{
    [self _setUniformOffsets];
    self.bindObject = [InstanceIDBindObject new];
}


-(void)loadVertex{
    self.vertex= [Vertex new];
    int vertexNum =6;
    [self.vertex allocVertexNum:vertexNum andEachVertexNum:5];
    for (int i=0; i<vertexNum; i++) {
        float onevertex[5];
        for (int j=0; j<5; j++) {
            onevertex[j]=IST_quadVertices[i*5+j];
        }
        [self.vertex setVertex:onevertex index:i];
    }
    [self.vertex bindBufferWithUsage:GL_STATIC_DRAW];
    [self.vertex enableVertexInVertexAttrib:IST_aPos numberOfCoordinates:2 attribOffset:0];
    [self.vertex enableVertexInVertexAttrib:IST_aColor numberOfCoordinates:3 attribOffset:sizeof(float)*2];

}



-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    for (int i=0; i<25; i++) {
        GLKVector2 translation=IST_offsets[i];
        glUniform2fv(self.bindObject->uniforms[IST_uniform_Offset+i], 1, translation.v);

    }
    [self.vertex drawVertexWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:6 RepeatCount:25];
}

-(void)_setUniformOffsets{
    int index = 0;
    float offset = 0.2f;
    for(int y = -5; y < 5; y += 2)
    {
        for(int x = -5; x < 5; x += 2)
        {
            GLKVector2 translation;
            translation.x = (float)x / 5.0 + offset;
            translation.y = (float)y / 5.0 + offset;
            IST_offsets[index++] = translation;
        }
    }
}


@end

shader

#extension GL_EXT_draw_instanced : enable
precision mediump float;

attribute vec2 a_beginPostion; ///开始位置
attribute vec3 a_color;

uniform vec2 u_offsets[25];
varying  vec3 v_color;

void main(){
    int id = gl_InstanceIDEXT;
    vec2 offset=u_offsets[id];
    vec2 temp =offset + a_beginPostion;
    gl_Position =vec4(temp,0.0,1.0);
    v_color  = a_color;

}

precision mediump float;
varying  vec3 v_color;

void main()
{
    gl_FragColor = vec4(v_color,1.0);
}

虽然上述代码的实现在目前的情况下能够正常工作，但是如果我们要渲染远超过100个实例的时候（这其实非常普遍），我们最终会超过最大能够发送至着色器的uniform数据大小上限(不超过100个).

Vertex 类drawVertexWithMode: startVertexIndex: numberOfVertices: RepeatCount:的实现

-(void)drawVertexWithMode:(GLenum)mode  startVertexIndex:(GLint)first
         numberOfVertices:(GLsizei)count RepeatCount:(GLsizei)repeatCount {
    glBindBuffer(GL_ARRAY_BUFFER,
                 self.vertexBuffers);
    glDrawArraysInstancedEXT(mode, first,count, repeatCount);

}

实例化替代方案

上述代码有瓶颈,因此一个代替方案是实例化数组(Instanced Array)，它被定义为一个顶点属性（能够让我们储存更多的数据），仅在顶点着色器渲染一个新的实例时才会更新。

使用顶点属性时，顶点着色器的每次运行都会让GLSL获取新一组适用于当前顶点的属性。而当我们将顶点属性定义为一个实例化数组时，顶点着色器就只需要对每个实例，而不是每个顶点，更新顶点属性的内容了。这允许我们对逐顶点的数据使用普通的顶点属性，而对逐实例的数据使用实例化数组。


#import "Divisor2ViewController.h"
#import "Divisor2BindObject.h"
static float DV2_quadVertices[] = {
    // 位置          // 颜色
    -0.05f,  0.05f,  1.0f, 0.0f, 0.0f,
    0.05f, -0.05f,  0.0f, 1.0f, 0.0f,
    -0.05f, -0.05f,  0.0f, 0.0f, 1.0f,
    
    -0.05f,  0.05f,  1.0f, 0.0f, 0.0f,
    0.05f, -0.05f,  0.0f, 1.0f, 0.0f,
    0.05f,  0.05f,  0.0f, 1.0f, 1.0f
};

@interface Divisor2ViewController ()
@property (nonatomic ,strong) Vertex * vertex ;

@property (nonatomic ,strong) Vertex * Divisor2 ;
@end

@implementation Divisor2ViewController
static GLKVector2 DV2_offsets[25];

-(void)initSubObject{
    [self _setUniformOffsets];
    self.bindObject = [Divisor2BindObject new];
}


-(void)loadVertex{
    self.vertex= [Vertex new];
    int vertexNum =6;
    [self.vertex allocVertexNum:vertexNum andEachVertexNum:5];
    for (int i=0; i<vertexNum; i++) {
        float onevertex[5];
        for (int j=0; j<5; j++) {
            onevertex[j]=DV2_quadVertices[i*5+j];
        }
        [self.vertex setVertex:onevertex index:i];
    }
    [self.vertex bindBufferWithUsage:GL_STATIC_DRAW];
    [self.vertex enableVertexInVertexAttrib:DV2_aPos numberOfCoordinates:2 attribOffset:0];
    [self.vertex enableVertexInVertexAttrib:DV2_aColor numberOfCoordinates:3 attribOffset:sizeof(float)*2];

    self.Divisor2 = [Vertex new];
    vertexNum=25;
    [self.Divisor2 allocVertexNum:vertexNum andEachVertexNum:2];
    for (int i=0; i<25; i++) {
        [self.Divisor2 setVertex:DV2_offsets[i].v index:i];
    }
    [self.Divisor2 bindBufferWithUsage:GL_STATIC_DRAW];
    [self.Divisor2 enableVertexInVertexAttrib:DV2_aOffset numberOfCoordinates:2 attribOffset:0];
    [self.Divisor2 setVertexDivisor:2 divisor:1];
}



-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    for (int i=0; i<25; i++) {
        GLKVector2 translation=DV2_offsets[i];
        glUniform2fv(self.bindObject->uniforms[DV2_uniform_Offset+i], 1, translation.v);

    }
    [self.vertex drawVertexWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:6 RepeatCount:25];
}

-(void)_setUniformOffsets{
    int index = 0;
    float offset = 0.2f;
    for(int y = -5; y < 5; y += 2)
    {
        for(int x = -5; x < 5; x += 2)
        {
            GLKVector2 translation;
            translation.x = (float)x / 5.0 + offset;
            translation.y = (float)y / 5.0 + offset;
            DV2_offsets[index++] = translation;
        }
    }
}


@end

shader

precision mediump float;

attribute vec2 a_beginPostion; ///开始位置
attribute vec3 a_color;
attribute vec2 a_offset;

varying  vec3 v_color;

void main(){
    
    gl_Position =vec4(a_beginPostion+a_offset,0.0,1.0);
    v_color  = a_color;

}

precision mediump float;
varying  vec3 v_color;

void main()
{
    gl_FragColor = vec4(v_color,1.0);
}

我们不再使用gl_InstanceID，现在不需要索引一个uniform数组就能够直接使用offset属性了。

关键代码是我们实例化一个顶点

self.Divisor2 = [Vertex new];
    vertexNum=25;
    [self.Divisor2 allocVertexNum:vertexNum andEachVertexNum:2];
    for (int i=0; i<25; i++) {
        [self.Divisor2 setVertex:DV2_offsets[i].v index:i];
    }
    [self.Divisor2 bindBufferWithUsage:GL_STATIC_DRAW];
    [self.Divisor2 enableVertexInVertexAttrib:DV2_aOffset numberOfCoordinates:2 attribOffset:0];
    [self.Divisor2 setVertexDivisor:2 divisor:1];

关键代码是self.Divisor2 调用setVertexDivisor: divisor
看起实现

-(void)setVertexDivisor:(GLuint) index  divisor:(GLuint)divisor{
    glBindBuffer(GL_ARRAY_BUFFER,
                 self.vertexBuffers);
    glVertexAttribDivisorEXT(2,1);
}

这些知识点不上很难,只是api的简单实用的简单原理理解. 看demo 就可以了.

参考博客
 OpenGLZeroStudyDemo(16)-高级Opengl-实例化

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

重新自学学习openGL 之性能优化实例化

测试demo

正常遍历

实例化demo

实例化替代方案

推荐阅读更多精彩内容