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ế khối lượng cắt của các đối tượng gốc 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 các mặt cắt của riêng bạn giúp bạn kiểm soát tốt hơn những nội dung hiển thị trong 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, trong đó việc kiểm soát chính xác hình ảnh là rất quan trọng.

Khi tính năng "clip-distances" có sẵn trong GPUAdapter, hãy yêu cầu GPUDevice có tính năng này để được hỗ trợ 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 chứa khoảng cách đến một mặt cắt do người dùng xác định:

Khoảng cách cắt là 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 của đoạn cắt (phía bạn muốn giữ lại).
Khoảng cách âm nghĩa là đỉnh nằm bên ngoài nửa không gian cắt (phía bạn muốn loại bỏ).

Hãy xem đoạn mã sau, mục 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. Tập hợp 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 Hạt (HDR). Hãy xem đoạn mã sau, mục 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.
}

Điểm và đường gốc không được có độ lệch chiều sâu

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

Các hàm tích hợp quét toàn diện cho nhóm con

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

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

Hỗ trợ thử nghiệm cho nhiều bản vẽ gián tiếp

Tính năng GPU gián tiếp vẽ nhiều lần cho phép bạn đưa ra 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 trường hợp cần kết xuất một lượng lớn đối tượng, chẳng hạn như hệ thống hạt, tạo bản sao và cảnh lớn. Các phương thức GPURenderPassEncoder drawIndirect() và drawIndexedIndirect() chỉ có thể đưa ra một lệnh gọi vẽ duy nhất 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ờ "Unsafe WebGPU Support" (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 không chuẩn "chromium-experimental-multi-draw-indirect" có trong GPUAdapter, hãy yêu cầu 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ẽ. Bạn có thể sử dụng nó sau trong các phương thức GPURenderPassEncoder multiDrawIndirect() và multiDrawIndexedIndirect() 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();

Tuỳ chọn biên dịch mô-đun chương trình đổ bóng toán học nghiêm ngặt

Thêm tuỳ chọn cho nhà phát triển strictMath boolean vào GPUShaderModuleDescriptor để cho phép bạn bật hoặc tắt 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 nằm sau cờ "Tính năng dành cho nhà phát triển WebGPU" tại chrome://flags/#enable-webgpu-developer-features, nghĩa là đây là một tính năng chỉ dành cho quá trình phát triển. Xem vấn đề 42241455.

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

Bỏ qua khả năng có các giá trị NaN và Infinity.
Xử lý -0 dưới dạng +0.
Thay thế phép chia bằng phép nhân nhanh hơn bằng phép nhân nghịch đảo.
Sắp xếp lại các phép toán dựa trên các thuộc tính liên kết 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ộ requestAdapterInfo() của GPUAdapter là thừa vì bạn đã có thể đồng bộ lấy GPUAdapterInfo bằng cách sử dụng thuộc tính info của GPUAdapter. Do đó, phương thức requestAdapterInfo() GPUAdapter không chuẩn hiện đã bị xoá. Xem ý định xoá.

Thông tin cập nhật về Dawn

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.

Phần 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 thay đổi.