面剔除基本原理#

三角形顶点的定义环绕顺序，决定 GPU 判断正面、背面的规则。OpenGL 默认规则：顶点逆时针（CCW）环绕构成的面为正向面，正常保留渲染；顺时针环绕的背向面会被自动剔除，不参与后续渲染流程。

使用场景#

适用场景#

适用于立方体等封闭立体模型。封闭模型内部背面永远不会被看到，无需渲染，可安全开启面剔除。

禁用场景#

不适用于草面片、广告牌、面片模型等非封闭单面结构。这类模型需要正面、背面均可正常显示，必须禁用面剔除，否则会出现模型镂空、缺失问题。

性能优势#

片元着色器是渲染管线中开销最大的阶段，面剔除可在早期直接丢弃背面面片，使其完全不进入片元着色器计算，大幅节省性能。

example1: 尝试设置面剔除的相关指令#

1
#define STB_IMAGE_IMPLEMENTATION
2
#include <glad/glad.h>
3
#include <GLFW/glfw3.h>
4
#include <stb_image.h>
5

6
#include <glm/glm.hpp>
7
#include <glm/gtc/matrix_transform.hpp>
8
#include <glm/gtc/type_ptr.hpp>
9

10
#include <myShader.h>
11
#include <myCamera.h>
12
#include <Model.h>
13

14
#include <iostream>
15

16
const unsigned int SCR_WIDTH = 800;
17
const unsigned int SCR_HEIGHT = 400;
18

19
Camera camera(glm::vec3(0.0f, 0.0f, 3.0f));
20
float lastX = (float)SCR_WIDTH / 2.0;
21
float lastY = (float)SCR_HEIGHT / 2.0;
22
bool firstCamera = true;
23

24
float deltaTime = 0.0f;
25
float lastFrame = 0.0f;
26

27
void framebuffer_size_callback(GLFWwindow* window, int width, int height) {
28
    glViewport(0, 0, width, height);
29
}
30
void processInput(GLFWwindow* window) {
31
    if (glfwGetKey(window, GLFW_KEY_ESCAPE)) {
32
        glfwSetWindowShouldClose(window, true);
33
    }
34
    if (glfwGetKey(window, GLFW_KEY_W)) {
35
        camera.ProcessKeyboard(FORWARD, deltaTime);
36
    }
37
    if (glfwGetKey(window, GLFW_KEY_S)) {
38
        camera.ProcessKeyboard(BACKWARD, deltaTime);
39
    }
40
    if (glfwGetKey(window, GLFW_KEY_A)) {
41
        camera.ProcessKeyboard(LEFT, deltaTime);
42
    }
43
    if (glfwGetKey(window, GLFW_KEY_D)) {
44
        camera.ProcessKeyboard(RIGHT, deltaTime);
45
    }
46
}
47
void processMovement(GLFWwindow* window, double xpos, double ypos) {
48
    if (firstCamera) {
49
        lastX = static_cast<float>(xpos);
50
        lastY = static_cast<float>(ypos);
51
        firstCamera = false;
52
    }
53
    float xoffset = static_cast<float>(xpos) - lastX;
54
    float yoffset = lastY - static_cast<float>(ypos);
55
    lastX = static_cast<float>(xpos);
56
    lastY = static_cast<float>(ypos);
57
    camera.ProcessMouseMovement(xoffset, yoffset);
58
}
59
void processScroll(GLFWwindow* window, double xoffset, double yoffset) {
60
    camera.ProcessScroll(static_cast<float>(yoffset));
61
}
62
unsigned int loadTexture(const char* path) {
63
    unsigned int texture;
64
    glGenTextures(1, &texture);
65

66
    int width, height, nrChannels;
67
    unsigned char* data = stbi_load(path, &width, &height, &nrChannels, 0);
68
    if (data) {
69
        GLenum format;
70
        if (nrChannels == 1) {
71
            format = GL_RED;
72
        }
73
        else if (nrChannels == 3) {
74
            format = GL_RGB;
75
        }
76
        else if (nrChannels == 4) {
77
            format = GL_RGBA;
78
        }
79
        glBindTexture(GL_TEXTURE_2D, texture);
80

81
        glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
82
        glGenerateMipmap(GL_TEXTURE_2D);
83

84
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
85
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
86
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
87
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
88
    }
89
    else {
90
        cout << "failed to load tetxure" << endl;
91
    }
92
    stbi_image_free(data);
93

94
    return texture;
95
}
96
int main() {
97
    glfwInit();
98
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
99
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
100
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
101

102
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "learnOpenGL", NULL, NULL);
103

