引言：开启3D编程之旅

欢迎来到令人兴奋的3D编程世界！本教程将带您从OpenGL基础开始，逐步掌握3D渲染的核心技术，最终实现一个包含物理模拟的完整3D场景。我们将探索几何体创建、光照系统、纹理映射、变换操作和碰撞检测等关键主题。

OpenGL 3D开发全景架构图

核心开发流程图（带视觉元素）

几何体创建流程

渲染管线（OpenGL 4.0+）

. 碰撞检测系统

3D编程资源地图

这个完整的流程图和架构图展示了现代OpenGL 3D开发的完整流程，从初始化到高级渲染技术，涵盖了：

几何核心：参数化几何体创建与复杂模型加载
渲染管线：从顶点处理到帧缓冲的完整流程
物理系统：刚体动力学与碰撞检测的集成
材质系统：PBR材质与纹理映射
性能优化：多层次优化策略
场景管理：对象变换与相机控制

每个部分都有对应的视觉表示，帮助理解3D开发的完整生命周期和各个组件之间的关系。

好了，说完上面整个流程，下面我们开始从基础学习开始吧

基础准备：OpenGL环境搭建

依赖库

#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
#include <stb_image.h>
#include <vector>
#include <iostream>

初始化窗口

int main() {// 初始化GLFWif (!glfwInit()) {std::cerr << "Failed to initialize GLFW" << std::endl;return -1;}// 创建窗口GLFWwindow* window = glfwCreateWindow(1200, 800, "3D编程大师之路", nullptr, nullptr);if (!window) {std::cerr << "Failed to create GLFW window" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window);// 初始化GLEWif (glewInit() != GLEW_OK) {std::cerr << "Failed to initialize GLEW" << std::endl;return -1;}// 设置视口glViewport(0, 0, 1200, 800);// 主渲染循环while (!glfwWindowShouldClose(window)) {// 清除颜色缓冲和深度缓冲glClearColor(0.1f, 0.1f, 0.1f, 1.0f);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);// 交换缓冲区和轮询事件glfwSwapBuffers(window);glfwPollEvents();}glfwTerminate();return 0;
}

几何体创建：从基础到复杂

1. 立方体（正六面体）

