一键搭建Windows平台OpenGL编程环境

一键搭建Windows平台OpenGL编程环境

本文介绍一种快捷方便的LearnOpenGL学习环境的搭建和代码组织方法，帮助初学OpenGL的同学快速完成环境搭建。本文以全自动脚本的方式引入LearnOpenGL教程中使用到的第三方库，包括assimp、glad、glfw3、glm、imgui、spdlog、stb。其中，imgui和spdlog是额外添加的第三方库。imgui库可以快速创建带控件的GUI窗口，极大地提高了程序交互的灵活性和学习效率；spdlog可视情况使用，帮助输出格式更友好的日志信息。
　　早些时候，写过一个Windows平台上LearnOpenGL学习环境搭建的教程。在使用了一段时间以后，我发现了其中的若干问题：
　　1.使用到的第三方库编译和引用繁琐，有些以源码形式集成，有些以库文件的方式引入；
　　2.对shader和图片等资源文件的部署方式不够智能，文件修改以后需要手动配置一遍cmake以重新拷贝文件；
　　3.引入的第三方库文件又多又杂，夹杂在项目和仓库中极为不协调。
　　针对上述问题，对LearnOpenGL学习环境的搭建方式进行了改进：
　　a.使用CMake的脚本从服务器上自动下载、解压并配置第三方库的依赖，项目中可以不必存储依赖的第三方库；
　　b.通过Vcpkg集成预编译好的第三方库，包括assimp、glad、glfw3、glm、imgui、spdlog、stb，提升了第三方库的使用体验；
　　c.通过创建自定义的编译项，添加编译依赖关系实现了shader和资源文件的自动更新，使得shader和资源文件的修改应用体验更好。

学习资源

照旧此处推荐一些优秀的OpenGL学习资源：

• LearnOpenGL CN
• LearnOpenGL EN
• OpenGL Wiki
• docs.GL
• www.songha.ca
• OpenGL中的坐标变换
• OpenGL中的法向变换

环境搭建

环境简介

本文介绍的环境在Windows平台上搭建，使用CMake作为构建工具，使用GLFW创建窗口资源，使用GLAD加载OpenGL的API接口。另外，编译器使用MSVC，这意味着你需要安装Visual Studio, 并且需要安装Visual Studio的C++桌面开发工具。必须说明的是，本文使用的第三方库使用Visual Studio 2022的MSVC 19.36.32534编译安装，并使用Vcpkg导出。其中，GLFW不同编译器编译的结果不能兼容，所以如果使用本教程提供的第三方库请安装Visual Studio 2022（社区版和专业版均可）。

• 操作系统：Windows 11专业版 23H2
• 开发工具：Visual Studio Code
• 编译器：MSVC 19.36.32534
• 构建工具：CMake 3.27
• 构建器：Ninja

另外，本文使用VS Code搭建CMake的编译运行环境，具体教程可查看官方文档或者VS Code创建编译CMake工程。**截至本文撰写发布，VS Code官方提供的C/C++插件最新版本存在Bug，会导致无法识别标准库中的头文件，不影响编译但编码会没有提示并且头文件被标红，请前往插件的GitHub仓库Release页面下载19.9版本手动安装并取消自动更新。**本文的项目中CMake的构建器选择Ninja的原因在于，Visual Studio自带的Generator并不能实现增量编译，导致如果Build所有的编译项目，则会把所有编译项目全部重新编译一遍，Ninja则只编译发生改动的部分且构建速度更快。在CMake插件的设置中，将Generator一项设置为Ninja即可。
　　Visual studio2022现已支持CMake工程，可以参考文章末尾视频教程使用。

目录结构

以下为本文环境的目录结构：

