How to setup Visual Studio Code with OpenGL?

Question

I am trying to setup visual studio code for opengl development. I already have it working for plain c/c++ development I am now trying to add in opengl development to the mix. I know how to setup opengl on other platforms (i.e. Eclipse, Xcode, Visual Studio, CodeBlocks). The root of my problem is more how to setup dependencies in visual studio code. My best guess would be running a task in the task.json file. Right now it is just filled with the code to compile the project every time I run the program.

Answer 1

OpenGl & C/C++ & VSCode

Came across the same problem. Note that there are two issues here:

1. How to setup the launch.json and tasks.json files?
   • Start with the official VSCode documentation on C++ programming with VSCode
   • The tasks documentation explains how to setup and run tasks in greater detail.
2. What commands to use to compile the code?
   • This is where it gets tricky. Compilation depends on the OS and environment. The part below mostly focuses on that:

MAC

The main issue for me was that I am on MAC and many explanations were only targeted at Linux and Windows (which don't have the framework parameter) or they explain how to set it all up in the Xcode GUI.

TL;DR

As this Github Gist and this StackOverflow post both suggest:

1. Fix your include file names
   • Not everything is in <gl/*> (e.g. Mac has <OpenGL/*> for part of it, and <GLUT/*> for glut files)
2. In order to run, add framework to your build arguments (to include external libraries), e.g...
   • gcc -o ex1 ex1.c -framework GLUT -framework OpenGL -Wno-deprecated
   • cc <your_file.c> -framework GLUT -framework OpenGL
3. Don't forget: Add those frameworks to your C/C++ extension settings and/or tasks.json as well

(and again: it would be very similar when using clang or clang++)

Integrate that insight with the official documentation on C/C++ tasks, and it's all done! :)

More Details

The above is just a shorter version of my overall journey, detailed below:

1. I also started with the official VSCode instructions on C++ programming with VSCode (which you also mentioned).
2. Then I followed their link at the bottom: Using Clang in Visual Studio Code (the GCC setup is very similar).
3. Followed this Github Gist on the differences between Mac and non-Mac OpenGl compilation. There are two major differences:
   1. The APPLE paths are slightly different; not everything is in <gl/*> (e.g. <OpenGL/*> for core files and <GLUT/*> for glut files).
   2. You have to add OpenGL and other libraries via the framework flag.
4. Once you took care of that:
   1. Add those frameworks to your C/C++ extension settings as well
   2. (When just getting started, you might want to cut down on the deprecation warnings; as OpenGL went through major changes in the past decade, using -Wno-deprecated)
5. If you have not done so before, you probably want to brew install glew and brew install glfw and/or whatever other external libraries you use.

What about Windows & Linux?

The VSCode setup is mostly the same. Make sure that, once you have setup the C/C++ extension correctly, to look at the documentation for your environment, which are at the bottom of the official "C/C++ for Visual Studio Code" documentation page.

However, the bigger problem is usually how to get it to compile. I don't have recent examples or experiences of compiling on non-MAC systems; but here are some relevant references:

1. Compile OpenGl on Linux
2. Compile OpenGl with GCC on Windows

Cross-platform-ish?

Apparently cross-platform development still might cause some headaches, according to this (as of yet) open github issue #1083.

I also found an example by someone taking a jab at OpenGl cross-platform compilation using VSCode here. You might want to check out their entire .vscode/ folder (if not their entire project setup).

Run+Debug at the click of a button

These days, it's very easy to add any amount of Launch (Run and/or Debug) configurations to the built-in Launch + Debugger UI by following these instructions.

[Deprecated] VSCode "Code Runner" Extension

Before the debugger UI was a thing (or at least before I noticed it), you could install the Code Runner extension, you will get a neat little "Run Code" button at the top right (or Command+Alt+N).

This works fine if you just want to use it to run a single executable. If you want to run individual files individually, it gets a bit harder. I have not tried it, but as they suggest, for that, you could use a special file naming pattern, i.e. a glob pattern (e.g. *.gl.cpp) and use the code-runner.executorMapByGlob setting to have different compile+run parameters based on file names.

Answer 2

Ubuntu Solution here:

Had the same Issue, what I had to do was just to:

Install

sudo apt-get install libglfw3-dev libgl1-mesa-dev libglu1-mesa-dev freeglut3-dev libglew-dev

_{As mentioned Here}

Then

• (Open vscode) > File > Open Folder > "Select your c++'s project-folder"
• Open your main .cpp file that you want to compile / (start with)
• Then to produce tasks.json press "F5" > Select "C++ (GDB/LLDB)" > select g++ compiler > stop compiling process
• Edit tasks.json by adding the extra arguments (as mentioned by @crazypicklerick) like:

{
    "tasks": [
        {
            "type": "cppbuild",
            "label": "C/C++: g++ build active file",
            "command": "/usr/bin/g++",
            "args": [
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}",
                "-lGLU",
                "-lglfw",
                "-lGLEW",
                "-lGL",
                "-lglut"   
            ],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "detail": "Task generated by Debugger."
        }
    ],
    "version": "2.0.0"
}

• Save the file and go back to your main .cpp file

✔️ Press "F5" again and it should Run now.

Answer 3

in your build task add theses arguments if using gcc/gdb -lGLU -lGL -lglut

Answer 4

OpenGl_c++_GLFW_GLAD_VScode_Linux_mint(Ubuntu/Debian) SETUP

requirements:

Part 1:system configuration.

**1)**linux-mint comes pre_installed with c/c++ compiler.

**2)**download vscode for linux_mint with c++ extentions and support (includes syntax highlighting).

TIP:power user files are installed in /usr/ and local user files are stored in /usr/local/, any can be used here.

**3)**open terminal and type the below command that installs the GLFW library along with opengl mesa libraries .

sudo apt-get install libglfw3-dev libgl1-mesa-dev libglu1-mesa-dev freeglut3-dev libglew-dev

check if glfw is installed and where on your mint/ubuntu using this :

pkg-config --cflags glfw3

**4)**download glad from website https://glad.dav1d.de/ now in the website choose :

• Language = C/C++
• Specification = OpenGL
• API > gl = 3.3
• Profile = core

then hit generate to download the glad zip. now unzip the glad.zip file to anywhere on your system and open it to find Include and scr files .

open scr file then copy glad.c file to your project folder containing the cpp file.

open the include file then copy the glad and khr files to usr/include like this ---> /include/glad/glad.h and /include/KHR/KHR.h to /usr/include which can be done with the below command:

cp -r PathToYourUnzippedGladFolder/include/glad  /usr/include

cp -r PathToYourUnzippedGladFolder/include/KHR  /usr/include

or

cp -r PathToYourUnzippedGladFolder/include/glad  /usr/local/include



cp -r PathToYourUnzippedGladFolder/include/KHR  /usr/local/include

by default linux may/MAY NOT allow permission to read and write these glad include files so to grant permision and to AVOID PERMISSION DENIED ERRORS dring compilation use this command.(go to the /use/include or /usr/local/include folder where you have pasted the glad and KHR include files)

          chmod 755 myfolder //example  `chmod 755 glad` , `chmod 755 KHR`

Part 2: VScode configuration.

**5)**make a folder for opengl project/coding and open vscode in that folder then create a cpp file name it anything. lets paste a simple triangle opengl code from learnopengl which has, glfw and glad used .

**6)**just open Tasks.json file for some editing thats all.just copy this in it.

           "tasks": [
    {
        "type": "cppbuild",
        "label": "C/C++: g++ build active file",
        "command": "/usr/bin/g++",
        "args": [
            "-g",
            "${file}",
            "-o",
            "${fileDirname}/${fileBasenameNoExtension}",
            
            "-lGLU",         
            "-lglfw",
            "-lGLEW",
            "-lGL",
            "-lglut" ,
            "${workspaceFolder}/glad.c"                   
        

        ],
        "options": {
            "cwd": "${workspaceFolder}"
        },
        "problemMatcher": [
            "$gcc"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "detail": "Task generated by Debugger."
    }
],
"version": "2.0.0"

}

7. save every file and run your cpp file using f5 and it should work and make an executable of trianle .

remember to add "${workspaceFolder}/glad.c" in tasks.json file in args as shown above or just copy paste the above tasks.json code .

2 screenshots : my tasks.json screenshot my glfw glad location in usr include