std::vector<float> createCube(float size = 1.0f) {float half = size / 2.0f;return {// 位置              // 法线            // 纹理坐标// 前面-half, -half,  half,  0.0f, 0.0f, 1.0f,  0.0f, 0.0f,half, -half,  half,  0.0f, 0.0f, 1.0f,  1.0f, 0.0f,half,  half,  half,  0.0f, 0.0f, 1.0f,  1.0f, 1.0f,-half,  half,  half,  0.0f, 0.0f, 1.0f,  0.0f, 1.0f,// 后面-half, -half, -half,  0.0f, 0.0f,-1.0f,  0.0f, 0.0f,// ... 完整实现需要36个顶点};
}

2. 球体（UV球体）

std::vector<float> createSphere(float radius = 1.0f, int sectors = 36, int stacks = 18) {std::vector<float> vertices;const float PI = acos(-1);float sectorStep = 2 * PI / sectors;float stackStep = PI / stacks;for (int i = 0; i <= stacks; ++i) {float stackAngle = PI / 2 - i * stackStep;float xy = radius * cosf(stackAngle);float z = radius * sinf(stackAngle);for (int j = 0; j <= sectors; ++j) {float sectorAngle = j * sectorStep;float x = xy * cosf(sectorAngle);float y = xy * sinf(sectorAngle);// 位置vertices.push_back(x);vertices.push_back(y);vertices.push_back(z);// 法线glm::vec3 normal = glm::normalize(glm::vec3(x, y, z));vertices.push_back(normal.x);vertices.push_back(normal.y);vertices.push_back(normal.z);// 纹理坐标float s = (float)j / sectors;float t = (float)i / stacks;vertices.push_back(s);vertices.push_back(t);}}return vertices;
}

3. 圆柱体

std::vector<float> createCylinder(float radius = 0.5f, float height = 1.0f, int sectors = 36) {std::vector<float> vertices;const float PI = acos(-1);float sectorStep = 2 * PI / sectors;// 侧面for (int i = 0; i <= sectors; ++i) {float angle = i * sectorStep;float x = cosf(angle);float z = sinf(angle);// 底部顶点vertices.push_back(radius * x);vertices.push_back(-height/2);vertices.push_back(radius * z);vertices.push_back(x);vertices.push_back(0.0f);vertices.push_back(z);vertices.push_back((float)i / sectors);vertices.push_back(0.0f);// 顶部顶点vertices.push_back(radius * x);vertices.push_back(height/2);vertices.push_back(radius * z);vertices.push_back(x);vertices.push_back(0.0f);vertices.push_back(z);vertices.push_back((float)i / sectors);vertices.push_back(1.0f);}// 顶部和底部圆盘// ... 实现省略return vertices;
}

4. 胶囊体（圆柱+半球）

std::vector<float> createCapsule(float radius = 0.5f, float height = 1.0f, int sectors = 36) {std::vector<float> vertices;// 创建圆柱体（中间部分）auto cylinder = createCylinder(radius, height, sectors);vertices.insert(vertices.end(), cylinder.begin(), cylinder.end());// 创建顶部半球auto topSphere = createSphere(radius, sectors, sectors/2);// 平移并添加到顶点for (size_t i = 0; i < topSphere.size(); i += 8) {topSphere[i+1] += height/2; // Y坐标上移vertices.push_back(topSphere[i]);vertices.push_back(topSphere[i+1]);vertices.push_back(topSphere[i+2]);vertices.push_back(topSphere[i+3]);vertices.push_back(topSphere[i+4]);vertices.push_back(topSphere[i+5]);vertices.push_back(topSphere[i+6]);vertices.push_back(topSphere[i+7]);}// 创建底部半球// ... 类似顶部半球但下移return vertices;
}

着色器编程：点亮3D世界

顶点着色器

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;out vec3 FragPos;
out vec3 Normal;
out vec2 TexCoords;uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;void main() {FragPos = vec3(model * vec4(aPos, 1.0));Normal = mat3(transpose(inverse(model))) * aNormal;  TexCoords = aTexCoords;gl_Position = projection * view * vec4(FragPos, 1.0);
}

片段着色器（Phong光照模型）

#version 330 core
out vec4 FragColor;in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoords;uniform sampler2D texture_diffuse;
uniform vec3 lightPos;
uniform vec3 viewPos;
uniform vec3 lightColor;void main() {// 环境光float ambientStrength = 0.1;vec3 ambient = ambientStrength * lightColor;// 漫反射vec3 norm = normalize(Normal);vec3 lightDir = normalize(lightPos - FragPos);float diff = max(dot(norm, lightDir), 0.0);vec3 diffuse = diff * lightColor;// 镜面反射float specularStrength = 0.5;vec3 viewDir = normalize(viewPos - FragPos);vec3 reflectDir = reflect(-lightDir, norm);float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);vec3 specular = specularStrength * spec * lightColor;// 最终颜色vec3 result = (ambient + diffuse + specular) * texture(texture_diffuse, TexCoords).rgb;FragColor = vec4(result, 1.0);
}

纹理映射：赋予物体表面细节

unsigned int loadTexture(const char* path) {unsigned int textureID;glGenTextures(1, &textureID);int width, height, nrComponents;unsigned char* data = stbi_load(path, &width, &height, &nrComponents, 0);if (data) {GLenum format;if (nrComponents == 1)format = GL_RED;else if (nrComponents == 3)format = GL_RGB;else if (nrComponents == 4)format = GL_RGBA;glBindTexture(GL_TEXTURE_2D, textureID);glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);glGenerateMipmap(GL_TEXTURE_2D);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);stbi_image_free(data);} else {std::cerr << "Texture failed to load at path: " << path << std::endl;stbi_image_free(data);}return textureID;
}

变换操作：移动、旋转与缩放

class Transform {
public:glm::vec3 position = glm::vec3(0.0f);glm::vec3 rotation = glm::vec3(0.0f); // 欧拉角glm::vec3 scale = glm::vec3(1.0f);glm::mat4 getModelMatrix() const {glm::mat4 model = glm::mat4(1.0f);model = glm::translate(model, position);model = glm::rotate(model, glm::radians(rotation.x), glm::vec3(1.0f, 0.0f, 0.0f));model = glm::rotate(model, glm::radians(rotation.y), glm::vec3(0.0f, 1.0f, 0.0f));model = glm::rotate(model, glm::radians(rotation.z), glm::vec3(0.0f, 0.0f, 1.0f));model = glm::scale(model, scale);return model;}void move(const glm::vec3& direction, float speed) {position += direction * speed;}void rotate(float angle, const glm::vec3& axis) {rotation += axis * angle;}void resize(const glm::vec3& factor) {scale *= factor;}
};

碰撞检测：物理交互基础

轴对齐包围盒(AABB)碰撞检测

struct AABB {glm::vec3 min;glm::vec3 max;AABB(glm::vec3 min, glm::vec3 max) : min(min), max(max) {}bool intersects(const AABB& other) const {return (min.x <= other.max.x && max.x >= other.min.x) &&(min.y <= other.max.y && max.y >= other.min.y) &&(min.z <= other.max.z && max.z >= other.min.z);}void update(const Transform& transform) {// 根据变换更新包围盒glm::vec3 center = transform.position;glm::vec3 halfSize = transform.scale * 0.5f; // 假设原始物体是单位大小的min = center - halfSize;max = center + halfSize;}
};

射线检测（鼠标拾取）

glm::vec3 screenPosToWorldRay(int mouseX, int mouseY, int screenWidth, int screenHeight,const glm::mat4& view, const glm::mat4& projection) 
{// 将鼠标位置转换为标准化设备坐标float x = (2.0f * mouseX) / screenWidth - 1.0f;float y = 1.0f - (2.0f * mouseY) / screenHeight;float z = 1.0f;// 齐次裁剪坐标glm::vec4 rayClip = glm::vec4(x, y, -1.0f, 1.0f);// 转换为观察空间glm::vec4 rayEye = glm::inverse(projection) * rayClip;rayEye = glm::vec4(rayEye.x, rayEye.y, -1.0f, 0.0f);// 转换为世界空间glm::vec3 rayWorld = glm::vec3(glm::inverse(view) * rayEye);rayWorld = glm::normalize(rayWorld);return rayWorld;
}bool rayIntersectsSphere(glm::vec3 rayOrigin, glm::vec3 rayDirection,glm::vec3 sphereCenter,float sphereRadius)
{glm::vec3 oc = rayOrigin - sphereCenter;float a = glm::dot(rayDirection, rayDirection);float b = 2.0f * glm::dot(oc, rayDirection);float c = glm::dot(oc, oc) - sphereRadius * sphereRadius;float discriminant = b * b - 4 * a * c;return discriminant >= 0;
}

完整场景实现：3D物理沙盒

class PhysicsObject {
public:Transform transform;glm::vec3 velocity = glm::vec3(0.0f);glm::vec3 angularVelocity = glm::vec3(0.0f);float mass = 1.0f;void update(float deltaTime) {// 应用重力velocity += glm::vec3(0.0f, -9.8f, 0.0f) * deltaTime;// 更新位置和旋转transform.position += velocity * deltaTime;transform.rotation += angularVelocity * deltaTime;// 简单的边界碰撞if (transform.position.y < -5.0f) {transform.position.y = -5.0f;velocity.y = -velocity.y * 0.8f; // 弹性系数}}
};int main() {// 初始化代码...// 创建着色器程序Shader shader("vertex.glsl", "fragment.glsl");// 创建几何体auto cube = createCube();auto sphere = createSphere();auto cylinder = createCylinder();auto capsule = createCapsule();// 加载纹理unsigned int marbleTex = loadTexture("marble.jpg");unsigned int metalTex = loadTexture("metal.png");// 创建物理对象std::vector<PhysicsObject> objects;// 创建地面PhysicsObject ground;ground.transform.scale = glm::vec3(20.0f, 0.5f, 20.0f);ground.transform.position = glm::vec3(0.0f, -5.0f, 0.0f);objects.push_back(ground);// 主循环while (!glfwWindowShouldClose(window)) {float currentFrame = glfwGetTime();float deltaTime = currentFrame - lastFrame;lastFrame = currentFrame;// 处理输入processInput(window, deltaTime);// 更新物理for (auto& obj : objects) {obj.update(deltaTime);}// 碰撞检测for (size_t i = 0; i < objects.size(); ++i) {for (size_t j = i + 1; j < objects.size(); ++j) {if (checkCollision(objects[i], objects[j])) {resolveCollision(objects[i], objects[j]);}}}// 渲染glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);shader.use();// 设置光照shader.setVec3("lightPos", lightPos);shader.setVec3("viewPos", camera.Position);shader.setVec3("lightColor", 1.0f, 1.0f, 1.0f);// 设置视图/投影矩阵glm::mat4 view = camera.GetViewMatrix();glm::mat4 projection = glm::perspective(glm::radians(camera.Zoom), 1200.0f/800.0f, 0.1f, 100.0f);shader.setMat4("view", view);shader.setMat4("projection", projection);// 渲染对象for (const auto& obj : objects) {glm::mat4 model = obj.transform.getModelMatrix();shader.setMat4("model", model);// 根据对象类型绑定不同纹理和渲染不同几何体if (&obj == &ground) {glBindTexture(GL_TEXTURE_2D, marbleTex);renderMesh(cubeMesh);} else {glBindTexture(GL_TEXTURE_2D, metalTex);renderMesh(sphereMesh); // 或其他几何体}}// 交换缓冲区和轮询事件glfwSwapBuffers(window);glfwPollEvents();}// 清理资源...return 0;
}

性能优化与高级技巧

1. 实例化渲染

// 准备实例化数据
std::vector<glm::mat4> modelMatrices;
for (int i = 0; i < amount; ++i) {glm::mat4 model = glm::mat4(1.0f);// 设置模型矩阵...modelMatrices[i] = model;
}// 创建实例化数组
unsigned int instanceVBO;
glGenBuffers(1, &instanceVBO);
glBindBuffer(GL_ARRAY_BUFFER, instanceVBO);
glBufferData(GL_ARRAY_BUFFER, amount * sizeof(glm::mat4), &modelMatrices[0], GL_STATIC_DRAW);// 设置顶点属性指针
glBindVertexArray(VAO);
// 设置mat4属性需要4个顶点属性
glEnableVertexAttribArray(3); 
glVertexAttribPointer(3, 4, GL_FLOAT, GL_FALSE, sizeof(glm::mat4), (void*)0);
glEnableVertexAttribArray(4); 
glVertexAttribPointer(4, 4, GL_FLOAT, GL_FALSE, sizeof(glm::mat4), (void*)(sizeof(glm::vec4)));
// ... 类似设置属性5和6// 设置实例化除法率
glVertexAttribDivisor(3, 1);
glVertexAttribDivisor(4, 1);
glVertexAttribDivisor(5, 1);
glVertexAttribDivisor(6, 1);// 渲染
glDrawElementsInstanced(GL_TRIANGLES, indexCount, GL_UNSIGNED_INT, 0, amount);

2. 帧缓冲与后期处理

// 创建帧缓冲
unsigned int framebuffer;
glGenFramebuffers(1, &framebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);// 创建纹理附件
unsigned int textureColorbuffer;
glGenTextures(1, &textureColorbuffer);
glBindTexture(GL_TEXTURE_2D, textureColorbuffer);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 1200, 800, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, textureColorbuffer, 0);// 渲染到帧缓冲
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// ... 渲染场景// 回到默认帧缓冲并进行后期处理
glBindFramebuffer(GL_FRAMEBUFFER, 0);
glClear(GL_COLOR_BUFFER_BIT);
postProcessingShader.use();
glBindVertexArray(quadVAO);
glDisable(GL_DEPTH_TEST);
glBindTexture(GL_TEXTURE_2D, textureColorbuffer);
glDrawArrays(GL_TRIANGLES, 0, 6);