Tính năng mới trong WebGPU (Chrome'129)

François Beaufort
François Beaufort

Hỗ trợ HDR với chế độ ánh xạ tông màu canvas

Nhà phát triển web có ít lựa chọn để phân phối nội dung HDR, chủ yếu dựa vào các phần tử <img><video>. Tuy nhiên, phần tử <canvas> vẫn bị hạn chế ở SDR. Để tạo nội dung HDR động trong canvas, bạn cần mã hoá nội dung đó dưới dạng hình ảnh HDR trước khi hiển thị (xem bản minh hoạ này để biết ví dụ).

Tham số GPUCanvasToneMappingMode mới trong cấu hình canvas WebGPU hiện cho phép WebGPU vẽ các màu sáng hơn màu trắng (#FFFFFF). Tham số này thực hiện việc đó thông qua các chế độ sau:

  • "standard": Hành vi mặc định hạn chế nội dung trong phạm vi SDR của màn hình. Chế độ này được thực hiện bằng cách kẹp tất cả các giá trị màu trong không gian màu của màn hình vào khoảng [0, 1].

  • "extended": Mở khoá toàn bộ dải tương phản động (HDR) của màn hình. Chế độ này khớp với "standard" trong phạm vi [0, 1] của màn hình. Việc kẹp hoặc chiếu được thực hiện cho dải tương phản động mở rộng của màn hình nhưng không phải [0, 1].

Đoạn mã sau đây cho biết cách định cấu hình một canvas cho dải tương phản động cao.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Khám phá HDR bằng WebGPU bằng cách xem Mẫu hạt (HDR)Ví dụ về HDR WebGPU, đồng thời xem mục chromestatus.

Một chiếc máy tính xách tay có màn hình HDR hiển thị hình ảnh sống động.
Mẫu Particles (HDR) xuất hiện trên màn hình HDR.

Hỗ trợ nhóm con mở rộng

Sau thông báo về thử nghiệm nhóm con, các hàm tích hợp nhóm con hiện có thể dùng trong cả chương trình đổ bóng tính toán và chương trình đổ bóng mảnh. Chúng không còn bị giới hạn chỉ ở các chương trình đổ bóng điện toán nữa. Hãy xem vấn đề 354738715.

Xin lưu ý rằng giá trị tích hợp sẵn subgroup_size hiện đang có lỗi trong chương trình đổ bóng mảnh. Tạm thời tránh sử dụng.

Ngoài ra, các hàm tích hợp của nhóm con sau đây đã được thêm:

  • subgroupAdd(value): Trả về tổng của tất cả các lệnh gọi value đang hoạt động trên toàn bộ nhóm con.
  • subgroupExclusiveAdd(value): Trả về tổng số lần quét riêng biệt của tất cả các lệnh gọi value đang hoạt động trên toàn bộ nhóm con.
  • subgroupMul(value): Trả về phép nhân của tất cả các lệnh gọi đang hoạt động value trên nhóm con.
  • subgroupExclusiveMul(value): Trả về phép nhân quét loại trừ của tất cả các lệnh gọi đang hoạt động value trên toàn bộ nhóm con.

  • subgroupAnd(value): Trả về phép toán AND nhị phân của tất cả các lệnh gọi đang hoạt động value trên toàn bộ nhóm con.
  • subgroupOr(value): Trả về phép OR nhị phân của tất cả các lệnh gọi đang hoạt động value trên toàn bộ nhóm con.
  • subgroupXor(value): Trả về XOR nhị phân của tất cả các lệnh gọi đang hoạt động value trên nhóm con.

  • subgroupMin(value): Trả về giá trị tối thiểu của tất cả các lệnh gọi value đang hoạt động trong nhóm con.
  • subgroupMax(value): Trả về giá trị tối đa của tất cả các lệnh gọi đang hoạt động value trong nhóm con.

  • subgroupAll(value): Trả về giá trị true nếu value là true cho tất cả các lệnh gọi đang hoạt động trong nhóm con.
  • subgroupAny(value): Trả về giá trị true nếu value là true cho mọi lệnh gọi đang hoạt động trong nhóm con.

  • subgroupElect(): Trả về true nếu lệnh gọi này có subgroup_invocation_id thấp nhất trong số các lệnh gọi đang hoạt động trong nhóm con.
  • subgroupBroadcastFirst(value): Truyền value từ lệnh gọi đang hoạt động có subgroup_invocation_id thấp nhất trong nhóm con đến tất cả các lệnh gọi đang hoạt động khác.

  • subgroupShuffle(value, id): Trả về value từ lệnh gọi đang hoạt động có subgroup_invocation_id khớp với id.
  • subgroupShuffleXor(value, mask): Trả về value từ lệnh gọi đang hoạt động có subgroup_invocation_id khớp với subgroup_invocation_id ^ mask. mask phải đồng nhất một cách linh hoạt.
  • subgroupShuffleUp(value, delta): Trả về value từ lệnh gọi đang hoạt động có subgroup_invocation_id khớp với subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): Trả về value từ lệnh gọi đang hoạt động có subgroup_invocation_id khớp với subgroup_invocation_id + delta.

  • quadBroadcast(value, id): Truyền value từ lệnh gọi quad có mã nhận dạng bằng id. id phải là một biểu thức hằng số.
  • quadSwapX(value): Hoán đổi value giữa các lệnh gọi trong tứ giác theo hướng X.
  • quadSwapY(value): Hoán đổi value giữa các lệnh gọi trong nhóm bốn theo hướng Y.
  • quadSwapDiagonal(value): Hoán đổi value giữa các lệnh gọi trong tứ giác theo đường chéo.

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

Giờ đây, cấu trúc wgpu::PrimitiveState sẽ trực tiếp bao gồm chế độ cài đặt kiểm soát đoạn cắt theo độ sâu, giúp bạn không cần dùng cấu trúc wgpu::PrimitiveDepthClipControl riêng biệt. Để tìm hiểu thêm, hãy xem đoạn mã sau và webgpu-headers PR.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;
// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

Đâ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 140

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