Tạo ứng dụng bằng WebGPU

François Beaufort

Đối với nhà phát triển web, WebGPU là một API đồ hoạ web cung cấp quyền truy cập nhanh và hợp nhất vào GPU. WebGPU hiển thị các chức năng phần cứng hiện đại và cho phép các hoạt động kết xuất và điện toán trên GPU, tương tự như Direct3D 12, Metal và Vulkan.

Mặc dù đúng, nhưng câu chuyện đó chưa hoàn chỉnh. WebGPU là kết quả của một nỗ lực cộng tác, bao gồm các công ty lớn như Apple, Google, Intel, Mozilla và Microsoft. Trong số đó, một số người nhận ra rằng WebGPU có thể không chỉ là một API JavaScript, mà còn là một API đồ hoạ đa nền tảng dành cho các nhà phát triển trên nhiều hệ sinh thái, ngoài web.

Để thực hiện trường hợp sử dụng chính, chúng tôi đã ra mắt một API JavaScript trong Chrome 113. Tuy nhiên, một dự án quan trọng khác cũng được phát triển cùng với dự án này: API C webgpu.h. Tệp tiêu đề C này liệt kê tất cả các quy trình và cấu trúc dữ liệu có sẵn của WebGPU. Lớp này đóng vai trò là lớp trừu tượng phần cứng không phân biệt nền tảng, cho phép bạn xây dựng các ứng dụng dành riêng cho nền tảng bằng cách cung cấp giao diện nhất quán trên nhiều nền tảng.

Trong tài liệu này, bạn sẽ tìm hiểu cách viết một ứng dụng C++ nhỏ bằng WebGPU chạy trên cả web và các nền tảng cụ thể. Cảnh báo tiết lộ nội dung: bạn sẽ thấy cùng một tam giác màu đỏ xuất hiện trong cửa sổ trình duyệt và cửa sổ máy tính với những điều chỉnh tối thiểu đối với cơ sở mã.

Cách thức hoạt động

Để xem ứng dụng hoàn chỉnh, hãy xem kho lưu trữ ứng dụng đa nền tảng WebGPU.

Ứng dụng này là một ví dụ tối giản về C++ cho thấy cách sử dụng WebGPU để tạo ứng dụng web và máy tính từ một cơ sở mã duy nhất. Trong phần nội dung, lớp này sử dụng webgpu.h của WebGPU làm lớp trừu tượng phần cứng không phân biệt nền tảng thông qua trình bao bọc C++ có tên là webgpu_cpp.h.

Trên web, ứng dụng được xây dựng dựa trên Emscripten, có các liên kết triển khai webgpu.h trên API JavaScript. Trên các nền tảng cụ thể như macOS hoặc Windows, bạn có thể tạo dự án này dựa trên Dawn, cách triển khai WebGPU trên nhiều nền tảng của Chromium. Xin lưu ý rằng wgpu-native, một cách triển khai Rust của webgpu.h, cũng tồn tại nhưng không được sử dụng trong tài liệu này.

Bắt đầu

Để bắt đầu, bạn cần có trình biên dịch C++ và CMake để xử lý các bản dựng trên nhiều nền tảng theo cách chuẩn. Bên trong một thư mục chuyên dụng, hãy tạo một tệp nguồn main.cpp và một tệp bản dựng CMakeLists.txt.

Tạm thời, tệp main.cpp sẽ chứa một hàm main() trống.

int main() {}

Tệp CMakeLists.txt chứa thông tin cơ bản về dự án. Dòng cuối cùng chỉ định tên tệp thực thi là "app" và mã nguồn của tệp này là main.cpp.

cmake_minimum_required(VERSION 3.13) # CMake version check
project(app)                         # Create project "app"
set(CMAKE_CXX_STANDARD 20)           # Enable C++20 standard

add_executable(app "main.cpp")

Chạy cmake -B build để tạo các tệp bản dựng trong thư mục con "build/" và cmake --build build để thực sự tạo ứng dụng và tạo tệp thực thi.

# Build the app with CMake.
$ cmake -B build && cmake --build build

# Run the app.
$ ./build/app

Ứng dụng chạy nhưng chưa có kết quả vì bạn cần một cách để vẽ các đối tượng trên màn hình.

Nhận Dawn

Để vẽ tam giác, bạn có thể tận dụng Dawn, cách triển khai WebGPU đa nền tảng của Chromium. Thư viện này bao gồm thư viện C++ GLFW để vẽ lên màn hình. Một cách để tải Dawn xuống là thêm Dawn dưới dạng thành phần con git vào kho lưu trữ của bạn. Các lệnh sau đây sẽ tìm nạp tệp này trong thư mục con "dawn/".

$ git init
$ git submodule add https://dawn.googlesource.com/dawn

Sau đó, hãy thêm vào tệp CMakeLists.txt như sau:

