返回

OpenGL 新手入门指南:渲染移动正方形

IOS

踏入 OpenGL 世界

OpenGL(开放图形库)是用于渲染 2D 和 3D 图形的高性能应用程序编程接口(API)。它广泛应用于各种领域,从游戏开发到科学可视化。

渲染基本图形:正方形

为了使用 OpenGL 渲染图形,我们需要顶点着色器和片段着色器。顶点着色器定义了对象的几何形状,而片段着色器则确定其颜色。

对于一个简单的正方形,顶点着色器可以如下定义:

#version 330 core

layout (location = 0) in vec3 aPos;

void main() {
    gl_Position = vec4(aPos, 1.0);
}

片段着色器可以如下定义:

#version 330 core

out vec4 FragColor;

void main() {
    FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

使用 GLUT 工具包

GLUT(OpenGL 实用工具库)是一个库,为我们提供了创建和管理 OpenGL 窗口的便利功能。它处理窗口创建、键盘和鼠标输入以及其他平台相关任务。

代码实战

让我们将这些概念付诸实践。以下是用 C++ 编写的完整代码,用于渲染一个可移动正方形:

#include <GL/glut.h>

// 顶点着色器
const char* vertexShaderSource = "#version 330 core\nlayout (location = 0) in vec3 aPos;\nvoid main() {gl_Position = vec4(aPos, 1.0);}";

// 片段着色器
const char* fragmentShaderSource = "#version 330 core\nout vec4 FragColor;\nvoid main() {FragColor = vec4(1.0, 0.0, 0.0, 1.0);}";

GLuint vertexShader, fragmentShader, shaderProgram;

float vertices[] = {
    -0.5f, -0.5f, 0.0f,
    0.5f, -0.5f, 0.0f,
    0.5f, 0.5f, 0.0f,
    -0.5f, 0.5f, 0.0f
};

float x = 0.0f, y = 0.0f;

void init() {
    // 编译并链接着色器
    vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);

    fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);

    shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);

    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);
}

void display() {
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    glUseProgram(shaderProgram);

    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    // 平移正方形
    int location = glGetUniformLocation(shaderProgram, "x");
    glUniform1f(location, x);
    location = glGetUniformLocation(shaderProgram, "y");
    glUniform1f(location, y);

    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

    glutSwapBuffers();
}

void keyboard(unsigned char key, int x, int y) {
    if (key == 'w') {
        y += 0.05f;
    } else if (key == 's') {
        y -= 0.05f;
    } else if (key == 'a') {
        x -= 0.05f;
    } else if (key == 'd') {
        x += 0.05f;
    }
}

int main(int argc, char** argv) {
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
    glutInitWindowSize(800, 600);
    glutCreateWindow("OpenGL 正方形");
    glutDisplayFunc(display);
    glutKeyboardFunc(keyboard);

    init();

    glutMainLoop();

    return 0;
}

探索 OpenGL 的奥秘

本教程只是一个起点。OpenGL 是一个功能强大的库,可以通过丰富的资源和社区支持进一步探索。以下是一些推荐的学习资源:

结语

恭喜你踏上了学习 OpenGL 的旅程!通过探索正方形渲染的示例,你已经掌握了 OpenGL 的基本原理。随着不断深入,你将解锁更多强大的功能,让你能够创建令人惊叹的图形应用程序。享受探索 OpenGL 世界的乐趣吧!