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

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

François Beaufort

Khoảng cách cắt trong WGSL

Khoảng cách cắt cho phép bạn hạn chế thể tích cắt của các đối tượng cơ bản bằng các nửa không gian do người dùng xác định trong đầu ra của giai đoạn đỉnh. Việc xác định mặt phẳng cắt của riêng bạn giúp bạn kiểm soát tốt hơn những gì hiển thị trong các cảnh WebGPU. Kỹ thuật này đặc biệt hữu ích cho các ứng dụng như phần mềm CAD, nơi việc kiểm soát chính xác hình ảnh trực quan là rất quan trọng.

Khi tính năng "clip-distances" có trong GPUAdapter, hãy yêu cầu GPUDevice có tính năng này để nhận được sự hỗ trợ về khoảng cách cắt trong WGSL và bật rõ ràng tiện ích này trong mã WGSL bằng enable clip_distances;. Sau khi bật, bạn có thể sử dụng mảng tích hợp clip_distances trong chương trình đổ bóng đỉnh. Mảng này lưu giữ khoảng cách đến mặt phẳng cắt do người dùng xác định:

Khoảng cách cắt bằng 0 có nghĩa là đỉnh nằm trên mặt phẳng.
Khoảng cách dương có nghĩa là đỉnh nằm bên trong nửa không gian đoạn cắt (phía bạn muốn giữ lại).
Khoảng cách âm có nghĩa là đỉnh nằm bên ngoài nửa không gian đoạn cắt (phía bạn muốn loại bỏ).

Hãy xem đoạn mã sau, mục nhập chromestatus và vấn đề 358408571.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("clip-distances")) {
  throw new Error("Clip distances support is not available");
}
// Explicitly request clip distances support.
const device = await adapter.requestDevice({
  requiredFeatures: ["clip-distances"],
});

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

Sau khi GPUCanvasContext configure() được gọi bằng một từ điển cấu hình, phương thức GPUCanvasContext getConfiguration() sẽ cho phép bạn kiểm tra cấu hình ngữ cảnh canvas. Nhóm này bao gồm các thành viên device, format, usage, viewFormats, colorSpace, toneMapping và alphaMode. Điều này rất hữu ích cho các tác vụ như kiểm tra xem trình duyệt có hỗ trợ canvas HDR hay không, như trong mẫu Particles (HDR). Hãy xem đoạn mã sau, mục nhập chromestatus và vấn đề 370109829.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

Các thành phần cơ bản dạng điểm và đường không được có độ lệch về độ sâu

Như đã thông báo trước đây, giờ đây, quy cách WebGPU sẽ coi việc đặt depthBias, depthBiasSlopeScale và depthBiasClamp thành một giá trị khác 0 là lỗi xác thực khi cấu trúc liên kết cho quy trình kết xuất là loại đường thẳng hoặc điểm. Xem vấn đề 352567424.

Các chức năng quét toàn diện được tích hợp cho các nhóm nhỏ

Trong thử nghiệm nhóm con, các hàm nhóm con tích hợp sau đây đã được thêm vào vấn đề 361330160:

subgroupInclusiveAdd(value): Trả về tổng số lần quét bao gồm của tất cả các lệnh gọi value đang hoạt động trên toàn bộ nhóm con.
subgroupInclusiveMul(value): Trả về phép nhân quét bao gồm của tất cả các lệnh gọi value đang hoạt động trên toàn bộ nhóm con.

Hỗ trợ thử nghiệm cho tính năng gián tiếp vẽ nhiều lần

Tính năng GPU gián tiếp có nhiều lượt vẽ cho phép bạn phát hành nhiều lệnh gọi vẽ bằng một lệnh GPU duy nhất. Điều này đặc biệt hữu ích trong những trường hợp cần kết xuất một số lượng lớn đối tượng, chẳng hạn như hệ thống hạt, tạo thực thể và các cảnh lớn. Các phương thức drawIndirect() và drawIndexedIndirect() GPURenderPassEncoder chỉ có thể phát hành một lệnh gọi vẽ tại một thời điểm từ một vùng nhất định của vùng đệm GPU.

Cho đến khi tính năng thử nghiệm này được chuẩn hoá, hãy bật cờ "Hỗ trợ WebGPU không an toàn" tại chrome://flags/#enable-unsafe-webgpu để cung cấp tính năng này trong Chrome.

Với tính năng GPU "chromium-experimental-multi-draw-indirect" không theo chuẩn có trong GPUAdapter, hãy yêu cầu một GPUDevice có tính năng này. Sau đó, hãy tạo một GPUBuffer có mức sử dụng GPUBufferUsage.INDIRECT để lưu trữ các lệnh gọi vẽ. Sau này, bạn có thể sử dụng đối tượng này trong các phương thức multiDrawIndirect() và multiDrawIndexedIndirect() GPURenderPassEncoder mới để đưa ra lệnh gọi vẽ bên trong một lượt kết xuất. Hãy xem đoạn mã sau và vấn đề 356461286.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

Lựa chọn biên dịch mô-đun chương trình đổ bóng strict math

Một tuỳ chọn cho nhà phát triển strictMath boolean đã được thêm vào GPUShaderModuleDescriptor để cho phép bạn bật hoặc tắt chế độ toán học nghiêm ngặt trong quá trình biên dịch mô-đun chương trình đổ bóng. Tính năng này có trong cờ "WebGPU Developer Features" (Các tính năng dành cho nhà phát triển WebGPU) tại chrome://flags/#enable-webgpu-developer-features, tức là tính năng này chỉ dành cho mục đích sử dụng trong quá trình phát triển. Hãy xem vấn đề 42241455.

Lựa chọn này hiện được hỗ trợ trên Metal và Direct3D. Khi tắt chế độ toán học nghiêm ngặt, trình biên dịch có thể tối ưu hoá chương trình đổ bóng của bạn bằng cách:

Bỏ qua khả năng có các giá trị NaN và Infinity.
Coi -0 là +0.
Thay thế phép chia bằng phép nhân nhanh hơn theo số nghịch đảo.
Sắp xếp lại các phép toán dựa trên tính chất kết hợp và phân phối.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

Xoá GPUAdapter requestAdapterInfo()

Phương thức không đồng bộ GPUAdapter requestAdapterInfo() là phương thức dư thừa vì bạn đã có thể nhận GPUAdapterInfo một cách đồng bộ bằng cách sử dụng thuộc tính GPUAdapter info. Do đó, phương thức GPUAdapter requestAdapterInfo() không chuẩn hiện đã bị xoá. Xem ý định xoá.

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

Tệp thực thi tint_benchmark đo lường chi phí dịch chương trình đổ bóng từ WGSL sang từng ngôn ngữ phụ trợ. Hãy xem tài liệu mới để tìm hiểu thêm về tính năng này.

Đây chỉ là một số điểm nổi bật chính. Xem danh sách đầy đủ các cam kết.