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

François Beaufort
François Beaufort
GitHub

Ngày xuất bản: 20/7/2023, Ngày cập nhật gần đây nhất: 17/6/2025

Đố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. Đây là một 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ã.

Ảnh chụp màn hình hình tam giác màu đỏ do WebGPU cung cấp trong cửa sổ trình duyệt và cửa sổ máy tính trên macOS.
Cùng một hình tam giác do WebGPU cung cấp trong cửa sổ trình duyệt và cửa sổ máy tính.

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 emdawnwebgpu (Emscripten Dawn WebGPU). Ứng dụng này 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ộ!

Ảnh chụp màn hình một cửa sổ macOS trống.
Một cửa sổ trống.

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 Init().

#include <webgpu/webgpu_cpp.h>
…

wgpu::Instance instance;
…

void Init() {
  wgpu::InstanceDescriptor instanceDesc{
      .capabilities = {.timedWaitAnyEnable = true}};
  instance = wgpu::CreateInstance(&instanceDesc);
}

int main() {
  Init();
  Start();
}

Khai báo hai biến wgpu::Adapter và wgpu::Device ở đầu tệp main.cpp. Cập nhật hàm Init() để gọi instance.RequestAdapter() và chỉ định lệnh gọi lại kết quả của hàm này cho adapter, sau đó gọi adapter.RequestDevice() và chỉ định lệnh gọi lại kết quả của hàm này cho device.

#include <iostream>

#include <dawn/webgpu_cpp_print.h>
…

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


void Init() {
  …

  wgpu::Future f1 = instance.RequestAdapter(
      nullptr, wgpu::CallbackMode::WaitAnyOnly,
      [](wgpu::RequestAdapterStatus status, wgpu::Adapter a,
         wgpu::StringView message) {
        if (status != wgpu::RequestAdapterStatus::Success) {
          std::cout << "RequestAdapter: " << message << "\n";
          exit(0);
        }
        adapter = std::move(a);
      });
  instance.WaitAny(f1, UINT64_MAX);

  wgpu::DeviceDescriptor desc{};
  desc.SetUncapturedErrorCallback([](const wgpu::Device&,
                                     wgpu::ErrorType errorType,
                                     wgpu::StringView message) {
    std::cout << "Error: " << errorType << " - message: " << message << "\n";
  });

  wgpu::Future f2 = adapter.RequestDevice(
      &desc, wgpu::CallbackMode::WaitAnyOnly,
      [](wgpu::RequestDeviceStatus status, wgpu::Device d,
         wgpu::StringView message) {
        if (status != wgpu::RequestDeviceStatus::Success) {
          std::cout << "RequestDevice: " << message << "\n";
          exit(0);
        }
        device = std::move(d);
      });
  instance.WaitAny(f2, UINT64_MAX);
}

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,
                                    .presentMode = wgpu::PresentMode::Fifo};
  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::ShaderSourceWGSL wgsl{{.code = shaderCode}};

  wgpu::ShaderModuleDescriptor shaderModuleDescriptor{.nextInChain = &wgsl};
  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é! Bạn xứng đáng được nghỉ ngơi.

Ảnh chụp màn hình hình tam giác màu đỏ trong cửa sổ macOS.
Hình tam giác màu đỏ trong cửa sổ trên máy 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 emdawnwebgpu (Emscripten Dawn WebGPU), có các liên kết triển khai webgpu.h trên API JavaScript. Công cụ này sử dụng Emscripten, một công cụ biên dịch các chương trình C/C++ sang WebAssembly.

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".
  • Thư viện đường liên kết mục tiêu emdawnwebgpu_cpp cho phép hỗ trợ WebGPU trong Emscripten. Nếu không có tệp này, tệp main.cpp sẽ không thể truy cập vào tệp webgpu/webgpu_cpp.h.
  • Tuỳ chọn đường liên kết ứng dụng ASYNCIFY=1 cho phép mã C++ đồng bộ tương tác với JavaScript không đồng bộ.
  • Tuỳ chọn đường liên kết ứng dụng USE_GLFW=3 yêu cầu Emscripten sử dụng phương thức triển khai JavaScript tích hợp của API GLFW 3.
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")

set(DAWN_FETCH_DEPENDENCIES ON)
add_subdirectory("dawn" EXCLUDE_FROM_ALL)

if(EMSCRIPTEN)
  set_target_properties(app PROPERTIES SUFFIX ".html")
  target_link_libraries(app PRIVATE emdawnwebgpu_cpp webgpu_glfw)
  target_link_options(app PRIVATE "-sASYNCIFY=1" "-sUSE_GLFW=3")
else()
  target_link_libraries(app PRIVATE dawn::webgpu_dawn glfw webgpu_glfw)
endif()

Cập nhật mã

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 <iostream>

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

void Start() {
  …
#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
Ảnh chụp màn hình hình tam giác màu đỏ trong cửa sổ trình duyệt.
Hình tam giác màu đỏ trong cửa sổ trình duyệt.

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ọ.

Lời 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.