104
    if (window == NULL) {
105
        cout << "failed to create GLFW window" << endl;
106
        glfwTerminate();
107
        return -1;
108
    }
109

110
    glfwMakeContextCurrent(window);
111
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
112
    glfwSetCursorPosCallback(window, processMovement);
113
    glfwSetScrollCallback(window, processScroll);
114

115
    glfwSetInputMode(window, GLFW_CURSOR, GLFW_CURSOR_DISABLED);
116

117
    if (!gladLoadGLLoader(GLADloadproc(glfwGetProcAddress))) {
118
        cout << "failed to initialize glad" << endl;
119
        glfwTerminate();
120
        return -1;
121
    }
122

123
    stbi_set_flip_vertically_on_load(true);
124

125
    glEnable(GL_DEPTH_TEST);
126
    glDepthFunc(GL_LESS);
127
    glEnable(GL_BLEND);
128
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
129
    glEnable(GL_CULL_FACE);
130
    glCullFace(GL_FRONT);
131
    glFrontFace(GL_CW);
132

133
    Shader shader("src/Shader/vertexShader.txt", "src/Shader/fragmentShader.txt");
134

135
    float cubeVertices[] = {
136
        // Back face
137
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f, // Bottom-left
138
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f, // top-right
139
         0.5f, -0.5f, -0.5f,  1.0f, 0.0f, // bottom-right
140
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f, // top-right
141
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f, // bottom-left
142
        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f, // top-left
143
        // Front face
144
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f, // bottom-left
145
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f, // bottom-right
146
         0.5f,  0.5f,  0.5f,  1.0f, 1.0f, // top-right
147
         0.5f,  0.5f,  0.5f,  1.0f, 1.0f, // top-right
148
        -0.5f,  0.5f,  0.5f,  0.0f, 1.0f, // top-left
149
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f, // bottom-left
150
        // Left face
151
        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f, // top-right
152
        -0.5f,  0.5f, -0.5f,  1.0f, 1.0f, // top-left
153
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f, // bottom-left
154
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f, // bottom-left
155
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f, // bottom-right
156
        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f, // top-right
157
        // Right face
158
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f, // top-left
159
         0.5f, -0.5f, -0.5f,  0.0f, 1.0f, // bottom-right
160
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f, // top-right
161
         0.5f, -0.5f, -0.5f,  0.0f, 1.0f, // bottom-right
162
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f, // top-left
163
         0.5f, -0.5f,  0.5f,  0.0f, 0.0f, // bottom-left
164
         // Bottom face
165
         -0.5f, -0.5f, -0.5f,  0.0f, 1.0f, // top-right
166
          0.5f, -0.5f, -0.5f,  1.0f, 1.0f, // top-left
167
          0.5f, -0.5f,  0.5f,  1.0f, 0.0f, // bottom-left
168
          0.5f, -0.5f,  0.5f,  1.0f, 0.0f, // bottom-left
169
         -0.5f, -0.5f,  0.5f,  0.0f, 0.0f, // bottom-right
170
         -0.5f, -0.5f, -0.5f,  0.0f, 1.0f, // top-right
171
         // Top face
172
         -0.5f,  0.5f, -0.5f,  0.0f, 1.0f, // top-left
173
          0.5f,  0.5f,  0.5f,  1.0f, 0.0f, // bottom-right
174
          0.5f,  0.5f, -0.5f,  1.0f, 1.0f, // top-right
175
          0.5f,  0.5f,  0.5f,  1.0f, 0.0f, // bottom-right
176
         -0.5f,  0.5f, -0.5f,  0.0f, 1.0f, // top-left
177
         -0.5f,  0.5f,  0.5f,  0.0f, 0.0f  // bottom-left
178
    };
