第七章的标题叫深入探索。所以按照着色阶段，首先会“深入探索”顶点着色阶段。这篇文章系统地介绍绘图命令。

我们之前一直使用的绘画命令是 glDrawArrays()，它是一个非索引绘画命令。非索引的意思是依次画出顶点缓冲里的各个点。

索引绘图命令

非索引命令相对应的是索引命令，其实在之前我们学习 obj 格式的时候，已经接触过索引的概念了。在 obj 格式中首先会定义各个顶点，接着会用各个顶点编号组合定义成面，也就是索引。

索引最直观的好处是节省数据量，让我们结合程序来进一步说明。

如代码清单 1.1 所示，正方体有 8 个顶点，所以顶点只需使用 24 个浮点数（vertex_positions），即 96 个字节。索引面需要用到 36 个元素，这边是 short 类型，更加节省空间，但我们不妨使用 int 类型计算为 144 字节。索引共计用到 (24+36)*4=240 字节。

而之前的非索引的方式：6（个面）*2（个三角形）*3（个顶点）*3（个分量），即要用到 108 个浮点数，即 432 个字节。索引相较于非索引，数据量减少了接近一半。

• static const GLushort vertex_indices[] =
• {
•     0, 1, 2,
•     2, 1, 3,
•     2, 3, 4,
•     4, 3, 5,
•     4, 5, 6,
•     6, 5, 7,
•     6, 7, 0,
•     0, 7, 1,
•     6, 0, 2,
•     2, 4, 6,
•     7, 5, 3,
•     7, 3, 1
• };
•  
• static const GLfloat vertex_positions[] =
• {
•     -0.25f, -0.25f, -0.25f,
•     -0.25f,  0.25f, -0.25f,
•      0.25f, -0.25f, -0.25f,
•      0.25f,  0.25f, -0.25f,
•      0.25f, -0.25f,  0.25f,
•      0.25f,  0.25f,  0.25f,
•     -0.25f, -0.25f,  0.25f,
•     -0.25f,  0.25f,  0.25f,
• };
•  
• glCreateBuffers(1, &position_buffer);
• glBindBuffer(GL_ARRAY_BUFFER, position_buffer);
• glBufferData(GL_ARRAY_BUFFER,
•              sizeof(vertex_positions),
•              vertex_positions,
•              GL_STATIC_DRAW);
• glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, NULL);
• glEnableVertexAttribArray(0);
•  
• glCreateBuffers(1, &index_buffer);
• glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index_buffer);
• glBufferData(GL_ELEMENT_ARRAY_BUFFER,
•              sizeof(vertex_indices),
•              vertex_indices,
•              GL_STATIC_DRAW);

顶点数据的绑定流程和之前学习到的一样，但这边使用了一个首次遇到的 glVertexAttribPointer() 函数。它作为我们之前了解到的 glVertexAttribFormat()、glVertexAttribBinding()、glBindVertexBuffer() 这些底层函数的辅助函数，实现的功能是一样的。最后不要忘记使用 glEnableVertexAttribArray() 函数使能顶点属性。

索引数据的创建流程和普通缓冲一样，要注意将它绑定到 GL_ELEMENT_ARRAY_BUFFER。

铺垫这么久，终于介绍到需要使用的索引绘图命令了——glDrawElements()。当顶点缓冲和索引缓冲配置好之后，就可以在渲染函数里调用 glDrawElements 了。

• glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0);

glDrawElements() 函数的原型为

其中 mode 和 count 参数，与 glDrawArrays() 的含义一致。type 指示索引的类型，此例中是 short 类型。最后一个 indices 参数，含义暂不清楚，书中介绍的是绑定的索引缓冲内的偏移。具体不知道怎么偏移，但是偏移 0 肯定是最常规的情况，这边也是直接设置为 0。

实例化

有时候会遇到需要多次绘制同一对象的情况，比如绘制一片草坪。代码会近似如下：

• glBindVertexArray(grass_vao);
• for (int n = 0; n < number_of_blades_of_grass; n++)
• {
•     SetupGrassBladeParameters();
•     glDrawArrays(GL_TRIANGLE_STRIP, 0, 6);
• }

显卡绘制一棵草很容易，但当 number_of_blades_of_grass 很大的时候，绘制的时间占比可能和多次命令发送给显卡的传输时间占比接近。这章介绍的实例化渲染就是为了节省通讯传输的时间。