• Tuỳ chọn DAWN_FETCH_DEPENDENCIES của CMake sẽ tìm nạp tất cả phần phụ thuộc Dawn.
• Thư mục con dawn/ được đưa vào mục tiêu.
• Ứng dụng của bạn sẽ phụ thuộc vào các mục tiêu dawn::webgpu_dawn, glfw và webgpu_glfw để bạn có thể sử dụng các mục tiêu đó trong tệp main.cpp sau này.

…
set(DAWN_FETCH_DEPENDENCIES ON)
add_subdirectory("dawn" EXCLUDE_FROM_ALL)
target_link_libraries(app PRIVATE dawn::webgpu_dawn glfw webgpu_glfw)

Mở cửa sổ

Giờ đây, khi Dawn đã có sẵn, hãy sử dụng GLFW để vẽ các đối tượng trên màn hình. Thư viện này có trong webgpu_glfw để thuận tiện, cho phép bạn viết mã không phụ thuộc vào nền tảng để quản lý cửa sổ.

Để mở một cửa sổ có tên "WebGPU window" (Cửa sổ WebGPU) với độ phân giải 512x512, hãy cập nhật tệp main.cpp như bên dưới. Xin lưu ý rằng glfwWindowHint() được dùng ở đây để yêu cầu không khởi chạy API đồ hoạ cụ thể nào.

#include <GLFW/glfw3.h>

const uint32_t kWidth = 512;
const uint32_t kHeight = 512;

void Start() {
  if (!glfwInit()) {
    return;
  }

  glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
  GLFWwindow* window =
      glfwCreateWindow(kWidth, kHeight, "WebGPU window", nullptr, nullptr);

  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    // TODO: Render a triangle using WebGPU.
  }
}

int main() {
  Start();
}

Việc tạo lại ứng dụng và chạy ứng dụng như trước đây sẽ dẫn đến một cửa sổ trống. Bạn đang tiến bộ!

Lấy thiết bị GPU

Trong JavaScript, navigator.gpu là điểm truy cập để truy cập vào GPU. Trong C++, bạn cần tạo biến wgpu::Instance theo cách thủ công để dùng cho cùng một mục đích. Để thuận tiện, hãy khai báo instance ở đầu tệp main.cpp và gọi wgpu::CreateInstance() bên trong main().

…
#include <webgpu/webgpu_cpp.h>

wgpu::Instance instance;
…

int main() {
  instance = wgpu::CreateInstance();
  Start();
}

Việc truy cập vào GPU là không đồng bộ do hình dạng của API JavaScript. Trong C++, hãy tạo hai hàm trợ giúp có tên là GetAdapter() và GetDevice(). Các hàm này lần lượt trả về một hàm gọi lại với wgpu::Adapter và wgpu::Device.

#include <iostream>
…

void GetAdapter(void (*callback)(wgpu::Adapter)) {
  instance.RequestAdapter(
      nullptr,
      [](WGPURequestAdapterStatus status, WGPUAdapter cAdapter,
         const char* message, void* userdata) {
        if (status != WGPURequestAdapterStatus_Success) {
          exit(0);
        }
        wgpu::Adapter adapter = wgpu::Adapter::Acquire(cAdapter);
        reinterpret_cast<void (*)(wgpu::Adapter)>(userdata)(adapter);
  }, reinterpret_cast<void*>(callback));
}

void GetDevice(void (*callback)(wgpu::Device)) {
  adapter.RequestDevice(
      nullptr,
      [](WGPURequestDeviceStatus status, WGPUDevice cDevice,
          const char* message, void* userdata) {
        wgpu::Device device = wgpu::Device::Acquire(cDevice);
        device.SetUncapturedErrorCallback(
            [](WGPUErrorType type, const char* message, void* userdata) {
              std::cout << "Error: " << type << " - message: " << message;
            },
            nullptr);
        reinterpret_cast<void (*)(wgpu::Device)>(userdata)(device);
  }, reinterpret_cast<void*>(callback));
}

Để dễ dàng truy cập hơn, hãy khai báo hai biến wgpu::Adapter và wgpu::Device ở đầu tệp main.cpp. Cập nhật hàm main() để gọi GetAdapter() và chỉ định lệnh gọi lại kết quả của hàm này cho adapter, sau đó gọi GetDevice() và chỉ định lệnh gọi lại kết quả của hàm này cho device trước khi gọi Start().

wgpu::Adapter adapter;
wgpu::Device device;
…

int main() {
  instance = wgpu::CreateInstance();
  GetAdapter([](wgpu::Adapter a) {
    adapter = a;
    GetDevice([](wgpu::Device d) {
      device = d;
      Start();
    });
  });
}

Vẽ tam giác

