QOpenGL入门教程08：立方体

系列教程索引：QOpenGL入门教程索引

上一篇：QOpenGL入门教程07：旋转

二维图像整完了，接下来我们来看看三维的效果。

将上一篇的代码修改一下

初始化部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
glGenBuffers(4, &m_vboIds[0]);
GLfloat triangleVertices[] = {
    0.0f, 1.0f, 0.0f,
    -1.0f,-1.0f, 1.0f,
    1.0f,-1.0f, 1.0f,
    
    0.0f, 1.0f, 0.0f,
    1.0f,-1.0f, 1.0f,
    1.0f,-1.0f, -1.0f,
    
    0.0f, 1.0f, 0.0f,
    1.0f,-1.0f, -1.0f,
    -1.0f,-1.0f, -1.0f,
    
    0.0f, 1.0f, 0.0f,
    -1.0f,-1.0f,-1.0f,
    -1.0f,-1.0f, 1.0f
};
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(triangleVertices), triangleVertices, GL_STATIC_DRAW);

GLfloat triangleColors[] = {
    1.0f,0.0f,0.0f,
    0.0f,1.0f,0.0f,
    0.0f,0.0f,1.0f,
    
    1.0f,0.0f,0.0f,
    0.0f,0.0f,1.0f,
    0.0f,1.0f,0.0f,
    
    1.0f,0.0f,0.0f,
    0.0f,1.0f,0.0f,
    0.0f,0.0f,1.0f,
    
    1.0f,0.0f,0.0f,
    0.0f,0.0f,1.0f,
    0.0f,1.0f,0.0f
};
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[1]);
glBufferData(GL_ARRAY_BUFFER, sizeof(triangleColors), triangleColors, GL_STATIC_DRAW);

GLfloat quadVertices[] = {
    // Front face
    -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,

    // Right face
    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,

    // Back face
    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,

    // Left face
    -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,

    // Top face
    -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,

    // Bottom face
    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,
};
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[2]);
glBufferData(GL_ARRAY_BUFFER, sizeof(quadVertices), quadVertices, GL_STATIC_DRAW);

GLfloat quadColors[] = {
    // Front face (red)
    1.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f,
    1.0f, 0.0f, 0.0f, 1.0f,

    // Right face (green)
    0.0f, 1.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f, 1.0f,

    // Back face (blue)
    0.0f, 0.0f, 1.0f, 1.0f,
    0.0f, 0.0f, 1.0f, 1.0f,
    0.0f, 0.0f, 1.0f, 1.0f,
    0.0f, 0.0f, 1.0f, 1.0f,
    0.0f, 0.0f, 1.0f, 1.0f,
    0.0f, 0.0f, 1.0f, 1.0f,
    
    // Left face (yellow)
    1.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f,
    1.0f, 1.0f, 0.0f, 1.0f,

    // Top face (cyan)
    0.0f, 1.0f, 1.0f, 1.0f,
    0.0f, 1.0f, 1.0f, 1.0f,
    0.0f, 1.0f, 1.0f, 1.0f,
    0.0f, 1.0f, 1.0f, 1.0f,
    0.0f, 1.0f, 1.0f, 1.0f,
    0.0f, 1.0f, 1.0f, 1.0f,

    // Bottom face (magenta)
    1.0f, 0.0f, 1.0f, 1.0f,
    1.0f, 0.0f, 1.0f, 1.0f,
    1.0f, 0.0f, 1.0f, 1.0f,
    1.0f, 0.0f, 1.0f, 1.0f,
    1.0f, 0.0f, 1.0f, 1.0f,
    1.0f, 0.0f, 1.0f, 1.0f,
};
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[3]);
glBufferData(GL_ARRAY_BUFFER, sizeof(quadColors), quadColors, GL_STATIC_DRAW);

共计四个数组，分别为三角形的顶点和颜色、四边形的顶点和颜色。

四边形的一个面有四个点，但是数组中提供了6个点。这个是绘图方法的原因。一般绘图直接绘制四边形，但是如果环境比较严格，不支持直接绘制四边形，我们就用两个三角形代替。

绘图函数

先看一下三角形

1
2
3
4
5
6
7
8
9
10
11
m_modelView.setToIdentity();
m_modelView.translate(-1.5f, 0.0f, -6.0f);
m_modelView.rotate(m_rtri,0.0f,1.0f,0.0f);
program->setUniformValue("mvpMatrix", m_projection * m_modelView);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[0]);
program->enableAttributeArray(0);
program->setAttributeBuffer(0, GL_FLOAT, 0, 3);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[1]);
program->enableAttributeArray(1);
program->setAttributeBuffer(1, GL_FLOAT, 0, 3);
glDrawArrays(GL_TRIANGLES, 0, 12);

方锥有四个面，每个有三个顶点，所以需要绘制12个。

四边形

1
2
3
4
5
6
7
8
9
10
11
m_modelView.setToIdentity();
m_modelView.translate(1.5f, 0.0f, -7.0f);
m_modelView.rotate(m_rquad,1.0f,1.0f,1.0f);
program->setUniformValue("mvpMatrix", m_projection * m_modelView);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[2]);
program->enableAttributeArray(0);
program->setAttributeBuffer(0, GL_FLOAT, 0, 3);
glBindBuffer(GL_ARRAY_BUFFER, m_vboIds[3]);
program->enableAttributeArray(1);
program->setAttributeBuffer(1, GL_FLOAT, 0, 4);
glDrawArrays(GL_TRIANGLES, 0, 36);

立方体有6个面，每个有2个三角形，每个三角形有三个顶点，6 * 2 * 3 = 36

效果为：

cube

完整代码在OpenGL_Beginner中的QOpenGL下的8.cube

下一篇：QOpenGL入门教程09：纹理贴图

Qt
#Qt #OpenGL #QOpenGL
QOpenGL入门教程08：立方体
https://feater.top/qt/qopengl-elements-in-3d/
作者
JackeyLea
发布于
2020年11月18日
许可协议