如何在 OpenGL 中绘制由 5 个三角形组成的 VAO？
Posted
技术标签:
【中文标题】如何在 OpenGL 中绘制由 5 个三角形组成的 VAO？【英文标题】：How to draw a VAO made out of 5 triangles in OpenGL? 【发布时间】：2020-04-28 04:11:19 【问题描述】：我最近编写了一个程序来绘制一个具有 3 个不同 RGB 值的三角形，我想在同一个程序中对另一个单独的 VAO 做同样的事情，但我希望这个由 5 个三角形组成。这是我的 main.cpp：
void framebuffer_size_callback(GFLWwindow* window, int width, int height);
void processInput(GLFWwindow *window);
// Shaders
const char *vertexShaderSource =
"#version 410\n"
"in vec3 vp;\n"
"void main()\n"
"\n"
"gl_Position = vec4(aPos, 1.0);\n"
"\0";
const char *fragmentShader1Source =
"#version 410\n"
"out vec4 FragColor;\n"
"in vec3 myColor;\n"
"void main()\n"
"\n"
"FragColor = vec4(myColor, 1.0f);\n"
"\n\0";
int main ()
// start GL context and O/S window using the GLFW helper library
if (!glfwInit ())
fprintf (stderr, "ERROR: could not start GLFW3\n");
return 1;
// uncomment these lines if on Apple OS X
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 2);
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
GLFWwindow* window = glfwCreateWindow(640, 480, "LearnOpenGL", NULL, NULL);
if (!window)
fprintf(stderr, "ERROR: could not open window with GLFW3\n");
glfwTerminate();
return 1;
glfwMakeContextCurrent(window);
// start GLEW extension handler
glewExperimental = GL_TRUE;
glewInit();
// get version info
const GLubyte* renderer = glGetString(GL_RENDERER);
const GLubyte* version = glGetString(GL_VERSION);
printf("Renderer: %s\n", renderer);
printf("OpenGL version supported %s\n", version);
glEnable(GL_DEPTH_TEST); // enable depth-testing
glDepthFunc(GL_LESS);
/* OTHER STUFF GOES HERE */
// Draw a single triangle VBO
float points[] =
// positions // colors
0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, -0.5f, 0.0f, 0.0f 0.0f, 1.0f
;
GLuint VBO = 0;
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(points), points, GL_STATIC_DRAW);
// Generate a VAO.
GLuint VAO = 0;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(points), points, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, NULL);
glEnableVertexAttribArray(0);
// Compile a Vertex Shader
int vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);
// Compile a fragment shader.
int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);
// Compile shaders into a executable shader program.
int shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, fragmentShader);
glAttachShader(shaderProgram, vertexShader);
glLinkProgram(shaderProgram);
// Drawing the triangles aka render loop
while (!glfwWindowShouldClose(window))
processInput(window);
// wipe the drawing surface clear
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// Draw Triangle
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);
// Draw Triangle Fan; unfinished
// swap buffers and poll IO events
glfwPollEvents();
glfwSwapBuffers(window);
// close GL context and any other GLFW resources
glfwTerminate();
return 0;
我是否像使用第一个 VBO 或其他东西一样简单地创建另一个浮点“点”矩阵？我遵循的教程在这部分并不完全清楚。
另外，我在我的 Mac 上使用 Xcode，并为我的片段和顶点着色器创建了单独的 .cpp 文件。我应该将它们切换到头文件吗？
【问题讨论】：
【参考方案1】：您必须指定颜色的输入属性 (aColor) 并将颜色属性从顶点着色器传递到片段着色器 (myColor)。使用Layout Qualifiers 指定属性索引。
#version 330 core
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec3 aColor;
out vec3 myColor;
void main()
myColor = aColor;
gl_Position = vec4(aPos, 1.0);
#version 330 core
out vec4 FragColor;
in vec3 myColor;
void main()
FragColor = vec4(myColor, 1.0f);
请注意，您当前的顶点着色器无法编译。通过glGetShaderiv和参数GL_COMPILE_STATUS检查着色器编译是否成功，通过glGetProgramiv和参数GL_LINK_STATUS检查程序链接是否成功。部分代码sn-ps见OpenGL ignores Quads and makes them Triangles的回答。
您的顶点是具有 6 个组件（x、y、z、r、g、b）的元组：
float points[] = // positions // colors 0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, -0.5f, -0.5f, 0.0f, 0.0f 0.0f, 1.0f ;
使用glVertexAttribPointer 指定2 个顶点属性。必须以字节为单位指定步幅和偏移量。步幅为6 * sizeof(float)。顶点坐标的偏移量为0，颜色属性的偏移量为3 * sizeof(float)。例如：
GLuint VBO = 0;
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(points), points, GL_STATIC_DRAW);
// Generate a VAO.
GLuint VAO = 0;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), NULL);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
如果要绘制更复杂的网格，则必须扩展顶点数组。只需将另外 3 个顶点和颜色添加到 points 数组以用于下一个三角形。或者，您可以使用不同的原始类型，例如 GL_TRIANGLE_STRIP 或 GL_TRIANGLE_FAN。见Triangle primitives
示例代码：
#include <iostream>
#include <vector>
// Shaders
const char *vertexShaderSource = R"(#version 330 core
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec3 aColor;
out vec3 myColor;
void main()
myColor = aColor;
gl_Position = vec4(aPos, 1.0);
)";
const char *fragmentShaderSource = R"(#version 330 core
out vec4 FragColor;
in vec3 myColor;
void main()
FragColor = vec4(myColor, 1.0f);
)";
bool CompileStatus( GLuint shader );
bool LinkStatus( GLuint program );
float radians( float deg ) return deg * 3.141529 / 180.0;
int main ()
// start GL context and O/S window using the GLFW helper library
if (!glfwInit())
fprintf (stderr, "ERROR: could not start GLFW3\n");
return 1;
// uncomment these lines if on Apple OS X
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
GLFWwindow* window = glfwCreateWindow(640, 480, "LearnOpenGL", NULL, NULL);
if (!window)
fprintf(stderr, "ERROR: could not open window with GLFW3\n");
glfwTerminate();
return 1;
glfwMakeContextCurrent(window);
// start GLEW extension handler
glewExperimental = GL_TRUE;
glewInit();
// get version info
const GLubyte* renderer = glGetString(GL_RENDERER);
const GLubyte* version = glGetString(GL_VERSION);
printf("Renderer: %s\n", renderer);
printf("OpenGL version supported %s\n", version);
glEnable(GL_DEPTH_TEST); // enable depth-testing
glDepthFunc(GL_LESS);
/* OTHER STUFF GOES HERE */
// Draw a single triangle VBO
float points[] =
// positions // colors
0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f * cos(radians(72)), 0.5f * sin(radians(72)), 0.0f, 0.0f, 0.0f, 1.0f,
0.5f * cos(radians(144)), 0.5f * sin(radians(144)), 0.0f, 1.0f, 1.0f, 0.0f,
0.5f * cos(radians(216)), 0.5f * sin(radians(216)), 0.0f, 0.0f, 1.0f, 1.0f,
0.5f * cos(radians(288)), 0.5f * sin(radians(288)), 0.0f, 1.0f, 0.0f, 1.0f,
0.5, 0.0f, 0.0f, 1.0f, 0.5f, 0.0f
;
GLuint VBO = 0;
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(points), points, GL_STATIC_DRAW);
// Generate a VAO.
GLuint VAO = 0;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glEnableVertexAttribArray(0);
glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), NULL);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
// Compile a Vertex Shader
int vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);
CompileStatus( vertexShader );
// Compile a fragment shader.
int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);
CompileStatus( fragmentShader );
// Compile shaders into a executable shader program.
int shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, fragmentShader);
glAttachShader(shaderProgram, vertexShader);
glLinkProgram(shaderProgram);
LinkStatus( shaderProgram );
// Drawing the triangles aka render loop
while (!glfwWindowShouldClose(window))
//processInput(window);
// wipe the drawing surface clear
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// Draw Triangle
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLE_FAN, 0, 7);
// Draw Triangle Fan; unfinished
// swap buffers and poll IO events
glfwPollEvents();
glfwSwapBuffers(window);
// close GL context and any other GLFW resources
glfwTerminate();
return 0;
bool CompileStatus( GLuint shader )
GLint status = GL_TRUE;
glGetShaderiv( shader, GL_COMPILE_STATUS, &status );
if (status == GL_FALSE)
GLint logLen;
glGetShaderiv( shader, GL_INFO_LOG_LENGTH, &logLen );
std::vector< char >log( logLen );
GLsizei written;
glGetShaderInfoLog( shader, logLen, &written, log.data() );
std::cout << "compile error:" << std::endl << log.data() << std::endl;
return status != GL_FALSE;
bool LinkStatus( GLuint program )
GLint status = GL_TRUE;
glGetProgramiv( program, GL_LINK_STATUS, &status );
if (status == GL_FALSE)
GLint logLen;
glGetProgramiv( program, GL_INFO_LOG_LENGTH, &logLen );
std::vector< char >log( logLen );
GLsizei written;
glGetProgramInfoLog( program, logLen, &written, log.data() );
std::cout << "link error:" << std::endl << log.data() << std::endl;
return status != GL_FALSE;
【讨论】：
你是绝对正确的，这是一个非常可靠的答案 @NathanWride 请更正答案中的着色器和顶点规范。这会让其他用户感到困惑。 我实际上觉得发帖者应该更改接受的答案，如果不是，那么我会在早上附加您的建议以获得更完整的答案。【参考方案2】：您可以通过添加创建另一个包含新点的浮点数组并创建另一个 VAO 和 VBO 来完成此操作。由于您想要一个三角形扇形（基于代码中的注释），而不是 5 个单独的三角形，您可以这样：
float points_5_triangles[] =
// positions // colors
// Original triangle
x1, y1, z1, r1, g1, b1, // point 1
x2, y2, z2, r2, g2, b2, // point 2
x3, y3, z3, r3, g3, b3, // point 3
// Another triangle made from point 1, 3 and 4
x4, y4, z4, r4, g4, b4,
// Another triangle made from point 1, 4 and 5
x5, y5, z5, r5, g5, b5,
// Another triangle made from point 1, 5 and 6
x6, y6, z6, r6, g6, b6,
// Another triangle made from point 1, 6 and 7
x7, y7, z7, r7, g7, b7,
;
GLuint VBO_5_triangles = 0;
glGenBuffers(1, &VBO_5_triangles);
glBindBuffer(GL_ARRAY_BUFFER, VBO_5_triangles);
glBufferData(GL_ARRAY_BUFFER, sizeof(points_5_triangles), points_5_triangles, GL_STATIC_DRAW);
// Generate another VAO.
GLuint VAO_5_triangles = 0;
glGenVertexArrays(1, &VAO_5_triangles);
glBindVertexArray(VAO_5_triangles);
glBindBuffer(GL_ARRAY_BUFFER, VBO_5_triangles);
glBufferData(GL_ARRAY_BUFFER, sizeof(points_5_triangles), points_5_triangles, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, NULL);
glEnableVertexAttribArray(0);
现在在绘制两个对象时，首先绑定目标 VAO，然后渲染，然后继续下一个对象：
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);
glBindVertexArray(VAO_5_triangles);
glDrawArrays(GL_TRIANGLE_FAN, 0, 7);
有关如何绘制三角形扇形的更多信息，请参阅Triangle primitives
【讨论】：
好的，x1、y1、z1 等代表浮点数对吗？此外，cmets 说要从点 1、3 和 4 制作另一个三角形，但只有 3 个原始点。你能给我解释一下吗？ 抱歉，您没有看到顶点属性规范与顶点和颜色数组不匹配吗？你看到顶点着色器编译失败了吗？并且片段着色器输入myColor没有顶点着色器输出？
@Garrus 浮点数组中的每一行从 3 个浮点数中获得 1 个点作为位置，3 个浮点数作为颜色。三角扇是一种特殊形式的三角形，它使用第一个条目作为根点，然后用根和后面的每一对（即 1,2,3 1,3,4,1,4,5 等）组成一个三角形。应该阅读链接以获取更多详细信息和有用的图表。Rabbid76 绝对正确，但我决定只解决有关添加另一个具有 5 个三角形的对象的问题。我认为 Garrus 也绝对应该遵循您的建议来修复他们的着色器。跨度>
以上是关于如何在 OpenGL 中绘制由 5 个三角形组成的 VAO？的主要内容，如果未能解决你的问题，请参考以下文章