实例化渲染也有非索引和索引版本的函数：

可以看到实例化函数就是在我们上一节学习到的函数基础上，多加了一个 instancecount 参数，它用来指示一次绘制多少个实例对象。即把循环从 CUP 上“移到了”显卡内部，从而节省了通讯的时间。

但是仅仅把循环移到显卡内部还存在一个问题：如果想要每个实例的属性参数不一样，每次都像代码清单 2.1 中调用 SetupGrassBladeParameters() 函数进行设置的话，还是存在通讯时间的浪费。

为了应对以上问题，我们看到 OpenGL 和实例化相关的一个内部变量——gl_InstanceID，这才是实例化的“精髓”。绘制第一个实例化对象时，gl_InstanceID 为 0，绘制之后的实例依次加 1，即最终到 instancecount-1。

我们以实例化草坪的例子，来看 gl_InstanceID 是如何被精心构造的。我们着重看代码清单 2.2 的顶点着色器程序部分，其余设置和之前学的大同小异。

在代码清单 2.2 中关注和 gl_InstanceID 相关的变量。可以看到 gl_InstanceID 的高低位被拆分成草坪的行列，同时位置的偏移量也使用 gl_InstanceID 作为种子。草的长度、弯曲度等依赖其位置，但其实也简介依赖于 gl_InstanceID。就是这样利用 gl_InstanceID，我们可以生成如图 1 这样随机的草坪。

1. #version 420 core
2.  
3. // Incoming per vertex position
4. in vec4 vVertex;
5.  
6. // Output varyings
7. out vec4 color;
8.  
9. uniform mat4 mvpMatrix;
10.  
11. layout (binding = 0) uniform sampler1D grasspalette_texture;
12. layout (binding = 1) uniform sampler2D length_texture;
13. layout (binding = 2) uniform sampler2D orientation_texture;
14. layout (binding = 3) uniform sampler2D grasscolor_texture;
15. layout (binding = 4) uniform sampler2D bend_texture;
16.  
17. int random(int seed, int iterations)
18. {
19.     int value = seed;
20.     int n;
21.  
22.     for (n = 0; n < iterations; n++)
23.     {
24.          value = ((value >> 7) ^ (value << 9)) * 15485863;
25.     }
26.  
27.     return value;
28. }
29.  
30. vec4 random_vector(int seed)
31. {
32.     int r = random(gl_InstanceID, 4);
33.     int g = random(r, 2);
34.     int b = random(g, 2);
35.     int a = random(b, 2);
36.  
37.     return vec4(float(r & 0x3FF) / 1024.0,
38.                 float(g & 0x3FF) / 1024.0,
39.                   float(b & 0x3FF) / 1024.0,
40.                   float(a & 0x3FF) / 1024.0);
41. }
42.  
43. mat4 construct_rotation_matrix(float angle)
44. {
45.     float st = sin(angle);
46.     float ct = cos(angle);
47.  
48.     return mat4(vec4(ct, 0.0, st, 0.0),
49.                 vec4(0.0, 1.0, 0.0, 0.0),
50.                   vec4(-st, 0.0, ct, 0.0),
51.                   vec4(0.0, 0.0, 0.0, 1.0));
52. }
53.  
54. void main(void)
55. {
56.     vec4 offset = vec4(float(gl_InstanceID >> 10) - 512.0,
57.                        0.0f,
58.                          float(gl_InstanceID & 0x3FF) - 512.0,
59.                          0.0f);
60.  
61.     int number1 = random(gl_InstanceID, 3);
62.     int number2 = random(number1, 2);
63.     offset += vec4(float(number1 & 0xFF) / 256.0,
64.                    0.0f,
65.                      float(number2 & 0xFF) / 256.0,
66.                      0.0f);
67.  
68.     vec2 texcoord = offset.xz / 1024.0 + vec2(0.5);
69.  
70.     float bend_factor = texture(bend_texture, texcoord).r * 2.0;
71.     float bend_amount = cos(vVertex.y);
72.  
73.     float angle = texture(orientation_texture, texcoord).r * 2.0 * 3.141592;
74.     mat4 rot = construct_rotation_matrix(angle);
75.     vec4 position = (rot * (vVertex + vec4(0.0, 0.0, bend_amount * bend_factor, 0.0))) + offset;
76.     position *= vec4(1.0, texture(length_texture, texcoord).r * 0.9 + 0.3, 1.0, 1.0);
77.     gl_Position = mvpMatrix * position;
78.  
79.     color = texture(grasspalette_texture, texture(grasscolor_texture, texcoord).r) +
80.             vec4(random_vector(gl_InstanceID).xyz * vec3(0.1, 0.5, 0.1), 1.0);
81. }

