vscode配置OpenGL开发环境【详细】

0. 前言

本配置过程是参考b站的一位up主文档大嫖客的视频，将其总结为文本文档，以便记忆。

up主视频地址为：https://www.bilibili.com/video/BV1BX4y1g7R6?spm_id_from=333.999.0.0

配置环境的主要步骤可以主要分为：

• 安装vscode
• 配置编译环境
• 配置opengl环境

其中安装vscode网上教程较多，本文不再赘述。

在vscode中，为了方便开发，需要安装插件C/C++、C/C++ Project Generator。

本文配置环境是在windows10系统。

1. 配置编译环境

1.1 配置编译器环境

windows 需安装 MinGW中的gcc、g++以及gdb编译调试器。MinGW压缩包的下载链接：https://pan.baidu.com/s/1vEJ40u0e-4etli2sb3y3Kg 提取码：k0rz。（up主文档大嫖客提供）

也可以到官网下载MinGW，但需要主要注意的是不要下载 MinGW-w64因为后面可能会出现问题 MinGW，即 Minimalist GNU For Windows。

将下载完成的压缩包解压到自己指定的目录。

将MinGW文件下的bin文件添加到系统环境变量中，本文的路径为C:\MinGW\bin。

添加系统环境变量的结果如下图所示。

1.2 验证编译器环境

打开vscode，按键Ctrl+Shift+P，输入Create C++ project创建一个C++文件工程（需安装好C/C++ Project Generator插件）。创建的结果如下图所示。

在创建C++文件工程时，已经提供了Makefile文件。打开终端，输入make run命令，开始编译运行（或者按F5快捷键）。若编译器配置成功，其结果如下图所示。

2. 配置OpenGL环境

2.1 glfw配置

glfw下载地址为：https://www.glfw.org/download.html，需要下载的资源如下图，因为我们安装的编译器为32位。

压缩包的名称为glfw-3.3.6.bin.WIN32.zip，将下载的压缩包解压到自己指定的路径（任意位置）。

将解压包中的glfw-3.3.6.bin.WIN32\glfw-3.3.6.bin.WIN32\include\下的GLFW文件，复制到vscode创建的C++工程下的include文件夹下。

将解压包中的glfw-3.3.6.bin.WIN32\glfw-3.3.6.bin.WIN32\lib-mingw路径下的libglfw3.a与libglfw3dll.a两个文件，复制到vscode创建的C++工程下的lib文件夹下。

将解压包中的glfw-3.3.6.bin.WIN32\glfw-3.3.6.bin.WIN32\lib-mingw路径下的glfw3.dll文件，复制到vscode创建的C++工程下的output文件夹下。

2.2 glad配置

glad生成静态库的地址为：https://glad.dav1d.de/，配置结果如下图所示（严格选择），然后点击GENERATE。

生成结果如下图所示，并下载压缩包（任意位置存放）。

将下载的压缩包，进行解压。

在cmd终端中输入命令，生成静态库。打开cmd，进入压缩包目录。

执行下面两条命令。

gcc ./src/glad.c -c -I ./include/ // 生成 .o文件
ar -rc libglad.a glad.o           // 生成我们所需要的 .a文件

此时在glad文件路径下生成glad.o与libglad.a文件。

将glad\include路径下的两个文件夹，复制到vscode创建的C++工程下的include文件夹下。

将glad路径下生成的libglad.a文件，复制到vscode创建的C++工程下的lib件夹下。

3. OpenGL测试

使用OpenGL创建一个窗口，来验证环境是否配置成功。

3.1 修改Makefile

首先修改C++工程下的Makefile文件，添加前面配置的库文件。

# define lib directory
LIB		:= lib
LIBRARIES	:= -lglad -lglfw3dll    # add

$(MAIN): $(OBJECTS) 
	$(CXX) $(CXXFLAGS) $(INCLUDES) -o $(OUTPUTMAIN) $(OBJECTS) $(LFLAGS) $(LIBS) $(LIBRARIES) # add $(LIBRARIES)

完整Makefile文件为。

#
# 'make'        build executable file 'main'
# 'make clean'  removes all .o and executable files
#