Chuỗi hoán đổi không được hiển thị trong API JavaScript vì trình duyệt sẽ xử lý chuỗi này. Trong C++, bạn cần tạo lớp này theo cách thủ công. Một lần nữa, để thuận tiện, hãy khai báo biến wgpu::Surface ở đầu tệp main.cpp. Ngay sau khi tạo cửa sổ GLFW trong Start(), hãy gọi hàm wgpu::glfw::CreateSurfaceForWindow() tiện dụng để tạo wgpu::Surface (tương tự như canvas HTML) và định cấu hình bằng cách gọi hàm trợ giúp ConfigureSurface() mới trong InitGraphics(). Bạn cũng cần gọi surface.Present() để hiển thị hoạ tiết tiếp theo trong vòng lặp while. Việc này không có hiệu ứng rõ ràng vì chưa có quá trình kết xuất nào diễn ra.

#include <webgpu/webgpu_glfw.h>
…

wgpu::Surface surface;
wgpu::TextureFormat format;

void ConfigureSurface() {
  wgpu::SurfaceCapabilities capabilities;
  surface.GetCapabilities(adapter, &capabilities);
  format = capabilities.formats[0];

  wgpu::SurfaceConfiguration config{
      .device = device,
      .format = format,
      .width = kWidth,
      .height = kHeight};
  surface.Configure(&config);
}

void InitGraphics() {
  ConfigureSurface();
}

void Render() {
  // TODO: Render a triangle using WebGPU.
}

void Start() {
  …
  surface = wgpu::glfw::CreateSurfaceForWindow(instance, window);

  InitGraphics();

  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    Render();
    surface.Present();
    instance.ProcessEvents();
  }
}

Bây giờ là thời điểm thích hợp để tạo quy trình kết xuất bằng mã bên dưới. Để truy cập dễ dàng hơn, hãy khai báo biến wgpu::RenderPipeline ở đầu tệp main.cpp và gọi hàm trợ giúp CreateRenderPipeline() trong InitGraphics().

wgpu::RenderPipeline pipeline;
…

const char shaderCode[] = R"(
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
        const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
        return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
        return vec4f(1, 0, 0, 1);
    }
)";

void CreateRenderPipeline() {
  wgpu::ShaderModuleWGSLDescriptor wgslDesc{};
  wgslDesc.code = shaderCode;

  wgpu::ShaderModuleDescriptor shaderModuleDescriptor{
      .nextInChain = &wgslDesc};
  wgpu::ShaderModule shaderModule =
      device.CreateShaderModule(&shaderModuleDescriptor);

  wgpu::ColorTargetState colorTargetState{.format = format};

  wgpu::FragmentState fragmentState{.module = shaderModule,
                                    .targetCount = 1,
                                    .targets = &colorTargetState};

  wgpu::RenderPipelineDescriptor descriptor{
      .vertex = {.module = shaderModule},
      .fragment = &fragmentState};
  pipeline = device.CreateRenderPipeline(&descriptor);
}

void InitGraphics() {
  …
  CreateRenderPipeline();
}

Cuối cùng, hãy gửi các lệnh kết xuất đến GPU trong hàm Render() được gọi cho mỗi khung hình.

void Render() {
  wgpu::SurfaceTexture surfaceTexture;
  surface.GetCurrentTexture(&surfaceTexture);

  wgpu::RenderPassColorAttachment attachment{
      .view = surfaceTexture.texture.CreateView(),
      .loadOp = wgpu::LoadOp::Clear,
      .storeOp = wgpu::StoreOp::Store};

  wgpu::RenderPassDescriptor renderpass{.colorAttachmentCount = 1,
                                        .colorAttachments = &attachment};

  wgpu::CommandEncoder encoder = device.CreateCommandEncoder();
  wgpu::RenderPassEncoder pass = encoder.BeginRenderPass(&renderpass);
  pass.SetPipeline(pipeline);
  pass.Draw(3);
  pass.End();
  wgpu::CommandBuffer commands = encoder.Finish();
  device.GetQueue().Submit(1, &commands);
}

Việc tạo lại ứng dụng bằng CMake và chạy ứng dụng hiện sẽ dẫn đến hình tam giác màu đỏ được chờ đợi từ lâu trong một cửa sổ! Hãy nghỉ ngơi một chút nhé!

Biên dịch sang WebAssembly

Bây giờ, hãy xem những thay đổi tối thiểu cần thiết để điều chỉnh cơ sở mã hiện có nhằm vẽ hình tam giác màu đỏ này trong cửa sổ trình duyệt. Xin nhắc lại, ứng dụng này được xây dựng dựa trên Emscripten, một công cụ biên dịch các chương trình C/C++ sang WebAssembly. Công cụ này có các liên kết triển khai webgpu.h trên API JavaScript.

Cập nhật chế độ cài đặt CMake

Sau khi cài đặt Emscripten, hãy cập nhật tệp bản dựng CMakeLists.txt như sau. Mã được đánh dấu là điều duy nhất bạn cần thay đổi.