根据实例号获取数据

引入实例化后，我们可能会遇到一个需求问题：我们可能想要依据 gl_InstanceID 来索引传入的顶点数据，但是顶点数据默认是按绘制顶点顺序进行传递的。如代码清单 2.2 所示，我们想要实例中的点具有相同的颜色和位置偏移。

• #version 410 core
•  
• layout (location = 0) in vec4 position;
• layout (location = 1) in vec4 instance_color;
• layout (location = 2) in vec4 instance_position;
•  
• out Fragment
• {
•     vec4 color;
• } fragment;
•  
• void main()
• {
•     gl_Position = (position + instance_position) * vec4(0.25, 0.25, 1.0, 1.0);
•     fragment.color = instance_color;
• }

可以使用 glVertexAttribDivisor() 函数达到上述目的。看到代码清单 3.2，square_vertices 数组是四个顶点，instance_colors 数组是四个实例各自对应的颜色，instance_position 数组是四个实例各自对应的位置偏移，后续的缓冲设置步骤和之前学习的一样。主要是多了一步 glVertexAttribDivisor 设置，其原型为：

第一个参数是属性的下标位置，第二个参数是属性除数。设置了之后，对应的属性就会按照 [instance/divisor]+baseInstance 的公式进行索引。此处是按实例号逐一索引，所以将除数设置为 1。如果除数为 0，则按照原先的顶点属性数组进行索引。还有需要说明的一点是，公式中的 baseInstance 是类似 glDrawArraysInstancedBaseInstance() 这种函数名后缀指定的，没有指定的话默认为 0。

1. static const GLfloat square_vertices[] =
2. {
3.     -1.0f, -1.0f, 0.0f, 1.0f,
4.      1.0f, -1.0f, 0.0f, 1.0f,
5.      1.0f,  1.0f, 0.0f, 1.0f,
6.     -1.0f,  1.0f, 0.0f, 1.0f
7. };
8.  
9. static const GLfloat instance_colors[] =
10. {
11.     1.0f, 0.0f, 0.0f, 1.0f,
12.     0.0f, 1.0f, 0.0f, 1.0f,
13.     0.0f, 0.0f, 1.0f, 1.0f,
14.     1.0f, 1.0f, 0.0f, 1.0f
15. };
16.  
17. static const GLfloat instance_position[] =
18. {
19.     -2.0f, -2.0f, 0.0f, 0.0f,
20.      2.0f, -2.0f, 0.0f, 0.0f,
21.      2.0f,  2.0f, 0.0f, 0.0f,
22.     -2.0f,  2.0f, 0.0f, 0.0f
23. };
24.  
25. glCreateVertexArrays(1, &square_vao);
26. glBindVertexArray(square_vao);
27.  
28. GLuint offset = 0;
29. glCreateBuffers(1, &square_buffer);
30. glBindBuffer(GL_ARRAY_BUFFER, square_buffer);
31. glBufferData(GL_ARRAY_BUFFER, sizeof(square_vertices) + sizeof(instance_colors) + sizeof(instance_position), NULL, GL_STATIC_DRAW);
32. glBufferSubData(GL_ARRAY_BUFFER, offset, sizeof(square_vertices), square_vertices);
33. offset += sizeof(square_vertices);
34. glBufferSubData(GL_ARRAY_BUFFER, offset, sizeof(instance_colors), instance_colors);
35. offset += sizeof(instance_colors);
36. glBufferSubData(GL_ARRAY_BUFFER, offset, sizeof(instance_position), instance_position);
37.  
38. glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 0, 0);
39. glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE, 0, (GLvoid*)sizeof(square_vertices));
40. glVertexAttribPointer(2, 4, GL_FLOAT, GL_FALSE, 0, (GLvoid*)(sizeof(square_vertices) + sizeof(instance_colors)));
41.  
42. glEnableVertexAttribArray(0);
43. glEnableVertexAttribArray(1);
44. glEnableVertexAttribArray(2);
45.  
46. glVertexAttribDivisor(1, 1);
47. glVertexAttribDivisor(2, 1);

