Yang Baru di WebGPU (Chrome 129)

François Beaufort
François Beaufort

Dukungan HDR dengan mode pemetaan warna kanvas

Developer web memiliki opsi terbatas untuk menayangkan konten HDR, yang terutama mengandalkan elemen <img> dan <video>. Namun, elemen <canvas> tetap dibatasi untuk SDR. Membuat konten HDR dinamis dalam kanvas memerlukan encoding kontennya sebagai gambar HDR sebelum menampilkannya (untuk contoh, lihat demo ini).

Parameter GPUCanvasToneMappingMode baru dalam konfigurasi kanvas WebGPU kini memungkinkan WebGPU menggambar warna yang lebih cerah daripada putih (#FFFFFF). Hal ini dilakukan melalui mode berikut:

  • "standard": Perilaku default membatasi konten ke rentang SDR layar. Mode ini dicapai dengan meng-clamping semua nilai warna dalam ruang warna layar ke interval [0, 1].

  • "extended": Membuka rentang HDR penuh layar. Mode ini cocok dengan "standard" dalam rentang [0, 1] layar. Penjepitan atau proyeksi dilakukan pada rentang dinamis yang diperluas dari layar, tetapi tidak pada [0, 1].

Cuplikan kode berikut menunjukkan cara mengonfigurasi kanvas untuk rentang dinamis tinggi.

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

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

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Jelajahi HDR dengan WebGPU dengan melihat sampel Partikel (HDR) dan contoh HDR WebGPU, serta lihat entri chromestatus.

Laptop dengan layar HDR yang menampilkan gambar cerah.
Contoh Partikel (HDR) yang ditampilkan di layar HDR.

Dukungan subgrup yang diperluas

Setelah pengumuman eksperimen subgrup, fungsi bawaan subgrup kini tersedia untuk digunakan dalam shader komputasi dan shader fragmen. Sekarang tidak lagi terbatas hanya pada shader komputasi. Lihat masalah 354738715.

Perhatikan bahwa nilai bawaan subgroup_size saat ini bermasalah di shader fragmen. Hindari untuk saat ini.

Selain itu, fungsi bawaan subgrup berikut telah ditambahkan:

  • subgroupAdd(value): Menampilkan penjumlahan semua pemanggilan value yang aktif di seluruh subgrup.
  • subgroupExclusiveAdd(value): Menampilkan penjumlahan pemindaian eksklusif dari semua pemanggilan value yang aktif di seluruh subgrup.
  • subgroupMul(value): Menampilkan perkalian semua pemanggilan value yang aktif di seluruh subgrup.
  • subgroupExclusiveMul(value): Menampilkan perkalian pemindaian eksklusif semua pemanggilan value yang aktif di seluruh subgrup.

  • subgroupAnd(value): Menampilkan AND biner dari semua pemanggilan value yang aktif di seluruh subgrup.
  • subgroupOr(value): Menampilkan OR biner dari semua pemanggilan value yang aktif di seluruh subgrup.
  • subgroupXor(value): Menampilkan XOR biner dari semua pemanggilan value aktif di seluruh subgrup.

  • subgroupMin(value): Menampilkan nilai minimal dari semua pemanggilan value yang aktif di seluruh subgrup.
  • subgroupMax(value): Menampilkan nilai maksimal dari semua pemanggilan value yang aktif di seluruh subgrup.

  • subgroupAll(value): Menampilkan benar (true) jika value benar (true) untuk semua pemanggilan aktif dalam subgrup.
  • subgroupAny(value): Menampilkan nilai benar (true) jika value bernilai benar (true) untuk setiap pemanggilan aktif dalam subgrup.

  • subgroupElect(): Menampilkan nilai benar jika pemanggilan ini memiliki subgroup_invocation_id terendah di antara pemanggilan aktif dalam subgrup.
  • subgroupBroadcastFirst(value): Menyiarkan value dari pemanggilan aktif dengan subgroup_invocation_id terendah dalam subgrup ke semua pemanggilan aktif lainnya.

  • subgroupShuffle(value, id): Menampilkan value dari pemanggilan aktif yang subgroup_invocation_id-nya cocok dengan id.
  • subgroupShuffleXor(value, mask): Menampilkan value dari pemanggilan aktif yang subgroup_invocation_id-nya cocok dengan subgroup_invocation_id ^ mask. mask harus seragam secara dinamis.
  • subgroupShuffleUp(value, delta): Menampilkan value dari pemanggilan aktif yang subgroup_invocation_id-nya cocok dengan subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): Menampilkan value dari pemanggilan aktif yang subgroup_invocation_id-nya cocok dengan subgroup_invocation_id + delta.

  • quadBroadcast(value, id): Menyiarkan value dari pemanggilan quad dengan ID yang sama dengan id. id harus berupa ekspresi konstanta.
  • quadSwapX(value): Menukar value antar-pemanggilan dalam quad di arah X.
  • quadSwapY(value): Menukar value antara pemanggilan dalam quad dalam arah Y.
  • quadSwapDiagonal(value): Menukar value antar-pemanggilan dalam quad secara diagonal.

Update Dawn

Struktur wgpu::PrimitiveState kini secara langsung menyertakan setelan kontrol klip kedalaman, sehingga tidak memerlukan struktur wgpu::PrimitiveDepthClipControl terpisah. Untuk mempelajari lebih lanjut, lihat cuplikan kode berikut dan PR webgpu-headers.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;
// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

Hal ini hanya mencakup beberapa sorotan utama. Lihat daftar commit yang lengkap.

Yang Baru di WebGPU

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

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

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