3D Computer Grapihcs Using OpenGL - 15 Draw Element Instanced

友情提示：继续本节之前，需要保存此前的代码，本节为了试验，会对代码做一些修改，但后续的修改需要我们把代码返回之前的进度。

OpenGL内置支持Instancing，有专门的函数来处理这件事情。

为了方便，我们先使用最简单的三角形来学习

先修改sendDataToOpenGL()函数：

 void MyGlWindow::sendDataToOpenGL()
 {
     GLfloat tri[] = {
         -1.0f,+0.0f,
         -1.0f,+1.0f,
         -0.9f,+0.0f
     };

     GLuint vertexBufferID;
     glGenBuffers(, &vertexBufferID);
     glBindBuffer(GL_ARRAY_BUFFER, vertexBufferID);
     glBufferData(GL_ARRAY_BUFFER, sizeof(tri), tri, GL_STATIC_DRAW);
     glEnableVertexAttribArray();
     glVertexAttribPointer(, , GL_FLOAT, GL_FALSE, , );

     GLushort indices[] = { ,, };
     GLuint indexArrayBufferID;
     glGenBuffers(, &indexArrayBufferID);
     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexArrayBufferID);
     glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
     numIndices = ;
 }

相应的修改vertexshader

 #version                            

 in layout(location=) vec2 position;   

 out vec3 passingColor;

 void main()
 {                                      

   gl_Position = vec4(position.xy,,);
   passingColor= vec3(,,);
 }

以及paintGL()函数：

 void MyGlWindow::paintGL()
 {
     glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
     glViewport(, , width(), height());

     glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, );
 }

进行了上述修改之后，会在画布左上角绘制一个简单的红色三角形。

假如我们现在需要达到这样的目的：复制这个三角形多次，每次都横向偏移一定的量。

为了使用OpenGL提供的Instancing 方法，避免每次都调用glDrawElements，我们可以提供一个数组，作为偏移信息数组。

在sendDataToOpenGL()函数中定义一个GLfloat数组，把它绑定到GL_ARRAY_BUFFER上，开启一个新的通道，把数据传输进去。

最后在paintGL中使用glDrawElementsInstanced函数来绘制多个实例。

具体代码如下：

 void MyGlWindow::sendDataToOpenGL()
 {
     GLfloat tri[] = {
         -1.0f,+0.0f,
         -1.0f,+1.0f,
         -0.9f,+0.0f
     };

     GLuint vertexBufferID;
     glGenBuffers(, &vertexBufferID);
     glBindBuffer(GL_ARRAY_BUFFER, vertexBufferID);
     glBufferData(GL_ARRAY_BUFFER, sizeof(tri), tri, GL_STATIC_DRAW);
     glEnableVertexAttribArray();
     glVertexAttribPointer(, , GL_FLOAT, GL_FALSE, , );

     GLfloat offsets[] = {0.0f, 0.5f, 1.0f, 1.2f, 1.6f};
     GLuint offsetsBufferID;
     glGenBuffers(, &offsetsBufferID);
     glBindBuffer(GL_ARRAY_BUFFER, offsetsBufferID);
     glBufferData(GL_ARRAY_BUFFER, sizeof(offsets), offsets, GL_STATIC_DRAW);
     glEnableVertexAttribArray();
     glVertexAttribPointer(, , GL_FLOAT, GL_FALSE, , );
     glVertexAttribDivisor(, );

     GLushort indices[] = { ,, };
     GLuint indexArrayBufferID;
     glGenBuffers(, &indexArrayBufferID);
     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexArrayBufferID);
     glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
     numIndices = ;
 }

16-23行是新增内容。

16行定义了一个GLfloat数组，有5个元素。

17-20行我们已经很熟悉，不再解释了

21行开启了通道1

22行设定了通道1的数据格式，第一个参数表示通道1，第二个参数表示每1个数据作为一个单元

23行glVertexAttribDivsior是个新函数，它是配合实例化绘制的。没有它的情况下，tri数组每2个元素结合offsets数组的1个元素，也就是说offsets数组每个元素只用一次。有了这个函数之后，offsets数组的每个元素都要做一次循环，和tri数组的每组元素结合一次，形成5个批次。

修改VertexShader:

 #version                            

 in layout(location=) vec2 position;
 in layout(location=) float offset;  

 out vec3 passingColor;

 void main()
 {                                      

   gl_Position = vec4(position.x + offset, + position.y,,);
   passingColor= vec3(,,);
 }

增加了第4行，对应sendDataToOpenGL的新增通道1.

第11行中，我们把position的x坐标进行了offset的偏移。

最后修改paintGL()函数：

 void MyGlWindow::paintGL()
 {
     glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
     glViewport(, , width(), height());
     glDrawElementsInstanced(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, , );
 }

第5行使用glDrawElementsInstanced函数代替glDrawElements函数，进行了批量绘制。

第五个参数表示绘制五个实例。

最后效果：