按照公式，我们可以按图 2 所示的效果进行核对验证，的确满足我们的预期。同时这几个属性数组恰好大小一致，我们把颜色的属性除数改成 0，效果如图 2 所示，以此对比加深对 glVertexAttribDivisor() 函数的理解。

间接绘制

实例化绘制是为了解决 CPU 和显卡频繁通信的问题，但实例化是建立在同一个绘制对象上的。那如果是要频繁绘制多个不同的对象要怎么办呢？这就引入了这节的间接绘制。间接绘制的概念理解上很简单，既然调用函数通讯频繁，那我们就把所有需要的绘制指令先通过缓存的方式一次性传递给显卡，之后绘制的时候显卡直接从缓冲中取就可以了。而绘制函数的调用就是参数不同，所以“绘制指令”的存在方式就是一段参数集合。

先看到间接函数的原型：

也有索引绘制版本的：

前几个参数都和之前的绘制函数一致，新认识的是最后一个 indirect 参数。它就是所说的“参数集合”，比如 glDrawArraysIndirect() 对应的 indirect 参数缓存布局为：

glDrawArraysIndirect() 和 glDrawElementsIndirect() 函数只能完成一条绘制指令，真正强大的是完成多条绘制指令的函数，它们多了一个 drawcount 参数，指示绘图指令的条数：

书上有一个小行星带（感觉应该是陨石带🤪）的例子，其中绘制了 100 个不同物体对象共计 50000 次。具体绘制细节这边就不细说了，我们直接看到代码清单 4.1 的间接绘图缓冲设置。

小行星顶点数据的加载逻辑在 object.load() 中，asteroids.sbm 中包含了 100 个不同的小行星模型，后续我们通过偏移（first）和顶点数量（count），从缓冲中指定绘制。object.get_sub_object_info() 可以获取不同模型的偏移和顶点数量信息。图 4 是一百个中的第一个小行星模型，可以稍微感受一下。

1. object.load("asteroids.sbm");
2.  
3. glCreateBuffers(1, &indirect_draw_buffer);
4. glBindBuffer(GL_DRAW_INDIRECT_BUFFER, indirect_draw_buffer);
5. glBufferData(GL_DRAW_INDIRECT_BUFFER,
6.     NUM_DRAWS * sizeof(DrawArraysIndirectCommand),
7.     NULL, GL_STATIC_DRAW);
8.  
9. DrawArraysIndirectCommand* cmd = (DrawArraysIndirectCommand*)glMapBufferRange(
10.     GL_DRAW_INDIRECT_BUFFER,
11.     0,
12.     NUM_DRAWS * sizeof(DrawArraysIndirectCommand),
13.     GL_MAP_WRITE_BIT | GL_MAP_INVALIDATE_BUFFER_BIT);
14.  
15. for (i = 0; i < NUM_DRAWS; i++)
16. {
17.     object.get_sub_object_info(i % object.get_sub_object_count(),
18.          cmd[i].first, cmd[i].count);
19.     cmd[i].primCount = 1;
20.     cmd[i].baseInstance = i;
21. }
22.  
23. glUnmapBuffer(GL_DRAW_INDIRECT_BUFFER);

后续代码清单 4.1 中的第 3 至 7 行，创建绘图缓冲，以及分配相应缓冲的大小。第 9 行进行缓冲映射，用于后续写入操作。第 15 至 21 行就是设置绘图缓冲的操作，分别设置不同的物体对象（偏移和顶点数量）以及实例数（1 个）和基准实例号（用于索引 draw_index 顶点属性）。

最终的运行效果如图 5 所示。需要说明的是，对比于不使用间接绘制的直接绘制，本地实验看起来并没有慢多少，这个现象先做记录，待后续有机会再了解和解释。

总结

这一章介绍了索引绘图指令；介绍了能更高效绘制同一对象的实例绘制，同时介绍了如果按实例号索引顶点数据；最后介绍了间接绘制，它直接把绘图指令指定在缓冲中，可以一次性指定多条绘制命令。