Trang này được dịch bởi Cloud Translation API.

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

François Beaufort

Hoạ tiết nổi 32 bit có thể lọc

Hoạ tiết dấu phẩy động 32 bit được sử 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 trò chơi cao cấp và các ứng dụng chuyên nghiệp.

Việc hỗ trợ hoạ tiết nổi 32 bit có thể lọc mô tả khả năng của GPU có thể lọc các kết cấu dấu phẩy động 32 bit. Tức là GPU có thể làm mịn các cạnh của hoạ tiết dấu phẩy động, giúp chúng trông ít lởm chởm hơn. Thuộc tính này tương tự như "OES_texture_float_linear" trong WebGL.

Không phải GPU nào cũng hỗ trợ hoạ tiết nổi 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 bằng tính năng này và lọc hoạ tiết theo "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....

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

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 thông số kỹ thuật WebGPU. Nó bao gồm một giá trị 32 bit được đóng gói với bốn giá trị số nguyên không dấu đã chuẩn hóa, đượ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

Định dạng hoạ tiết mới có tên là "rgb10a2uint" đã được thêm vào thông số kỹ thuật WebGPU. Nó bao gồm một định dạng pixel đóng gói 32 bit với bốn thành phần số nguyên không dấu: màu đỏ 10 bit, màu xanh lục 10 bit, màu xanh lam 10 bit và alpha 2 bit. 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....

Cập nhật bình minh

Truy vấn có dấu thời gian cho phép các ứng dụng WebGPU đo chính xác (đến nano giây) thời gian cần thiết để thực thi các lệnh GPU. Hình dạng API để ghi lại các truy vấn về dấu thời gian ở đầu và cuối của thẻ đã được cập nhật để phù hợp với thông số kỹ thuật của 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);

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