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 -lglfw3dllifeq ($(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