vscode配置OpenGL开发环境

起因也是VS太笨重，我可怜的轻薄本很吃力，遂想使用VSC来实现OpenGL开发。

本文是参考一位大佬yocover而编写的，记录目的：防忘、方便下次配置、方便他人配置。

大佬B站和大佬GitHub在这里。

如何编译C/C++文件？

windows下 需安装 MinGW, install gcc、g++、gdb 和 mingw32-make 并 进入到 MinGW\bin 文件夹下 把 mingw32-make.exe 修改成 make.exe

注意：MinGW 不要下载 MinGW-w64因为后面可能会出现问题 MinGW，即 Minimalist GNU For Windows。它是一些头文件和端口库的集合，该集合允许人们在没有第三方动态链接库的情况下使用 GCC 产生 Win32 程序。

这里需要注意gcc版本需要9.2，如果是6.0可能会出一些问题，当然你可以使用我这个下载链接：https://wild-civil.lanzoum.com/iHRAp1f6oyfg 密码:27as。不想自己动手下载MinGW的, 可以往下翻看步骤④

①安装MinGW

全程Next即可(当然想修改安装路径自行修改即可)

select_1

② 选择相应的包进行下载

select_2

all_package

apply

③ 搞一个make

在MinGW/bin文件夹下，进行如下操作，方便直接使用make命令

rename

④ 添加环境变量！

copy_address

path

↓LOOK AT HERE ↓

如果你觉得自己下载MinGW太麻烦，我这里也有→现成的←😋只需要进行步骤④↑可(解压然后复制bin目录进行环境配)。

当然我们可以在cmd中测试一下：

cmd

配置VsCode

①下载VsCode

如果你还没有VS Code？！那可太糟糕了，快去下载一个吧，网上教程很多喔。

②下载插件

VsCode需要安装插件C/C++ 和 C/C++ Project Generator如下图所示。

VsCode_plug_in

③创建C++工程

安装完毕之后，新建一个文件夹，进入文件夹，并在空白处右键，通过VsCode打开

open_by_vsc

进入VsCode后按Ctrl+Shift+P，输入Create C++，并单击如下图框住的选项，选择将项目构建在当前文件夹，即可实现C++项目的构建

create_CPP_Project

Project_str

④make run

紧接着按Ctrl+Shift+`，在终端中输入make run即可像下图一样！(注意注意，各种快捷键操作的前提是键盘是英文输入模式)

Good

Nice！非常漂亮，注意！接下来，重头戏开始

GLFW

glfw 下载 Windows pre-compiled binaries

选择Windows pre-compiled binaries，因为我们使用的 MinGW 所以选择 32-bit Windows binaries 对于 Ubuntu，通过 sudo apt install libglfw3-dev libglfw3 安装 glfw

image-20231118204335493

服务器在国外可能不稳定，下载不下来莫慌，点这里，我提供的是3.3.8版本。

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

image-20231118210154636

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

image-20231118210038468

将glfw-3.3.8.bin.WIN32\glfw-3.3.8.bin.WIN32\lib-mingw路径下的glfw3.dll文件，复制到VsCode创建的C++工程下的output文件夹下。

image-20231118210851005

小功告成

GLAD

image-20231118211724626

Then

image-20231118212016228

老样子，下载不下来或懒得自己下载的点这里，下载下来后自行解压并进入解压后的文件夹内

image-20231118212618165

分别输入如下两行命令

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

image-20231118212937893

将生成的 libglad.a 复制到 lib 文件下

image-20231118213215007

将glad\include路径下的两个文件夹，include文件夹下。

image-20231118213440309

中功告成

示例

打开Makefile文件

image-20231118215446823

懒得找的也可以直接参看我的Makefile文件↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
#
# '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)

# define the dependency output files
DEPS		:= $(OBJECTS:.o=.d)

#
# 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)

# include all .d files
-include $(DEPS)

# this is a suffix replacement rule for building .o's and .d'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)
# -MMD generates dependency output files same name as the .o file
# (see the gnu make manual section about automatic variables)
.cpp.o:
	$(CXX) $(CXXFLAGS) $(INCLUDES) -c -MMD $<  -o $@

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

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

紧接着我们将下面的代码复制到main.cpp中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#include <glad/glad.h>
#include <GLFW/glfw3.h>

#include <iostream>

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

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

int main()
{
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

	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);

	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "Failed to initialize GLAD" << std::endl;
		return -1;
	}

	while (!glfwWindowShouldClose(window))
	{
		processInput(window);
		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	glfwTerminate();
	return 0;
}

void processInput(GLFWwindow *window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
		glfwSetWindowShouldClose(window, true);
}

void framebuffer_size_callback(GLFWwindow *window, int width, int height)
{
	glViewport(0, 0, width, height);
}

敲Ctrl+Shift+`，在终端中输入make run即可弹出窗口啦！按ESC即可退出运行。

