Yang Baru di WebGPU (Chrome 131)

François Beaufort
François Beaufort
GitHub

Jarak klip di WGSL

Jarak klip memungkinkan Anda membatasi volume klip primitif dengan setengah ruang yang ditentukan pengguna dalam output tahap vertex. Menentukan bidang pemangkasan Anda sendiri akan memberikan kontrol yang lebih besar atas apa yang terlihat di tampilan WebGPU. Teknik ini sangat berguna untuk aplikasi seperti software CAD, yang memerlukan kontrol visualisasi yang akurat.

Jika fitur "clip-distances" tersedia di GPUAdapter, minta GPUDevice dengan fitur ini untuk mendapatkan dukungan jarak klip di WGSL, dan aktifkan ekstensi ini secara eksplisit dalam kode WGSL Anda dengan enable clip_distances;. Setelah diaktifkan, Anda dapat menggunakan array bawaan clip_distances di shader vertex. Array ini menyimpan jarak ke bidang klip yang ditentukan pengguna:

  • Jarak klip 0 berarti vertex berada di bidang.
  • Jarak positif berarti vertex berada di dalam setengah ruang klip (sisi yang ingin Anda pertahankan).
  • Jarak negatif berarti vertex berada di luar setengah ruang klip (sisi yang ingin Anda hapus).

Lihat cuplikan berikut, entri chromestatus, dan masalah 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()

Setelah GPUCanvasContext configure() dipanggil dengan kamus konfigurasi, metode GPUCanvasContext getConfiguration() memungkinkan Anda memeriksa konfigurasi konteks kanvas. Ini mencakup anggota device, format, usage, viewFormats, colorSpace, toneMapping, dan alphaMode. Hal ini berguna untuk tugas seperti memeriksa apakah browser mendukung kanvas HDR, seperti yang ditunjukkan dalam contoh Partikel (HDR). Lihat cuplikan berikut, entri chromestatus, dan masalah 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.
}

Primitif titik dan garis tidak boleh memiliki bias kedalaman

Seperti yang diumumkan sebelumnya, spesifikasi WebGPU kini membuat error validasi untuk menetapkan depthBias, depthBiasSlopeScale, dan depthBiasClamp ke nilai non-nol saat topologi untuk pipeline render adalah jenis garis atau titik. Lihat masalah 352567424.

Fungsi bawaan pemindaian inklusif untuk subgrup

Sebagai bagian dari eksperimen subgrup, fungsi bawaan subgrup berikut telah ditambahkan di masalah 361330160:

  • subgroupInclusiveAdd(value): Menampilkan jumlah total pemindaian inklusif dari semua value pemanggilan aktif di seluruh subgrup.
  • subgroupInclusiveMul(value): Menampilkan perkalian pemindaian inklusif dari semua value pemanggilan aktif di seluruh subgrup.

Dukungan eksperimental untuk multi-gambar tidak langsung

Fitur GPU tidak langsung multi-gambar memungkinkan Anda mengeluarkan beberapa panggilan gambar dengan satu perintah GPU. Hal ini sangat berguna dalam situasi saat sejumlah besar objek perlu dirender, seperti sistem partikel, pembuatan instance, dan tampilan besar. Metode GPURenderPassEncoder drawIndirect() dan drawIndexedIndirect() hanya dapat mengeluarkan satu panggilan gambar dalam satu waktu dari wilayah buffer GPU tertentu.

Hingga fitur eksperimental ini diseragamkan, aktifkan tanda "Dukungan WebGPU Tidak Aman" di chrome://flags/#enable-unsafe-webgpu agar tersedia di Chrome.

Dengan fitur GPU non-standar "chromium-experimental-multi-draw-indirect" yang tersedia di GPUAdapter, minta GPUDevice dengan fitur ini. Kemudian, buat GPUBuffer dengan penggunaan GPUBufferUsage.INDIRECT untuk menyimpan panggilan gambar. Anda dapat menggunakannya nanti di metode GPURenderPassEncoder multiDrawIndirect() dan multiDrawIndexedIndirect() baru untuk mengeluarkan panggilan gambar di dalam render pass. Lihat cuplikan berikut dan masalah 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();

Opsi kompilasi modul shader matematika ketat

Opsi developer strictMath boolean telah ditambahkan ke GPUShaderModuleDescriptor untuk memungkinkan Anda mengaktifkan atau menonaktifkan matematika ketat selama kompilasi modul shader. Fitur ini tersedia di balik tanda "Fitur Developer WebGPU" di chrome://flags/#enable-webgpu-developer-features, yang berarti ini adalah fitur yang hanya ditujukan untuk digunakan selama pengembangan. Lihat masalah 42241455.

Opsi ini saat ini didukung di Metal dan Direct3D. Jika matematika ketat dinonaktifkan, compiler dapat mengoptimalkan shader Anda dengan:

  • Mengabaikan kemungkinan nilai NaN dan Infinity.
  • Memperlakukan -0 sebagai +0.
  • Mengganti pembagian dengan perkalian yang lebih cepat dengan kebalikannya.
  • Mengatur ulang operasi berdasarkan properti asosiatif dan distributif.
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 });

Menghapus GPUAdapter requestAdapterInfo()

Metode asinkron requestAdapterInfo() GPUAdapter tidak diperlukan karena Anda sudah bisa mendapatkan GPUAdapterInfo secara sinkron menggunakan atribut info GPUAdapter. Oleh karena itu, metode requestAdapterInfo() GPUAdapter non-standar kini dihapus. Lihat niat untuk menghapus.

Update fajar

File yang dapat dieksekusi tint_benchmark mengukur biaya penerjemahan shader dari WGSL ke setiap bahasa backend. Lihat dokumentasi baru untuk mempelajarinya lebih lanjut.

Bagian ini hanya membahas beberapa sorotan utama. Lihat daftar commit yang lengkap.

Yang Baru di WebGPU

Daftar semua yang telah dibahas dalam seri Yang Baru di WebGPU.

Chrome 131

Chrome 130

Chrome 129

Chrome 128

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