# define the Cpp compiler to use
CXX = g++

# define any compile-time flags
CXXFLAGS	:= -std=c++17 -Wall -Wextra -g

# define library paths in addition to /usr/lib
#   if I wanted to include libraries not in /usr/lib I'd specify
#   their path using -Lpath, something like:
LFLAGS =

# define output directory
OUTPUT	:= output

# define source directory
SRC		:= src

# define include directory
INCLUDE	:= include

# define lib directory
LIB		:= lib
LIBRARIES	:= -lglad -lglfw3dll

ifeq ($(OS),Windows_NT)
MAIN	:= main.exe
SOURCEDIRS	:= $(SRC)
INCLUDEDIRS	:= $(INCLUDE)
LIBDIRS		:= $(LIB)
FIXPATH = $(subst /,\,$1)
RM			:= del /q /f
MD	:= mkdir
else
MAIN	:= main
SOURCEDIRS	:= $(shell find $(SRC) -type d)
INCLUDEDIRS	:= $(shell find $(INCLUDE) -type d)
LIBDIRS		:= $(shell find $(LIB) -type d)
FIXPATH = $1
RM = rm -f
MD	:= mkdir -p
endif

# define any directories containing header files other than /usr/include
INCLUDES	:= $(patsubst %,-I%, $(INCLUDEDIRS:%/=%))

# define the C libs
LIBS		:= $(patsubst %,-L%, $(LIBDIRS:%/=%))


# define the C source files
SOURCES		:= $(wildcard $(patsubst %,%/*.cpp, $(SOURCEDIRS)))

# define the C object files 
OBJECTS		:= $(SOURCES:.cpp=.o)

#
# The following part of the makefile is generic; it can be used to 
# build any executable just by changing the definitions above and by
# deleting dependencies appended to the file from 'make depend'
#

OUTPUTMAIN	:= $(call FIXPATH,$(OUTPUT)/$(MAIN))

all: $(OUTPUT) $(MAIN)
	@echo Executing 'all' complete!

$(OUTPUT):
	$(MD) $(OUTPUT)

$(MAIN): $(OBJECTS) 
	$(CXX) $(CXXFLAGS) $(INCLUDES) -o $(OUTPUTMAIN) $(OBJECTS) $(LFLAGS) $(LIBS) $(LIBRARIES)

# this is a suffix replacement rule for building .o's from .c's
# it uses automatic variables $<: the name of the prerequisite of
# the rule(a .c file) and $@: the name of the target of the rule (a .o file) 
# (see the gnu make manual section about automatic variables)
.cpp.o:
	$(CXX) $(CXXFLAGS) $(INCLUDES) -c $<  -o $@

.PHONY: clean
clean:
	$(RM) $(OUTPUTMAIN)
	$(RM) $(call FIXPATH,$(OBJECTS))
	@echo Cleanup complete!

run: all
	./$(OUTPUTMAIN)
	@echo Executing 'run: all' complete!

3.2 添加源文件

在main.c文件中，添加如下代码。

#include <glad/glad.h>
#include <GLFW/glfw3.h>

#include <iostream>

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

int main()
{
    // glfw: initialize and configure
    // ------------------------------
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

    // glfw window creation
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // glad: load all OpenGL function pointers
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }    

    // render loop
    // -----------
    while (!glfwWindowShouldClose(window))
    {
        // input
        // -----
        processInput(window);

        // render
        // ------
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);

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

    // glfw: terminate, clearing all previously allocated GLFW resources.
    // ------------------------------------------------------------------
    glfwTerminate();
    return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{
    if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // make sure the viewport matches the new window dimensions; note that width and 
    // height will be significantly larger than specified on retina displays.
    glViewport(0, 0, width, height);
}

3.3 测试及结果

在vscode中打开终端，并执行make run 命令。

输出结果为。

4. 参考资料

学习OpenGL的一个开源的网址：https://learnopengl-cn.github.io/

文档视频带读网址：https://www.bilibili.com/video/BV11Z4y1c7so?spm_id_from=333.999.0.0

配置参考网址：https://github.com/yocover/start-learning-opengl