Skip to content

门泊吴船亦已谋

Vulkan 画三角形 第一章 概要与环境配置

Vulkan 是一个跨平台的图形与计算 API,本系列文章将使用 Vulkan 绘制一个三角形,旨在为上手 Vulkan 提供帮助

使用 CMake 构建项目
使用 VS Code 作为 IDE
使用 GLFW 管理窗体

Result

本系列文章主要是下面这个教程的翻译,但是做了一些修改

https://vulkan-tutorial.com/

安装 Vulkan

前往官网下载安装包直接安装

https://vulkan.lunarg.com/

安装 GLFW

Vulkan 只是一个图形 API,无法管理窗体。为了方便,我们引入跨平台的 GLFW 库

macOS

可以用 brew 安装

$ brew install glfw

Windows

稍微麻烦一点,可以用 MinGW-w64 编译 GLFW 的源码并安装,最后添加环境变量

先去官网下载源码
https://www.glfw.org/

然后以管理员身份运行 PowerShell,cd 到 GLFW 源码项目文件夹下,输入以下命令

PS mkdir build
PS cd build
PS cmake -G "MinGW Makefiles" ..
PS mingw32-make install

这样 GLFW 默认会被安装在 C:/Program Files (x86)/GLFW 文件夹中,如果想装在别的地方可以修改 CMAKE_INSTALL_PREFIX 环境变量,当然也可以直接下载预编译的二进制文件,但是可能它不会提供配置 GLFW 所需的 CMake 模块

最后需要添加一个 glfw3_DIR 环境变量,指向存放配置 GLFW 的 CMake 模块的路径,值是 C:\Program Files (x86)\GLFW\lib\cmake\glfw3,如果你使用了不同的安装路径,请做相应修改,这样后续 find_package 才能找到 glfw3 的头文件和依赖库

安装 CMake

考虑到跨平台,我们用 CMake 配合 VS Code 会很方便

mac 下同样可以用 brew 安装

$ brew install cmake

Windows 下使用官网安装包安装就行了

安装 VS Code 插件

  • C/C++
  • CMake
  • CMake Tools

创建 CMake 项目

直接新建一个文件夹,用 VS Code 打开它

在其中创建 CMakeList.txt 文件,内容如下

cmake_minimum_required(VERSION 3.0.0)
project(VulkanTest VERSION 0.1.0)

set(CMAKE_CXX_STANDARD 17)

add_executable(VulkanTest main.cpp)

find_package(glfw3 3.3 REQUIRED)
target_link_libraries(VulkanTest glfw)

find_package(Vulkan REQUIRED)
target_include_directories(VulkanTest PRIVATE ${Vulkan_INCLUDE_DIRS})
target_link_libraries(VulkanTest ${Vulkan_LIBRARIES})

简单说就是这个项目只有 main.cpp 一个文件,然后寻找 Vulkan 和 glfw3 这两个库,并链接到我们的项目中

用 GLFW 创建窗体

接下来我们创建 main.cpp 文件

#include <GLFW/glfw3.h>

const uint32_t WIDTH = 800;
const uint32_t HEIGHT = 600;

class VulkanHelloWorld {
   public:
    void Run() {
        initWindow();
        initVulkan();
        mainLoop();
        cleanup();
    }

   private:
    void initWindow() {
        glfwInit();
        glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
        glfwWindowHint(GLFW_RESIZABLE, GLFW_FALSE);
        window = glfwCreateWindow(WIDTH, HEIGHT, "VulkanHelloWorld", nullptr, nullptr);
    }
    void initVulkan() {}
    void mainLoop() {
        while (!glfwWindowShouldClose(window)) {
            glfwPollEvents();
        }
    }
    void cleanup() {
        glfwDestroyWindow(window);
        glfwTerminate();
    }

   private:
    GLFWwindow *window;
};

int main() {
    VulkanHelloWorld helloWorld;
    helloWorld.Run();
    return 0;
}

这段代码主要是用 GLFW 处理窗体创建、主循环、窗体销毁等事情
因为 GLFW 不是本系列的主要内容,因此只是简单解释一下

glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
GLFW 原本设计就是要为 OpenGL 创建上下文,而这里我们只用它管理窗体,因此使用这行代码防止他为 OpenGL 创建上下文

glfwWindowHint(GLFW_RESIZABLE, GLFW_FALSE);
处理可变大小窗体很麻烦,因此我们直接禁用它

在 VS Code 中键入 cmd + shift + p 呼出命令面板,在其中输入 CMake: Debug 选项并回车调试项目,就能看到它创建了一个空窗体

Result

在接下来的文章中我们会不断填充这段代码,最终在屏幕中渲染出一个三角形