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>
và <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
). Việc 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ả các giá trị màu trong hệ 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à ví dụ về WebGPU HDR, đồng thời xem mục chromestatus.
Hỗ trợ mở rộng nhóm con
Sau thông báo về thử nghiệm với nhóm con, các hàm tích hợp sẵn trong nhóm con hiện đã có thể sử 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, chúng tôi cũng đã thêm các hàm tích hợp sẵn trong nhóm con sau đây:
subgroupAdd(value)
: Trả về tổng của tất cả lệnh gọi đang hoạt độngvalue
trong 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ọivalue
đ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ọivalue
đ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ả lệnh gọivalue
đang hoạt động trên nhóm con.subgroupAnd(value)
: Trả về tệp nhị phân AND của tất cả lệnh gọi đang hoạt độngvalue
trong nhóm con.subgroupOr(value)
: Trả về nhị phân OR của tất cả lệnh gọi đang hoạt độngvalue
trong nhóm con.subgroupXor(value)
: Trả về XOR nhị phân của tất cả lệnh gọi đang hoạt độngvalue
trong nhóm con.subgroupMin(value)
: Trả về giá trị tối thiểu của tất cả các lệnh gọivalue
đ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ọivalue
đang hoạt động trên nhóm con.subgroupAll(value)
: Trả về true nếuvalue
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ếuvalue
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 phátvalue
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ớiid
.subgroupShuffleXor(value, mask)
: Trả vềvalue
từ lệnh gọi đang hoạt động cósubgroup_invocation_id
khớp vớisubgroup_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ớisubgroup_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ớisubgroup_invocation_id + delta
.quadBroadcast(value, id)
: Truyền tinvalue
từ lệnh gọi tứ giác có mã nhận dạng bằngid
.id
phải là một biểu thức hằng.quadSwapX(value)
: Hoán đổivalue
giữa các lệnh gọi trong khung hình tứ giác theo hướng X.quadSwapY(value)
: Hoán đổivalue
giữa các lệnh gọi trong tứ giác theo hướng Y.quadSwapDiagonal(value)
: Hoán đổivalue
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
nay trực tiếp bao gồm chế độ cài đặt điều khiển đoạn video theo chiều sâu, nhờ vậy mà không cần phải có một 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;
Nội dung 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
- Cắt khoảng cách trong WGSL
- GPUCanvasContext getConfiguration()
- Các đối tượng gốc điểm và đường không được có độ lệch sâu
- Các chức năng tích hợp quét toàn diện cho các nhóm con
- Hỗ trợ thử nghiệm cho nhiều bản vẽ gián tiếp
- Tuỳ chọn biên dịch mô-đun đổ bóng toán học nghiêm ngặt
- Xoá GPUAdapter requestAdapterInfo()
- Thông tin cập nhật về bình minh
Chrome 130
- Kết hợp nguồn kép
- Cải thiện thời gian biên dịch chương trình đổ bóng trên Metal
- Ngừng sử dụng GPUAdapter requestAdapterInfo()
- Thông tin cập nhật về bình minh
Chrome 129
- Hỗ trợ HDR với chế độ ánh xạ tông màu canvas
- Mở rộng tính năng hỗ trợ nhóm con
- Thông tin cập nhật về Dawn
Chrome 128
- Thử nghiệm với các nhóm nhỏ
- Ngừng sử dụng tính năng đặt độ lệch chiều sâu cho các đường và điểm
- Ẩn cảnh báo Công cụ cho nhà phát triển về lỗi không được ghi lại nếu preventDefault
- WGSL nội suy lấy mẫu trước tiên rồi
- Thông tin cập nhật về bình minh
Chrome 127
- Hỗ trợ thử nghiệm cho OpenGL ES trên Android
- Thuộc tính thông tin GPU
- Cải tiến khả năng tương tác của WebAssembly
- Cải thiện lỗi bộ mã hoá lệnh
- Thông tin cập nhật về Dawn
Chrome 126
- Tăng giới hạn maxTextureArrayLayers
- Tối ưu hoá tính năng tải vùng đệm lên cho phần phụ trợ Vulkan
- Cải thiện thời gian biên dịch chương trình đổ bóng
- Vùng đệm lệnh đã 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)
- Hiển thị lát cắt của hoạ tiết 3D
- Thông tin cập nhật về Dawn
Chrome 124
- Kết cấu bộ nhớ chỉ đọc và đọc-ghi
- Hỗ trợ worker và worker dùng chung
- Các thuộc tính thông tin mới 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
- Trạng thái chỉ có thể đọc riêng biệt cho các khía cạnh của bản in 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ề Dawn
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 dấu thời gian trong các lượt tính toán và kết xuất
- Điểm truy cập mặc định vào mô-đun chương trình đổ bóng
- Hỗ trợ display-p3 làm không gian màu GPUExternalTexture
- Thông tin về vùng nhớ khối xếp
- Thông tin cập nhật về Dawn
Chrome 120
- Hỗ trợ giá trị dấu phẩy động 16 bit trong WGSL
- Phá vỡ giới hạn
- Thay đổi đối với trạng thái chiều sâu-khung đệm
- Cập nhật thông tin về bộ chuyển đổi
- Định lượng truy vấn dấu thời gian
- Các tính năng dọn dẹp mùa xuân
Chrome 119
- Hoạ tiết dấu phẩy động 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ề Dawn
Chrome 118
- Hỗ trợ HTMLImageElement và ImageData trong
copyExternalImageToTexture()
- Hỗ trợ thử nghiệm cho hoạ tiết bộ nhớ đọ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 từ quá trình tạo quy trình không đồng bộ khi thiết bị bị mất
- Thông tin cập nhật về việc 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 các quy trình vào bộ nhớ đệm bằng bố cục được tạo tự động
- Thông tin cập nhật về Dawn
Chrome 116
- Tích hợp WebCodecs
- Thiết bị bị mất do GPUAdapter
requestDevice()
trả về - Giữ cho quá trình phát video diễn ra 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 tiện ích ngôn ngữ WGSL được hỗ trợ
- Hỗ trợ thử nghiệm cho Direct3D 11
- Sử dụng GPU rời theo mặc định khi dùng nguồn điện xoay chiều
- Cải thiện trải nghiệm của nhà phát triển
- Thông tin cập nhật về Dawn
Chrome 114
- Tối ưu hoá JavaScript
- getCurrentTexture() trên canvas chưa được định cấu hình sẽ gửi InvalidStateError
- Nội dung cập nhật về WGSL
- Thông tin cập nhật về bình minh