现代OpenGL教程（三）：绘制彩色立方体（imgui+OpenGL3.3）
前言：imgui 是一个开源的GUI框架，自带的例子里面直接集成了glfw+gl3w环境，本例使用的版本是imgui v1.61，下载地址：https://github.com/ocornut/imgui/tags。本教程在上一个教程现代OpenGL教程（二）：矩阵变换（imgui+OpenGL3.3）的基础上进行修改，绘制一个彩色立方体。
教程目录（持续更新中）：
现代OpenGL教程（一）：绘制三角形（ImGui+OpenGL3.3）
现代OpenGL教程（二）：矩阵变换（ImGui+OpenGL3.3）
现代OpenGL教程（三）：绘制彩色立方体（ImGui+OpenGL3.3）
现代OpenGL教程（四）：立方体纹理贴图（ImGui+OpenGL3.3）
现代OpenGL教程（五）：obj模型加载（ImGui+OpenGL3.3）
现代OpenGL教程（六）：鼠标和键盘（ImGui+OpenGL3.3）
现代OpenGL教程（七）：基础光照——颜色（ImGui+OpenGL3.3）
现代OpenGL教程（八）：基础光照——Phong光照模型（ImGui+OpenGL3.3）
现代OpenGL教程（九）：基础光照——材质（ImGui+OpenGL3.3）
运行效果
第一步：构建立方体顶点坐标数组。
立方体有6个面，2个三角形组成一个面，因此要画12个三角形。
static const GLfloat g_vertex_buffer_data[] = {
-1.0f,-1.0f,-1.0f, // triangle 1 : begin
-1.0f,-1.0f, 1.0f,
-1.0f, 1.0f, 1.0f, // triangle 1 : end
1.0f, 1.0f,-1.0f, // triangle 2 : begin
-1.0f,-1.0f,-1.0f,
-1.0f, 1.0f,-1.0f, // triangle 2 : end
1.0f,-1.0f, 1.0f,
-1.0f,-1.0f,-1.0f,
1.0f,-1.0f,-1.0f,
1.0f, 1.0f,-1.0f,
1.0f,-1.0f,-1.0f,
-1.0f,-1.0f,-1.0f,
-1.0f,-1.0f,-1.0f,
-1.0f, 1.0f, 1.0f,
-1.0f, 1.0f,-1.0f,
1.0f,-1.0f, 1.0f,
-1.0f,-1.0f, 1.0f,
-1.0f,-1.0f,-1.0f,
-1.0f, 1.0f, 1.0f,
-1.0f,-1.0f, 1.0f,
1.0f,-1.0f, 1.0f,
1.0f, 1.0f, 1.0f,
1.0f,-1.0f,-1.0f,
1.0f, 1.0f,-1.0f,
1.0f,-1.0f,-1.0f,
1.0f, 1.0f, 1.0f,
1.0f,-1.0f, 1.0f,
1.0f, 1.0f, 1.0f,
1.0f, 1.0f,-1.0f,
-1.0f, 1.0f,-1.0f,
1.0f, 1.0f, 1.0f,
-1.0f, 1.0f,-1.0f,
-1.0f, 1.0f, 1.0f,
1.0f, 1.0f, 1.0f,
-1.0f, 1.0f, 1.0f,
1.0f,-1.0f, 1.0f
};
第二步：改变绘制的顶点的个数
共有12个三角形，所以绘制的顶点的个数由原来的3个改为12*3个。
glDrawArrays(GL_TRIANGLES, 0, 12 * 3);
第三步：修改顶点着色器和片段着色器代码
顶点着色器代码：
#version 330 core
// Input vertex data, different for all executions of this shader.
layout(location = 0) in vec3 vertexPosition_modelspace;
layout(location = 1) in vec3 vertexColor;
// Output data ; will be interpolated for each fragment.
out vec3 fragmentColor;
// Values that stay constant for the whole mesh.
uniform mat4 MVP;
void main(){
// Output position of the vertex, in clip space : MVP * position
gl_Position = MVP * vec4(vertexPosition_modelspace,1);
// The color of each vertex will be interpolated
// to produce the color of each fragment
fragmentColor = vertexColor;
}
片段着色器代码：
#version 330 core
// Interpolated values from the vertex shaders
in vec3 fragmentColor;
// Ouput data
out vec3 color;
void main(){
// Output color = color specified in the vertex shader,
// interpolated between all 3 surrounding vertices
color = fragmentColor;
}
这时候运行代码，现在已经可以绘制一个尚未着色的立方体：
第四步：加上颜色属性
1.声明颜色：为每一个顶点分配一个RGB三元组：
static const GLfloat g_color_buffer_data[] = {
0.583f, 0.771f, 0.014f,
0.609f, 0.115f, 0.436f,
0.327f, 0.483f, 0.844f,
0.822f, 0.569f, 0.201f,
0.435f, 0.602f, 0.223f,
0.310f, 0.747f, 0.185f,
0.597f, 0.770f, 0.761f,
0.559f, 0.436f, 0.730f,
0.359f, 0.583f, 0.152f,
0.483f, 0.596f, 0.789f,
0.559f, 0.861f, 0.639f,
0.195f, 0.548f, 0.859f,
0.014f, 0.184f, 0.576f,
0.771f, 0.328f, 0.970f,
0.406f, 0.615f, 0.116f,
0.676f, 0.977f, 0.133f,
0.971f, 0.572f, 0.833f,
0.140f, 0.616f, 0.489f,
0.997f, 0.513f, 0.064f,
0.945f, 0.719f, 0.592f,
0.543f, 0.021f, 0.978f,
0.279f, 0.317f, 0.505f,
0.167f, 0.620f, 0.077f,
0.347f, 0.857f, 0.137f,
0.055f, 0.953f, 0.042f,
0.714f, 0.505f, 0.345f,
0.783f, 0.290f, 0.734f,
0.722f, 0.645f, 0.174f,
0.302f, 0.455f, 0.848f,
0.225f, 0.587f, 0.040f,
0.517f, 0.713f, 0.338f,
0.053f, 0.959f, 0.120f,
0.393f, 0.621f, 0.362f,
0.673f, 0.211f, 0.457f,
0.820f, 0.883f, 0.371f,
0.982f, 0.099f, 0.879f};
2.缓冲的创建、绑定和填充：
GLuint colorbuffer;
glGenBuffers(1, &colorbuffer);
glBindBuffer(GL_ARRAY_BUFFER, colorbuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data), g_color_buffer_data, GL_STATIC_DRAW);
3.颜色缓冲的属性配置：
// 2nd attribute buffer : colors
glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, colorbuffer);
glVertexAttribPointer(
1, // attribute. No particular reason for 1, but must match the layout in the shader.
3, // size
GL_FLOAT, // type
GL_FALSE, // normalized?
0, // stride
(void*)0 // array buffer offset
);
现在已经可以绘制一个彩色立方体了：
但是效果有点奇怪，在某些角度下，近处的三角形被远处的三角形覆盖了。
第五步：开启深度缓冲
在缓冲中存储每个片段的深度（即Z坐标的值），每次绘制片段之前，比较当前与先前片段的深度值，根据距离摄像机的远近优先级进行绘制。
// 开启深度测试
glEnable(GL_DEPTH_TEST);
// Accept fragment if it closer to the camera than the former one
glDepthFunc(GL_LESS);
同时还要还需要清除除了颜色以外每一帧的深度
// Clear the screen
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
最终效果：
完整代码
TransformVertexShader.vertexshader
#version 330 core
// Input vertex data, different for all executions of this shader.
layout(location = 0) in vec3 vertexPosition_modelspace;
layout(location = 1) in vec3 vertexColor;
// Output data ; will be interpolated for each fragment.
out vec3 fragmentColor;
// Values that stay constant for the whole mesh.
uniform mat4 MVP;
void main(){
// Output position of the vertex, in clip space : MVP * position
gl_Position = MVP * vec4(vertexPosition_modelspace,1);
// The color of each vertex will be interpolated
// to produce the color of each fragment
fragmentColor = vertexColor;
}
ColorFragmentShader.fragmentshader
#version 330 core
// Interpolated values from the vertex shaders
in vec3 fragmentColor;
// Ouput data
out vec3 color;
void main(){
// Output color = color specified in the vertex shader,
// interpolated between all 3 surrounding vertices
color = fragmentColor;
}
main.cpp
#include "imgui.h"
#include "imgui_impl_glfw_gl3.h"
#include 参考资料：第四课：彩色立方体 - opengl-tutorial