WebGPU'da Yenilikler (Chrome 129)

François Beaufort
François Beaufort
GitHub

Tuval ton eşleme modu ile HDR desteği

Web geliştiricileri, HDR içerik yayınlamak için temel olarak <img> ve <video> öğelerine dayalı sınırlı seçeneklere sahiptir. Ancak <canvas> öğesi SDR ile sınırlı kalır. Bir kanvasta dinamik HDR içeriği oluşturmak için içeriğin, görüntülenmeden önce HDR resmi olarak kodlanması gerekir (örnek için bu demo'ya bakın).

WebGPU tuval yapılandırmasındaki yeni GPUCanvasToneMappingMode parametresi artık WebGPU'nun beyazdan (#FFFFFF) daha parlak renkler çizmesine izin veriyor. Bunu aşağıdaki modlarla yapar:

  • "standard": Varsayılan davranış, içeriği ekranın SDR aralığıyla kısıtlar. Bu mod, ekranın renk alanındaki tüm renk değerleri [0, 1] aralığına sınırlanarak gerçekleştirilir.

  • "extended": Ekranın tüm HDR aralığının kilidini açar. Bu mod, ekranın [0, 1] aralığındaki "standard" ile eşleşir. Kilitleme veya projeksiyon, ekranın genişletilmiş dinamik aralığına uygulanır ancak [0, 1]'e uygulanmaz.

Aşağıdaki kod snippet'inde, kanvası yüksek dinamik aralık için nasıl yapılandıracağınız gösterilmektedir.

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" },
});

Parçacıklar (HDR) örneği ve WebGPU HDR örneğine göz atarak WebGPU ile HDR'yi keşfedin ve chromestatus girişi'ne bakın.

Canlı bir görüntü gösteren HDR ekrana sahip dizüstü bilgisayar.
HDR ekranda görüntülenen Parçacıklar (HDR) örneği.

Genişletilmiş alt grup desteği

Alt grup denemeleri duyurulduktan sonra, alt grup yerleşik işlevleri artık hem hesaplama gölgelendiricilerinde hem de parça gölgelendiricilerde kullanılabilir. Artık yalnızca hesaplama gölgelendiricileriyle sınırlı değiller. 354738715 numaralı soruna bakın.

subgroup_size yerleşik değerinin şu anda parçacık gölgelendiricilerde hatalı olduğunu unutmayın. Şimdilik kaçının.

Ayrıca, aşağıdaki alt grup yerleşik işlevleri eklendi:

  • subgroupAdd(value): Alt gruptaki tüm etkin çağrıların value toplamını döndürür.
  • subgroupExclusiveAdd(value): Alt gruptaki tüm etkin çağrıların value'larının özel tarama toplamını döndürür.
  • subgroupMul(value): Alt gruptaki tüm etkin value çağrılarının çarpımını döndürür.
  • subgroupExclusiveMul(value): Alt grup genelindeki tüm etkin value çağrılarının özel tarama çarpımını döndürür.

  • subgroupAnd(value): Alt gruptaki tüm etkin çağrıların value'lerinin ikili VE işlevini döndürür.
  • subgroupOr(value): Alt gruptaki tüm etkin çağrıların (value) ikilisini VEYA değerini döndürür.
  • subgroupXor(value): Alt gruptaki tüm etkin çağrıların value'larının ikili XOR'unu döndürür.

  • subgroupMin(value): Alt gruptaki tüm etkin çağrıların (value) minimum değerini döndürür.
  • subgroupMax(value): Alt gruptaki tüm etkin çağrıların (value) maksimum değerini döndürür.

  • subgroupAll(value): Alt gruptaki tüm etkin çağrılar için value doğruysa true değerini döndürür.
  • subgroupAny(value): Alt gruptaki etkin çağrılar için value doğruysa doğru değerini döndürür.

  • subgroupElect(): Bu çağrı, alt gruptaki etkin çağrılar arasında en düşük subgroup_invocation_id değerine sahipse doğru değerini döndürür.
  • subgroupBroadcastFirst(value): value öğesini, alt gruptaki en düşük subgroup_invocation_id değerine sahip etkin çağrıdan diğer tüm etkin çağrılara yayınlar.

  • subgroupShuffle(value, id): Etkin çağrıdan subgroup_invocation_id değeri id ile eşleşen value değerini döndürür.
  • subgroupShuffleXor(value, mask): Etkin çağrıdan subgroup_invocation_id değeri subgroup_invocation_id ^ mask ile eşleşen value değerini döndürür. mask dinamik olarak tekdüze olmalıdır.
  • subgroupShuffleUp(value, delta): subgroup_invocation_id değeri subgroup_invocation_id - delta ile eşleşen etkin çağrıdan value değerini döndürür.
  • subgroupShuffleDown(value, delta): Etkin çağrıdan subgroup_invocation_id değeri subgroup_invocation_id + delta ile eşleşen value değerini döndürür.

  • quadBroadcast(value, id): id kimlikli dörtlü çağrıdan value yayınlar. id bir sabit ifade olmalıdır.
  • quadSwapX(value): value değerini, dörtlü gruptaki çağrılar arasında X yönünde değiştirir.
  • quadSwapY(value): value değerini Y yönündeki dörtlü gruptaki çağrılar arasında değiştirir.
  • quadSwapDiagonal(value): value değerini, çapraz dörtgendeki çağrılar arasında değiştirir.

Şafak güncellemeleri

wgpu::PrimitiveState yapısı artık doğrudan derinlik klibi kontrol ayarını içerir ve ayrı bir wgpu::PrimitiveDepthClipControl yapısına yönelik ihtiyacı ortadan kaldırır. Daha fazla bilgi edinmek için aşağıdaki kod snippet'ine ve webgpu-headers PR'ye bakın.

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

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

Bu, önemli noktalardan yalnızca bazılarını kapsar. Taahhütlerin kapsamlı listesini inceleyin.

WebGPU'daki Yenilikler

WebGPU'daki Yenilikler serisinde ele alınan tüm konuların listesi.

Chrome 131

Chrome 130

Chrome 129 sürümü

Chrome 128

Chrome 127 sürümü

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115

Chrome 114

Chrome 113