Setup OpenGL with VS Code

Summary

The website provides a step-by-step guide for setting up OpenGL with Visual Studio Code (VSCode), including the installation and configuration of necessary libraries like GLFW and GLAD, and the use of MinGW as a C++ compiler.

Abstract

The article is a tutorial aimed at game developers looking to learn OpenGL using VSCode as their preferred Integrated Development Environment (IDE). It begins by acknowledging the comprehensive resources available on Learn OpenGL for setting up the environment with Visual Studio, but emphasizes the need for a guide specific to VSCode due to its popularity. The author describes the process of configuring VSCode with MinGW for compiling C++ code, and the steps to integrate OpenGL through the use of GLFW for window creation and event handling, and GLAD for OpenGL function pointers. The guide includes detailed instructions on downloading and setting up these libraries, organizing the workspace, and writing the initial OpenGL program. It concludes with instructions for building and running the program to display a blank window, signifying a successful setup, and provides a link to a repository with the complete source code for reference.

Opinions

The author expresses a personal preference for VSCode over other IDEs like Visual Studio.
They find the Learn OpenGL tutorials to be an excellent starting point for learning OpenGL.
The author values organization within the project structure, suggesting the creation of a src folder and the use of tasks.json for project management.
There is an acknowledgment that setting up OpenGL with VSCode can be challenging, as it required significant effort and research to figure out the process.
The author is enthusiastic about OpenGL development, as indicated by the use of emojis and exclamation marks in the text.
They recommend using C++17 standards for the project, as seen in the tasks.json configuration.
The author encourages readers to clone a provided repository to expedite the setup process if they prefer to skip the manual configuration steps.

Setup OpenGL with VS Code

Being a game dev I always wanted to learn some basics of OpenGL, so going by the recommendation of my colleague I went straight to Learn OpenGL and its a really great place to start with. So, I started with the introductions and then setting up the environment to run OpenGl programs, and there i got stuck at a point. Well I am a big fan of VSCode, and the Learn OpenGL site only helps you in setting up your environment with Visual Studio. So, I started looking around, to find ways to run the hello world program in VSCode. It took me quite some time, but I did figure it out at last. And, tada

The Setup

To run OpenGL with VSCode we would need couple of things to setup, but if you want to skip through the whole setup, you can just head over to the end of this article and get the repo, clone it and get started. Else, just hear me out, how did I manage to pull it through.

GLFW: Now if you have read the getting started section of LearnOpenGL, then you know we also need GLFW, download the pre-compiled binaries from here.

GLAD: Similarly, download GLAD from this link. If you are downloading GLAD for first time, make sure you have set language to c/c++ and specification to OpenGL. In the API section set gl version 3.3 or above, profile to core and leave extensions empty. Tick the Generate a loader option and click on Generate.

Visual Studio Code and MinGW: Yes, of course we would need Visual Studio Code installed in our system. We would also need a c++ compiler, in this case we will use GCC. Follow the prerequisites section of this page step by step to setup the compiler and the c/c++ extension. Also, you should learn how to create the tasks.json file for the c++ project. This would come handy at later stage.

Organizing Workspace

Now, we have everything we need, so, we need to create a cpp workspace in VSCode, if you are doing this for first time follow the “Hello World” section of this page. Make sure you also know how to create a tasks.json file for cpp project, if not then you can check this link. Now we would add all the files we downloaded in previous steps to our workspace. At this point your cpp workspace should look like this.

Workspace preview

Now we will follow the Hello Window steps from LearnOpenGL and create our first script main.cpp, add it to the src folder (I like things organised 😊).

Hello World

The final step, in your tasks.json update your “args” field with the following code

"args": [
    "-g",
    "-std=c++17",
    "-I./include",
    "-L./lib",
    "src/\\*.cpp",
    "src/glad.c",
    "-lglfw3dll",
    "-o",
    "${workspaceFolder}/myprogram.exe"
]

Now, goto VSCode menu, select Run/Run Without Debugging and voila you should see a blank window popup appear just like the image below

Congratulations!! You are now all setup to dive in OpenGL world with VSCode. You can also find the whole source code at this repo