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

Các 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ị giới hạn ở SDR. Để tạo nội dung HDR động trong một canvas, bạn cần mã hoá nội dung đó dưới dạng hình ảnh HDR trước khi hiển thị (ví dụ: xem bản minh hoạ này).

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). Điều này được thực hiện thông qua các chế độ sau:

  • "standard": Hành vi mặc định giới hạn nội dung ở 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ả 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ộ phạm vi HDR của màn hình. Chế độ này so khớp "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 động mở rộng của màn hình nhưng không phải [0, 1].

Đoạn mã sau đây cho bạn biết cách định cấu hình canvas cho dải độ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 Particles (HDR)ví dụ về WebGPU HDR, đồ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) hiển thị trên màn hình HDR.

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

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

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

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

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

  • subgroupAnd(value): Trả về AND nhị phân của tất cả lệnh gọi value đang hoạt động trên nhóm con.
  • subgroupOr(value): Trả về giá trị OR nhị phân của tất cả các lệnh gọi value đang hoạt động trên nhóm con.
  • subgroupXor(value): Trả về XOR nhị phân của tất cả các lệnh gọi value đang hoạt động 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 trên nhóm con.
  • subgroupMax(value): Trả về giá trị tối đa của tất cả các lệnh gọi value đang hoạt động trên nhóm con.

  • subgroupAll(value): Trả về true nếu value là true cho tất 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 đối với bất kỳ lệnh gọi nào đ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 tin 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 động.
  • 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 tin value từ lệnh gọi tứ giác có mã nhận dạng bằng id. id phải là một biểu thức hằng.
  • 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 tứ giác theo hướng Y.
  • quadSwapDiagonal(value): Hoán đổi value giữa các lệnh gọi trong hình vuông theo đường chéo.

Thông tin cập nhật về Dawn

Cấu trúc wgpu::PrimitiveState hiện trực tiếp bao gồm chế độ cài đặt điều khiển cắt độ sâu, giúp bạn không cần phải có 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;

Phần này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem danh sách đầy đủ các thay đổi.

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