• set_target_properties được dùng để tự động thêm đuôi tệp "html" vào tệp đích. Nói cách khác, bạn sẽ tạo một tệp "app.html".
• Bạn cần có tuỳ chọn đường liên kết ứng dụng USE_WEBGPU để bật tính năng hỗ trợ WebGPU trong Emscripten. Nếu không có tệp này, tệp main.cpp của bạn sẽ không thể truy cập vào tệp webgpu/webgpu_cpp.h.
• Bạn cũng cần có tuỳ chọn đường liên kết ứng dụng USE_GLFW để có thể sử dụng lại mã GLFW.

cmake_minimum_required(VERSION 3.13) # CMake version check
project(app)                         # Create project "app"
set(CMAKE_CXX_STANDARD 20)           # Enable C++20 standard

add_executable(app "main.cpp")

if(EMSCRIPTEN)
  set_target_properties(app PROPERTIES SUFFIX ".html")
  target_link_options(app PRIVATE "-sUSE_WEBGPU=1" "-sUSE_GLFW=3")
else()
  set(DAWN_FETCH_DEPENDENCIES ON)
  add_subdirectory("dawn" EXCLUDE_FROM_ALL)
  target_link_libraries(app PRIVATE dawn::webgpu_dawn glfw webgpu_glfw)
endif()

Cập nhật mã

Trong Emscripten, việc tạo wgpu::surface yêu cầu một phần tử canvas HTML. Để thực hiện việc này, hãy gọi instance.CreateSurface() và chỉ định bộ chọn #canvas để khớp với phần tử canvas HTML thích hợp trong trang HTML do Emscripten tạo.

Thay vì sử dụng vòng lặp while, hãy gọi emscripten_set_main_loop(Render) để đảm bảo hàm Render() được gọi ở tốc độ mượt mà phù hợp, khớp với trình duyệt và màn hình.

#include <GLFW/glfw3.h>
#include <webgpu/webgpu_cpp.h>
#include <iostream>
#if defined(__EMSCRIPTEN__)
#include <emscripten/emscripten.h>
#else
#include <webgpu/webgpu_glfw.h>
#endif

void Start() {
  if (!glfwInit()) {
    return;
  }

  glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
  GLFWwindow* window =
      glfwCreateWindow(kWidth, kHeight, "WebGPU window", nullptr, nullptr);

#if defined(__EMSCRIPTEN__)
  wgpu::SurfaceDescriptorFromCanvasHTMLSelector canvasDesc{};
  canvasDesc.selector = "#canvas";

  wgpu::SurfaceDescriptor surfaceDesc{.nextInChain = &canvasDesc};
  surface = instance.CreateSurface(&surfaceDesc);
#else
  surface = wgpu::glfw::CreateSurfaceForWindow(instance, window);
#endif

  InitGraphics();

#if defined(__EMSCRIPTEN__)
  emscripten_set_main_loop(Render, 0, false);
#else
  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    Render();
    surface.Present();
    instance.ProcessEvents();
  }
#endif
}

Tạo ứng dụng bằng Emscripten

Thay đổi duy nhất cần thiết để tạo ứng dụng bằng Emscripten là thêm các lệnh cmake vào đầu tập lệnh shell emcmake thần kỳ. Lần này, hãy tạo ứng dụng trong thư mục con build-web và khởi động máy chủ HTTP. Cuối cùng, hãy mở trình duyệt và truy cập vào build-web/app.html.

# Build the app with Emscripten.
$ emcmake cmake -B build-web && cmake --build build-web

# Start a HTTP server.
$ npx http-server

Bước tiếp theo

Dưới đây là những gì bạn có thể mong đợi trong tương lai:

• Cải tiến độ ổn định của API webgpu.h và webgpu_cpp.h.
• Hỗ trợ ban đầu cho Dawn trên Android và iOS.

Trong thời gian chờ đợi, vui lòng gửi các vấn đề về WebGPU cho Emscripten và các vấn đề về Dawn cùng với các đề xuất và câu hỏi.

Tài nguyên

Bạn có thể khám phá mã nguồn của ứng dụng này.

Nếu bạn muốn tìm hiểu thêm về cách tạo ứng dụng 3D gốc bằng C++ từ đầu bằng WebGPU, hãy xem Tài liệu Tìm hiểu WebGPU cho C++ và Ví dụ về WebGPU gốc của Dawn.

Nếu quan tâm đến Rust, bạn cũng có thể khám phá thư viện đồ hoạ wgpu dựa trên WebGPU. Hãy xem bản minh hoạ hello-triangle của họ.

Thư cảm ơn

Bài viết này đã được Corentin Wallez, Kai Ninomiya và Rachel Andrew xem xét.

Ảnh chụp của Marc-Olivier Jodoin trên Unsplash.