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

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 cao cấp và ứng dụng chuyên nghiệp.

Tính năng hỗ trợ kết cấu dấu phẩy động 32 bit có thể lọc mô tả khả năng của GPU để lọc kết cấu dấu phẩy động 32 bit. Điều này có nghĩa là GPU có thể làm mượt các cạnh của kết cấu dấu phẩy động, giúp chúng trông ít gồ ghề hơn. Tính năng 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ợ kết cấu 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 GPUDevice có tính năng này và lọc kết cấu bằng các đị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" hay còn gọi là "rgb10a2" đã được thêm vào quy cách WebGPU. Định dạng 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 dưới dạng 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 kết cấu rgb10a2uint

Một định dạng hoạ tiết 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 được đó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ề Dawn

Các truy vấn dấu thời gian cho phép ứng dụng WebGPU đo lường chính xác (xuống đến nano giây) thời gian thực thi các lệnh GPU. Hình dạng API để nắm bắt các truy vấn dấu thời gian ở đầu và cuối các lần truyền đã được cập nhật để phù hợp với quy cách WebGPU. Hãy xem ví dụ sau và vấn đề 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);

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 cam kết.