Tính năng mới trong WebGPU (Chrome lúc 121)

François Beaufort
François Beaufort
GitHub

Hỗ trợ WebGPU trên Android

Nhóm Chrome rất vui mừng thông báo rằng WebGPU hiện được bật theo mặc định trong Chrome 121 trên các thiết bị chạy Android 12 trở lên, sử dụng GPU Qualcomm và ARM.

Phạm vi hỗ trợ sẽ dần mở rộng để bao gồm nhiều thiết bị Android hơn, kể cả những thiết bị chạy Android 11 trong tương lai gần. Việc mở rộng này sẽ phụ thuộc vào quá trình kiểm thử và tối ưu hoá thêm để đảm bảo trải nghiệm liền mạch trên nhiều cấu hình phần cứng hơn. Hãy xem vấn đề chromium:1497815.

Ảnh chụp màn hình mẫu WebGPU chạy trên Chrome dành cho Android.
Mẫu WebGPU chạy trên Chrome dành cho Android.

Sử dụng DXC thay vì FXC để biên dịch chương trình đổ bóng trên Windows

Giờ đây, Chrome sử dụng sức mạnh của DXC (Trình biên dịch DirectX) để biên dịch chương trình đổ bóng trên các máy Windows D3D12 được trang bị phần cứng đồ hoạ SM6+. Trước đây, WebGPU dựa vào FXC (Trình biên dịch FX) để biên dịch chương trình đổ bóng trên Windows. Mặc dù hoạt động được, nhưng FXC thiếu bộ tính năng và các hoạt động tối ưu hoá hiệu suất có trong DXC.

Thử nghiệm ban đầu cho thấy tốc độ biên dịch chương trình đổ bóng điện toán tăng trung bình 20% khi sử dụng DXC so với FXC.

Truy vấn dấu thời gian trong các lượt tính toán và kết xuất

Truy vấn dấu thời gian cho phép các ứng dụng WebGPU đo lường chính xác (xuống đến nano giây) thời gian mà các lệnh GPU của chúng cần để thực thi các lượt tính toán và kết xuất. Các chỉ số này được sử dụng nhiều để thu thập thông tin chi tiết về hiệu suất và hành vi của các khối lượng công việc trên GPU.

Khi tính năng "timestamp-query" có trong GPUAdapter, bạn có thể làm những việc sau:

  • Yêu cầu GPUDevice bằng tính năng "timestamp-query".
  • Tạo một GPUQuerySet thuộc loại "timestamp".
  • Sử dụng GPUComputePassDescriptor.timestampWrites và GPURenderPassDescriptor.timestampWrites để xác định vị trí ghi các giá trị dấu thời gian trong GPUQuerySet.
  • Phân giải các giá trị dấu thời gian thành GPUBuffer bằng resolveQuerySet().
  • Đọc lại các giá trị dấu thời gian bằng cách sao chép kết quả từ GPUBuffer vào CPU.
  • Giải mã giá trị dấu thời gian dưới dạng BigInt64Array.

Hãy xem ví dụ sau và đưa ra dawn:1800.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

Do lo ngại về tấn công định thời, các truy vấn dấu thời gian được lượng tử hoá với độ phân giải 100 micro giây, mang lại sự thoả hiệp tốt giữa độ chính xác và tính bảo mật. Trong trình duyệt Chrome, bạn có thể tắt tính năng lượng tử hoá dấu thời gian bằng cách bật cờ "WebGPU Developer Features" (Các tính năng dành cho nhà phát triển WebGPU) tại chrome://flags/#enable-webgpu-developer-features trong quá trình phát triển ứng dụng. Hãy xem phần Lượng tử hoá truy vấn dấu thời gian để tìm hiểu thêm.

Vì GPU đôi khi có thể đặt lại bộ đếm dấu thời gian, điều này có thể dẫn đến các giá trị không mong muốn (chẳng hạn như số gia âm giữa các dấu thời gian), nên bạn nên xem các thay đổi trong git diff để thêm tính năng hỗ trợ truy vấn dấu thời gian vào mẫu Compute Boids sau đây.

Ảnh chụp màn hình mẫu Compute Boids có truy vấn dấu thời gian.
Mẫu Compute Boids có tính năng truy vấn dấu thời gian.

Điểm nhập mặc định vào các mô-đun chương trình đổ bóng

Để cải thiện trải nghiệm của nhà phát triển, giờ đây, bạn có thể bỏ qua entryPoint của mô-đun chương trình đổ bóng khi tạo quy trình tính toán hoặc kết xuất. Nếu không tìm thấy điểm truy cập duy nhất nào cho giai đoạn chương trình đổ bóng trong mã chương trình đổ bóng, thì GPUValidationError sẽ được kích hoạt. Hãy xem ví dụ sau và vấn đề dawn:2254.

const code = `
    @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);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

Hỗ trợ display-p3 làm không gian màu GPUExternalTexture

Giờ đây, bạn có thể đặt hệ màu đích "display-p3" khi nhập GPUExternalTexture từ video HDR bằng importExternalTexture(). Hãy xem cách WebGPU xử lý không gian màu. Hãy xem ví dụ và vấn đề sau chromium:1330250.

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

Thông tin về vùng nhớ khối xếp

Để giúp bạn dự đoán các hạn chế về bộ nhớ khi phân bổ lượng lớn bộ nhớ trong quá trình phát triển ứng dụng, requestAdapterInfo() hiện hiển thị thông tin memoryHeaps, chẳng hạn như kích thước và loại vùng nhớ có sẵn trên bộ chuyển đổi. Bạn chỉ có thể truy cập vào tính năng thử nghiệm này khi bật cờ "WebGPU Developer Features" (Các tính năng dành cho nhà phát triển WebGPU) tại chrome://flags/#enable-webgpu-developer-features. Hãy xem ví dụ sau và vấn đề dawn:2249.

const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();

for (const { size, properties } of adapterInfo.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}
Ảnh chụp màn hình của https://webgpureport.org có các vùng nhớ trong thông tin bộ điều hợp.
Các vùng nhớ của thông tin bộ chuyển đổi xuất hiện trên https://webgpureport.org.

Thông tin cập nhật về bình minh

Các phương thức HasWGSLLanguageFeature và EnumerateWGSLLanguageFeatures trên wgpu::Instance đã được thêm vào để xử lý các tính năng ngôn ngữ WGSL. Xem vấn đề dawn:2260.

Tính năng wgpu::Feature::BufferMapExtendedUsages không theo tiêu chuẩn cho phép bạn tạo một vùng đệm GPU bằng wgpu::BufferUsage::MapRead hoặc wgpu::BufferUsage::MapWrite và mọi wgpu::BufferUsage khác. Hãy xem ví dụ sau và vấn đề dawn:2204.

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

Các tính năng sau đây đã được ghi lại: Chia sẻ kết cấu ANGLE, D3D11 được bảo vệ đa luồng, Đồng bộ hoá thiết bị ngầm, Định dạng kết cấu Norm16, Truy vấn dấu thời gian bên trong các lượt truyền, Bộ nhớ cục bộ theo pixel, Các tính năng của chương trình đổ bóng và Định dạng đa phẳng.

Nhóm Chrome đã tạo một kho lưu trữ chính thức trên GitHub cho Dawn.

Đây chỉ là một số điểm nổi bật chính. Xem danh sách đầy đủ các cam kết.

Tính năng mới trong WebGPU

Danh sách mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong WebGPU.

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113