.
|-- CMakeLists.txt
|-- README.md
|-- assets
|   |-- fonts
|   |   `-- MiSans-Regular.ttf
|   `-- images
|       `-- box_texture.jpg
|-- cmake
|   |-- add_sub_directory.cmake
|   |-- deploy_libraries.cmake
|   |-- find_target_libraries.cmake
|   `-- target_link_libraries_tp.cmake
|-- libraries_url.ini
|-- source
|   |-- demo
|   |   |-- imgui_demo.cpp
|   |   |-- imgui_draw_box.cpp
|   |   `-- shaders
|   |       |-- draw_box.frag
|   |       `-- draw_box.vert
|   |-- include
|   |   |-- arcball_camera.h
|   |   |-- box.h
|   |   |-- camera.h
|   |   |-- glfw_callback.h
|   |   |-- shader_program.h
|   |   `-- textures_loader.h
|   `-- other
|       `-- ShowDemoWindow.cpp
`-- tools
    `-- m4
        `-- bin
            |-- m4.exe
            `-- regex2.dll

CMakeLists.txt文件：项目中唯一的CMakeList文件，用于组织所有的编译项目：下载并解压第三方库，配置Vcpkg的工具链；设置编译选项；查找需要使用的第三方库；添加头文件路径；定义对资源文件拷贝的编译项；创建章节目录并组织其编译项目。其中，定义了可执行文件的输出目录为bin目录。
　　libraries_rul.ini文件：文件中只有一个第三方库的url，以供CMakeList文件配置过程中读取并下载第三方库压缩包使用。
　　assets目录：存放项目使用到的资源文件，比如imgui中使用的字体文件，项目中使用了小米的开源字体MiSans。根据使用需求可以在其中存放纹理图片、模型文件等。所有可执行文件的编译都会自动添加对资源文件的依赖，以保证资源文件在可执行程序编译前都被自动拷贝到bin目录中。
　　camke目录：存放自己编写的CMake脚本。其中，包括自动创建子目录并创建编译项目的add_sub_directory.cmake，用于下载并解压第三方库的deploy_libraries.cmake，用于查找第三方库的find_target_libraies.cmake，以及一个没有用到的target_link_libraries_tp.cmake（记录了如何在cmake中查找库并连接到库的cmake命令，如果需要单独链接某个第三方库，可以参照该文件中的写法）。
　　source目录：存放所有源代码的目录，主要为include目录和每个章节的目录。source目录中的include目录用于存放一些通用的头文件，比如shaderProgram类、Camera类等。source中其他子目录存放每一个章节的源代码，通过在CMakeLists.txt中调用add_sub_directory脚本函数自动创建一个子目录。每个子目录创建时自动包含一个shaders文件夹用于存放本章节使用到的shader代码文件，章节子目录中可以添加不同的cpp文件。add_sub_directory脚本函数会自动为每个子目录中的shaders文件夹创建一个deply的编译项目用于拷贝shader文件到bin目录中；同时会将章节目录中的每一个cpp编译成一个单独的可执行文件并链接到第三方库。
　　tools目录：包含了m4文本处理工具的可执行程序，本项目中暂时未使用。一个强大的宏处理器，可以帮助简化文本处理、代码生成和自动化任务。使用M4可以对shader代码进行一定的宏展开等操作实现shader代码的复用，有兴趣的同学可以自行搜索学习。
　　**说明：**项目中预先包含了LearnOpenGL第一章节的部分代码作为示例，以说明项目的使用方法。另外，demo目录中还包含了Imgui的示例程序和使用Imgui和OpenGL绘制一个Box的示例程序。在source/include目录中存放了自己学习过程中编写的FPS相机类、环绕相机类、Box类以及一些公共的函数放在头文件中进行代码复用，可删除或者根据Demo中的示例程序使用。

使用方法

克隆仓库

首先，将整个仓库克隆到本地：

# GitHub仓库
git clone https://github.com/JiahaoCodes/LearnOpenGL.git
# Gitee仓库
git clone https://gitee.com/SAquarius/LearnOpenGL.git

配置CMake

参考VS Code中配置CMake项目的教程，选择编译器并配置CMakeLists.txt，如下所示：


　　如果一切正常，那么脚本会自动下载并解压第三方库，输出查找到每个第三方库。此时，可以看到目录中新增了libraries、build和bin目录。

编译所有项

CMake配置完成后，可以通过状态栏上的Build按钮生成所有编译项。然后，使用运行按钮执行可执行程序：

新增章节

如果需要新增一个章节，只需在CMakeList.txt文件的末尾调用add_sub_directory(source/your_chapter)即可。重新配置CMakeList.txt，脚本会自动创建该目录并默认在其中创建一个shaders文件夹，如下所示：

add_sub_directory(source/chapter_2)

额外说明

如果你在项目中新增了资源文件、shader文件或者源代码文件，那么你都需要重新配置一下CMakeList.txt，否则不会对其进行编译。

视频教程

视频教程戳这里。