Hỗ trợ WebGPU trên Android
Nhóm Chrome rất vui được 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 do GPU của Qualcomm và ARM hỗ trợ.
Chúng tôi sẽ từng bước mở rộng dịch vụ hỗ trợ để bao gồm nhiều thiết bị Android hơn, bao gồm 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 việc thử nghiệm 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 phần vấn đề về chromium:1497815.
![Ảnh chụp màn hình mẫu WebGPU chạy trên Chrome dành cho Android.](https://developer.chrome.com/static/blog/new-in-webgpu-121/image/webgpu-android.png?authuser=9&hl=vi)
Sử dụng DXC thay vì FXC để biên dịch chương trình đổ bóng trên Windows
Chrome hiện sử dụng sức mạnh của DXC (DirectX Compiler) để biên dịch chương trình đổ bóng trên máy Windows D3D12 được trang bị phần cứng đồ hoạ SM6+. Trước đây, WebGPU dựa vào FXC (FX Compiler) để biên dịch chương trình đổ bóng trên Windows. Mặc dù vẫn hoạt động, nhưng FXC thiếu bộ tính năng và các tính nă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 có dấu thời gian trong lượt tính toán và kết xuất
Truy vấn có dấu thời gian cho phép các ứng dụng WebGPU đo chính xác (đến nano giây) thời gian cần thiết để các lệnh GPU thực thi lượt tính toán và kết xuất. Chúng được dùng rất nhiều để thu thập thông tin chi tiết về hiệu suất và hành vi của khối lượng công việc GPU.
Giờ đây, khi tính năng "timestamp-query"
có trong GPUAdapter
, bạn có thể thực hiện 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"
. - Dùng
GPUComputePassDescriptor.timestampWrites
vàGPURenderPassDescriptor.timestampWrites
để xác định vị trí ghi giá trị dấu thời gian trongGPUQuerySet
. - Phân giải các giá trị dấu thời gian thành
GPUBuffer
bằngresolveQuerySet()
. - Đọc lại các giá trị dấu thời gian bằng cách sao chép kết quả từ
GPUBuffer
sang CPU. - Giải mã các giá trị dấu thời gian dưới dạng
BigInt64Array
.
Hãy xem ví dụ sau đây và vấn đề 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 vấn đề về tấn công theo thời gian, các truy vấn về dấu thời gian được lượng tử hoá với độ phân giải 100 micrô giây, giúp cân bằng 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 định lượng dấu thời gian bằng cách bật "Tính năng dành cho nhà phát triển WebGPU" gắn cờ tại chrome://flags/#enable-webgpu-developer-features
trong quá trình phát triển ứng dụng. Xem bài viết Định lượng truy vấn có dấu thời gian để tìm hiểu thêm.
Vì đôi khi GPU 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ố delta âm giữa các dấu thời gian. Vì vậy, bạn nên xem phần git diff changes (thay đổi git diff) nhằm bổ sung tính năng hỗ trợ truy vấn dấu thời gian cho mẫu Compute Boids sau đây.
![Ảnh chụp màn hình mẫu Compute Boids cho thấy truy vấn về dấu thời gian.](https://developer.chrome.com/static/blog/new-in-webgpu-121/image/compute-boids.png?authuser=9&hl=vi)
Điểm truy cập mặc định cho 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 cho giai đoạn của chương trình đổ bóng trong mã của chương trình đổ bóng, 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 dưới dạng hệ màu GPUExternalTexture
Giờ đây, bạn có thể thiết lập hệ màu đích "display-p3"
khi nhập GPUExternalTexture từ video HDR bằng importExternalTexture()
. Xem cách WebGPU xử lý không gian màu. Hãy xem ví dụ sau đây và vấn đề liên quan đến 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 giới hạn về bộ nhớ khi phân bổ một lượng lớn bộ nhớ trong quá trình phát triển ứng dụng, requestAdapterInfo()
giờ đây sẽ hiển thị thông tin memoryHeaps
, chẳng hạn như kích thước và loại vùng nhớ khối xếp hiện có trên bộ chuyển đổi. Tính năng thử nghiệm này chỉ có thể truy cập khi "Tính năng dành cho nhà phát triển WebGPU" flag tại chrome://flags/#enable-webgpu-developer-features
đã được bật. 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 https://webgpureport.org nêu bật vùng nhớ khối xếp bộ nhớ trong phần thông tin của bộ chuyển đổi.](https://developer.chrome.com/static/blog/new-in-webgpu-121/image/webgpureport.png?authuser=9&hl=vi)
Cập nhật bình minh
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 chuẩn cho phép bạn tạo vùng đệm GPU bằng wgpu::BufferUsage::MapRead
hoặc wgpu::BufferUsage::MapWrite
và bất kỳ wgpu::BufferUsage
nào khác. Hãy xem ví dụ sau đây 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 đã được ghi nhận: Chia sẻ kết cấu ANGLE, được bảo vệ đa luồng D3D11, Đồng bộ hoá thiết bị ngầm ẩn, Định dạng kết cấu Norm16, Thẻ bên trong truy vấn dấu thời gian, Bộ nhớ cục bộ Pixel, Tính năng đổ 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.
Bài viết này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem danh sách các thay đổi đầy đủ.
Tính năng mới trong WebGPU
Danh sách mọi nội dung được đề cập trong loạt bài Có gì mới trong WebGPU.
Chrome 127
- Hỗ trợ thử nghiệm cho OpenGL ES trên Android
- Thuộc tính thông tin GPU
- Cải thiện khả năng tương tác WebAssembly
- Cải thiện lỗi bộ mã hoá lệnh
- Thông tin cập nhật về bình minh
Chrome 126
- Tăng giới hạn maxTextureArrayLayers
- Tối ưu hoá quá trình tải vùng đệm lên cho phần phụ trợ Vulkan
- Cải thiện thời gian biên dịch đổ bóng
- Vùng đệm lệnh mà bạn gửi phải là duy nhất
- Thông tin cập nhật về bình minh
Chrome 125
- Nhóm con (tính năng đang được phát triển)
- Kết xuất thành lát cắt của hoạ tiết 3D
- Thông tin cập nhật về bình minh
Chrome 124
- Kết cấu bộ nhớ chỉ đọc và đọc-ghi
- Hỗ trợ trình chạy dịch vụ và nhân viên dùng chung
- Thuộc tính mới về thông tin của bộ chuyển đổi
- Sửa lỗi
- Thông tin cập nhật về bình minh
Chrome 123
- Hỗ trợ các hàm tích hợp DP4a trong WGSL
- Tham số con trỏ không bị hạn chế trong WGSL
- Đường dẫn cú pháp để loại bỏ tham chiếu của các thành phần tổng hợp trong WGSL
- Tách riêng trạng thái chỉ có thể đọc cho các khía cạnh khuôn mẫu và chiều sâu
- Thông tin cập nhật về bình minh
Chrome 122
- Mở rộng phạm vi tiếp cận bằng chế độ tương thích (tính năng đang trong quá trình phát triển)
- Tăng giới hạn maxVertexAttributes
- Thông tin cập nhật về bình minh
Chrome 121
- Hỗ trợ WebGPU trên Android
- Sử dụng DXC thay vì FXC để biên dịch chương trình đổ bóng trên Windows
- Truy vấn có dấu thời gian khi truyền dữ liệu điện toán và kết xuất
- Điểm truy cập mặc định đến mô-đun chương trình đổ bóng
- Hỗ trợ display-p3 dưới dạng hệ màu GPUExternalTexture
- Thông tin về vùng nhớ khối xếp bộ nhớ
- Thông tin cập nhật về bình minh
Chrome 120
- Hỗ trợ các giá trị dấu phẩy động 16 bit trong WGSL
- Vượt giới hạn
- Thay đổi đối với trạng thái của khuôn hình theo chiều sâu
- Cập nhật thông tin về bộ chuyển đổi
- Định lượng truy vấn có dấu thời gian
- Tính năng dọn dẹp vào mùa xuân
Chrome 119
- Hoạ tiết nổi 32 bit có thể lọc
- định dạng đỉnh unorm10-10-10-2
- định dạng hoạ tiết rgb10a2uint
- Thông tin cập nhật về bình minh
Chrome 118
- Hỗ trợ HTMLImageElement và ImageData trong
copyExternalImageToTexture()
- Hỗ trợ thử nghiệm cho hoạ tiết lưu trữ chỉ đọc-ghi và chỉ đọc
- Thông tin cập nhật về bình minh
Chrome 117
- Huỷ đặt vùng đệm đỉnh
- Huỷ đặt nhóm liên kết
- Tắt tiếng lỗi của quá trình tạo quy trình không đồng bộ khi mất thiết bị
- Thông tin cập nhật về quá trình tạo mô-đun chương trình đổ bóng SPIR-V
- Cải thiện trải nghiệm của nhà phát triển
- Lưu quy trình vào bộ nhớ đệm với bố cục được tạo tự động
- Thông tin cập nhật về bình minh
Chrome 116
- Tích hợp WebCodecs
- Thiết bị bị mất do GPUAdapter
requestDevice()
trả về - Giữ cho video phát mượt mà nếu
importExternalTexture()
được gọi - Tuân thủ quy cách
- Cải thiện trải nghiệm của nhà phát triển
- Thông tin cập nhật về bình minh
Chrome 115
- Các phần mở rộng ngôn ngữ WGSL được hỗ trợ
- Hỗ trợ thử nghiệm cho Direct3D 11
- Nhận GPU rời theo mặc định khi dùng nguồn AC
- Cải thiện trải nghiệm của nhà phát triển
- Thông tin cập nhật về bình minh
Chrome 114
- Tối ưu hoá JavaScript
- getCurrentTexture() trên canvas chưa định cấu hình gửi InvalidStateError
- Thông tin cập nhật về WGSL
- Thông tin cập nhật về bình minh