179

180
    float planeVertices[] = {
181
            5.0f, -0.5f,  5.0f,  2.0f, 0.0f,
182
            -5.0f, -0.5f,  5.0f,  0.0f, 0.0f,
183
            -5.0f, -0.5f, -5.0f,  0.0f, 2.0f,
184

185
             5.0f, -0.5f,  5.0f,  2.0f, 0.0f,
186
            -5.0f, -0.5f, -5.0f,  0.0f, 2.0f,
187
             5.0f, -0.5f, -5.0f,  2.0f, 2.0f
188
    };
189

190
    float transparentVertices[] = {
191
        0.0f,  0.5f,  0.0f,  0.0f,  1.0f,//左上
192
        0.0f, -0.5f,  0.0f,  0.0f,  0.0f,//左下
193
        1.0f, -0.5f,  0.0f,  1.0f,  0.0f,//右下
194

195
        0.0f,  0.5f,  0.0f,  0.0f,  1.0f,//左上
196
        1.0f, -0.5f,  0.0f,  1.0f,  0.0f,//右下
197
        1.0f,  0.5f,  0.0f,  1.0f,  1.0f//右上
198
    };
199

200
    vector<glm::vec3> windowQuad{
201
        glm::vec3(-1.5f, 0.0f, -0.48f),
202
        glm::vec3(1.5f, 0.0f, 0.51f),
203
        glm::vec3(0.0f, 0.0f, 0.7f),
204
        glm::vec3(-0.3f, 0.0f, -2.3f),
205
        glm::vec3(0.5f, 0.0f, -0.6f)
206
    };
207

208
    map<float, glm::vec3> sorted;
209
    //map会自动根据键值即这里的float进行从小到大的排序，那么以distance作为key，从后往前取map中的value，就能得到从远到近的quad的位置
210
    for (int i = 0; i < windowQuad.size(); i++) {
211
        float distance = glm::length(camera.Position - windowQuad[i]);
212
        sorted[distance] = windowQuad[i];
213
    }
214

215
    unsigned int cubeVAO, cubeVBO;
216
    glGenVertexArrays(1, &cubeVAO);
217
    glGenBuffers(1, &cubeVBO);
218

219
    glBindVertexArray(cubeVAO);
220
    glBindBuffer(GL_ARRAY_BUFFER, cubeVBO);
221
    glBufferData(GL_ARRAY_BUFFER, sizeof(cubeVertices), cubeVertices, GL_STATIC_DRAW);
222

223
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
224
    glEnableVertexAttribArray(0);
225

226
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
227
    glEnableVertexAttribArray(1);
228

229
    glBindVertexArray(0);
230

231
    unsigned int planeVAO, planeVBO;
232
    glGenVertexArrays(1, &planeVAO);
233
    glGenBuffers(1, &planeVBO);
234

235
    glBindVertexArray(planeVAO);
236
    glBindBuffer(GL_ARRAY_BUFFER, planeVBO);
237
    glBufferData(GL_ARRAY_BUFFER, sizeof(planeVertices), planeVertices, GL_STATIC_DRAW);
238

239
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
240
    glEnableVertexAttribArray(0);
241

242
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
243
    glEnableVertexAttribArray(1);
244

245
    glBindVertexArray(0);
246

247
    unsigned int transparentVAO, transparentVBO;
248
    glGenVertexArrays(1, &transparentVAO);
249
    glGenBuffers(1, &transparentVBO);
250

251
    glBindVertexArray(transparentVAO);
252
    glBindBuffer(GL_ARRAY_BUFFER, transparentVBO);
253

254
    glBufferData(GL_ARRAY_BUFFER, sizeof(transparentVertices), transparentVertices, GL_STATIC_DRAW);
255

256
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
257
    glEnableVertexAttribArray(0);
258
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
259
    glEnableVertexAttribArray(1);
260

261
    glBindVertexArray(0);
262

263
    unsigned int cubeTexture = loadTexture("resources/textures/marble.jpg");
264
    unsigned int floorTexture = loadTexture("resources/textures/metal.jpg");
