Yang Baru di WebGPU (Chrome 129)

François Beaufort
François Beaufort
GitHub

Dukungan HDR dengan mode pemetaan warna 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 dalam konfigurasi kanvas WebGPU kini memungkinkan WebGPU untuk menggambar warna yang lebih terang daripada putih (#FFFFFF). Proses ini dilakukan melalui mode berikut:

  • "standard": Perilaku default membatasi konten ke rentang SDR layar. Mode ini dilakukan dengan menjepit semua nilai warna di 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" },
});

Pelajari HDR dengan WebGPU dengan memeriksa contoh Particles (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. Fungsi ini tidak lagi dibatasi hanya untuk menghitung shader. 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 penjumlahan pemindaian eksklusif dari semua panggilan aktif value 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 true (benar) jika value benar (true) untuk semua panggilan aktif di 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 konstan.
  • quadSwapX(value): Menukar value di antara pemanggilan di kuadrat ke arah X.
  • quadSwapY(value): Menukar value di antara pemanggilan dalam kuadrat dalam arah Y.
  • quadSwapDiagonal(value): Menukar value di antara pemanggilan di kuadrat secara diagonal.

Update fajar

Struct wgpu::PrimitiveState kini menyertakan setelan kontrol klip kedalaman secara langsung, sehingga tidak diperlukan lagi struct wgpu::PrimitiveDepthClipControl yang 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 hal yang telah dibahas dalam seri What's New in 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