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

François Beaufort
François Beaufort

Kết cấu dấu phẩy động 32 bit có thể lọc

Kết cấu dấu phẩy động 32 bit được dùng để lưu trữ dữ liệu có độ chính xác cao, chẳng hạn như hình ảnh HDR và bản đồ độ sâu. Chúng đặc biệt quan trọng đối với GPU được dùng trong các ứng dụng chơi game và ứng dụng chuyên nghiệp cao cấp.

Khả năng hỗ trợ hoạ tiết dấu phẩy động 32 bit có thể lọc mô tả khả năng lọc hoạ tiết dấu phẩy động 32 bit của GPU. Điều này có nghĩa là GPU có thể làm mịn các cạnh của hoạ tiết dấu phẩy động, giúp các hoạ tiết này trông ít gồ ghề hơn. Điều này tương tự như tiện ích "OES_texture_float_linear" trong WebGL.

Không phải GPU nào cũng hỗ trợ các hoạ tiết dấu phẩy động 32 bit có thể lọc. Khi tính năng "float32-filterable" có trong GPUAdapter, giờ đây, bạn có thể yêu cầu một GPUDevice có tính năng này và lọc các hoạ tiết bằng định dạng "r32float", "rg32float" và "rgba32float". Hãy xem ví dụ sau và vấn đề dawn:1664.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("float32-filterable")) {
  throw new Error("Filterable 32-bit float textures support is not available");
}
// Explicitly request filterable 32-bit float textures support.
const device = await adapter.requestDevice({
  requiredFeatures: ["float32-filterable"],
});

// Create a sampler with linear filtering.
const sampler = device.createSampler({
  magFilter: "linear",
});

// Create a texture with rgba32float format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgba32float",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with sampler and texture and
// send the appropriate commands to the GPU....

định dạng đỉnh unorm10-10-10-2

Một định dạng đỉnh mới có tên là "unorm10-10-10-2" (còn gọi là "rgb10a2") đã được thêm vào quy cách WebGPU. Tham số này bao gồm một giá trị 32 bit được đóng gói với 4 giá trị số nguyên không dấu được chuẩn hoá, được sắp xếp thành 10 bit, 10 bit, 10 bit và 2 bit. Hãy xem ví dụ sau và vấn đề dawn:2044.

// Define the layout of vertex attribute data with unorm10-10-10-2 format.
const buffers = [
  {
    arrayStride: 0,
    attributes: [
      { format: "unorm10-10-10-2", offset: 0, shaderLocation: 0 },
    ],
  },
];

// Describe the vertex shader entry point and its input buffer layouts.
const vertex = {
  module: myVertexShaderModule,
  entryPoint: "main",
  buffers,
};

// Pass vertex to device.createRenderPipeline() and
// use vec4<f32> type in WGSL shader code to manipulate data.

định dạng hoạ tiết rgb10a2uint

Một định dạng kết cấu mới có tên là "rgb10a2uint" đã được thêm vào quy cách WebGPU. Định dạng này bao gồm một định dạng pixel đóng gói 32 bit với 4 thành phần số nguyên không dấu: 10 bit màu đỏ, 10 bit màu xanh lục, 10 bit màu xanh dương và 2 bit alpha. Hãy xem ví dụ sau và vấn đề dawn:1936.

// Create a texture with rgb10a2uint format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgb10a2uint",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with texture and
// send the appropriate commands to the GPU....

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

Các 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 phần tỷ giây) thời gian cần thiết để các lệnh GPU thực thi. Hình dạng API để ghi lại các truy vấn dấu thời gian ở đầu và cuối các lượt truyền đã được cập nhật để khớp với quy cách WebGPU. Hãy xem ví dụ sau và phát lệnh dawn:1800.

// Create a timestamp query set that will store the timestamp values.
wgpu::QuerySetDescriptor querySetDescriptor = {
    .count = 2,
    .type = wgpu::QueryType::Timestamp};
wgpu::QuerySet querySet = device.CreateQuerySet(&querySetDescriptor);

wgpu::RenderPassTimestampWrites timestampWrites = {
    .querySet = querySet,
    .beginningOfPassWriteIndex = 0,
    .endOfPassWriteIndex = 1};
wgpu::ComputePassDescriptor pass{.timestampWrites = &timestampWrites};

// Write the queue timestamp into beginningOfPassWriteIndex and
// endOfPassWriteIndex of myQuerySet respectively before and after the pass
// commands execute.
myEncoder.BeginComputePass(&pass);

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