The Project | About Us | Contribute | Donations | License

HOME

In this section, we will guide you through creating your first OpenGL program. This will involve setting up a window, initializing OpenGL, and rendering a simple shape. By the end of this section, you will have a basic understanding of how to start an OpenGL project and render graphics.

Step-by-Step Guide

Setting Up the Development Environment

Before we start coding, ensure you have the necessary tools installed:

OpenGL: The graphics library.
GLFW: A library for creating windows and handling input.
GLEW: A library for managing OpenGL extensions.
A C++ Compiler: Such as GCC or MSVC.

Creating a Window

First, let's create a window using GLFW. This will be the canvas where we render our graphics.

Code Example

#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <iostream>

int main() {
    // Initialize GLFW
    if (!glfwInit()) {
        std::cerr << "Failed to initialize GLFW" << std::endl;
        return -1;
    }

    // Create a windowed mode window and its OpenGL context
    GLFWwindow* window = glfwCreateWindow(800, 600, "Hello OpenGL", NULL, NULL);
    if (!window) {
        std::cerr << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }

    // Make the window's context current
    glfwMakeContextCurrent(window);

    // Initialize GLEW
    if (glewInit() != GLEW_OK) {
        std::cerr << "Failed to initialize GLEW" << std::endl;
        return -1;
    }

    // Main loop
    while (!glfwWindowShouldClose(window)) {
        // Render here

        // Swap front and back buffers
        glfwSwapBuffers(window);

        // Poll for and process events
        glfwPollEvents();
    }

    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}

Explanation

glfwInit(): Initializes the GLFW library.
glfwCreateWindow(): Creates a window with a specified width, height, and title.
glfwMakeContextCurrent(): Makes the OpenGL context current for the created window.
glewInit(): Initializes the GLEW library.
glfwWindowShouldClose(): Checks if the window should close.
glfwSwapBuffers(): Swaps the front and back buffers, displaying the rendered image.
glfwPollEvents(): Polls for events like keyboard and mouse input.

Rendering a Simple Shape

Now, let's render a simple triangle.

Code Example

#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <iostream>

// Vertex Shader source code
const char* vertexShaderSource = R"(
#version 330 core
layout (location = 0) in vec3 aPos;
void main() {
    gl_Position = vec4(aPos, 1.0);
}
)";

// Fragment Shader source code
const char* fragmentShaderSource = R"(
#version 330 core
out vec4 FragColor;
void main() {
    FragColor = vec4(1.0, 0.5, 0.2, 1.0);
}
)";

int main() {
    // Initialize GLFW
    if (!glfwInit()) {
        std::cerr << "Failed to initialize GLFW" << std::endl;
        return -1;
    }

    // Create a windowed mode window and its OpenGL context
    GLFWwindow* window = glfwCreateWindow(800, 600, "Hello OpenGL", NULL, NULL);
    if (!window) {
        std::cerr << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }

    // Make the window's context current
    glfwMakeContextCurrent(window);

    // Initialize GLEW
    if (glewInit() != GLEW_OK) {
        std::cerr << "Failed to initialize GLEW" << std::endl;
        return -1;
    }

    // Build and compile the shader program
    // Vertex Shader
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);

    // Check for shader compile errors
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if (!success) {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cerr << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    // Fragment Shader
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);

    // Check for shader compile errors
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success) {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cerr << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    // Link shaders
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);

    // Check for linking errors
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cerr << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }

    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    // Set up vertex data and buffers and configure vertex attributes
    float vertices[] = {
        -0.5f, -0.5f, 0.0f,
         0.5f, -0.5f, 0.0f,
         0.0f,  0.5f, 0.0f
    };

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

    // Bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
    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);

    // Note that this is allowed, the call to glVertexAttribPointer registered VBO as the vertex attribute's bound vertex buffer object so afterwards we can safely unbind
    glBindBuffer(GL_ARRAY_BUFFER, 0);

    // You can unbind the VAO afterwards so other VAO calls won't accidentally modify this VAO, but this rarely happens. Modifying other VAOs requires a call to glBindVertexArray anyways so we generally don't unbind VAOs (nor VBOs) when it's not directly necessary.
    glBindVertexArray(0);

    // Render loop
    while (!glfwWindowShouldClose(window)) {
        // Input
        if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
            glfwSetWindowShouldClose(window, true);

        // Render
        glClear(GL_COLOR_BUFFER_BIT);

        // Draw the triangle
        glUseProgram(shaderProgram);
        glBindVertexArray(VAO);
        glDrawArrays(GL_TRIANGLES, 0, 3);

        // Swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // De-allocate all resources once they've outlived their purpose
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);

    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}

Explanation

Vertex Shader: Processes each vertex. Here, it simply passes the vertex position to the next stage.
Fragment Shader: Processes each fragment (pixel). Here, it sets the color of the fragment.
Shader Compilation and Linking: Compiles the vertex and fragment shaders and links them into a shader program.
Vertex Data: Defines the vertices of a triangle.
Vertex Buffer Object (VBO): Stores the vertex data in GPU memory.
Vertex Array Object (VAO): Stores the vertex attribute configuration.
glDrawArrays(): Draws the triangle using the vertex data.

Running the Program

Compile and run the program. You should see a window displaying a triangle.

Common Mistakes and Tips

Initialization Errors: Ensure GLFW and GLEW are correctly initialized.
Shader Compilation Errors: Check the shader source code and error logs if shaders fail to compile.
Buffer Binding: Ensure buffers are correctly bound before drawing.

Conclusion

Congratulations! You've created your first OpenGL program. You now have a basic understanding of setting up an OpenGL context, writing shaders, and rendering a simple shape. In the next section, we will delve deeper into the OpenGL pipeline and explore more complex rendering techniques.

Creating Your First OpenGL Program

Step-by-Step Guide

Setting Up the Development Environment

Creating a Window

Code Example

Explanation

Rendering a Simple Shape

Code Example

Explanation

Running the Program

Common Mistakes and Tips

Conclusion

OpenGL Programming Course

Module 1: Introduction to OpenGL

Module 2: Basic Rendering

Module 3: Intermediate Rendering Techniques

Module 4: Advanced Rendering Techniques

Module 5: Performance Optimization

Module 6: Special Effects and Techniques

Module 7: Advanced Topics

Module 8: Real-World Applications