image-20231118215958332

加油！坚持！再进行最后的操作你就胜利了！

找不到头文件？

对了这里还有小技巧，如果头文件红了，可以在.vscode/c_cpp_properties.json中进行添加路径，如果没有该json文件，可以敲Ctrl+Shift+`然后输入下图的内容即可调处c_cpp_properties.json

image-20231118222309630

image-20231118222746437

想要多个main.cpp共存？

如果你向我一样正在学习OpenGL，但又不想一个劲的生成副本main.cpp然后注释main.cpp等，你可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
#
# 'make run dir=file_name'        build executable file 'main'
# 'make clean dir=file_name'  	  removes selected .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/$(dir) #// 传递 var 变量定义执行文件目录
CLEAN_SRC		:= src/$(dir)/*.o #// 删除所有.o文件

# define include directory
INCLUDE	:= include

# define lib directory
LIB		:= lib

ifeq ($(OS),Windows_NT)
LIBRARIES	:= -lglad -lglfw3dll
MAIN	:= main.exe
SOURCEDIRS	:= $(SRC)
INCLUDEDIRS	:= $(INCLUDE)
LIBDIRS		:= $(LIB)
FIXPATH = $(subst /,\,$1) #这里细节错误
RM			:= del /q /f
MD	:= mkdir
else
LIBRARIES	:= -lglad -lglfw -ldl -lpthread
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)

# define the dependency output files
DEPS		:= $(OBJECTS:.o=.d)

#
# 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)

# include all .d files
-include $(DEPS)

# 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) 
# -MMD generates dependency output files same name as the .o file
# (see the gnu make manual section about automatic variables)
.cpp.o:
	$(CXX) $(CXXFLAGS) $(INCLUDES) -c -MMD $<  -o $@

.PHONY: clean
clean:
	$(RM) $(OUTPUTMAIN)
	$(RM) $(call FIXPATH,$(OBJECTS))
	$(RM) $(call FIXPATH,$(DEPS))
	@echo Cleanup complete!
	
# 此处./src/$(dir) 传递main函数 argv 的参数
run: all
	./$(OUTPUTMAIN) src/$(dir)/
	@echo Executing 'run: all' complete!

然后你在命令行执行make run dir=file_name就可以编译你选定的那个文件夹下的main.cpp (注：这里file_name为01)

image-20231119224335919

在命令行执行make clean dir=file_name就可以清除main.exe、main.d和main.o

image-20231119223926130

视频教程

各位看官请看Up原视频

进阶

如果还要导入其他的库可以按照下面的步骤：

  • glm 复制到 include 目录下

  • imgui 复制到 include 目下,Makefile 中添加以下命令

    1
    2
    3
    4
    # define the C source files
    SOURCES		:= $(wildcard $(patsubst %,%/*.cpp, $(SOURCEDIRS)))
    SOURCES	+= include/imgui/imgui_impl_glfw.cpp include/imgui/imgui_impl_opengl3.cpp
    SOURCES	+= include/imgui/imgui.cpp include/imgui/imgui_demo.cpp include/imgui/imgui_draw.cpp include/imgui/imgui_widgets.cpp