Đố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ẽ nhận được cùng một hình tam giác màu đỏ xuất hiện trong cửa sổ trình duyệt và cửa sổ màn hình với những điều chỉnh tối thiểu đối với cơ sở mã của bạn.
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 nhiều 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 để bàn 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. 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ó một trình biên dịch C++ và CMake để xử lý các bản dựng đa 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 trên nhiều 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_DEPENDENCIEScủ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,glfwvàwebgpu_glfwđể bạn có thể sử dụng các mục tiêu đó trong tệpmain.cppsau 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 không đồng bộ do hình dạng của API JavaScript. Trong C++, hãy tạo 2 hàm trợ giúp tên là GetAdapter() và GetDevice(). Hàm này lần lượt trả về một hàm callback có 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));
}
Để truy cập dễ dàng 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ả cho adapter, sau đó gọi GetDevice() và chỉ định lệnh gọi lại kết quả 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 mã 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 tạo ra 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 là từng khung.
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ỉ giải lao một chút nhé.
Biên dịch lên 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ệpmain.cppcủa bạn sẽ không thể truy cập vào tệpwebgpu/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 điểm cải tiến 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 nội dung đề xuất và câu hỏi cho các vấn đề về WebGPU đối với Emscripten và Dawn.
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.