OpenGL Visual Studio Code template

This is a template project for OpenGL with debug config on Visual Studio Code

This template supports:

• OpenGL 4.6 or below
• OpenGL ES 3.2 or below
• OpenGL SC 2.0 or below

The advantages of this template

1. A cross-platform template

​ With this template, you can continue your OpenGL project on any computer without the attention to the Operating System being used. It can run smoothly on Windows, Linux, and macOS with only one time to configure it.

2. Easy to configure your project

​ In Visual Studio, you need to do a lot of steps to configure an OpenGL project (You can see the tutorial here). To configure your build, you need to do a lot of steps on the Visual Studio GUI. But with this template, you just configure only one file (tasks.json).

3. Faster than Visual Studio

​ Due to downloading a lot of redundant extensions and libraries for C/C++, the Visual Studio takes up a lot of hard drive space.

​ This template just requires you have a C/C++ compiler to build and run.

4. Add external libs easier by one step

​ You just add the link to download the external library (git or url) to external.json then run the Python script getExternal.py

Tutorial

A. Prerequisite

I. C/C++ extension on Visual Code

Firstly, please ensure that your Visual Studio Code had been installed C/C++ extension. Following the instruction below if you haven't installed it.

1. Open VS Code and choose Extension on the side menu.

   

2. Search the name "C/C++" and download the first one.

   

   Note: Visual Studio Code provides a lot of extensions to make your coding more comfortable. See them here.

II. C++ Compiler

Next, you must download a C++ compiler to build and debug on Visual Studio Code.

1. Windows

There are a lot of tools and software that provide the C/C++ compiler for Windows like MinGW, Cygwin, ... But in this tutorial, I will use the MinGW x64 (download here):

• If you use the installer, you need to config the settings like the image below

• If you download the zip file, please choose the x86_64-posix-seh.zip

After that you need to create an environment variable for MinGW by following the steps below:

• Step 1: Find the env in the window search bar.

• Step 2: Choose the Environment Variables button.

• Step 3: Click the New button like the image.

• Step 4: Fill the information like the image then click OK and the Environment window.

• Step 5: Please restart your computer to ensure that Windows can update the Environment variables.

2. Linux

   The GCC has already been installed in Linux. Open the terminal window and check its version by entering the following command:

   gcc -v

   If GCC isn't installed, run the following command from the terminal window to Update the Linux package lists. An out-of-date Linux distribution can sometimes interfere with attempts to install new packages.

   sudo apt-get update

   Next install the GNU compiler tools and the GDB debugger with this command:

   sudo apt-get install build-essential gdb

3. macOS

   Clang may already be installed on your Mac. To verify that it is, open a macOS terminal window and enter the following command:

   clang --version

   If Clang isn't installed, enter the following command to install the command line developer tools:

   xcode-select --install

III. Add your Program name and your shader path

1. Program name

   You need to enter your ProgramName into 2 files (look the image below):

   • launch.json

     

   • tasks.json

     

IV. Add the necessary libraries

Firstly, you need to ensure that your computer was already installed Python 3 and pip.

Then open file external.json to add the libraries you want to import into the project with the format:

• "repo_name" : "{your library name}"
• "repo_url" : "{your library download link}"
• "clone_location" : "{your location you want place it in}"

Then run the getExternal.py to clone all the libraries you need.

Note: The getExternal.py just can download the libraries which have repository on git. To download specific file libraries (dll, other cpp files) will be update later.

B. Build and Debug

1. Build

   There are two ways to build:

   • Press F5 to build and run the program.
   • Press Ctrl+Shift+B to build only.

2. Debug

You just do the same with Visual Studio.

I. Create your breakpoint in two ways :

1. Click on the red circle on the left of the row number.

2. Choose the row you want to place the breakpoint and press F9

II. Build and run the program by press F5

III. Let's debug

• F6 : Pause
• F10 : Step Over
• F11 : Step Into
• Shift + F11 : Step Out
• Ctrl + Shift + F5 : Restart
• Shift + F5 : Stop

Visual Studio Code not only provides us an area to visualize the variables , stack, breakpoint but also they have a Debug Console for us.

Thank you for reading this document

Contact me

Tan Phat Huynh

threonahuynh.contact@gmail.com