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

François Beaufort
François Beaufort

Hỗ trợ HTMLImageElement và ImageData trong copyExternalImageToTexture()

Phương thức copyExternalImageToTexture() trên GPUQueue cho phép bạn sao chép ảnh chụp nhanh được lấy từ hình ảnh nguồn, video hoặc canvas vào một GPUTexture cụ thể. Giờ đây, bạn có thể truyền các đối tượng HTMLImageElementImageData dưới dạng nguồn. Hãy xem ví dụ sau và vấn đề về chromium:1471372.

// Fetch and decode image.
const source = document.createElement("img");
source.src = "my-image.png";
await source.decode();

// Create destination texture.
const size = [source.width, source.height];
const texture = myDevice.createTexture({
 size,
 format: "rgba8unorm",
 usage:
   GPUTextureUsage.COPY_DST |
   GPUTextureUsage.RENDER_ATTACHMENT |
   GPUTextureUsage.TEXTURE_BINDING,
});

// Copies a snapshot taken from the source image into a texture.
myDevice.queue.copyExternalImageToTexture({ source }, { texture }, size);

Hỗ trợ thử nghiệm cho hoạ tiết lưu trữ chỉ đọc-ghi và chỉ đọc

Kiểu liên kết kết cấu lưu trữ cho phép bạn đọc kết cấu mà không cần lấy mẫu và lưu trữ tại các vị trí tuỳ ý trong chương trình đổ bóng. Khi tính năng "chromium-experimental-read-write-storage-texture" có trong GPUAdapter, bạn hiện có thể yêu cầu GPUDevice bằng tính năng này và thiết lập quyền truy cập GPUStorageTexture thành "read-write" hoặc "read-only" khi tạo bố cục nhóm liên kết. Trước đây, việc này bị giới hạn ở "write-only".

Để tận dụng phần tử này, bạn phải bật tiện ích này một cách rõ ràng trong mã WGSL bằng enable chromium_experimental_read_write_storage_texture. Khi bật, bạn có thể dùng bộ hạn định quyền truy cập read_writeread cho hoạ tiết lưu trữ, các hàm tích hợp textureLoad()textureStore() sẽ hoạt động phù hợp. Ngoài ra, bạn có thể dùng một hàm tích hợp textureBarrier() mới để đồng bộ hoá quyền truy cập bộ nhớ kết cấu trong một nhóm công việc. Hãy xem ví dụ sau và vấn đề dawn:1972.

Tính năng này vẫn đang trong giai đoạn thử nghiệm và có thể thay đổi. Trong khi Chrome được chuẩn hoá, hãy chạy Chrome bằng --enable-dawn-features=allow_unsafe_apis cờ để có thể sử dụng.

const feature = "chromium-experimental-read-write-storage-texture";
const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has(feature)) {
  throw new Error("Read-write storage texture support is not available");
}
// Explicitly request read-write storage texture support.
const device = await adapter.requestDevice({
  requiredFeatures: [feature],
});

const bindGroupLayout = device.createBindGroupLayout({
  entries: [{
    binding: 0,
    visibility: GPUShaderStage.COMPUTE,
    storageTexture: {
      access: "read-write", // <-- New!
      format: "r32uint",
    },
  }],
});

const shaderModule = device.createShaderModule({ code: `
  enable chromium_experimental_read_write_storage_texture;
  @group(0) @binding(0) var tex : texture_storage_2d<r32uint, read_write>;

  @compute @workgroup_size(1, 1)
  fn main(@builtin(local_invocation_id) local_id: vec3u) {
    var data = textureLoad(tex, vec2i(local_id.xy));
    data.x *= 2;
    textureStore(tex, vec2i(local_id.xy), data);
  }`,
});

// You can now create a compute pipeline with this shader module and
// send the appropriate commands to the GPU.

Cập nhật bình minh

API C webgpu.h đã đổi tên các trường sau để đảm bảo tính nhất quán: requiredFeaturesCount thành requiredFeatureCount, pipelineStatisticsCount thành pipelineStatisticCountcolorFormatsCount thành colorFormatCount. Xem vấn đề buổi sáng:146040.

Chương trình DawnInfo mới (tương tự như vulkaninfo) cho phép bạn liệt kê các nút bật/tắt, bộ chuyển đổi, các tính năng của bộ chuyển đổi và giới hạn của bộ chuyển đổi. Bạn có thể sử dụng chế độ này khi tạo toà nhà bình minh ở samples. Đây là dữ liệu đầu ra dưới đây được cắt gọn quá nhiều để giúp bạn trình bày ngắn gọn hơn. Xem phần thay đổi bình minh:149020.

./out/Debug/DawnInfo
Toggles
=======
  Name: allow_unsafe_apis
    Suppresses validation errors on API entry points or parameter combinations
    that aren't considered secure yet.
    http://crbug.com/1138528
[…]

Adapter
=======
VendorID: 0x106B
Vendor: apple
Architecture: common-3
DeviceID: 0x0000
Name: Apple M1 Pro
Driver description: Metal driver on macOS Version 13.5.1 (Build 22G90)
Adapter Type: discrete GPU
Backend Type: Metal
Power: <undefined>

  Features
  ========
   * depth_clip_control
      Disable depth clipping of primitives to the clip volume
      https://bugs.chromium.org/p/dawn/issues/detail?id=1178
[…]

  Adapter Limits
  ==============
    maxTextureDimension1D: 16,384
    maxTextureDimension2D: 16,384
[…]

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 đủ.

Tính năng mới trong WebGPU

Danh sách mọi nội dung được đề cập trong loạt bài Có gì mới trong WebGPU.

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