265
    unsigned int transparentTexture = loadTexture("resources/textures/blending_transparent_window.png");
266

267
    shader.use();
268
    shader.setInt("texture1", 0);
269
    shader.setInt("texture2", 1);
270
    shader.setInt("texture3", 2);
271

272
    while (!glfwWindowShouldClose(window)) {
273
        float currentFrame = (float)glfwGetTime();
274
        deltaTime = currentFrame - lastFrame;
275
        lastFrame = currentFrame;
276

277
        processInput(window);
278

279
        glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
280
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
281

282
        shader.use();
283
        glm::mat4 model = glm::mat4(1.0f);
284
        glm::mat4 view = camera.GetCameraView();
285
        glm::mat4 project = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);
286
        shader.setMatrix("view", view);
287
        shader.setMatrix("project", project);
288

289
        glBindVertexArray(cubeVAO);
290
        glActiveTexture(GL_TEXTURE0);
291
        glBindTexture(GL_TEXTURE_2D, cubeTexture);
292
        shader.setInt("useTex", 1);
293
        model = glm::translate(model, glm::vec3(-1.0f, 0.0f, -1.0f));
294
        shader.setMatrix("model", model);
295
        glDrawArrays(GL_TRIANGLES, 0, 36);
296

297
        model = glm::mat4(1.0f);
298
        model = glm::translate(model, glm::vec3(2.0f, 0.0f, 0.0f));
299
        shader.setMatrix("model", model);
300
        glDrawArrays(GL_TRIANGLES, 0, 36);
301

302
        glBindVertexArray(0);
303

304
        glBindVertexArray(planeVAO);
305
        glActiveTexture(GL_TEXTURE1);
306
        glBindTexture(GL_TEXTURE_2D, floorTexture);
307
        shader.setInt("useTex", 2);
308
        shader.setMatrix("model", glm::mat4(1.0f));
309
        glDrawArrays(GL_TRIANGLES, 0, 6);
310
        glBindVertexArray(0);
311

312
        glBindVertexArray(transparentVAO);
313
        glActiveTexture(GL_TEXTURE2);
314
        glBindTexture(GL_TEXTURE_2D, transparentTexture);
315
        shader.setInt("useTex", 3);
316
        for (map<float, glm::vec3>::reverse_iterator it = sorted.rbegin(); it != sorted.rend(); it++) {
317
            model = glm::mat4(1.0f);
318
            model = glm::translate(model, it->second);
319
            shader.setMatrix("model", model);
320
            shader.setMatrix("view", view);
321
            shader.setMatrix("project", project);
322
            glDrawArrays(GL_TRIANGLES, 0, 6);
323
        }
324
        glBindVertexArray(0);
325

326
        glfwSwapBuffers(window);
327
        glfwPollEvents();
328
    }
329
    glDeleteVertexArrays(1, &cubeVAO);
330
    glDeleteVertexArrays(1, &planeVAO);
331
    glDeleteBuffers(1, &cubeVBO);
332
    glDeleteBuffers(1, &planeVBO);
333

334
    glfwTerminate();
335
    return 0;
336
}

homework1#

你能够重新定义顶点数据，将每个三角形设置为顺时针顺序，并将顺时针的三角形设置为正向面，仍将场景渲染出来吗？思路：三角形设置为顺时针，且顺时针为正向，要想保留靠近我们的面，剔除远离我们的面。从观察者的视角看背对我们的面是逆时针渲染的，是背向面，那么应该剔除背向面。

1
glCullFace(GL_BACK);
2
glFrontFace(GL_CW);

同时，在这种定义下，之前的透明窗户正面不再可见。因为这些面片顶点的环绕顺序为逆时针，且默认逆时针为正向，现在定义顺时针为正向，则朝向我们的面由于是逆时针定义，属于背向面，被剔除，背对我们的面被保留。

面剔除基本原理#

使用场景#

适用场景#

禁用场景#

性能优势#

相关OpenGL 指令#

开启面剔除#

设置剔除面类型glCullFace#

重定义正向面规则 glFrontFace#

正面规则与剔除逻辑组合效果#

example1: 尝试设置面剔除的相关指令#

homework1#