Yang Baru di WebGPU (Chrome 129)

François Beaufort
François Beaufort
GitHub

Dukungan HDR dengan mode pemetaan tone kanvas

Developer web memiliki opsi terbatas untuk mengirimkan 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 contohnya, lihat demo ini).

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

  • "standard": Perilaku default membatasi konten ke rentang SDR layar. Mode ini dilakukan dengan membatasi 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 ke rentang dinamis layar yang diperluas, tetapi tidak ke [0, 1].

Cuplikan kode berikut menunjukkan cara mengonfigurasi kanvas untuk rentang dinamika 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 contoh Partikel (HDR) dan contoh HDR WebGPU, serta lihat entri chromestatus.

Laptop dengan layar HDR yang menampilkan gambar yang cerah.
Contoh Particles (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. Pipeline ini tidak lagi terbatas pada shader komputasi saja. 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 jumlah semua value pemanggilan aktif di seluruh subgrup.
  • subgroupExclusiveAdd(value): Menampilkan jumlah total pemindaian eksklusif dari semua value pemanggilan aktif di seluruh subgrup.
  • subgroupMul(value): Menampilkan perkalian semua value pemanggilan aktif di seluruh subgrup.
  • subgroupExclusiveMul(value): Menampilkan perkalian pemindaian eksklusif dari semua value pemanggilan aktif di seluruh subgrup.

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

  • subgroupMin(value): Menampilkan nilai minimum dari semua value pemanggilan aktif di seluruh subgrup.
  • subgroupMax(value): Menampilkan nilai maksimum dari semua value pemanggilan aktif di seluruh subgrup.

  • subgroupAll(value): Menampilkan true jika value bernilai benar untuk semua pemanggilan aktif di subgrup.
  • subgroupAny(value): Menampilkan benar jika value benar 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 di 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 konstan.
  • quadSwapX(value): Menukar value di antara pemanggilan dalam kuadrat di arah X.
  • quadSwapY(value): Menukar value di antara pemanggilan dalam kuadrat dalam arah Y.
  • quadSwapDiagonal(value): Menukar value di antara pemanggilan dalam quad secara diagonal.

Update fajar

Struktur wgpu::PrimitiveState kini 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;

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